NajiNabulsi · NajiNabulsi · Jan 16, 2020
diff --git a/wk3/ex1/addSix.js b/wk3/ex1/addSix.js
@@ -0,0 +1,18 @@
+"use strict";
+
+function createBase(base) {
+    function add(num) {
+        return base + num;
+    }
+    return add;
+}
+
+const addSix = createBase(6);
+
+// Put here your function calls... with newNumber
+
+console.log(addSix(9)); // 15
+
+console.log(addSix(18)); //24
+
+console.log(addSix(30)); //36
diff --git a/wk3/ex2/TakeOutTheDuplicates.js b/wk3/ex2/TakeOutTheDuplicates.js
@@ -0,0 +1,4 @@
+const letters = ["a", "b", "c", "d", "a", "e", "f", "c", "b"];
+
+let newLetters = letters => letters.filter((v, i) => letters.indexOf(v) === i);
+console.log(newLetters(letters));
diff --git a/wk3/ex3/GuessTheOutput.js b/wk3/ex3/GuessTheOutput.js
@@ -0,0 +1,17 @@
+// Snippet
+
+let a = 10;
+// the verbal a take 10 as value
+
+const x = (function() {
+    // here we give new value to the same variable that variable.
+    a = 12;
+    // then the value of variable x will be 12
+
+    return function() {
+        alert(a);
+    };
+})();
+
+// the output for function x it will be 12
+x();
diff --git a/wk3/ex4/GuessMore.js b/wk3/ex4/GuessMore.js
@@ -0,0 +1,27 @@
+// Snippet
+const x = 9;
+
+function f1(val) {
+    val = val + 1;
+    return val;
+}
+// when the functions f() fired it will increase verbal x
+// so the output the value will be 10
+f1(x);
+
+// the function will not change the variable x value it will be still the sam so the output is 9
+console.log(x);
+
+const y = { x: 9 };
+
+function f2(val) {
+    val.x = val.x + 1;
+    return val;
+}
+
+// when the functions f2() fired it will increase the object y
+// so the output the value will be 10
+f2(y);
+
+// the function here will change the the value of the object the output is 10
+console.log(y);
diff --git a/wk3/ex5/lotteryMachine.js b/wk3/ex5/lotteryMachine.js
@@ -0,0 +1,21 @@
+//
+function threeFive(startIndex, stopIndex, threeCallback = 3, fiveCallback = 5) {
+    const numbers = [];
+    const sayWhat = [];
+
+    for (let i = startIndex; i <= stopIndex; i++) {
+        numbers.push(i);
+    }
+
+    for (let i = 0; i < numbers.length; i++) {
+        if (i % threeCallback === 0) {
+            sayWhat.push("Three");
+        } else if (i % fiveCallback === 0) {
+            sayWhat.push("Five");
+        }
+    }
+
+    return numbers + "\n" + sayWhat;
+}
+
+console.log(threeFive(10, 15, 3, 5));
diff --git a/wk3/project/TipCalculator.html b/wk3/project/TipCalculator.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>The Tip Calculator</title>
+    <link rel="stylesheet" href="tipCavulator.css">
+</head>
+
+<body>
+    <div class="contenar">
+
+        <div class="top">
+            <h1>Tip Calculator</h1>
+        </div>
+
+        <div class="showScreen">
+            <h2>How Much Was Your Bill?</h2>
+            $<input id="bill" type="text">
+            <h2>How Was Your Service?</h2>
+            <select class="fontSize" name="service" id="service">
+                <option class="fontSize" value="30">30%-Oustanding</option>
+                <option class="fontSize" value="20">20%-Good</option>
+                <option class="fontSize" value="15">15%-It was OK</option>
+                <option class="fontSize" value="10">10%-Bad</option>
+                <option class="fontSize" value="5">5%-Terible</option>
+            </select>
+            <h2>How Many People Sharing the Table</h2>
+            <input id="person" type="text">People
+        </div>
+
+        <button class="fontSize" id="calc">
+            CALCULTE!
+        </button>
+
+        <div class="fontSize" id="tipResult">
+            <p>TIP AMOUNT</p>
+            <p id="result">$</p>
+            <p id="each">EACH</p>
+        </div>
+
+    </div>
+    <!-- script -->
+    <script src="tipCavulator.js"></script>
+</body>
+
+</html>
diff --git a/wk3/project/tipCavulator.css b/wk3/project/tipCavulator.css
@@ -0,0 +1,82 @@
+* {
+    box-sizing: border-box;
+}
+
+
+/* gluble class */
+
+.fontSize {
+    text-align: center;
+    font-weight: bold;
+    font-size: large;
+}
+
+body {
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    background-color: rgb(83, 29, 19);
+}
+
+.contenar {
+    background-color: white;
+    width: 40%;
+    /* height: 90%; */
+    margin: 30px auto;
+    border-radius: 15px;
+    padding: 0;
+}
+
+.showScreen {
+    padding: 20px;
+}
+
+.top {
+    background-color: black;
+    border-radius: 15px 15px 0px 0px;
+    text-align: center;
+    color: white;
+    width: 100%;
+    margin: 0 0 5px 0;
+    height: 20%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+input {
+    width: 50%;
+    height: 40px;
+    font-weight: bold;
+    font-size: large;
+    padding: 15px;
+}
+
+select {
+    width: 50%;
+    height: 40px;
+    padding: 10px;
+}
+
+#calc {
+    background-color: rgb(159, 39, 61);
+    border: none;
+    border-radius: 10px;
+    width: 70%;
+    height: 40px;
+    margin: 20px 50px;
+    outline: none;
+    box-shadow: 0px 5px 10px rgb(51, 50, 50);
+}
+
+#calc:hover {
+    cursor: pointer;
+    color: rgb(159, 39, 61);
+    background-color: black;
+}
+
+#result,
+#each {
+    display: none;
+}
diff --git a/wk3/project/tipCavulator.js b/wk3/project/tipCavulator.js
@@ -0,0 +1,26 @@
+const opt = document.querySelectorAll("option").values;
+const person = document.querySelector("#person");
+const btn = document.querySelector("#calc");
+const service = document.getElementById("service");
+const result = document.querySelector("#result");
+const each = document.querySelector("#each");
+
+function calculte() {
+    const billContentS = document.getElementById("bill").value;
+    let bill = parseInt(billContentS);
+    const serv = parseInt(service.value);
+    const eachPerson = parseInt(person.value);
+
+    let percentage = (bill * serv) / 100;
+
+    let dividedOnpeople = Math.floor(percentage / eachPerson);
+
+    result.innerText = "$ " + dividedOnpeople;
+    result.style.display = "block";
+
+    if (eachPerson > 1) {
+        each.style.display = "block";
+    }
+}
+
+btn.addEventListener("click", calculte);