CleverProgrammers · nguHelon · Sep 13, 2022 · Sep 13, 2022 · Sep 13, 2022 · Sep 15, 2022
diff --git a/Dom manipulation lesson/index.html b/Dom manipulation lesson/index.html
@@ -0,0 +1,10 @@
+<div style="display: flex;">
+    <button class="colorSquare" id="red" style="height: 100px; width: 100px; background-color: red;"
+        value="red"></button>
+    <button class="colorSquare" id="yellow" style="height: 100px; width: 100px; background-color: yellow;"
+        value="yellow"></button>
+    <button class="colorSquare" id="green" style="height: 100px; width: 100px; background-color: green;"
+        value="green"></button>
+</div>
+<button id="clear-game">Clear game</button>
+<script src="script.js"></script>
diff --git a/Dom manipulation lesson/script.js b/Dom manipulation lesson/script.js
@@ -0,0 +1,26 @@
+let redDiv = document.getElementById("red");
+let yellowDiv = document.getElementById("yellow");
+let greenDiv = document.getElementById("green");
+
+// redDiv.onclick = () => { console.log("you clicked red") };
+// yellowDiv.onclick = () => { console.log("you clicked yellow") };
+// greenDiv.onclick = () => { console.log("you clicked green") };
+
+let squares = document.querySelectorAll('.colorSquare');
+console.log(squares);
+
+//for each loop (one of the best loop);
+const timesClicked = { 'red': 0, 'yellow': 0, 'green': 0 }
+squares.forEach((square) =>
+    square.onclick = () => {
+        timesClicked[square.value] += 1;
+        square.innerText = timesClicked[square.value];
+    }
+);
+
+const clearScores = () => {
+    squares.forEach(square => square.innerText = "");
+}
+
+const clearGameBtn = document.getElementById("clear-game");
+clearGameBtn.onclick = () => clearScores();
diff --git a/Dom manipulation lesson/styles.css b/Dom manipulation lesson/styles.css
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+# Learning javascript
+I will use this course to learn javascript and deploy must of the codes and projects in this forked repository. But next I @nguHelon, will create another repository to practice javascript to the full and try lots of projects on my own.
+
+## Journey to becoming a full stack web developer.
diff --git a/exercises/arraysorting.js b/exercises/arraysorting.js
@@ -4,9 +4,24 @@
 
 // Write a function that takes in an array and sort the numbers inside from least to greatest
 
