From 7bd5360c7e8acfdeec81ab49869da9dfe5df5dfd Mon Sep 17 00:00:00 2001
From: enmiraze <miraze.dewan@ennova-research.com>
Date: Thu, 12 Jan 2023 12:08:52 +0100
Subject: [PATCH 01/10] Create README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 README.md
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

From 53f22b680868658d1f9e7f23a93956946e5a8faa Mon Sep 17 00:00:00 2001
From: mirazedewan <miraze.dewan@ennova-research.com>
Date: Thu, 12 Jan 2023 18:07:17 +0100
Subject: [PATCH 02/10] update

---
 functions/sum/exercise/index.html |   2 +-
 functions/sum/exercise/script.js  |  44 +++++++++----
 functions/sum/solution/script.js  |   2 +-
 projects/gd-matrix/index-1.html   |  90 +++++++++++++++++++++++++
 projects/gd-matrix/index-2.html   |  84 +++++++++++++++++++++++
 projects/gd-matrix/index-3.html   | 106 ++++++++++++++++++++++++++++++
 projects/gd-matrix/index-4.html   | 100 ++++++++++++++++++++++++++++
 yourPlayground.js                 |  21 ++++++
 8 files changed, 434 insertions(+), 15 deletions(-)
 create mode 100644 projects/gd-matrix/index-1.html
 create mode 100644 projects/gd-matrix/index-2.html
 create mode 100644 projects/gd-matrix/index-3.html
 create mode 100644 projects/gd-matrix/index-4.html

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 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>replit</title>
-  <link href="style.css" rel="stylesheet" type="text/css" />
+  <!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
 </head>
 
 <body>
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/projects/gd-matrix/index-1.html b/projects/gd-matrix/index-1.html
new file mode 100644
index 0000000..bad8884
--- /dev/null
+++ b/projects/gd-matrix/index-1.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Roulette Table</title>
+    <style>
+      /* styles for the table */
+      table {
+        border-collapse: collapse;
+        margin: 0 auto;
+      }
+      td {
+        width: 40px;
+        height: 40px;
+        text-align: center;
+        border: 1px solid black;
+      }
+      /* styles for the numbers */
+      .number {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: white;
+        color: black;
+        font-size: 20px;
+        font-weight: bold;
+        text-align: center;
+        line-height: 40px;
+        border: none;
+      }
+      /* styles for the red numbers */
+      .red {
+        background-color: red;
+        color: white;
+      }
+      /* styles for the black numbers */
+      .black {
+        background-color: black;
+        color: white;
+      }
+      /* styles for the green number (0) */
+      .green {
+        background-color: green;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <table>
+      <tbody>
+        <tr>
+          <td><button class="number red" onClick="trackSpin(this)">1</button></td>
+          <td><button class="number black" onClick="trackSpin(this)">2</button></td>
+          <td><button class="number red" onClick="trackSpin(this)">3</button></td>
+          <!-- ... -->
+          <td><button class="number red" onClick="trackSpin(this)">34</button></td>
+          <td><button class="number black" onClick="trackSpin(this)">35</button></td>
+          <td><button class="number red" onClick="trackSpin(this)">36</button></td>
+        </tr>
+        <tr>
+          <td colspan="3"><button class="number green" onClick="trackSpin(this)">0</button></td>
+        </tr>
+      </tbody>
+    </table>
+    <div id="dozen-1"></div>
+    <div id="dozen-2"></div>
+    <div id="dozen-3"></div>
+    <script>
+      var dozen1 = 0;
+      var dozen2 = 0;
+      var dozen3 = 0;
+      document.getElementById("dozen-1").innerHTML = "Dozen 1: " + dozen1;
+      document.getElementById("dozen-2").innerHTML = "Dozen 2: " + dozen2;
+      document.getElementById("dozen-3").innerHTML = "Dozen 3: " + dozen3;
+      
+      function trackSpin(e) {
+        var spinNumber = Number(e.textContent);
+        if (spinNumber >= 1 && spinNumber <= 12) {
+          dozen1++;
+        } else if (spinNumber >= 13 && spinNumber <= 24) {
+          dozen2++;
+        } else if (spinNumber >= 25 && spinNumber <= 36) {
+          dozen3++;
+        }
+        document.getElementById("dozen-1").innerHTML = "Dozen 1: " + dozen1;
+        document.getElementById("dozen-2").innerHTML = "Dozen 2: " + dozen2;
+        document.getElementById("dozen-3").innerHTML = "Dozen 3: " + dozen3;
+      }
+    </script>
+  </body>
+</html>
diff --git a/projects/gd-matrix/index-2.html b/projects/gd-matrix/index-2.html
new file mode 100644
index 0000000..267475d
--- /dev/null
+++ b/projects/gd-matrix/index-2.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Roulette Table</title>
+  <style>
+    /* styles for the table */
+    table {
+      border-collapse: collapse;
+      margin: 0 auto;
+    }
+
+    th,
+    td {
+      border: 1px solid black;
+      text-align: center;
+      padding: 8px;
+    }
+  </style>
+</head>
+
+<body>
+  <table id="spin-table">
+    <thead>
+      <tr>
+        <th>Spin Number</th>
+        <th>Dozen 1</th>
+        <th>Dozen 2</th>
+        <th>Dozen 3</th>
+      </tr>
+    </thead>
+    <tbody id="spin-results"></tbody>
+  </table>
+  <div id="spin-number"></div>
+  <div>
+    <button onClick="trackSpin()">Track Spin</button>
+  </div>
+  <script>
+    var spinNumber = 0;
+    var dozen1 = 0;
+    var dozen2 = 0;
+    var dozen3 = 0;
+    document.getElementById("spin-number").innerHTML = "Spin Number: " + spinNumber;
+
+    function trackSpin() {
+      spinNumber++;
+      var spinResult = document.createElement("tr");
+      var spinNumberCol = document.createElement("td");
+      spinNumberCol.innerHTML = spinNumber;
+      spinResult.appendChild(spinNumberCol);
+      if (spinNumber > 0 && spinNumber <= 12) {
+        dozen1++;
+        var dozen1Col = document.createElement("td");
+        dozen1Col.innerHTML = "X";
+        spinResult.appendChild(dozen1Col);
+        var dozen2Col = document.createElement("td");
+        spinResult.appendChild(dozen2Col);
+        var dozen3Col = document.createElement("td");
+        spinResult.appendChild(dozen3Col);
+      } else if (spinNumber > 12 && spinNumber <= 24) {
+        dozen2++;
+        var dozen1Col = document.createElement("td");
+        spinResult.appendChild(dozen1Col);
+        var dozen2Col = document.createElement("td");
+        dozen2Col.innerHTML = "X";
+        spinResult.appendChild(dozen2Col);
+        var dozen3Col = document.createElement("td");
+        spinResult.appendChild(dozen3Col);
+      } else if (spinNumber > 24 && spinNumber <= 36) {
+        dozen3++;
+        var dozen1Col = document.createElement("td");
+        spinResult.appendChild(dozen1Col);
+        var dozen2Col = document.createElement("td");
+        spinResult.appendChild(dozen2Col);
+        var dozen3Col = document.createElement("td");
+        dozen3Col.innerHTML = "X";
+        spinResult.appendChild(dozen3Col);
+      }
+      document.getElementById("spin-results").appendChild(spinResult);
+      document.getElementById("spin-number").innerHTML = "Spin Number: " + spinNumber;
+      }
+    </script>
+  </body>
+</html>
diff --git a/projects/gd-matrix/index-3.html b/projects/gd-matrix/index-3.html
new file mode 100644
index 0000000..451c1b1
--- /dev/null
+++ b/projects/gd-matrix/index-3.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Roulette Table</title>
+    <style>
+      /* styles for the table */
+      table {
+        border-collapse: collapse;
+        margin: 0 auto;
+      }
+      td {
+        width: 40px;
+        height: 40px;
+        text-align: center;
+        border: 1px solid black;
+      }
+      /* styles for the numbers */
+      .number {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: white;
+        color: black;
+        font-size: 20px;
+        font-weight: bold;
+        text-align: center;
+        line-height: 40px;
+        border: none;
+      }
+      /* styles for the red numbers */
+      .red {
+        background-color: red;
+        color: white;
+      }
+      /* styles for the black numbers */
+      .black {
+        background-color: black;
+        color: white;
+      }
+      /* styles for the green number (0) */
+      .green {
+        background-color: green;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <table id="roulette-table">
+      <tbody>
+        <tr>
+          <td><button class="number green" onClick="trackSpin(0)">0</button></td>
+          <td><button class="
+            number black" onClick="trackSpin(1)">1</button></td>
+            <td><button class="number red" onClick="trackSpin(2)">2</button></td>
+            <td><button class="number black" onClick="trackSpin(3)">3</button></td>
+            <!-- more number buttons -->
+          </tr>
+          <!-- more rows of number buttons -->
+        </tbody>
+      </table>
+      <table id="spin-table">
+        <thead>
+          <tr>
+            <th>Dozen 1</th>
+            <th>Dozen 2</th>
+            <th>Dozen 3</th>
+          </tr>
+        </thead>
+        <tbody id="spin-results"></tbody>
+      </table>
+      <script>
+        var spinCount = 0;
+        var rowCount = 1;
+        var currentRow;
+        var dozen1 = 0;
+        var dozen2 = 0;
+        var dozen3 = 0;
+        
+        function trackSpin(spinNumber) {
+          if (spinNumber >= 1 && spinNumber <= 12) {
+            dozen1++;
+          } else if (spinNumber >= 13 && spinNumber <= 24) {
+            dozen2++;
+          } else if (spinNumber >= 25 && spinNumber <= 36) {
+            dozen3++;
+          }
+          spinCount++;
+          if (spinCount % 3 === 0) {
+            currentRow = document.createElement("tr");
+            document.getElementById("spin-results").appendChild(currentRow);
+            rowCount++;
+          }
+          var dozen1Col = document.createElement("td");
+          dozen1Col.innerHTML = dozen1;
+          currentRow.appendChild(dozen1Col);
+          var dozen2Col = document.createElement("td");
+          dozen2Col.innerHTML = dozen2;
+          currentRow.appendChild(dozen2Col);
+          var dozen3Col = document.createElement("td");
+          dozen3Col.innerHTML = dozen3;
+          currentRow.appendChild(dozen3Col);
+        }
+      </script>
+    </body>
+  </html>
+  
\ No newline at end of file
diff --git a/projects/gd-matrix/index-4.html b/projects/gd-matrix/index-4.html
new file mode 100644
index 0000000..c6db3d1
--- /dev/null
+++ b/projects/gd-matrix/index-4.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Roulette Table</title>
+    <style>
+      /* styles for the table */
+      table {
+        border-collapse: collapse;
+        margin: 0 auto;
+      }
+      td {
+        width: 40px;
+        height: 40px;
+        text-align: center;
+        border: 1px solid black;
+      }
+      /* styles for the numbers */
+      .number {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: white;
+        color: black;
+        font-size: 20px;
+        font-weight: bold;
+        text-align: center;
+        line-height: 40px;
+        border: none;
+      }
+      /* styles for the red numbers */
+      .red {
+        background-color: red;
+        color: white;
+      }
+      /* styles for the black numbers */
+      .black {
+        background-color: black;
+        color: white;
+      }
+      /* styles for the green number (0) */
+      .green {
+        background-color: green;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <table id="roulette-table">
+      <tbody>
+        <tr>
+          <td><button class="number green" onClick="trackSpin(0)">0</button></td>
+          <td><button class="number black" onClick="trackSpin(1)">1</button></td>
+          <td><button class="number red" onClick="trackSpin(2)">2</button></td>
+          <td><button class="number black" onClick="trackSpin(3)">3</button></td>
+          <!-- more number buttons -->
+        </tr>
+        <!-- more rows of number buttons -->
+      </tbody>
+    </table>
+    <table id="spin-table">
+      <tbody id="spin-results"></tbody>
+    </table>
+    <script>
+      var spinCount = 0;
+      var rowCount = 1;
+      var currentRow;
+      var dozen1 = 0;
+      var dozen2 = 0;
+      var dozen3 = 0;
+      
+      function trackSpin(spinNumber) {
+        if (spinCount % 3 === 0) {
+          currentRow = document.createElement("tr");
+          document.getElementById("spin-results").appendChild(currentRow);
+          rowCount++;
+        }
+        if (spinNumber >= 1 && spinNumber <= 12) {
+          dozen1++;
+        } else if (spinNumber >= 13 && spinNumber <= 24) {
+          dozen2++;
+        } else if (spinNumber >= 25 && spinNumber <= 36) {
+          dozen3++;
+        }
+        var spinCol = document.createElement("td");
+        spinCol.innerHTML = spinNumber;
+        currentRow.appendChild(spinCol);
+        var dozen1Col = document.createElement("td");
+        dozen1Col.innerHTML = dozen1;
+        currentRow.appendChild(dozen1Col);
+        var dozen2Col = document.createElement("td");
+        dozen2Col.innerHTML = dozen2;
+        currentRow.appendChild(dozen2Col);
+        var dozen3Col = document.createElement("td");
+        dozen3Col.innerHTML = dozen3;
+        currentRow.appendChild(dozen3Col);
+        spinCount++;
+      }
+    </script>
+  </body>
+</html>
diff --git a/yourPlayground.js b/yourPlayground.js
index e69de29..9d677e8 100644
--- a/yourPlayground.js
+++ b/yourPlayground.js
@@ -0,0 +1,21 @@
+function sum(a, b) {
+    return a + b;
+}
+
+function calculateFoodTotal (food, tip){
+    const tipPercentage = tip / 100;
+    const tipAmount = food * tipPercentage;
+    const total = sum(food, tipAmount);
+
+    return total;
+}
+
+// console.log(calculateFoodTotal(300, 20));
+
+// Arrays
+
+
+
+
+
+

From a4ae9e872e9fc825a0c75ebdeec8c13f2fff960e Mon Sep 17 00:00:00 2001
From: mirazedewan <miraze.dewan@ennova-research.com>
Date: Mon, 23 Jan 2023 11:00:03 +0100
Subject: [PATCH 03/10] udpate

---
 projects/gd-matrix/index-5-1.html   |  84 +++++++++++++++++++++++
 projects/gd-matrix/index-5-2-1.html |  89 +++++++++++++++++++++++++
 projects/gd-matrix/index-5-2.html   |  89 +++++++++++++++++++++++++
 projects/gd-matrix/index-5-3.html   | 100 ++++++++++++++++++++++++++++
 projects/gd-matrix/index-5.html     |  89 +++++++++++++++++++++++++
 5 files changed, 451 insertions(+)
 create mode 100644 projects/gd-matrix/index-5-1.html
 create mode 100644 projects/gd-matrix/index-5-2-1.html
 create mode 100644 projects/gd-matrix/index-5-2.html
 create mode 100644 projects/gd-matrix/index-5-3.html
 create mode 100644 projects/gd-matrix/index-5.html

diff --git a/projects/gd-matrix/index-5-1.html b/projects/gd-matrix/index-5-1.html
new file mode 100644
index 0000000..c302fed
--- /dev/null
+++ b/projects/gd-matrix/index-5-1.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Number Tracker</title>
+    <style>
+    /* CSS styles go here */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    th, td {
+      border: 1px solid black;
+      padding: 8px;
+    }
+    th {
+      text-align: left;
+    }
+    #input-form {
+      margin-bottom: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <h1>Number Tracker</h1>
+    <div id="input-form">
+      <label for="number-input">Enter a number between 1 and 36:</label>
+      <input type="number" id="number-input" min="1" max="36">
+      <button onclick="addNumber()">Add</button>
+    </div>
+    <p id="added-numbers"></p>
+    <table>
+      <thead>
+        <tr>
+          <th>1st Dozen</th>
+          <th>2nd Dozen</th>
+          <th>3rd Dozen</th>
+        </tr>
+      </thead>
+
+      <tbody id="number-table">
+        <tr>
+          <td id="dozen1-count">0</td>
+          <td id="dozen2-count">0</td>
+          <td id="dozen3-count">0</td>
+        </tr>
+      </tbody>
+    </table>
+    
+    <script>
+    var addedNumbers = []; // array to store added numbers
+    var dozen1Count = 0;
+    var dozen2Count = 0;
+  var dozen3Count = 0;
+    function addNumber() {
+      var input = document.getElementById("number-input");
+      var 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();
+      updateTrackerTable(number);
+    }
+    function updateAddedNumbers() {
+      var addedNumbersElem = document.getElementById("added-numbers");
+      addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas
+    }
+    function updateTrackerTable(number) {
+      if (number <= 12) {
+        dozen1Count++;
+      } else if (number <= 24) {
+        dozen2Count++;
+      } else {
+        dozen3Count++;
+      }
+      document.getElementById("dozen1-count").innerHTML = dozen1Count;
+      document.getElementById("dozen2-count").innerHTML = dozen2Count;
+      document.getElementById("dozen3-count").innerHTML = dozen3Count;
+    }
+    </script>
+  </body>
+</html>
diff --git a/projects/gd-matrix/index-5-2-1.html b/projects/gd-matrix/index-5-2-1.html
new file mode 100644
index 0000000..ac9cd8e
--- /dev/null
+++ b/projects/gd-matrix/index-5-2-1.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Number Tracker</title>
+    <style>
+    /* CSS styles go here */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    th, td {
+      border: 1px solid black;
+      padding: 8px;
+    }
+    th {
+      text-align: left;
+    }
+    #input-form {
+      margin-bottom: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <h1>Number Tracker</h1>
+    <div id="input-form">
+      <label for="number-input">Enter a number between 1 and 36:</label>
+      <input type="number" id="number-input" min="1" max="36">
+      <button onclick="addNumber()">Add</button>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th>1st Dozen</th>
+          <th>2nd Dozen</th>
+          <th>3rd Dozen</th>
+        </tr>
+      </thead>
+      <tbody id="number-table">
+        <!-- Numbers will be added to this table as rows -->
+      </tbody>
+    </table>
+    <p id="added-numbers"></p>
+    <script>
+    var addedNumbers = []; // array to store added numbers
+    function addNumber() {
+      var input = document.getElementById("number-input");
+      var 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();
+      if (addedNumbers.length % 3 == 0) {
+        var dozen1Count = 0;
+        var dozen2Count = 0;
+        var dozen3Count = 0;
+        for (var i = 0; i < 3; i++) {
+          var number = addedNumbers[i];
+          if (number <= 12) {
+            dozen1Count++;
+          } else if (number <= 24) {
+            dozen2Count++;
+          } else {
+            dozen3Count++;
+          }
+        }
+        var table = document.getElementById("number-table");
+        var row = table.insertRow();
+        var dozen1 = row.insertCell(0);
+        var dozen2 = row.insertCell(1);
+        var dozen3 = row.insertCell(2);
+        dozen1.innerHTML = dozen1Count;
+        dozen2.innerHTML = dozen2Count;
+        dozen3.innerHTML = dozen3Count;
+        dozen1Count = 0;
+        dozen2Count = 0;
+        dozen3Count = 0;
+        addedNumbers.splice(0,3);
+      }
+}
+function updateAddedNumbers() {
+  var addedNumbersElem = document.getElementById("added-numbers");
+  addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas
+}
+</script>
+  </body>
+</html>
diff --git a/projects/gd-matrix/index-5-2.html b/projects/gd-matrix/index-5-2.html
new file mode 100644
index 0000000..ac9cd8e
--- /dev/null
+++ b/projects/gd-matrix/index-5-2.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Number Tracker</title>
+    <style>
+    /* CSS styles go here */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    th, td {
+      border: 1px solid black;
+      padding: 8px;
+    }
+    th {
+      text-align: left;
+    }
+    #input-form {
+      margin-bottom: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <h1>Number Tracker</h1>
+    <div id="input-form">
+      <label for="number-input">Enter a number between 1 and 36:</label>
+      <input type="number" id="number-input" min="1" max="36">
+      <button onclick="addNumber()">Add</button>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th>1st Dozen</th>
+          <th>2nd Dozen</th>
+          <th>3rd Dozen</th>
+        </tr>
+      </thead>
+      <tbody id="number-table">
+        <!-- Numbers will be added to this table as rows -->
+      </tbody>
+    </table>
+    <p id="added-numbers"></p>
+    <script>
+    var addedNumbers = []; // array to store added numbers
+    function addNumber() {
+      var input = document.getElementById("number-input");
+      var 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();
+      if (addedNumbers.length % 3 == 0) {
+        var dozen1Count = 0;
+        var dozen2Count = 0;
+        var dozen3Count = 0;
+        for (var i = 0; i < 3; i++) {
+          var number = addedNumbers[i];
+          if (number <= 12) {
+            dozen1Count++;
+          } else if (number <= 24) {
+            dozen2Count++;
+          } else {
+            dozen3Count++;
+          }
+        }
+        var table = document.getElementById("number-table");
+        var row = table.insertRow();
+        var dozen1 = row.insertCell(0);
+        var dozen2 = row.insertCell(1);
+        var dozen3 = row.insertCell(2);
+        dozen1.innerHTML = dozen1Count;
+        dozen2.innerHTML = dozen2Count;
+        dozen3.innerHTML = dozen3Count;
+        dozen1Count = 0;
+        dozen2Count = 0;
+        dozen3Count = 0;
+        addedNumbers.splice(0,3);
+      }
+}
+function updateAddedNumbers() {
+  var addedNumbersElem = document.getElementById("added-numbers");
+  addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas
+}
+</script>
+  </body>
+</html>
diff --git a/projects/gd-matrix/index-5-3.html b/projects/gd-matrix/index-5-3.html
new file mode 100644
index 0000000..86f431d
--- /dev/null
+++ b/projects/gd-matrix/index-5-3.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Number Tracker</title>
+  <style>
+    /* CSS styles go here */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    th,
+    td {
+      border: 1px solid black;
+      padding: 8px;
+    }
+
+    th {
+      text-align: left;
+    }
+
+    #input-form {
+      margin-bottom: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Number Tracker</h1>
+  <div id="input-form">
+    <label for="number-input">Enter a number between 1 and 36:</label>
+    <input type="number" id="number-input" min="1" max="36">
+    <button onclick="addNumber()">Add</button>
+  </div>
+  <table>
+    <thead>
+      <tr>
+        <th>1st Dozen</th>
+        <th>2nd Dozen</th>
+        <th>3rd Dozen</th>
+      </tr>
+    </thead>
+    <tbody id="number-table">
+      <tr>
+        <td id="dozen1-count">0</td>
+        <td id="dozen2-count">0</td>
+        <td id="dozen3-count">0</td>
+      </tr>
+    </tbody>
+  </table>
+  <p id="added-numbers"></p>
+  <script>
+    var addedNumbers = []; // array to store added numbers
+    var spins = 0;
+    function addNumber() {
+      var input = document.getElementById("number-input");
+      var 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();
+      var dozen1Count = document.getElementById("dozen1-count");
+      var dozen2Count = document.getElementById("dozen2-count");
+      var dozen3Count = document.getElementById("dozen3-count");
+      if (number <= 12) {
+        dozen1Count.innerHTML++;
+      } else if (number <= 24) {
+        dozen2Count.innerHTML++;
+      } else {
+        dozen3Count.innerHTML++;
+      }
+      spins++;
+      if (spins === 3) {
+        spins = 0;
+        var table = document.getElementById("number-table");
+        var row = table.insertRow();
+        var dozen1 = row.insertCell(0);
+        var dozen2 = row.insertCell(1);
+        var 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;
+      }
+    }
+    function updateAddedNumbers() {
+      var addedNumbersElem = document.getElementById("added-numbers");
+      addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas
+    }
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/projects/gd-matrix/index-5.html b/projects/gd-matrix/index-5.html
new file mode 100644
index 0000000..d8859d2
--- /dev/null
+++ b/projects/gd-matrix/index-5.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Number Tracker</title>
+    <style>
+    /* CSS styles go here */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    th, td {
+      border: 1px solid black;
+      padding: 8px;
+    }
+    th {
+      text-align: left;
+    }
+    #input-form {
+      margin-bottom: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <h1>Number Tracker</h1>
+    <div id="input-form">
+      <label for="number-input">Enter a number between 1 and 36:</label>
+      <input type="number" id="number-input" min="1" max="36">
+      <button onclick="addNumber()">Add</button>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th>1st Dozen</th>
+          <th>2nd Dozen</th>
+          <th>3rd Dozen</th>
+        </tr>
+      </thead>
+      <tbody id="number-table">
+        <!-- Numbers will be added to this table as rows -->
+      </tbody>
+    </table>
+    <p id="added-numbers"></p>
+    <script>
+    var addedNumbers = []; // array to store added numbers
+    function addNumber() {
+      var input = document.getElementById("number-input");
+      var 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();
+      if (addedNumbers.length % 3 == 0) {
+        updateTrackerTable();
+      }
+    }
+    function updateAddedNumbers() {
+      var addedNumbersElem = document.getElementById("added-numbers");
+      addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas
+    }
+    function updateTrackerTable() {
+      var table = document.getElementById("number-table");
+      var row = table.insertRow();
+      var dozen1 = row.insertCell(0);
+      var dozen2 = row.insertCell(1);
+      var dozen3 = row.insertCell(2);
+      var dozen1Count = 0;
+      var dozen2Count = 0;
+      var dozen3Count = 0;
+      for (var i = 0; i < 3; i++) {
+        var number = addedNumbers[i];
+        if (number <= 12) {
+          dozen1Count++;
+        } else if (number <= 24) {
+          dozen2Count++;
+        } else {
+          dozen3Count++;
+        }
+      }
+      dozen1.innerHTML = dozen1Count;
+      dozen2.innerHTML = dozen2Count;
+      dozen3.innerHTML = dozen3Count;
+    }
+    </script>
+  </body>
+</html>
+

From 8fae3e3f120933fc29c59e920157251de6c33168 Mon Sep 17 00:00:00 2001
From: mirazedewan <miraze.dewan@ennova-research.com>
Date: Tue, 24 Jan 2023 18:30:01 +0100
Subject: [PATCH 04/10] update

---
 projects/gd-matrix/index.html                 | 39 +++++++++++++
 projects/gd-matrix/main.js                    | 56 +++++++++++++++++++
 .../gd-matrix/{ => resources}/index-1.html    |  0
 .../gd-matrix/{ => resources}/index-2.html    |  0
 .../gd-matrix/{ => resources}/index-3.html    |  0
 .../gd-matrix/{ => resources}/index-4.html    |  0
 .../gd-matrix/{ => resources}/index-5-1.html  |  0
 .../{ => resources}/index-5-2-1.html          |  0
 .../gd-matrix/{ => resources}/index-5-2.html  |  0
 .../gd-matrix/{ => resources}/index-5-3.html  |  2 +-
 .../gd-matrix/{ => resources}/index-5.html    |  0
 projects/gd-matrix/style.css                  | 55 ++++++++++++++++++
 12 files changed, 151 insertions(+), 1 deletion(-)
 create mode 100644 projects/gd-matrix/index.html
 create mode 100644 projects/gd-matrix/main.js
 rename projects/gd-matrix/{ => resources}/index-1.html (100%)
 rename projects/gd-matrix/{ => resources}/index-2.html (100%)
 rename projects/gd-matrix/{ => resources}/index-3.html (100%)
 rename projects/gd-matrix/{ => resources}/index-4.html (100%)
 rename projects/gd-matrix/{ => resources}/index-5-1.html (100%)
 rename projects/gd-matrix/{ => resources}/index-5-2-1.html (100%)
 rename projects/gd-matrix/{ => resources}/index-5-2.html (100%)
 rename projects/gd-matrix/{ => resources}/index-5-3.html (98%)
 rename projects/gd-matrix/{ => resources}/index-5.html (100%)
 create mode 100644 projects/gd-matrix/style.css

diff --git a/projects/gd-matrix/index.html b/projects/gd-matrix/index.html
new file mode 100644
index 0000000..58782f3
--- /dev/null
+++ b/projects/gd-matrix/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tracker</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+  <h1>Tracker</h1>
+  <div id="input-form">
+    <label for="number-input">Enter a number between 1 and 36:</label>
+    <input type="number" id="number-input" min="0" max="36">
+    <button id="add-button" onclick="addNumber()">Add</button>
+  </div>
+  <p id="added-numbers"></p>
+  <table class="dozen">
+    <thead>
+      <tr>
+        <th>1st Dozen</th>
+        <th>2nd Dozen</th>
+        <th>3rd Dozen</th>
+      </tr>
+    </thead>
+    <tbody id="number-table">
+      <tr>
+        <td id="dozen1-count">0</td>
+        <td id="dozen2-count">0</td>
+        <td id="dozen3-count">0</td>
+      </tr>
+    </tbody>
+  </table>
+ 
+
+  <script src="main.js"></script>
+
+</body>
+
+</html>
\ 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..ecfeb1b
--- /dev/null
+++ b/projects/gd-matrix/main.js
@@ -0,0 +1,56 @@
+
+
+let addedNumbers = []; // array to store added numbers
+let spins = 0;
+let input = document.getElementById("number-input");
+let number = input.value;
+
+function addNumber() {
+    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();
+    var dozen1Count = document.getElementById("dozen1-count");
+    var dozen2Count = document.getElementById("dozen2-count");
+    var 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;
+        var table = document.getElementById("number-table");
+        var row = table.insertRow();
+        var dozen1 = row.insertCell(0);
+        var dozen2 = row.insertCell(1);
+        var 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;
+    }
+
+
+}
+
+
+input.addEventListener("keydown", function (e) {
+    if (e.keyCode === 13) {
+        addNumber(e);
+    }
+});
+
+
+function updateAddedNumbers() {
+    var 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/index-1.html b/projects/gd-matrix/resources/index-1.html
similarity index 100%
rename from projects/gd-matrix/index-1.html
rename to projects/gd-matrix/resources/index-1.html
diff --git a/projects/gd-matrix/index-2.html b/projects/gd-matrix/resources/index-2.html
similarity index 100%
rename from projects/gd-matrix/index-2.html
rename to projects/gd-matrix/resources/index-2.html
diff --git a/projects/gd-matrix/index-3.html b/projects/gd-matrix/resources/index-3.html
similarity index 100%
rename from projects/gd-matrix/index-3.html
rename to projects/gd-matrix/resources/index-3.html
diff --git a/projects/gd-matrix/index-4.html b/projects/gd-matrix/resources/index-4.html
similarity index 100%
rename from projects/gd-matrix/index-4.html
rename to projects/gd-matrix/resources/index-4.html
diff --git a/projects/gd-matrix/index-5-1.html b/projects/gd-matrix/resources/index-5-1.html
similarity index 100%
rename from projects/gd-matrix/index-5-1.html
rename to projects/gd-matrix/resources/index-5-1.html
diff --git a/projects/gd-matrix/index-5-2-1.html b/projects/gd-matrix/resources/index-5-2-1.html
similarity index 100%
rename from projects/gd-matrix/index-5-2-1.html
rename to projects/gd-matrix/resources/index-5-2-1.html
diff --git a/projects/gd-matrix/index-5-2.html b/projects/gd-matrix/resources/index-5-2.html
similarity index 100%
rename from projects/gd-matrix/index-5-2.html
rename to projects/gd-matrix/resources/index-5-2.html
diff --git a/projects/gd-matrix/index-5-3.html b/projects/gd-matrix/resources/index-5-3.html
similarity index 98%
rename from projects/gd-matrix/index-5-3.html
rename to projects/gd-matrix/resources/index-5-3.html
index 86f431d..5d1a75a 100644
--- a/projects/gd-matrix/index-5-3.html
+++ b/projects/gd-matrix/resources/index-5-3.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>Number Tracker</title>
+  <title>Tracker</title>
   <style>
     /* CSS styles go here */
     table {
diff --git a/projects/gd-matrix/index-5.html b/projects/gd-matrix/resources/index-5.html
similarity index 100%
rename from projects/gd-matrix/index-5.html
rename to projects/gd-matrix/resources/index-5.html
diff --git a/projects/gd-matrix/style.css b/projects/gd-matrix/style.css
new file mode 100644
index 0000000..0a394b6
--- /dev/null
+++ b/projects/gd-matrix/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: 100%;
+  border-collapse: collapse;
+}
+
+table.dozen {
+    width: 20%;
+}
+
+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

From b299bdbb77427253f3f1b5011f73359843e734dd Mon Sep 17 00:00:00 2001
From: mirazedewan <miraze.dewan@ennova-research.com>
Date: Tue, 7 Feb 2023 15:12:54 +0100
Subject: [PATCH 05/10] update

---
 projects/gd-matrix/index.html | 53 ++++++++++++++++++++++++-----------
 projects/gd-matrix/main.js    | 32 ++++++++++++---------
 projects/gd-matrix/style.css  |  6 +---
 yourPlayground.js             | 26 ++++++-----------
 4 files changed, 66 insertions(+), 51 deletions(-)

diff --git a/projects/gd-matrix/index.html b/projects/gd-matrix/index.html
index 58782f3..bea030f 100644
--- a/projects/gd-matrix/index.html
+++ b/projects/gd-matrix/index.html
@@ -14,22 +14,43 @@ <h1>Tracker</h1>
     <button id="add-button" onclick="addNumber()">Add</button>
   </div>
   <p id="added-numbers"></p>
-  <table class="dozen">
-    <thead>
-      <tr>
-        <th>1st Dozen</th>
-        <th>2nd Dozen</th>
-        <th>3rd Dozen</th>
-      </tr>
-    </thead>
-    <tbody id="number-table">
-      <tr>
-        <td id="dozen1-count">0</td>
-        <td id="dozen2-count">0</td>
-        <td id="dozen3-count">0</td>
-      </tr>
-    </tbody>
-  </table>
+  <div style="display: flex;">
+    <!-- Dozen matrix -->
+    <table>
+      <thead>
+        <tr>
+          <th>1D</th>
+          <th>2D</th>
+          <th>3D</th>
+        </tr>
+      </thead>
+      <tbody id="dozen-table">
+        <tr>
+          <td id="dozen1-count">0</td>
+          <td id="dozen2-count">0</td>
+          <td id="dozen3-count">0</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- Column matrix -->
+    <table style="margin-left: 20px">
+      <thead>
+        <tr>
+          <th>1C</th>
+          <th>2C</th>
+          <th>3C</th>
+        </tr>
+      </thead>
+      <tbody id="column-table">
+        <tr>
+          <td id="column-count">0</td>
+          <td id="column-count">0</td>
+          <td id="column-count">0</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
  
 
   <script src="main.js"></script>
diff --git a/projects/gd-matrix/main.js b/projects/gd-matrix/main.js
index ecfeb1b..9cdc0ae 100644
--- a/projects/gd-matrix/main.js
+++ b/projects/gd-matrix/main.js
@@ -1,21 +1,25 @@
 
-
 let addedNumbers = []; // array to store added numbers
 let spins = 0;
 let input = document.getElementById("number-input");
-let number = input.value;
 
 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();
-    var dozen1Count = document.getElementById("dozen1-count");
-    var dozen2Count = document.getElementById("dozen2-count");
-    var dozen3Count = document.getElementById("dozen3-count");
+
+    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) {
@@ -24,25 +28,26 @@ function addNumber() {
         dozen3Count.innerHTML++;
     }
     spins++;
+
     if (spins === 3) {
         spins = 0;
-        var table = document.getElementById("number-table");
-        var row = table.insertRow();
-        var dozen1 = row.insertCell(0);
-        var dozen2 = row.insertCell(1);
-        var dozen3 = row.insertCell(2);
+        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);
@@ -50,7 +55,8 @@ input.addEventListener("keydown", function (e) {
 });
 
 
+// Last numbers
 function updateAddedNumbers() {
-    var addedNumbersElem = document.getElementById("added-numbers");
+    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/style.css b/projects/gd-matrix/style.css
index 0a394b6..191a45c 100644
--- a/projects/gd-matrix/style.css
+++ b/projects/gd-matrix/style.css
@@ -30,14 +30,10 @@ button {
 }
 
 table {
-  width: 100%;
+  width: 10%;
   border-collapse: collapse;
 }
 
-table.dozen {
-    width: 20%;
-}
-
 th,
 td {
   border: 1px solid black;
diff --git a/yourPlayground.js b/yourPlayground.js
index 9d677e8..b246747 100644
--- a/yourPlayground.js
+++ b/yourPlayground.js
@@ -1,21 +1,13 @@
-function sum(a, b) {
-    return a + b;
-}
-
-function calculateFoodTotal (food, tip){
-    const tipPercentage = tip / 100;
-    const tipAmount = food * tipPercentage;
-    const total = sum(food, tipAmount);
-
-    return total;
-}
-
-// console.log(calculateFoodTotal(300, 20));
-
-// Arrays
-
-
 
+const introducer = (name, role) => {
 
+    const person = {
+        name: name,
+        role: role
+    }
 
+    const intro = `Hi, my name is ${person.name} and I am ${person.role} at Ennova Research SRL`;
+    return intro
+}
 
+console.log(introducer("Miraze", "Head of Design"))

From 15dc3b404c66f2d5948d3b29e062b1f82090e120 Mon Sep 17 00:00:00 2001
From: mirazedewan <miraze.dewan@ennova-research.com>
Date: Tue, 7 Feb 2023 17:48:30 +0100
Subject: [PATCH 06/10] update your playground

---
 index.html        |  1 +
 main.js           |  0
 yourPlayground.js | 39 ++++++++++++++++++++++++++++++++++-----
 3 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 main.js

diff --git a/index.html b/index.html
index a0d6899..3376195 100644
--- a/index.html
+++ b/index.html
@@ -52,6 +52,7 @@ <h3>Project Solutions</h3>
 
   <script src="yourPlayground.js"></script>
   <script src="exercises/converthourstoseconds.js"></script>
+  <script src="main.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/yourPlayground.js b/yourPlayground.js
index b246747..c989aec 100644
--- a/yourPlayground.js
+++ b/yourPlayground.js
@@ -1,13 +1,42 @@
 
-const introducer = (name, role) => {
+// Objects
 
+const myIntro = (name, role, company) => {
     const person = {
         name: name,
-        role: role
+        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 Ennova Research SRL`;
+    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);
+
 
-console.log(introducer("Miraze", "Head of Design"))

From 267a34c446f8a6a3f308927626f9b6d6de1257ce Mon Sep 17 00:00:00 2001
From: mirazedewan <miraze.dewan@ennova-research.com>
Date: Fri, 17 Feb 2023 17:42:38 +0100
Subject: [PATCH 07/10] update matrix

---
 projects/gd-matrix/main.backup.js | 80 +++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 projects/gd-matrix/main.backup.js

diff --git a/projects/gd-matrix/main.backup.js b/projects/gd-matrix/main.backup.js
new file mode 100644
index 0000000..1a242a0
--- /dev/null
+++ b/projects/gd-matrix/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
+}

From cfeada9a1175bc005a009d3cf1a049cce8f13e41 Mon Sep 17 00:00:00 2001
From: mirazedewan <miraze.dewan@ennova-research.com>
Date: Fri, 17 Feb 2023 17:42:41 +0100
Subject: [PATCH 08/10] aa

---
 main.js                                    | 38 +++++++++++++
 projects/gd-matrix/01-dozen-set/index.html | 60 +++++++++++++++++++++
 projects/gd-matrix/01-dozen-set/main.js    | 62 ++++++++++++++++++++++
 projects/gd-matrix/01-dozen-set/style.css  | 51 ++++++++++++++++++
 projects/gd-matrix/main.js                 | 29 ++++++++--
 5 files changed, 237 insertions(+), 3 deletions(-)
 create mode 100644 projects/gd-matrix/01-dozen-set/index.html
 create mode 100644 projects/gd-matrix/01-dozen-set/main.js
 create mode 100644 projects/gd-matrix/01-dozen-set/style.css

diff --git a/main.js b/main.js
index e69de29..7b86ec8 100644
--- a/main.js
+++ 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/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 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tracker</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+  <h1>Tracker</h1>
+  <div id="input-form">
+    <label for="number-input">Enter a number between 1 and 36:</label>
+    <input type="number" id="number-input" min="0" max="36">
+    <button id="add-button" onclick="addNumber()">Add</button>
+  </div>
+  <p id="added-numbers"></p>
+  <div style="display: flex;">
+    <!-- Dozen matrix -->
+    <table>
+      <thead>
+        <tr>
+          <th>1D</th>
+          <th>2D</th>
+          <th>3D</th>
+        </tr>
+      </thead>
+      <tbody id="dozen-table">
+        <tr>
+          <td id="dozen1-count">0</td>
+          <td id="dozen2-count">0</td>
+          <td id="dozen3-count">0</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- Column matrix -->
+    <table style="margin-left: 20px">
+      <thead>
+        <tr>
+          <th>1C</th>
+          <th>2C</th>
+          <th>3C</th>
+        </tr>
+      </thead>
+      <tbody id="column-table">
+        <tr>
+          <td id="column-count">0</td>
+          <td id="column-count">0</td>
+          <td id="column-count">0</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+ 
+
+  <script src="main.js"></script>
+
+</body>
+
+</html>
\ 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/main.js b/projects/gd-matrix/main.js
index 9cdc0ae..f490c16 100644
--- a/projects/gd-matrix/main.js
+++ b/projects/gd-matrix/main.js
@@ -1,4 +1,3 @@
-
 let addedNumbers = []; // array to store added numbers
 let spins = 0;
 let input = document.getElementById("number-input");
@@ -22,10 +21,22 @@ function addNumber() {
 
     if (number <= 12 && number >= 1) {
         dozen1Count.innerHTML++;
-    } else if (number <= 24 && number >= 12) {
+        if (dozen1Count.innerHTML === "3") {
+            dozen1Count.style.backgroundColor = "red";
+            dozen1Count.style.color = "white";
+        }
+    } else if (number <= 24 && number >= 13) {
         dozen2Count.innerHTML++;
+        if (dozen2Count.innerHTML === "3") {
+            dozen2Count.style.backgroundColor = "red";
+            dozen2Count.style.color = "white";
+        }
     } else {
         dozen3Count.innerHTML++;
+        if (dozen3Count.innerHTML === "3") {
+            dozen3Count.style.backgroundColor = "red";
+            dozen3Count.style.color = "white";
+        }
     }
     spins++;
 
@@ -39,6 +50,18 @@ function addNumber() {
         dozen1.innerHTML = dozen1Count.innerHTML;
         dozen2.innerHTML = dozen2Count.innerHTML;
         dozen3.innerHTML = dozen3Count.innerHTML;
+        if (dozen1Count.innerHTML === "3") {
+            dozen1.style.backgroundColor = "red";
+            dozen1.style.color = "white";
+        }
+        if (dozen2Count.innerHTML === "3") {
+            dozen2.style.backgroundColor = "red";
+            dozen2.style.color = "white";
+        }
+        if (dozen3Count.innerHTML === "3") {
+            dozen3.style.backgroundColor = "red";
+            dozen3.style.color = "white";
+        }
         dozen1Count.innerHTML = 0;
         dozen2Count.innerHTML = 0;
         dozen3Count.innerHTML = 0;
@@ -59,4 +82,4 @@ input.addEventListener("keydown", function (e) {
 function updateAddedNumbers() {
     let addedNumbersElem = document.getElementById("added-numbers");
     addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas
-}
\ No newline at end of file
+}

From 74526e9838202933767513058860274c64b1f7af Mon Sep 17 00:00:00 2001
From: mirazedewan <miraze.dewan@ennova-research.com>
Date: Fri, 17 Feb 2023 18:19:38 +0100
Subject: [PATCH 09/10] update all

---
 projects/gd-matrix/02-dozen-set/index.html | 60 ++++++++++++++++++++
 projects/gd-matrix/02-dozen-set/main.js    | 65 ++++++++++++++++++++++
 projects/gd-matrix/02-dozen-set/style.css  | 51 +++++++++++++++++
 projects/gd-matrix/index.html              |  2 +-
 projects/gd-matrix/main.js                 | 55 ++++++++----------
 projects/gd-matrix/style.css               |  4 ++
 6 files changed, 205 insertions(+), 32 deletions(-)
 create mode 100644 projects/gd-matrix/02-dozen-set/index.html
 create mode 100644 projects/gd-matrix/02-dozen-set/main.js
 create mode 100644 projects/gd-matrix/02-dozen-set/style.css

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 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tracker</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+  <h1>Tracker</h1>
+  <div id="input-form">
+    <label for="number-input">Enter a number between 1 and 36:</label>
+    <input type="number" id="number-input" min="0" max="36">
+    <button id="add-button" onclick="addNumber()">Add</button>
+  </div>
+  <p id="added-numbers"></p>
+  <div style="display: flex;">
+    <!-- Dozen matrix -->
+    <table>
+      <thead>
+        <tr>
+          <th>1D</th>
+          <th>2D</th>
+          <th>3D</th>
+        </tr>
+      </thead>
+      <tbody id="dozen-table">
+        <tr>
+          <td id="dozen1-count">0</td>
+          <td id="dozen2-count">0</td>
+          <td id="dozen3-count">0</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- Column matrix -->
+    <table style="margin-left: 20px">
+      <thead>
+        <tr>
+          <th>1C</th>
+          <th>2C</th>
+          <th>3C</th>
+        </tr>
+      </thead>
+      <tbody id="column-table">
+        <tr>
+          <td id="column-count">0</td>
+          <td id="column-count">0</td>
+          <td id="column-count">0</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+ 
+
+  <script src="main.js"></script>
+
+</body>
+
+</html>
\ 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/index.html b/projects/gd-matrix/index.html
index bea030f..0a801fc 100644
--- a/projects/gd-matrix/index.html
+++ b/projects/gd-matrix/index.html
@@ -34,7 +34,7 @@ <h1>Tracker</h1>
     </table>
 
     <!-- Column matrix -->
-    <table style="margin-left: 20px">
+    <table style="margin-left: 20px; display: none;">
       <thead>
         <tr>
           <th>1C</th>
diff --git a/projects/gd-matrix/main.js b/projects/gd-matrix/main.js
index f490c16..954f64c 100644
--- a/projects/gd-matrix/main.js
+++ b/projects/gd-matrix/main.js
@@ -2,6 +2,11 @@ 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
@@ -19,23 +24,21 @@ function addNumber() {
     let dozen2Count = document.getElementById("dozen2-count");
     let dozen3Count = document.getElementById("dozen3-count");
 
-    if (number <= 12 && number >= 1) {
+    // Check which dozen the number belongs to
+    if (dozen1.includes(parseInt(number))) {
         dozen1Count.innerHTML++;
-        if (dozen1Count.innerHTML === "3") {
-            dozen1Count.style.backgroundColor = "red";
-            dozen1Count.style.color = "white";
+        if (dozen1Count.innerHTML == 3) {
+           document.getElementById("dozen-table").rows[0].cells[0].style.backgroundColor = "red";
         }
-    } else if (number <= 24 && number >= 13) {
+    } else if (dozen2.includes(parseInt(number))) {
         dozen2Count.innerHTML++;
-        if (dozen2Count.innerHTML === "3") {
-            dozen2Count.style.backgroundColor = "red";
-            dozen2Count.style.color = "white";
+        if (dozen2Count.innerHTML == 3) {
+            document.getElementById("dozen-table").rows[0].cells[1].style.backgroundColor = "red";
         }
     } else {
         dozen3Count.innerHTML++;
-        if (dozen3Count.innerHTML === "3") {
-            dozen3Count.style.backgroundColor = "red";
-            dozen3Count.style.color = "white";
+        if (dozen3Count.innerHTML == 3) {
+            document.getElementById("dozen-table").rows[0].cells[2].style.backgroundColor = "red";
         }
     }
     spins++;
@@ -44,28 +47,19 @@ function addNumber() {
         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;
-        if (dozen1Count.innerHTML === "3") {
-            dozen1.style.backgroundColor = "red";
-            dozen1.style.color = "white";
-        }
-        if (dozen2Count.innerHTML === "3") {
-            dozen2.style.backgroundColor = "red";
-            dozen2.style.color = "white";
-        }
-        if (dozen3Count.innerHTML === "3") {
-            dozen3.style.backgroundColor = "red";
-            dozen3.style.color = "white";
-        }
+        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 = "";
     }
 
 }
@@ -77,7 +71,6 @@ input.addEventListener("keydown", function (e) {
     }
 });
 
-
 // Last numbers
 function updateAddedNumbers() {
     let addedNumbersElem = document.getElementById("added-numbers");
diff --git a/projects/gd-matrix/style.css b/projects/gd-matrix/style.css
index 191a45c..bd90c5e 100644
--- a/projects/gd-matrix/style.css
+++ b/projects/gd-matrix/style.css
@@ -40,6 +40,10 @@ td {
   padding: 8px;
 }
 
+.red-background {
+  background-color: red;
+}
+
 th {
   text-align: left;
   background-color: black;

From 99e7d922d17d902efe03aa0e651a9ab048c6fde1 Mon Sep 17 00:00:00 2001
From: mirazedewan <miraze.dewan@ennova-research.com>
Date: Thu, 27 Jul 2023 10:48:07 +0200
Subject: [PATCH 10/10] update

---
 .DS_Store                                     | Bin 0 -> 6148 bytes
 .vscode/settings.json                         |   3 +
 projects/.DS_Store                            | Bin 0 -> 6148 bytes
 .../dom-maniplutation/dom-manipulitation.html |   4 +
 projects/dom-maniplutation/script.js          |  11 +++
 projects/gd-matrix/.DS_Store                  | Bin 0 -> 6148 bytes
 projects/gd-matrix/03-dozen-set/index.html    |  60 ++++++++++++
 projects/gd-matrix/03-dozen-set/main.js       |  88 ++++++++++++++++++
 projects/gd-matrix/03-dozen-set/style.css     |  55 +++++++++++
 projects/gd-matrix/index.html                 |  40 ++++----
 projects/gd-matrix/main.js                    |  18 +++-
 .../gd-matrix/{ => resources}/main.backup.js  |   0
 projects/gd-matrix/style.css                  |  79 +++++++++++++++-
 yourPlayground.js                             |  45 +++++----
 14 files changed, 357 insertions(+), 46 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 .vscode/settings.json
 create mode 100644 projects/.DS_Store
 create mode 100644 projects/dom-maniplutation/dom-manipulitation.html
 create mode 100644 projects/dom-maniplutation/script.js
 create mode 100644 projects/gd-matrix/.DS_Store
 create mode 100644 projects/gd-matrix/03-dozen-set/index.html
 create mode 100644 projects/gd-matrix/03-dozen-set/main.js
 create mode 100644 projects/gd-matrix/03-dozen-set/style.css
 rename projects/gd-matrix/{ => resources}/main.backup.js (100%)

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..707eb732a18d6b76fd03fcf98413c0a249076588
GIT binary patch
literal 6148
zcmeHK%Sr=55Ukc57QEz`<NShuFofg_@&keqK_ro=Iqxao<)>NwKnxo%f)}ZV?waZ8
znq}*-y$!&Y@7r5o4q%`=;^bj!e(pZ8tI8OW&O07(k2ky?H;3J%`f|d#172{z9#7x-
z&->kD-g}v-tQ3#}Qa}nw0V(h+1-$pthMPo1DIf);z?TC4eQ0#YUN|Pkr-LCz0OE}4
zFs@^kAU01Bd*PVK49${COsdt0VM%AcRb4L}6O#_B;lt|5RuhWF(|Lc3a#&APlmb%V
zT!HJ{&b|My=|9Z>=Opc<fE4&w3fOG5SuOcW)mtYo=e@Sk@919hL3iUiC=Ah#iP4U^
g@pin3qO5Da=6Nq16NAot(24pPa9w0l;I9?<1Q$USvH$=8

literal 0
HcmV?d00001

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/projects/.DS_Store b/projects/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..f6594930a458ff5c4d3679e58dd83d19ffd1c3a2
GIT binary patch
literal 6148
zcmeHKUrPc(5T8}cJ0$R-z{i7LjZ8&|UJkP_&_z8|*j*=fbl!@0W+1{n*B9!O^m&@u
zU8B(6B0^?h_BYO-J@<FA;{br@PQxRBDgaohgasRyH9~RH6)6}`5mBf;e8^w|5j+R8
zm27tWM+WHK*)W6<4qyad-d{QnVi{ocEf~j9nl&2lqEIYtZI`XGRk3cp2RZXHKbxjq
ze{xNqE~JcurR@io(O}lE?w-md^P^-iQ3X*rz?7S-C<*1PE2l}As#;G6EZegC)!KaC
z>@@05tKC@Co%wMS?RKlPSlHIy{^7}a|1lmV@<r1r@Rz4#$KVoP(O7e`Fujih{H9d4
zCj8`0l2|4~j4n4`Zpg?CFaylM#xP(mIIFTTC*p%J1I)m0F+lf&gG%Tc%r&a30~a*{
zAePXr1Z|onsKznq8q76f1V!jlL|rP(h#_=2`W=(!8q787au8<t5a!9kOejJ<9rt%s
zItW)Iugm~5@SOpg{ZOjZ|IdD&|5Xw%%m6d6nGA?h&+B#ZY^JxaoRWI2gL;QbLV3By
l&k{6LE5=-E#WhqV=y%9KbPeVj(SyQ&1QZRtFav+ezy~<}Q}qA<

literal 0
HcmV?d00001

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 @@
+<div id="title">
+    <h2>Hello World</h2>
+</div>
+<script src="script.js"></script>
\ 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 = `<p>${message}</p>`;
+
+title.style.color = "red";
diff --git a/projects/gd-matrix/.DS_Store b/projects/gd-matrix/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..3dc34f75646157b3be68480bb0beee911893bea7
GIT binary patch
literal 6148
zcmeHK%}T>S5T32oZc(8J1&;x*6{8hFyu?~xz=$4HYGZ;1(`;!{3zkC8`X1iB`2xOz
z52AN*_NSuM`g0M{8JPVhyWeEH--g`|0I+JuUjirr07sXYD`NAG$#LmJmNPvQh)lgh
zzy$;l!vZ8jZ0h)p3dp^i0vjs0XFj~%zW`FNo3y-0c*wc+T2Yv!wtdfXWBKuk0x$4M
ze(0WxuA4T}PEu{O_vO=$5Ro^C8{TdhbnB&=O%bP!Fb>)(A@l>J9PEX$FS=FHiTy<7
zx_W>Yd9hxa>-Cmb?Xp!_vHNAKx3-M&N@ca*FY?*>#r5s_S=5Zhr52Up_or;y-~g^L
z7`eXaWXU}i&DMbY5w|I7HKPT8xVe6OVs{%K^Zjq}Tc=<DE$41KjzoNd^AFbjY6%pQ
z0;B*b@Tmgk?BJ81GKoM6kOKcr0eL=H=n@@+nMQSVV53R^#5{H@!&uf5GRHFL7|b-{
z2pZF=h&q*-5`*b<?6(ZhF_>x8>A+0!!OYCeR47c%j_<b=9hjq$T2g=%c&oseek{rR
ze`|F8|2B!9NC8sdPbt9iHMds9C7HW*XmRqcwa|~yrAc0<@g)TVbrmC5Ud40h%CO&(
X0it6t(}+E2^hZF+Kn*GIqY69&O3rmi

literal 0
HcmV?d00001

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 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tracker</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+  <h1>Tracker</h1>
+  <div id="input-form">
+    <label for="number-input">Enter a number between 1 and 36:</label>
+    <input type="number" id="number-input" min="0" max="36">
+    <button id="add-button" onclick="addNumber()">Add</button>
+  </div>
+  <p id="added-numbers"></p>
+  <div style="display: flex;">
+    <!-- Dozen matrix -->
+    <table>
+      <thead>
+        <tr>
+          <th>1D</th>
+          <th>2D</th>
+          <th>3D</th>
+        </tr>
+      </thead>
+      <tbody id="dozen-table">
+        <tr>
+          <td id="dozen1-count">0</td>
+          <td id="dozen2-count">0</td>
+          <td id="dozen3-count">0</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- Column matrix -->
+    <table style="margin-left: 20px; display: none;">
+      <thead>
+        <tr>
+          <th>1C</th>
+          <th>2C</th>
+          <th>3C</th>
+        </tr>
+      </thead>
+      <tbody id="column-table">
+        <tr>
+          <td id="column-count">0</td>
+          <td id="column-count">0</td>
+          <td id="column-count">0</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+ 
+
+  <script src="main.js"></script>
+
+</body>
+
+</html>
\ 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
index 0a801fc..0e8500f 100644
--- a/projects/gd-matrix/index.html
+++ b/projects/gd-matrix/index.html
@@ -16,23 +16,29 @@ <h1>Tracker</h1>
   <p id="added-numbers"></p>
   <div style="display: flex;">
     <!-- Dozen matrix -->
-    <table>
-      <thead>
-        <tr>
-          <th>1D</th>
-          <th>2D</th>
-          <th>3D</th>
-        </tr>
-      </thead>
-      <tbody id="dozen-table">
-        <tr>
-          <td id="dozen1-count">0</td>
-          <td id="dozen2-count">0</td>
-          <td id="dozen3-count">0</td>
-        </tr>
-      </tbody>
-    </table>
-
+    <div id="container">
+      <div id="numbers">
+        <label for="number-input">Enter a number between 1 and 36:</label>
+        <input type="text" id="number-input">
+        <div id="added-numbers"></div>
+      </div>
+      <div id="dozens">
+        <div id="dozen1">
+          <div>Dozen 1 (1-12)</div>
+          <div id="dozen1-count">0</div>
+        </div>
+        <div id="dozen2">
+          <div>Dozen 2 (13-24)</div>
+          <div id="dozen2-count">0</div>
+        </div>
+        <div id="dozen3">
+          <div>Dozen 3 (25-36)</div>
+          <div id="dozen3-count">0</div>
+        </div>
+      </div>
+      <div id="history"></div>
+    </div>
+    
     <!-- Column matrix -->
     <table style="margin-left: 20px; display: none;">
       <thead>
diff --git a/projects/gd-matrix/main.js b/projects/gd-matrix/main.js
index 954f64c..f1dfb17 100644
--- a/projects/gd-matrix/main.js
+++ b/projects/gd-matrix/main.js
@@ -7,8 +7,8 @@ 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() {
 
+function addNumber() {
     // Number Input
     let number = input.value;
     if (!number) {
@@ -16,7 +16,18 @@ function addNumber() {
         return;
     }
 
-    addedNumbers.unshift(number); // add number to the beginning of the array
+    // 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();
 
@@ -28,7 +39,7 @@ function addNumber() {
     if (dozen1.includes(parseInt(number))) {
         dozen1Count.innerHTML++;
         if (dozen1Count.innerHTML == 3) {
-           document.getElementById("dozen-table").rows[0].cells[0].style.backgroundColor = "red";
+            document.getElementById("dozen-table").rows[0].cells[0].style.backgroundColor = "red";
         }
     } else if (dozen2.includes(parseInt(number))) {
         dozen2Count.innerHTML++;
@@ -61,7 +72,6 @@ function addNumber() {
         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'
diff --git a/projects/gd-matrix/main.backup.js b/projects/gd-matrix/resources/main.backup.js
similarity index 100%
rename from projects/gd-matrix/main.backup.js
rename to projects/gd-matrix/resources/main.backup.js
diff --git a/projects/gd-matrix/style.css b/projects/gd-matrix/style.css
index bd90c5e..40e14d2 100644
--- a/projects/gd-matrix/style.css
+++ b/projects/gd-matrix/style.css
@@ -52,4 +52,81 @@ th {
 
 #input-form {
   margin-bottom: 20px;
-}
\ No newline at end of file
+}
+
+
+#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 c989aec..535c11e 100644
--- a/yourPlayground.js
+++ b/yourPlayground.js
@@ -1,42 +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 = ['🍏','🍐','🍉','🍓','🍌','🍇'];
+  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);
+  // console.log(frut);
 }
 
-
-
-const numeri = [1, 2, 3, 4, 5, 6]
+const numeri = [1, 2, 3, 4, 5, 6];
 
 let numerix2 = [];
 
 for (const numero of numeri) {
-    numerix2.push(numero ** 2);
+  numerix2.push(numero ** 2);
 }
 
 // console.log(numerix2);
-
-
