diff --git a/Multiply/index.html b/Multiply/index.html new file mode 100644 index 0000000..a5603c1 --- /dev/null +++ b/Multiply/index.html @@ -0,0 +1,38 @@ + + + + + + Multiplication + + + +
+

Multiplication

+
+ +
+
+

Number: + + +

+
+ +
+

+ +

+
+
+ + + + + + + \ No newline at end of file diff --git a/Multiply/script.js b/Multiply/script.js new file mode 100644 index 0000000..862ec07 --- /dev/null +++ b/Multiply/script.js @@ -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(); +} diff --git a/Multiply/style.css b/Multiply/style.css new file mode 100644 index 0000000..674c6f4 --- /dev/null +++ b/Multiply/style.css @@ -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; +} \ No newline at end of file diff --git a/TodoList/index.js b/TodoList/index.js index d3ab656..4ba800a 100644 --- a/TodoList/index.js +++ b/TodoList/index.js @@ -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`; diff --git a/count-by-steps/index.html b/count-by-steps/index.html new file mode 100644 index 0000000..c4dc6de --- /dev/null +++ b/count-by-steps/index.html @@ -0,0 +1,35 @@ + + + + + + Count + + + +
+

Let's count

+
+ +
+
+

Start:

+ +

End:

+ +

Steps:

+ +

+ +
+ +

Preparing Count

+
+ + + + + + \ No newline at end of file diff --git a/count-by-steps/script.js b/count-by-steps/script.js new file mode 100644 index 0000000..362345c --- /dev/null +++ b/count-by-steps/script.js @@ -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:
'; + 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:
'; + while (i <= f) { + res.innerHTML += `\u{1F449} ${i}`; + i += p; + } + res.innerHTML += '\u{1F449} \u{1F3C1}'; + } else { + // Countdown + res.innerHTML = 'Counting:
'; + while (i >= f) { + res.innerHTML += `\u{1F449} ${i}`; + i -= p; + } + res.innerHTML += '\u{1F449} \u{1F3C1}'; + } +} diff --git a/count-by-steps/style.css b/count-by-steps/style.css new file mode 100644 index 0000000..7d5bfec --- /dev/null +++ b/count-by-steps/style.css @@ -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; +} \ No newline at end of file