diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..707eb73 Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..4c7ff40 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..b363e66 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# JavaScript-Course-by-Clever-Programmer- +This is a full JavaScript course by Clever Programmer diff --git a/functions/sum/exercise/index.html b/functions/sum/exercise/index.html index 41e979a..80d1d9c 100644 --- a/functions/sum/exercise/index.html +++ b/functions/sum/exercise/index.html @@ -5,7 +5,7 @@ replit - + diff --git a/functions/sum/exercise/script.js b/functions/sum/exercise/script.js index 69d6b48..d9c1823 100644 --- a/functions/sum/exercise/script.js +++ b/functions/sum/exercise/script.js @@ -8,23 +8,41 @@ ES6 Syntax (Arrow function): const add = () => {} */ -function add(){ - //Add function here -} +// function add(a, b){ +// return a + b +// } -function sub(){ - //Subtract function here -} +const add = (a, b) => a + b; -function div(){ - //Divide function here -} +// function sub(a, b){ +// return a - b +// } -function mul(){ - //Multiply function here -} +const sub = (a, b) => a - b; + +// function div(a, b){ +// return a / b +// } + +const div = (a, b) => a / b; + +// function mul(a, b){ +// return a * b +// } + +const mul = (a, b) => a * b; console.log('hello from the SUM exercise') /* TODO: create a function that console logs the result of any of the above operations. -*/ \ No newline at end of file +*/ + +let addResult = add(10, 5); +let subResult = sub(20, 7); +let divResult = div(10, 5); +let mulResult = mul(10, 5); + +console.log(addResult); +console.log(subResult); +console.log(divResult); +console.log(mulResult); \ No newline at end of file diff --git a/functions/sum/solution/script.js b/functions/sum/solution/script.js index 6a567a7..9f9e955 100644 --- a/functions/sum/solution/script.js +++ b/functions/sum/solution/script.js @@ -1 +1 @@ -console.log("Sum solution")) \ No newline at end of file +console.log("Sum solution"); \ No newline at end of file diff --git a/index.html b/index.html index a0d6899..3376195 100644 --- a/index.html +++ b/index.html @@ -52,6 +52,7 @@

Project Solutions

