Reply To: Suggestions Regarding Tool Website
by
jd7180669
·
about 1 year, 3 months ago
In reply to Suggestions Regarding Tool Website
Certainly, creating a sentence counter tool for your website can be a useful feature. Here’s a high-level overview of how you could implement this using HTML, CSS, and JavaScript:
HTML:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Sentence Counter</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<header>
<h1>Sentence Counter</h1>
</header>
<main>
<textarea id=”inputText” placeholder=”Enter your text here”></textarea>
<button id=”countButton”>Count Sentences</button>
<p id=”result”>Number of Sentences: 0</p>
</main>
<script src=”script.js”></script>
</body>
</html>
CSS (styles.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
}
main {
max-width: 600px;
margin: 0 auto;
padding: 2rem;
}
textarea {
width: 100%;
height: 150px;
padding: 1rem;
margin-bottom: 1rem;
}
button {
padding: 0.5rem 1rem;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #555;
}
p#result {
font-weight: bold;
}
document.addEventListener(“DOMContentLoaded”, function () {
const inputText = document.getElementById(“inputText”);
const countButton = document.getElementById(“countButton”);
const result = document.getElementById(“result”);
countButton.addEventListener(“click”, function () {
const text = inputText.value;
const sentences = text.split(/[.!?]+/).filter(sentence => sentence.trim() !== “”);
const sentenceCount = sentences.length;
result.textContent = Number of Sentences: ${sentenceCount};
});
});
This example provides a basic sentence counter tool. When the user enters text into the textarea and clicks the “Count Sentences” button, the JavaScript code splits the input text into sentences and displays the count on the webpage.
Please note that this is a simple implementation. Depending on your requirements, you might want to enhance error
