sentence-counter-calculator

Rakesh9100 · Jun 2, 2024 · 08c2915 · 08c2915
1 parent df82189
commit 08c2915
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 31 deletions.
diff --git a/Calculators/Sentence-Calculator/index.html b/Calculators/Sentence-Calculator/index.html
diff --git a/Calculators/Sentence-Counter-Calculator/README.md b/Calculators/Sentence-Counter-Calculator/README.md
@@ -0,0 +1,22 @@
+# Sentence Counter Calculator
+
+This is a simple web-based tool that counts the number of sentences in a given text. It's created using HTML, CSS, and JavaScript.
+
+## How to Use
+
+1. Open the `index.html` file in a web browser.
+2. Enter or paste your text into the provided text area.
+3. Click the "Check for Number of Sentences" button.
+4. The tool will display the total number of sentences in the text.
+
+## Files Included
+
+- `index.html`: The main HTML file containing the structure of the web page.
+- `style.css`: The CSS file for styling the web page.
+- `script.js`: The JavaScript file containing the logic for counting sentences.
+
+## Technologies Used
+
+- HTML: For the structure of the web page.
+- CSS: For styling the web page and enhancing its visual appearance.
+- JavaScript: For implementing the logic to count sentences.
diff --git a/Calculators/Sentence-Counter-Calculator/index.html b/Calculators/Sentence-Counter-Calculator/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="style.css">
+  <title>Sentence Counter Calculator</title>
+</head>
+<body>
+  <div  class="big-container"> 
+  <h1>Sentence Counter Calculator</h1>
+  <div class="container">
+    <textarea placeholder="Enter text" id="textAr" ></textarea>
+    <button type="button" id="checkBtn" onclick="countSentences()">Check for Number of Sentences</button>
+    <p id="result">This will calculate the number of sentences for you :)</p>
+  </div>
+
+</div>
+<script src="script.js"></script>    
+</body>
+</html>
diff --git a/Calculators/Sentence-Counter-Calculator/script.js b/Calculators/Sentence-Counter-Calculator/script.js
@@ -0,0 +1,7 @@
+function countSentences() {
+  var text = document.getElementById("textAr").value;
+  var sentences = text.split(/[.!?]+/).filter(function(sentence) {
+      return sentence.trim() !== '';
+  });
+  document.getElementById("result").textContent = "Number of sentences: " + sentences.length;
+}
diff --git a/Calculators/Sentence-Counter-Calculator/style.css b/Calculators/Sentence-Counter-Calculator/style.css
@@ -0,0 +1,66 @@
+*{
+  margin-top: 10x;
+  padding: 0;
+  color: #000000;
+}
+body{
+  background-color: #E5E5E5;
+}
+.big-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+
+
+}
+button {
+  display: block;
+  height: 40px;
+  width: 300px;
+  border: none;
+  border-radius: 20px;
+  margin-left: 110px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-weight: bold;
+  background-color: #14213D;
+  margin-top: 30px;
+  color:white;
+
+}
+
+button:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+}
+
+.container{
+  width: 500px;
+    height: 400px;
+    display: inline-block;
+    text-align: center;
+    background-color:#FCA311;
+    padding: 20px;
+    border: 1px solid #ccc;
+    /* border-radius: 5px; */
+    border-radius: 10%;
+    font-weight: bold;
+    font-size: 24px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+    /* line-height: 0px;  */
+}
+
+#textAr{
+  width: 500px;
+  height: 200px;
+  max-width: 100%;
+  border: none;
+  border-radius: 20px;
+  padding-top: 10px;
+  font-weight: bold;
+  font-size: 20px;
+
+}
+