-function sortArray (array) {
-
+function sortArray(array) {
+    let swap;
+    for (let number of array) {
+        for (let number2 of array) {
+            if (number < number2) {
+                swap = number2;
+                number2 = number;
+                number = swap;
+            }
+        }
+        array.push(number);
+    }
+
+    return array;
+
 }
 
+console.log(sortArray([5, 22, 2, 32, 90, 35, 71, 10]));
+
 // BONUS sort the array without using .sort()
 
diff --git a/functions/sum/exercise/script.js b/functions/sum/exercise/script.js
@@ -8,23 +8,32 @@
   ES6 Syntax (Arrow function): const add = () => {}
 */
 
-function add(){
-  //Add function here
+function add(num1, num2) {
+  return num1 + num2;
 }
 
-function sub(){
-  //Subtract function here
-}
+const sub = (num1, num2) => num1 - num2;
 
-function div(){
-  //Divide function here
+function div(num1, num2) {
+  if (num2 == 0) {
+    return "cannot divide by zero";
+  } else {
+    return num1 / num2;
+  }
 }
 
-function mul(){
-  //Multiply function here
-}
+const mul = (num1, num2) => num1 * num2;
 
 console.log('hello from the SUM exercise')
 /* 
   TODO: create a function that console logs the result of any of the above operations.
-*/
+*/
+
+const consoleLog = (func) => {
+  console.log(func);
+}
+
+consoleLog(add(10, 20));
+consoleLog(sub(20, 10));
+consoleLog(div(0, 10));
+consoleLog(mul(12, 14));
diff --git a/index.html b/index.html
@@ -19,8 +19,9 @@
 
 <body>
   <h2>Official Github REPO (🌟 Go Star This ♥️)</h2>
-  <p>👉 <a href="https://github.com/CleverProgrammers/JavaScript-Course-by-Clever-Programmer-">JavaScript Course by Clever Programmer (Github Repo)</a></p>
-  <p>Let's get this trending 🚀</p>
+  <p>👉 <a href="https://github.com/CleverProgrammers/JavaScript-Course-by-Clever-Programmer-">JavaScript Course by
+      Clever Programmer (Github Repo)</a></p>
+  <p>Let's get this trending 🚀, now</p>
   <h3>Lessons</h3>
   <a href="dom/red-yellow-green/index.html">DOM - Red Yellow Green Squares</a>
   </br>
@@ -48,7 +49,7 @@ <h3>Project Solutions</h3>
   <a href='projects/fetchmovies/solution/index.html'>Create Netflix</a>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prettier/2.6.2/standalone.js"></script>
-<script src="playground.js"></script>
+  <script src="playground.js"></script>
 
   <script src="yourPlayground.js"></script>
   <script src="exercises/converthourstoseconds.js"></script>

diff --git a/tip-calculator/exercise/index.html b/tip-calculator/exercise/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <title>Tip Calculator</title>
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="container" id="topContainer">
+        <div class="title">Bill total</div>
+        <div class="inputContainer">
+          <span>$</span>
+          <input
+            onkeyup="calculateBill()"
+            type="text"
+            id="billTotalInput"
+            placeholder="0.00"
+          />
+        </div>
+      </div>
+      <div class="container">
+        <div class="title">Tip</div>
+        <div class="inputContainer">
+          <span>%</span>
+          <input
+            onkeyup="calculateBill()"
+            type="text"
+            id="tipInput"
+            placeholder="10"
+          />
+        </div>
+      </div>
+      <div class="container" id="bottom">
+        <div class="splitContainer">
+          <div class="title">People</div>
+          <div class="controls">
+            <span class="buttonContainer">
+              <button class="splitButton" onclick="increasePeople()">
+                <span class="buttonText">+</span>
+              </button>
+            </span>
+            <span class="splitAmount" id="numberOfPeople">1</span>
+            <span class="buttonContainer">
+              <button class="splitButton" onclick="decreasePeople()">
+                <span class="buttonText">-</span>
+              </button>
+            </span>
+          </div>
+        </div>
+        <div class="totalContainer">
+          <div class="title">Total per Person</div>
+          <div class="total" id="perPersonTotal">$0.00</div>
+        </div>
+      </div>
+    </div>
+
+    <script type="text/javascript" src="script.js"></script>
+  </body>
+</html>
diff --git a/tip-calculator/exercise/script.js b/tip-calculator/exercise/script.js
@@ -0,0 +1,35 @@
+let billTotalInput = document.getElementById("billTotalInput");
+let tipInput = document.getElementById("tipInput");
+let perPersonTotalDiv = document.getElementById("perPersonTotal");
+let numberOfPeopleDiv = document.getElementById("numberOfPeople");
+
+const calculateBill = () => {
+  const newTotal = Number(billTotalInput.value);
+  const newTip = Number(tipInput.value) / 100;
+  console.log([newTotal, newTip]);
+
+  const tipAmount = newTotal * newTip;
+  const total = tipAmount + newTotal;
+  const totalperPerson = total / Number(numberOfPeopleDiv.innerHTML);
+  perPersonTotalDiv.innerText = `$${totalperPerson.toFixed(2)}`;
+}
+
+let numberOfPeople = Number(numberOfPeopleDiv.innerHTML);
+const increasePeople = () => {
+  numberOfPeople += 1;
+  numberOfPeopleDiv.innerHTML = numberOfPeople;
+
+  calculateBill();
+}
+
+const decreasePeople = () => {
+  if (numberOfPeople <= 1) {
+    throw "Hey you cannot have less than 1 person";
+    return;
+  }
+
+  numberOfPeople -= 1;
+  numberOfPeopleDiv.innerHTML = numberOfPeople;
+
+  calculateBill();
+}
diff --git a/tip-calculator/exercise/style.css b/tip-calculator/exercise/style.css
@@ -0,0 +1,98 @@
+* {
+  font-family: 'M PLUS Rounded 1c', Avenir Next, Helvetica, sans-serif;
+  color: white;
+}
+
+body {
+  background: #8990ec;
+}
+
+.wrapper {
+  height: 525px;
+  width: 360px;
+  color: white;
+  background: #272639;
+  border-radius: 1rem;
+  padding: 1.2rem;
+  margin: 100px auto;
+}
+
+#topContainer {
+  margin-top: 4rem;
+}
+
+.container {
+  margin-top: 1.4rem;
+}
+
+.title {
+  font-weight: bold;
+  margin-bottom: 0.6rem;
+}
+
+.inputContainer {
+  background: #353959;
+  border-radius: 1.4rem;
+  padding: 0 0.8rem;
+  display: flex;
+  align-items: center;
+}
+
+#billTotalInput,
+#tipInput {
+  font-size: 1.2rem;
+  background: none;
+  border: none;
+  outline: none;
+  padding: none;
+}
+
+.buttonContainer {
+  background: #8990ec;
+  display: grid;
+  place-items: center;
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 50%;
+}
+
+.splitButton {
+  background: none;
+  border: none;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+}
+
+.splitButton {
+  font-size: 0.8rem;
+  font-weight: bold;
+  display: grid;
+  place-items: center;
+}
+
+.buttonText {
+  color: #353959 !important;
+}
+
+.splitAmount {
+  font-size: 1.6rem;
+  margin: 0.8rem;
+}
+
+#bottom {
+  display: flex;
+  justify-content: space-between;
+}
+
+.totalContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+
+.total {
+  font-size: 2rem;
+}