Hello, my dear PHP developers,
Do you ever try to create a word counter using php? Most of you may be failed in that project.

How to create a word counter project complete with an awesome user interface? Today you are going to learn how to make the tool ultimately.
When I was a beginner in this field of back-end development. I have tried to create this project and I had failed and failed.
Mainly I have tried to create a function for counting words and characters. That is too much difficult.
After a lot of toil, I have held research and found a solution.
Mainly there is a function available which helps us to display the word count and character count.
- Strlen = To find the number of characters in strings.
- str_word_count = To count the characters in a word.
Before going to the source code you must need to read the article fully. This helps you to understand more details about the project.
Make sure
- Ensure that your XAMPP( To run php on your device) server is running.
- PHP 6 or later is prescribed.
Folder and files
Create a folderš and name it whatever you like. I am giving "Word counter" as the name of the folder. Also, create index.php and style.css files in the folder.
index.php file contains HTML and php code and the style.css file contains the CSS code to make it stylish.
Features
- Awesome look using CSS.
- Simple to create
- No Javascript
- Not responsive
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>word counter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mainwrapper">
<h1>Word counter</h1>
<form action="#" method="post">
<textarea name="text"><?php echo $_POST['text']; ?></textarea>
<input type="submit" name="submit" value="submit">
</form>
<?php
if (isset($_POST['submit'])) {
$text = $_POST['text'];
$numberWords = str_word_count($text);
$numberCha = strlen($text);
echo "<div class='wordcount'>
Words: $numberWords <br>
Charactors: $numberCha
</div>";
}
?>
</div>
</body>
</html>
style.css
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
body{
background-image: linear-gradient(to left, red, rgb(217, 255, 0));
}
.mainwrapper{
margin: auto;
max-width: 1000px;
}
.mainwrapper h1{
color: rgb(255, 255, 255);
text-align: center;
font-size: 40px;
text-decoration: underline;
padding: 10px;
}
.mainwrapper textarea{
width: 100%;
height: 60vh;
padding: 30px;
font-size: 18px;
font-weight: 500;
color: #333;
}
.mainwrapper input{
color: aliceblue;
background-color: rgb(40, 40, 228);
padding: 7px;
font-size: 15px;
}
.wordcount{
background-color: white;
color: black;
padding: 20px;
margin:10px;
border-radius: 20px;
font-size: 20px;
font-weight: 600;
}
Conclusion
Hoping that this post is going to be helpful. If you are facing any issues with the source code, you can contact us through the comment section. We will help you to solve the issue as possible.
Also, don't forget to share this post with your friends.
Thank you for reading...
Post a Comment