alvin/ict-algemeen-opdrachten
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/ict-algemeen-opdrachten.git synced 2026-03-06 02:57:05 +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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Woordenteller</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css"> <!-- Link to the CSS file -->
</head>
<body>
<h1>Woordenteller</h1>
<textarea id="textInput" rows="10" cols="50"></textarea><br>
<button id="countButton">Tel Woorden</button>
<div id="result"></div>
<h1>Woordenteller</h1> <!-- Header -->
<textarea id="textInput" rows="10" cols="50"></textarea><br> <!-- Textarea for input -->
<button id="countButton">Tel Woorden</button> <!-- Button to count words -->
<div id="result"></div> <!-- Div to display results -->
<script src="woordenteller.js"></script>
<script src="woordenteller.js"></script> <!-- Link to the JavaScript file -->
</body>
</html>

7
JavaScript/woordenteller/style.css
View File

@@ -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;

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) {
// 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);