From 83cbbd1a4a1220d6f516105d103d20d6b95e6c01 Mon Sep 17 00:00:00 2001 From: vista-man <524715@vistacollege.nl> Date: Mon, 27 Jan 2025 20:32:34 +0100 Subject: [PATCH] Add comments and styling enhancements to Woordenteller application --- JavaScript/woordenteller/index.html | 12 ++++++------ JavaScript/woordenteller/style.css | 7 +++++++ JavaScript/woordenteller/woordenteller.js | 8 +++++++- 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/JavaScript/woordenteller/index.html b/JavaScript/woordenteller/index.html index 1a626f7..42655b5 100644 --- a/JavaScript/woordenteller/index.html +++ b/JavaScript/woordenteller/index.html @@ -4,14 +4,14 @@ Woordenteller - + -

Woordenteller

-
- -
+

Woordenteller

+
+ +
- + diff --git a/JavaScript/woordenteller/style.css b/JavaScript/woordenteller/style.css index 759ceb5..13eb5e4 100644 --- a/JavaScript/woordenteller/style.css +++ b/JavaScript/woordenteller/style.css @@ -1,12 +1,15 @@ +/* Basic styling for the body */ body { font-family: Arial, sans-serif; margin: 20px; } +/* Styling for the header */ h1 { color: #333; } +/* Styling for the textarea input */ textarea { width: 100%; padding: 10px; @@ -15,6 +18,7 @@ textarea { border-radius: 4px; } +/* Styling for the button */ button { padding: 10px 20px; background-color: #007BFF; @@ -24,14 +28,17 @@ button { cursor: pointer; } +/* Styling for the button on hover */ button:hover { background-color: #0056b3; } +/* Styling for the result div */ #result { margin-top: 20px; } +/* Styling for each result paragraph */ #result p { background-color: #f8f9fa; padding: 5px; diff --git a/JavaScript/woordenteller/woordenteller.js b/JavaScript/woordenteller/woordenteller.js index b3a66fd..9e8270d 100644 --- a/JavaScript/woordenteller/woordenteller.js +++ b/JavaScript/woordenteller/woordenteller.js @@ -1,7 +1,10 @@ +// Function to count the occurrences of each word in the given text function countWordOccurrences(text) { + // Convert text to lowercase and match words using regex const words = text.toLowerCase().match(/\b\w+\b/g); const wordCount = {}; + // Count each word's occurrences words.forEach(word => { wordCount[word] = (wordCount[word] || 0) + 1; }); @@ -9,11 +12,13 @@ function countWordOccurrences(text) { return wordCount; } +// Function to display the word count results function displayWordCount(wordCount) { const resultDiv = document.getElementById('result'); resultDiv.innerHTML = ''; // Clear previous results let totalWords = 0; + // Iterate through the word count object and display each word and its count for (const [word, count] of Object.entries(wordCount)) { totalWords += count; const p = document.createElement('p'); @@ -21,12 +26,13 @@ function displayWordCount(wordCount) { resultDiv.appendChild(p); } + // Display the total number of words const totalP = document.createElement('p'); totalP.textContent = `Totaal aantal woorden: ${totalWords}`; resultDiv.appendChild(totalP); } -// Example usage: +// Example usage: Add event listener to the button to count words when clicked document.getElementById('countButton').addEventListener('click', () => { const text = document.getElementById('textInput').value; const wordCount = countWordOccurrences(text);