diff --git a/WordCounter/Sumitwarrior7/index.css b/WordCounter/Sumitwarrior7/index.css new file mode 100644 index 000000000..337b6aae7 --- /dev/null +++ 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 new file mode 100644 index 000000000..f7534dc2d --- /dev/null +++ b/WordCounter/Sumitwarrior7/index.html @@ -0,0 +1,27 @@ + + + + + + + Word Counter + + +
+

Word Counter

+ +
+
Words: 0
+
Characters: 0
+
Paragraphs: 0
+ + + +
+
+ + + diff --git a/WordCounter/Sumitwarrior7/index.js b/WordCounter/Sumitwarrior7/index.js new file mode 100644 index 000000000..b39a74eed --- /dev/null +++ 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"), + '$&' + ); + + // 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);