thinkswell · PBJI · Oct 8, 2023 · Oct 8, 2023
diff --git a/WordCounter/Sumitwarrior7/index.css b/WordCounter/Sumitwarrior7/index.css
@@ -0,0 +1,82 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f2f2f2;
+}
+
+.container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #fff;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  margin-top: 20px;
+}
+
+h1 {
+  text-align: center;
+  color: #333;
+}
+
+textarea {
+  width: 100%;
+  height: 150px;
+  margin-bottom: 10px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  resize: none;
+}
+
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#char-limit {
+  width: 80px;
+}
+
+button {
+  padding: 8px 16px;
+  background-color: #333;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+button:hover {
+  background-color: #555;
+}
+
+.highlight {
+  margin-top: 20px;
+}
+
+input[type="text"] {
+  width: 200px;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-right: 10px;
+}
+
+.highlight-button {
+  background-color: #f2a154;
+  color: #fff;
+}
+
+.highlight-button:hover {
+  background-color: #ff9933;
+}
+
+.highlighted {
+  background-color: yellow;
+  font-weight: bold;
+}
diff --git a/WordCounter/Sumitwarrior7/index.html b/WordCounter/Sumitwarrior7/index.html
@@ -0,0 +1,27 @@
+<!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="index.css" />
+    <title>Word Counter</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Word Counter</h1>
+      <textarea
+        id="text-input"
+        placeholder="Enter your text here..."
+      ></textarea>
+      <div class="controls">
+        <div id="word-count">Words: 0</div>
+        <div id="char-count">Characters: 0</div>
+        <div id="para-count">Paragraphs: 0</div>
+        <input type="number" id="char-limit" placeholder="Character Limit" />
+        <button id="count-button">Count</button>
+        <button id="clear-button">Clear</button>
+      </div>
+    </div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/WordCounter/Sumitwarrior7/index.js b/WordCounter/Sumitwarrior7/index.js
@@ -0,0 +1,99 @@
+// Get references to HTML elements
+const textInput = document.getElementById("text-input");
+const wordCount = document.getElementById("word-count");
+const charCount = document.getElementById("char-count");
+const paraCount = document.getElementById("para-count");
+const countButton = document.getElementById("count-button");
+const clearButton = document.getElementById("clear-button");
+const charLimitInput = document.getElementById("char-limit");
+const highlightButton = document.getElementById("highlight-button");
+const highlightWordInput = document.getElementById("highlight-word");
+
+// Add an event listener to the count button
+countButton.addEventListener("click", countWords);
+
+// Add an event listener to the clear button
+clearButton.addEventListener("click", clearText);
+
+// Add an event listener to the highlight button
+highlightButton.addEventListener("click", highlightWords);
+
+// Add an event listener to the character limit input
+charLimitInput.addEventListener("input", checkCharacterLimit);
+
+// Save the text input and counts to local storage
+function saveData() {
+  localStorage.setItem("text", textInput.value);
+  localStorage.setItem("words", wordCount.textContent);
+  localStorage.setItem("chars", charCount.textContent);
+  localStorage.setItem("paras", paraCount.textContent);
+}
+
+// Load the saved data from local storage
+function loadData() {
+  textInput.value = localStorage.getItem("text") || "";
+  wordCount.textContent = localStorage.getItem("words") || "Words: 0";
+  charCount.textContent = localStorage.getItem("chars") || "Characters: 0";
+  paraCount.textContent = localStorage.getItem("paras") || "Paragraphs: 0";
+}
+
+// Function to count words, characters, and paragraphs
+function countWords() {
+  const text = textInput.value;
+  const words = text.split(/\s+/).filter((word) => word !== "");
+  const characters = text.length;
+  const paragraphs = text
+    .split("\n")
+    .filter((para) => para.trim() !== "").length;
+
+  wordCount.textContent = `Words: ${words.length}`;
+  charCount.textContent = `Characters: ${characters}`;
+  paraCount.textContent = `Paragraphs: ${paragraphs}`;
+
+  saveData();
+}
+
+// Function to clear the textarea and counts
+function clearText() {
+  textInput.value = "";
+  wordCount.textContent = "Words: 0";
+  charCount.textContent = "Characters: 0";
+  paraCount.textContent = "Paragraphs: 0";
+
+  saveData();
+}
+
+// Function to highlight specific words in the text
+function highlightWords() {
+  const text = textInput.value;
+  const wordToHighlight = highlightWordInput.value;
+  const highlightedText = text.replace(
+    new RegExp(wordToHighlight, "g"),
+    '<span class="highlighted">$&</span>'
+  );
+
+  // Display the highlighted text in the textarea
+  textInput.innerHTML = highlightedText;
+
+  saveData();
+}
+
+// Function to check character limit
+function checkCharacterLimit() {
+  const charLimit = parseInt(charLimitInput.value);
+  const text = textInput.value;
+  const characters = text.length;
+
+  if (charLimit && characters > charLimit) {
+    charCount.style.color = "red";
+    charCount.textContent = `Characters: ${characters} (Exceeding limit)`;
+  } else {
+    charCount.style.color = "black";
+    charCount.textContent = `Characters: ${characters}`;
+  }
+
+  saveData();
+}
+
+// Load saved data when the page loads
+window.addEventListener("load", loadData);