Skip to content

New exercices (multiplly and count-by-steps) and TodoList, not allowed to leave the field blank in the input #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 9 commits into from
Closed

New exercices (multiplly and count-by-steps) and TodoList, not allowed to leave the field blank in the input #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e87a461
TodoList, not allowed to leave the field blank in the input
victorRbcx Aug 5, 2025
85441c2
TodoList, not allowed to leave the field blank in the input
victorRbcx Aug 5, 2025
7f19640
TodoList, not allowed to leave the field blank in the input
victorRbcx Aug 5, 2025
21c9a7c
New exercice
victorRbcx Aug 6, 2025
b08e57b
Create new exercice, count-by-steps
victorRbcx Aug 8, 2025
4e3e056
fix new exercice
victorRbcx Aug 8, 2025
a7fe304
change name for index
victorRbcx Aug 8, 2025
b3a51e0
new taskflow
victorRbcx Aug 21, 2025
3c05916
fix and improve multiply and count-by-steps
victorRbcx Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions Multiply/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplication</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1> Multiplication </h1>
</header>

<section>
<div>
<p>Number:
<input type="number" name="txtnum" id="txtnum">
<input type="button" value="Multiply" onclick="calcular()">
</p>
</div>

<div id="lista">
<p>
<select id="listaNumeros" size="11">
<option>Enter a number above</option>
</select>
</p>
</div>
</section>


<footer>
<p&copy> victorRbcx</p>
</footer>

<script src="script.js"></script>
</body>
</html>
33 changes: 33 additions & 0 deletions Multiply/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
function calcular() {
const txtn = document.getElementById('txtnum');
const lista = document.getElementById('listaNumeros');
const rawValue = txtn.value.trim();

lista.innerHTML = '';

if (rawValue === '' || Number.isNaN(Number(rawValue))) {

window.alert('Enter a number to Multiply!');

const option = document.createElement('option');
option.textContent = 'Enter a number above';
option.disabled = true;
lista.appendChild(option);

txtn.focus();
return;
}

const n = Number(rawValue);

for (let i = 0; i <= 10; i += 1) {
const option = document.createElement('option');
const calc = n * i;
option.value = `tab${i}`;
option.textContent = `${n} x ${i} = ${calc}`;
lista.appendChild(option);
}

txtn.value = '';
txtn.focus();
}
30 changes: 30 additions & 0 deletions Multiply/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
body {
background-color: rgb(115, 115, 201);
font: normal 15pt arial;
}

header {
color: white;
text-align: center;
}

section {
background-color: white;
border-radius: 10px;
padding: 15px;
width: 500px;
margin: auto;
text-align: center;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.493);
}

#lista{
text-align: left;
}

footer {
color: white;
text-align: center;
font-style: italic;
margin-top: 20px;
}
94 changes: 49 additions & 45 deletions TodoList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,52 +7,56 @@ let completedCount = 0;
let totalCount = 0;

