alvin/ict-algemeen-opdrachten
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/ict-algemeen-opdrachten.git synced 2026-03-06 11:06:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add comments and styling enhancements to Woordenteller application

Browse Source
This commit is contained in:
vista-man
2025-01-27 20:32:34 +01:00
parent 078130fc43
commit 83cbbd1a4a
3 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
JavaScript/woordenteller/index.html
View File

@@ -4,14 +4,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Woordenteller</title> <title>Woordenteller</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css"> <!-- Link to the CSS file -->
</head> </head>
<body> <body>
<h1>Woordenteller</h1> <h1>Woordenteller</h1> <!-- Header -->
<textarea id="textInput" rows="10" cols="50"></textarea><br> <textarea id="textInput" rows="10" cols="50"></textarea><br> <!-- Textarea for input -->
<button id="countButton">Tel Woorden</button> <button id="countButton">Tel Woorden</button> <!-- Button to count words -->
<div id="result"></div> <div id="result"></div> <!-- Div to display results -->
<script src="woordenteller.js"></script> <script src="woordenteller.js"></script> <!-- Link to the JavaScript file -->
</body> </body>
</html> </html>

7
JavaScript/woordenteller/style.css
View File

@@ -1,12 +1,15 @@
/* Basic styling for the body */
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 20px; margin: 20px;
} }
/* Styling for the header */
h1 { h1 {
color: #333; color: #333;
} }
/* Styling for the textarea input */
textarea { textarea {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
@@ -15,6 +18,7 @@ textarea {
border-radius: 4px; border-radius: 4px;
} }
/* Styling for the button */
button { button {
padding: 10px 20px; padding: 10px 20px;
background-color: #007BFF; background-color: #007BFF;
@@ -24,14 +28,17 @@ button {
cursor: pointer; cursor: pointer;
} }
/* Styling for the button on hover */
button:hover { button:hover {
background-color: #0056b3; background-color: #0056b3;
} }
/* Styling for the result div */
#result { #result {
margin-top: 20px; margin-top: 20px;
} }
/* Styling for each result paragraph */
#result p { #result p {
background-color: #f8f9fa; background-color: #f8f9fa;
padding: 5px; padding: 5px;

8
JavaScript/woordenteller/woordenteller.js
View File

@@ -1,7 +1,10 @@
// Function to count the occurrences of each word in the given text
function countWordOccurrences(text) { function countWordOccurrences(text) {
// Convert text to lowercase and match words using regex
const words = text.toLowerCase().match(/\b\w+\b/g); const words = text.toLowerCase().match(/\b\w+\b/g);
const wordCount = {}; const wordCount = {};
// Count each word's occurrences
words.forEach(word => { words.forEach(word => {
wordCount[word] = (wordCount[word] || 0) + 1; wordCount[word] = (wordCount[word] || 0) + 1;
}); });
@@ -9,11 +12,13 @@ function countWordOccurrences(text) {
return wordCount; return wordCount;
} }
// Function to display the word count results
function displayWordCount(wordCount) { function displayWordCount(wordCount) {
const resultDiv = document.getElementById('result'); const resultDiv = document.getElementById('result');
resultDiv.innerHTML = ''; // Clear previous results resultDiv.innerHTML = ''; // Clear previous results
let totalWords = 0; let totalWords = 0;
// Iterate through the word count object and display each word and its count
for (const [word, count] of Object.entries(wordCount)) { for (const [word, count] of Object.entries(wordCount)) {
totalWords += count; totalWords += count;
const p = document.createElement('p'); const p = document.createElement('p');
@@ -21,12 +26,13 @@ function displayWordCount(wordCount) {
resultDiv.appendChild(p); resultDiv.appendChild(p);
} }
// Display the total number of words
const totalP = document.createElement('p'); const totalP = document.createElement('p');
totalP.textContent = `Totaal aantal woorden: ${totalWords}`; totalP.textContent = `Totaal aantal woorden: ${totalWords}`;
resultDiv.appendChild(totalP); resultDiv.appendChild(totalP);
} }
// Example usage: // Example usage: Add event listener to the button to count words when clicked
document.getElementById('countButton').addEventListener('click', () => { document.getElementById('countButton').addEventListener('click', () => {
const text = document.getElementById('textInput').value; const text = document.getElementById('textInput').value;
const wordCount = countWordOccurrences(text); const wordCount = countWordOccurrences(text);