+ \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..7b86ec8 --- /dev/null +++ b/main.js @@ -0,0 +1,38 @@ +const letterFrequency2 = (phrase) => { + // letterFrequency ('haha') 👉 {'h': 2, 'a': 2} + + // console.log(phrase) + + // make a 'frequency' object {} + let frequency = {} + + for (const letter of phrase) { + // check if letter exists in frequency + if (letter in frequency) { + frequency[letter] += 1 + } else { + frequency[letter] = 1 + } + // increment the value by +1 + // otherwise, set the value to 1 + } + + return frequency; +} + +// console.log(letterFrequency2('lhhh')); + +// incremental operators +// ++, --, +=, += + + +const wordFrequency2 = (phrase) => { + let frequency = {} + let words = phrase.split(''); + + + console.log(words); + return frequency; +} + +console.log(wordFrequency2('lol what lol')); \ No newline at end of file diff --git a/projects/.DS_Store b/projects/.DS_Store new file mode 100644 index 0000000..f659493 Binary files /dev/null and b/projects/.DS_Store differ diff --git a/projects/dom-maniplutation/dom-manipulitation.html b/projects/dom-maniplutation/dom-manipulitation.html new file mode 100644 index 0000000..326d1e6 --- /dev/null +++ b/projects/dom-maniplutation/dom-manipulitation.html @@ -0,0 +1,4 @@ +
+

Hello World

+
+ \ No newline at end of file diff --git a/projects/dom-maniplutation/script.js b/projects/dom-maniplutation/script.js new file mode 100644 index 0000000..710f620 --- /dev/null +++ b/projects/dom-maniplutation/script.js @@ -0,0 +1,11 @@ +console.log("hello"); + +let title = document.getElementById("title"); +console.log(title.innerText); +title.innerText = "Good Morning"; + +let message = "One law one way, he who never sleeps never dies!"; + +title.innerHTML = `

${message}

`; + +title.style.color = "red"; diff --git a/projects/gd-matrix/.DS_Store b/projects/gd-matrix/.DS_Store new file mode 100644 index 0000000..3dc34f7 Binary files /dev/null and b/projects/gd-matrix/.DS_Store differ diff --git a/projects/gd-matrix/01-dozen-set/index.html b/projects/gd-matrix/01-dozen-set/index.html new file mode 100644 index 0000000..bea030f --- /dev/null +++ b/projects/gd-matrix/01-dozen-set/index.html @@ -0,0 +1,60 @@ + + + + + Tracker + + + + +

Tracker

+
+ + + +
+

+
+ + + + + + + + + + + + + + + + +
1D2D3D
000
+ + + + + + + + + + + + + + + + + +
1C2C3C
000
+
+ + + + + + + \ No newline at end of file diff --git a/projects/gd-matrix/01-dozen-set/main.js b/projects/gd-matrix/01-dozen-set/main.js new file mode 100644 index 0000000..9cdc0ae --- /dev/null +++ b/projects/gd-matrix/01-dozen-set/main.js @@ -0,0 +1,62 @@ + +let addedNumbers = []; // array to store added numbers +let spins = 0; +let input = document.getElementById("number-input"); + +function addNumber() { + + // Number Input + let number = input.value; + if (!number) { + alert("Please enter a number between 1 and 36."); + return; + } + + addedNumbers.unshift(number); // add number to the beginning of the array + input.value = ""; + updateAddedNumbers(); + + let dozen1Count = document.getElementById("dozen1-count"); + let dozen2Count = document.getElementById("dozen2-count"); + let dozen3Count = document.getElementById("dozen3-count"); + + if (number <= 12 && number >= 1) { + dozen1Count.innerHTML++; + } else if (number <= 24 && number >= 12) { + dozen2Count.innerHTML++; + } else { + dozen3Count.innerHTML++; + } + spins++; + + if (spins === 3) { + spins = 0; + let table = document.getElementById("dozen-table"); + let row = table.insertRow(); + let dozen1 = row.insertCell(0); + let dozen2 = row.insertCell(1); + let dozen3 = row.insertCell(2); + dozen1.innerHTML = dozen1Count.innerHTML; + dozen2.innerHTML = dozen2Count.innerHTML; + dozen3.innerHTML = dozen3Count.innerHTML; + dozen1Count.innerHTML = 0; + dozen2Count.innerHTML = 0; + dozen3Count.innerHTML = 0; + + } + +} + +// Insert numbers by pressing 'Enter' +input.addEventListener("keydown", function (e) { + if (e.keyCode === 13) { + addNumber(e); + } +}); + + +// Last numbers +function updateAddedNumbers() { + let addedNumbersElem = document.getElementById("added-numbers"); + addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas +} \ No newline at end of file diff --git a/projects/gd-matrix/01-dozen-set/style.css b/projects/gd-matrix/01-dozen-set/style.css new file mode 100644 index 0000000..191a45c --- /dev/null +++ b/projects/gd-matrix/01-dozen-set/style.css @@ -0,0 +1,51 @@ +/* CSS styles go here */ +body { + font-family: sans-serif; +} + +label { + margin-bottom: 20px; + display: block; +} + +input { + font-size: 16pt; + padding: 7px 10px; + border-radius: 0; + border-bottom: 3px solid black; + background-color: rgb(244, 242, 242); + width: 60px; + outline: none; + margin: 0; +} + +button { + padding: 10px 60px; + background-color: rgb(81, 202, 47); + outline: none; + border: none; + margin: 0; + height: auto; + font-size: 16pt; +} + +table { + width: 10%; + border-collapse: collapse; +} + +th, +td { + border: 1px solid black; + padding: 8px; +} + +th { + text-align: left; + background-color: black; + color: white; +} + +#input-form { + margin-bottom: 20px; +} \ No newline at end of file diff --git a/projects/gd-matrix/02-dozen-set/index.html b/projects/gd-matrix/02-dozen-set/index.html new file mode 100644 index 0000000..bea030f --- /dev/null +++ b/projects/gd-matrix/02-dozen-set/index.html @@ -0,0 +1,60 @@ + + + + + Tracker + + + + +

Tracker

+
+ + + +
+

+
+ + + + + + + + + + + + + + + + +
1D2D3D
000
+ + + + + + + + + + + + + + + + + +
1C2C3C
000
+
+ + + + + + + \ No newline at end of file diff --git a/projects/gd-matrix/02-dozen-set/main.js b/projects/gd-matrix/02-dozen-set/main.js new file mode 100644 index 0000000..36b712f --- /dev/null +++ b/projects/gd-matrix/02-dozen-set/main.js @@ -0,0 +1,65 @@ +let addedNumbers = []; // array to store added numbers +let spins = 0; +let input = document.getElementById("number-input"); + +// Arrays to track dozens +let dozen1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; +let dozen2 = [13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]; +let dozen3 = [25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36]; + +function addNumber() { + + // Number Input + let number = input.value; + if (!number) { + alert("Please enter a number between 1 and 36."); + return; + } + + addedNumbers.unshift(number); // add number to the beginning of the array + input.value = ""; + updateAddedNumbers(); + + let dozen1Count = document.getElementById("dozen1-count"); + let dozen2Count = document.getElementById("dozen2-count"); + let dozen3Count = document.getElementById("dozen3-count"); + + // Check which dozen the number belongs to + if (dozen1.includes(parseInt(number))) { + dozen1Count.innerHTML++; + } else if (dozen2.includes(parseInt(number))) { + dozen2Count.innerHTML++; + } else { + dozen3Count.innerHTML++; + } + spins++; + + if (spins === 3) { + spins = 0; + let table = document.getElementById("dozen-table"); + let row = table.insertRow(); + let dozen1Cell = row.insertCell(0); + let dozen2Cell = row.insertCell(1); + let dozen3Cell = row.insertCell(2); + dozen1Cell.innerHTML = dozen1Count.innerHTML; + dozen2Cell.innerHTML = dozen2Count.innerHTML; + dozen3Cell.innerHTML = dozen3Count.innerHTML; + dozen1Count.innerHTML = 0; + dozen2Count.innerHTML = 0; + dozen3Count.innerHTML = 0; + } + +} + +// Insert numbers by pressing 'Enter' +input.addEventListener("keydown", function (e) { + if (e.keyCode === 13) { + addNumber(e); + } +}); + +// Last numbers +function updateAddedNumbers() { + let addedNumbersElem = document.getElementById("added-numbers"); + addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas +} diff --git a/projects/gd-matrix/02-dozen-set/style.css b/projects/gd-matrix/02-dozen-set/style.css new file mode 100644 index 0000000..191a45c --- /dev/null +++ b/projects/gd-matrix/02-dozen-set/style.css @@ -0,0 +1,51 @@ +/* CSS styles go here */ +body { + font-family: sans-serif; +} + +label { + margin-bottom: 20px; + display: block; +} + +input { + font-size: 16pt; + padding: 7px 10px; + border-radius: 0; + border-bottom: 3px solid black; + background-color: rgb(244, 242, 242); + width: 60px; + outline: none; + margin: 0; +} + +button { + padding: 10px 60px; + background-color: rgb(81, 202, 47); + outline: none; + border: none; + margin: 0; + height: auto; + font-size: 16pt; +} + +table { + width: 10%; + border-collapse: collapse; +} + +th, +td { + border: 1px solid black; + padding: 8px; +} + +th { + text-align: left; + background-color: black; + color: white; +} + +#input-form { + margin-bottom: 20px; +} \ No newline at end of file diff --git a/projects/gd-matrix/03-dozen-set/index.html b/projects/gd-matrix/03-dozen-set/index.html new file mode 100644 index 0000000..0a801fc --- /dev/null +++ b/projects/gd-matrix/03-dozen-set/index.html @@ -0,0 +1,60 @@ + + + + + Tracker + + + + +

Tracker

+
+ + + +
+

+
+ + + + + + + + + + + + + + + + +
1D2D3D
000
+ + + + + + + + + + + + + + + + + +
1C2C3C
000
+
+ + + + + + + \ No newline at end of file diff --git a/projects/gd-matrix/03-dozen-set/main.js b/projects/gd-matrix/03-dozen-set/main.js new file mode 100644 index 0000000..f1dfb17 --- /dev/null +++ b/projects/gd-matrix/03-dozen-set/main.js @@ -0,0 +1,88 @@ +let addedNumbers = []; // array to store added numbers +let spins = 0; +let input = document.getElementById("number-input"); + +// Arrays to track dozens +let dozen1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; +let dozen2 = [13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]; +let dozen3 = [25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36]; + + +function addNumber() { + // Number Input + let number = input.value; + if (!number) { + alert("Please enter a number between 1 and 36."); + return; + } + + // Check if the number is in one of the dozens + if (dozen1.includes(parseInt(number))) { + addedNumbers.unshift(number); // add number to the beginning of the array + } else if (dozen2.includes(parseInt(number))) { + addedNumbers.unshift(number); // add number to the beginning of the array + } else if (dozen3.includes(parseInt(number))) { + addedNumbers.unshift(number); // add number to the beginning of the array + } else { + alert("Please enter a valid number from one of the dozens."); + return; + } + + input.value = ""; + updateAddedNumbers(); + + let dozen1Count = document.getElementById("dozen1-count"); + let dozen2Count = document.getElementById("dozen2-count"); + let dozen3Count = document.getElementById("dozen3-count"); + + // Check which dozen the number belongs to + if (dozen1.includes(parseInt(number))) { + dozen1Count.innerHTML++; + if (dozen1Count.innerHTML == 3) { + document.getElementById("dozen-table").rows[0].cells[0].style.backgroundColor = "red"; + } + } else if (dozen2.includes(parseInt(number))) { + dozen2Count.innerHTML++; + if (dozen2Count.innerHTML == 3) { + document.getElementById("dozen-table").rows[0].cells[1].style.backgroundColor = "red"; + } + } else { + dozen3Count.innerHTML++; + if (dozen3Count.innerHTML == 3) { + document.getElementById("dozen-table").rows[0].cells[2].style.backgroundColor = "red"; + } + } + spins++; + + if (spins === 3) { + spins = 0; + let table = document.getElementById("dozen-table"); + let row = table.insertRow(); + let dozen1Cell = row.insertCell(0); + let dozen2Cell = row.insertCell(1); + let dozen3Cell = row.insertCell(2); + dozen1Cell.innerHTML = dozen1Count.innerHTML; + dozen2Cell.innerHTML = dozen2Count.innerHTML; + dozen3Cell.innerHTML = dozen3Count.innerHTML; + dozen1Count.innerHTML = 0; + dozen2Count.innerHTML = 0; + dozen3Count.innerHTML = 0; + // reset background color + document.getElementById("dozen-table").rows[0].cells[0].style.backgroundColor = ""; + document.getElementById("dozen-table").rows[0].cells[1].style.backgroundColor = ""; + document.getElementById("dozen-table").rows[0].cells[2].style.backgroundColor = ""; + } +} + +// Insert numbers by pressing 'Enter' +input.addEventListener("keydown", function (e) { + if (e.keyCode === 13) { + addNumber(e); + } +}); + +// Last numbers +function updateAddedNumbers() { + let addedNumbersElem = document.getElementById("added-numbers"); + addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas +} diff --git a/projects/gd-matrix/03-dozen-set/style.css b/projects/gd-matrix/03-dozen-set/style.css new file mode 100644 index 0000000..bd90c5e --- /dev/null +++ b/projects/gd-matrix/03-dozen-set/style.css @@ -0,0 +1,55 @@ +/* CSS styles go here */ +body { + font-family: sans-serif; +} + +label { + margin-bottom: 20px; + display: block; +} + +input { + font-size: 16pt; + padding: 7px 10px; + border-radius: 0; + border-bottom: 3px solid black; + background-color: rgb(244, 242, 242); + width: 60px; + outline: none; + margin: 0; +} + +button { + padding: 10px 60px; + background-color: rgb(81, 202, 47); + outline: none; + border: none; + margin: 0; + height: auto; + font-size: 16pt; +} + +table { + width: 10%; + border-collapse: collapse; +} + +th, +td { + border: 1px solid black; + padding: 8px; +} + +.red-background { + background-color: red; +} + +th { + text-align: left; + background-color: black; + color: white; +} + +#input-form { + margin-bottom: 20px; +} \ No newline at end of file diff --git a/projects/gd-matrix/index.html b/projects/gd-matrix/index.html new file mode 100644 index 0000000..0e8500f --- /dev/null +++ b/projects/gd-matrix/index.html @@ -0,0 +1,66 @@ + + + + + Tracker + + + + +

Tracker

+
+ + + +
+

+
+ +
+
+ + +
+
+
+
+
Dozen 1 (1-12)
+
0
+
+
+
Dozen 2 (13-24)
+
0
+
+
+
Dozen 3 (25-36)
+
0
+
+
+
+
+ + + + + + + + + + + + + + + + + +
1C2C3C
000
+
+ + + + + + + \ No newline at end of file diff --git a/projects/gd-matrix/main.js b/projects/gd-matrix/main.js new file mode 100644 index 0000000..f1dfb17 --- /dev/null +++ b/projects/gd-matrix/main.js @@ -0,0 +1,88 @@ +let addedNumbers = []; // array to store added numbers +let spins = 0; +let input = document.getElementById("number-input"); + +// Arrays to track dozens +let dozen1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; +let dozen2 = [13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]; +let dozen3 = [25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36]; + + +function addNumber() { + // Number Input + let number = input.value; + if (!number) { + alert("Please enter a number between 1 and 36."); + return; + } + + // Check if the number is in one of the dozens + if (dozen1.includes(parseInt(number))) { + addedNumbers.unshift(number); // add number to the beginning of the array + } else if (dozen2.includes(parseInt(number))) { + addedNumbers.unshift(number); // add number to the beginning of the array + } else if (dozen3.includes(parseInt(number))) { + addedNumbers.unshift(number); // add number to the beginning of the array + } else { + alert("Please enter a valid number from one of the dozens."); + return; + } + + input.value = ""; + updateAddedNumbers(); + + let dozen1Count = document.getElementById("dozen1-count"); + let dozen2Count = document.getElementById("dozen2-count"); + let dozen3Count = document.getElementById("dozen3-count"); + + // Check which dozen the number belongs to + if (dozen1.includes(parseInt(number))) { + dozen1Count.innerHTML++; + if (dozen1Count.innerHTML == 3) { + document.getElementById("dozen-table").rows[0].cells[0].style.backgroundColor = "red"; + } + } else if (dozen2.includes(parseInt(number))) { + dozen2Count.innerHTML++; + if (dozen2Count.innerHTML == 3) { + document.getElementById("dozen-table").rows[0].cells[1].style.backgroundColor = "red"; + } + } else { + dozen3Count.innerHTML++; + if (dozen3Count.innerHTML == 3) { + document.getElementById("dozen-table").rows[0].cells[2].style.backgroundColor = "red"; + } + } + spins++; + + if (spins === 3) { + spins = 0; + let table = document.getElementById("dozen-table"); + let row = table.insertRow(); + let dozen1Cell = row.insertCell(0); + let dozen2Cell = row.insertCell(1); + let dozen3Cell = row.insertCell(2); + dozen1Cell.innerHTML = dozen1Count.innerHTML; + dozen2Cell.innerHTML = dozen2Count.innerHTML; + dozen3Cell.innerHTML = dozen3Count.innerHTML; + dozen1Count.innerHTML = 0; + dozen2Count.innerHTML = 0; + dozen3Count.innerHTML = 0; + // reset background color + document.getElementById("dozen-table").rows[0].cells[0].style.backgroundColor = ""; + document.getElementById("dozen-table").rows[0].cells[1].style.backgroundColor = ""; + document.getElementById("dozen-table").rows[0].cells[2].style.backgroundColor = ""; + } +} + +// Insert numbers by pressing 'Enter' +input.addEventListener("keydown", function (e) { + if (e.keyCode === 13) { + addNumber(e); + } +}); + +// Last numbers +function updateAddedNumbers() { + let addedNumbersElem = document.getElementById("added-numbers"); + addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas +} diff --git a/projects/gd-matrix/resources/index-1.html b/projects/gd-matrix/resources/index-1.html new file mode 100644 index 0000000..bad8884 --- /dev/null +++ b/projects/gd-matrix/resources/index-1.html @@ -0,0 +1,90 @@ + + + + Roulette Table + + + + + + + + + + + + + + + + + + +
+
+
+
+ + + diff --git a/projects/gd-matrix/resources/index-2.html b/projects/gd-matrix/resources/index-2.html new file mode 100644 index 0000000..267475d --- /dev/null +++ b/projects/gd-matrix/resources/index-2.html @@ -0,0 +1,84 @@ + + + + + Roulette Table + + + + + + + + + + + + + + +
Spin NumberDozen 1Dozen 2Dozen 3
+
+
+ +
+ + + diff --git a/projects/gd-matrix/resources/index-3.html b/projects/gd-matrix/resources/index-3.html new file mode 100644 index 0000000..451c1b1 --- /dev/null +++ b/projects/gd-matrix/resources/index-3.html @@ -0,0 +1,106 @@ + + + + Roulette Table + + + + + + + + + + + + + + +
+ + + + + + + + + +
Dozen 1Dozen 2Dozen 3
+ + + + \ No newline at end of file diff --git a/projects/gd-matrix/resources/index-4.html b/projects/gd-matrix/resources/index-4.html new file mode 100644 index 0000000..c6db3d1 --- /dev/null +++ b/projects/gd-matrix/resources/index-4.html @@ -0,0 +1,100 @@ + + + + Roulette Table + + + + + + + + + + + + + + +
+ + +
+ + + diff --git a/projects/gd-matrix/resources/index-5-1.html b/projects/gd-matrix/resources/index-5-1.html new file mode 100644 index 0000000..c302fed --- /dev/null +++ b/projects/gd-matrix/resources/index-5-1.html @@ -0,0 +1,84 @@ + + + + Number Tracker + + + +

Number Tracker

+
+ + + +
+

+ + + + + + + + + + + + + + + + +
1st Dozen2nd Dozen3rd Dozen
000
+ + + + diff --git a/projects/gd-matrix/resources/index-5-2-1.html b/projects/gd-matrix/resources/index-5-2-1.html new file mode 100644 index 0000000..ac9cd8e --- /dev/null +++ b/projects/gd-matrix/resources/index-5-2-1.html @@ -0,0 +1,89 @@ + + + + Number Tracker + + + +

Number Tracker

+
+ + + +
+ + + + + + + + + + + +
1st Dozen2nd Dozen3rd Dozen
+

+ + + diff --git a/projects/gd-matrix/resources/index-5-2.html b/projects/gd-matrix/resources/index-5-2.html new file mode 100644 index 0000000..ac9cd8e --- /dev/null +++ b/projects/gd-matrix/resources/index-5-2.html @@ -0,0 +1,89 @@ + + + + Number Tracker + + + +

Number Tracker

+
+ + + +
+ + + + + + + + + + + +
1st Dozen2nd Dozen3rd Dozen
+

+ + + diff --git a/projects/gd-matrix/resources/index-5-3.html b/projects/gd-matrix/resources/index-5-3.html new file mode 100644 index 0000000..5d1a75a --- /dev/null +++ b/projects/gd-matrix/resources/index-5-3.html @@ -0,0 +1,100 @@ + + + + + Tracker + + + + +

Number Tracker

+
+ + + +
+ + + + + + + + + + + + + + + +
1st Dozen2nd Dozen3rd Dozen
000
+

+ + + + + \ No newline at end of file diff --git a/projects/gd-matrix/resources/index-5.html b/projects/gd-matrix/resources/index-5.html new file mode 100644 index 0000000..d8859d2 --- /dev/null +++ b/projects/gd-matrix/resources/index-5.html @@ -0,0 +1,89 @@ + + + + Number Tracker + + + +

Number Tracker

+
+ + + +
+ + + + + + + + + + + +
1st Dozen2nd Dozen3rd Dozen
+

+ + + + diff --git a/projects/gd-matrix/resources/main.backup.js b/projects/gd-matrix/resources/main.backup.js new file mode 100644 index 0000000..1a242a0 --- /dev/null +++ b/projects/gd-matrix/resources/main.backup.js @@ -0,0 +1,80 @@ +let addedNumbers = []; // array to store added numbers +let spins = 0; +let input = document.getElementById("number-input"); + +// Define the dozens +const dozen1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; +const dozen2 = [13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]; +const dozen3 = [25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36]; + +// Define a function to check which dozen a number belongs to +function getDozen(number) { + if (dozen1.includes(number)) { + return "Dozen 1"; + } else if (dozen2.includes(number)) { + return "Dozen 2"; + } else { + return "Dozen 3"; + } +} + +function addNumber() { + + // Number Input + let number = input.value; + if (!number) { + alert("Please enter a number between 1 and 36."); + return; + } + + addedNumbers.unshift(number); // add number to the beginning of the array + input.value = ""; + updateAddedNumbers(); + + let dozen1Count = document.getElementById("dozen1-count"); + let dozen2Count = document.getElementById("dozen2-count"); + let dozen3Count = document.getElementById("dozen3-count"); + + // Increment the count for the dozen the number belongs to + let dozen = getDozen(number); + if (dozen === "Dozen 1") { + dozen1Count.innerHTML++; + } else if (dozen === "Dozen 2") { + dozen2Count.innerHTML++; + } else { + dozen3Count.innerHTML++; + } + + spins++; + + if (spins === 3) { + spins = 0; + let table = document.getElementById("dozen-table"); + let row = table.insertRow(); + let dozen1 = row.insertCell(0); + let dozen2 = row.insertCell(1); + let dozen3 = row.insertCell(2); + dozen1.innerHTML = dozen1Count.innerHTML; + dozen2.innerHTML = dozen2Count.innerHTML; + dozen3.innerHTML = dozen3Count.innerHTML; + dozen1Count.innerHTML = 0; + dozen2Count.innerHTML = 0; + dozen3Count.innerHTML = 0; + + } + +} + +// Insert numbers by pressing 'Enter' +input.addEventListener("keydown", function (e) { + if (e.keyCode === 13) { + addNumber(e); + } +}); + + +// Last numbers +function updateAddedNumbers() { + let addedNumbersElem = document.getElementById("added-numbers"); + addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas +} diff --git a/projects/gd-matrix/style.css b/projects/gd-matrix/style.css new file mode 100644 index 0000000..40e14d2 --- /dev/null +++ b/projects/gd-matrix/style.css @@ -0,0 +1,132 @@ +/* CSS styles go here */ +body { + font-family: sans-serif; +} + +label { + margin-bottom: 20px; + display: block; +} + +input { + font-size: 16pt; + padding: 7px 10px; + border-radius: 0; + border-bottom: 3px solid black; + background-color: rgb(244, 242, 242); + width: 60px; + outline: none; + margin: 0; +} + +button { + padding: 10px 60px; + background-color: rgb(81, 202, 47); + outline: none; + border: none; + margin: 0; + height: auto; + font-size: 16pt; +} + +table { + width: 10%; + border-collapse: collapse; +} + +th, +td { + border: 1px solid black; + padding: 8px; +} + +.red-background { + background-color: red; +} + +th { + text-align: left; + background-color: black; + color: white; +} + +#input-form { + margin-bottom: 20px; +} + + +#container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; +} + +#numbers { + display: flex; + flex-direction: column; + margin-right: 20px; +} + +#numbers label { + margin-bottom: 5px; +} + +#added-numbers { + margin-top: 10px; +} + +#dozens { + display: flex; + flex-direction: column; + margin-right: 20px; +} + +#dozen1, +#dozen2, +#dozen3 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid black; + padding: 10px; + margin-bottom: 10px; +} + +#dozen1 > div, +#dozen2 > div, +#dozen3 > div { + font-weight: bold; + margin-bottom: 5px; +} + +#dozen1-count, +#dozen2-count, +#dozen3-count { + font-size: 24px; +} + +#history { + display: flex; + flex-direction: column; +} + +#history > div { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-bottom: 10px; +} + +#history .dozen-count { + border: 1px solid black; + padding: 10px; + margin-right: 10px; + font-size: 24px; +} + +#history .dozen-count:last-child { + margin-right: 0; +} diff --git a/yourPlayground.js b/yourPlayground.js index e69de29..535c11e 100644 --- a/yourPlayground.js +++ b/yourPlayground.js @@ -0,0 +1,39 @@ +// Objects + +const myIntro = (name, role, company) => { + const person = { + name: name, + role: role, + company: company, + assets: 130000, + liabilites: 50000, + netWorth: function () { + return this.assets - this.liabilites; + }, + }; + const intro = `Hi, my name is ${person.name} and I am ${person.role} at ${ + person.company + }. My net worth is $${person.netWorth()}`; + return intro; +}; +console.log(myIntro("Miraze", "Head of Design", "Ennova Research SRL")); + +const frutta = ["🍏", "🍐", "🍉", "🍓", "🍌", "🍇"]; + +// for (let i = 0; i < frutta.length; i++ ) { +// console.log(i, frutta[i]); +// } + +for (const frut of frutta) { + // console.log(frut); +} + +const numeri = [1, 2, 3, 4, 5, 6]; + +let numerix2 = []; + +for (const numero of numeri) { + numerix2.push(numero ** 2); +} + +// console.log(numerix2);