addButton.addEventListener('click', function (e) {
e.preventDefault();
const paragraph1 = document.createElement('div');
const paragraph2 = document.createElement('div');
const cont = document.createElement('div');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
paragraph1.appendChild(checkbox);
const text = document.createTextNode(input.value);
paragraph1.appendChild(text);
const editButton = document.createElement('button');
editButton.textContent = '✒️';
paragraph2.appendChild(editButton);
const deleteButton = document.createElement('button');
deleteButton.textContent = '❎';
paragraph2.appendChild(deleteButton);
cont.appendChild(paragraph1);
cont.appendChild(paragraph2);
todoContainer.appendChild(cont);
input.value = '';
totalCount++;
updateCountDisplay();
checkbox.addEventListener('click', function () {
if (checkbox.checked) {
cont.style.textDecoration = 'line-through';
completedCount++;
} else {
cont.style.textDecoration = 'none';
completedCount--;
}
updateCountDisplay();
});
editButton.addEventListener('click', function () {
const editText = prompt('Edit task:', text.textContent);
if (editText !== null) {
text.textContent = editText;
}
});
deleteButton.addEventListener('click', function () {
todoContainer.removeChild(cont);
totalCount--;
if (checkbox.checked) {
completedCount--;
}
if (input.value.length == 0) {
window.alert("You cannot leave the field blank")
} else {

e.preventDefault();
const paragraph1 = document.createElement('div');
const paragraph2 = document.createElement('div');
const cont = document.createElement('div');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
paragraph1.appendChild(checkbox);
const text = document.createTextNode(input.value);
paragraph1.appendChild(text);
const editButton = document.createElement('button');
editButton.textContent = '✒️';
paragraph2.appendChild(editButton);
const deleteButton = document.createElement('button');
deleteButton.textContent = '❎';
paragraph2.appendChild(deleteButton);
cont.appendChild(paragraph1);
cont.appendChild(paragraph2);
todoContainer.appendChild(cont);
input.value = '';
totalCount++;
updateCountDisplay();
});
});
checkbox.addEventListener('click', function () {
if (checkbox.checked) {
cont.style.textDecoration = 'line-through';
completedCount++;
} else {
cont.style.textDecoration = 'none';
completedCount--;
}
updateCountDisplay();
});
editButton.addEventListener('click', function () {
const editText = prompt('Edit task:', text.textContent);
if (editText !== null) {
text.textContent = editText;
}
});
deleteButton.addEventListener('click', function () {
todoContainer.removeChild(cont);
totalCount--;
if (checkbox.checked) {
completedCount--;
}
updateCountDisplay();
});
}});

function updateCountDisplay() {
countDisplay.textContent = `${completedCount} of ${totalCount} tasks done`;
Expand Down
35 changes: 35 additions & 0 deletions count-by-steps/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Count</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Let's count</h1>
</header>

<section>
<div>
<p>Start:<input type="number" name="Inicio" id= "txtinicio"></p>

<p>End:<input type="number" name="fim" id="txtfim"></p>

<p>Steps:<input type="number" name="passo" id="txtpasso"></p>

<p><input type="button" value="Count" onclick="count()"></p>

</div>

<div><p id="conta">Preparing Count </p></div>
</section>

<footer>
<p&copy> victorRbcx</p>
</footer>

<script src="script.js"></script>
</body>
</html>
50 changes: 50 additions & 0 deletions count-by-steps/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
function count() {
const ini = document.getElementById('txtinicio');
const fim = document.getElementById('txtfim');
const passo = document.getElementById('txtpasso');
const res = document.querySelector('p#conta');

let i = Number(ini.value);
let f = Number(fim.value);
let p = Number(passo.value);

if (ini.value.length === 0 || fim.value.length === 0 || passo.value.length === 0) {
window.alert('Fill in the start, end and step fields correctly');
res.innerHTML = 'Impossible to count';
} else if (p <= 0) {
window.alert('Incorrect step, the program will assume the value 1');
res.innerHTML = 'Counting:<br>';
p = 1;

if (i < f) {
// Upward count with incorrect step
while (i <= f) {
res.innerHTML += `\u{1F449} ${i}`;
i += p;
}
} else {
// Countdown with incorrect step
while (i >= f) {
res.innerHTML += `\u{1F449} ${i}`;
i -= p;
}
}
res.innerHTML += '\u{1F449} \u{1F3C1}';
} else if (i < f) {
// Count up
res.innerHTML = 'Counting:<br>';
while (i <= f) {
res.innerHTML += `\u{1F449} ${i}`;
i += p;
}
res.innerHTML += '\u{1F449} \u{1F3C1}';
} else {
// Countdown
res.innerHTML = 'Counting:<br>';
while (i >= f) {
res.innerHTML += `\u{1F449} ${i}`;
i -= p;
}
res.innerHTML += '\u{1F449} \u{1F3C1}';
}
}
26 changes: 26 additions & 0 deletions count-by-steps/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
body {
background-color: rgb(115, 115, 201);
font: normal 15pt arial;
}

header {
color: white;
text-align: center;
}

section {
background-color: white;
border-radius: 10px;
padding: 15px;
width: 500px;
margin: auto;
text-align: center;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.493);
}

footer {
color: white;
text-align: center;
font-style: italic;
margin-top: 20px;
}