From 7bd1867b6af297518a3b59de26b635c99c005175 Mon Sep 17 00:00:00 2001
From: Karan <50290386+Sonawane-Karan26@users.noreply.github.com>
Date: Wed, 24 Nov 2021 20:34:53 +0530
Subject: [PATCH] Commit

---
 Chapter 10__/Final Project               | 77 ++++++++++++++++++++++++
 Chapter 10__/capture exercise            | 44 ++++++++++++++
 Chapter 10__/element attributes          | 35 +++++++++++
 Chapter 10__/ex 10 Drag and drop         | 55 +++++++++++++++++
 Chapter 10__/ex1 darkmode                | 13 ++++
 Chapter 10__/ex11 box mover              | 35 +++++++++++
 Chapter 10__/ex2 Page onload             | 20 ++++++
 Chapter 10__/ex3 Mouse events            | 32 ++++++++++
 Chapter 10__/ex4 analytics               | 33 ++++++++++
 Chapter 10__/ex5 UseCapture              | 41 +++++++++++++
 Chapter 10__/ex6 Event Change            | 42 +++++++++++++
 Chapter 10__/ex7 Image Generator         | 37 ++++++++++++
 Chapter 10__/ex8 Input Number checker    | 28 +++++++++
 Chapter 10__/ex9 Form checker            | 44 ++++++++++++++
 Chapter 10__/keyword this button example | 22 +++++++
 Chapter 9__/ex2                          |  7 +++
 Chapter 9__/ex3                          |  7 +++
 Chapter 9__/ex4                          |  9 +++
 Chapter 9__/mouseEvents                  | 37 ++++++++++++
 Chapter 9__/shoppingList                 | 25 ++++++++
 Chapter 9__/star project                 | 55 +++++++++++++++++
 Chapter 9__/voter                        | 61 +++++++++++++++++++
 22 files changed, 759 insertions(+)
 create mode 100644 Chapter 10__/Final Project
 create mode 100644 Chapter 10__/capture exercise
 create mode 100644 Chapter 10__/element attributes
 create mode 100644 Chapter 10__/ex 10 Drag and drop
 create mode 100644 Chapter 10__/ex1 darkmode
 create mode 100644 Chapter 10__/ex11 box mover
 create mode 100644 Chapter 10__/ex2 Page onload
 create mode 100644 Chapter 10__/ex3 Mouse events
 create mode 100644 Chapter 10__/ex4 analytics
 create mode 100644 Chapter 10__/ex5 UseCapture
 create mode 100644 Chapter 10__/ex6 Event Change
 create mode 100644 Chapter 10__/ex7 Image Generator
 create mode 100644 Chapter 10__/ex8 Input Number checker
 create mode 100644 Chapter 10__/ex9 Form checker
 create mode 100644 Chapter 10__/keyword this button example
 create mode 100644 Chapter 9__/ex2
 create mode 100644 Chapter 9__/ex3
 create mode 100644 Chapter 9__/ex4
 create mode 100644 Chapter 9__/mouseEvents
 create mode 100644 Chapter 9__/shoppingList
 create mode 100644 Chapter 9__/star project
 create mode 100644 Chapter 9__/voter
diff --git a/Chapter 10__/Final Project b/Chapter 10__/Final Project
new file mode 100644
index 0000000..3349399
--- /dev/null
+++ b/Chapter 10__/Final Project	
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Click Me Game</title>
+    <style>
+        .output {
+            width: 500px;
+            height: 500px;
+            border: 1px solid black;
+            margin: auto;
+            text-align: center;
+        }
+
+        .box {
+            width: 50px;
+            height: 50px;
+            position: relative;
+            top: 50px;
+            left: 20%;
+            background-color: red;
+            border: 1px solid black;
+            font-size: 1.5em;
+        }
+
+        .message {
+            text-align: center;
+            padding: 10px;
+            font-size: 1.3em;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="output"></div>
+    <script>
+        const output = document.querySelector('.output');
+        const message = document.createElement('div');
+        message.classList.add('message');
+        document.body.prepend(message);
+        message.textContent = "Press to Start";
+        const box = document.createElement('div');
+        const game = {
+            timer: 0,
+            start: null
+        };
+        box.classList.add('box');
+        output.append(box);
+
+        box.addEventListener('click', (e) => {
+            box.textContent = "";
+            box.style.display = 'none';
+            game.timer = setTimeout(addBox, ranNum(3000));
+            if (!game.start) {
+                message.textContent = 'Loading....';
+            } else {
+                const cur = new Date().getTime();
+                const dur = (cur - game.start) / 1000;
+                message.textContent = `It took ${dur} seconds to click`;
+            }
+        })
+
+        function addBox() {
+            message.textContent = 'Click it...';
+            game.start = new Date().getTime();
+            box.style.display = 'block';
+            box.style.left = ranNum(450) + 'px';
+            box.style.top = ranNum(450) + 'px';
+        }
+
+        function ranNum(max) {
+            return Math.floor(Math.random() * max);
+        }
+    </script>
+</body>
+
+</html>
diff --git a/Chapter 10__/capture exercise b/Chapter 10__/capture exercise
new file mode 100644
index 0000000..064329e
--- /dev/null
+++ b/Chapter 10__/capture exercise	
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+    <style>
+        .box {
+            width: 200px;
+            height: 100px;
+            border: 1px solid black
+        }
+    </style>
+</head>
+<body> 
+    <div class="container">
+        <div class="box" id="box0">Box #1</div>
+        <div class="box" id="box1">Box #2</div>
+        <div class="box" id="box2">Box #3</div>
+        <div class="box" id="box3">Box #4</div>
+    </div> 
+    <script>      
+      const main = document.querySelector(".container");
+      const boxes = document.querySelectorAll(".box");
+      main.addEventListener("click", (e) => {
+          console.log("4");
+      },false);
+      main.addEventListener("click", (e) => {
+          console.log("1");
+      },true);
+ 
+      boxes.forEach(ele => {
+          ele.addEventListener("click", (e) => {
+              console.log("3");
+              console.log(e.target.textContent);
+          },false);
+          ele.addEventListener("click", (e) => {
+              console.log("2");
+              console.log(e.target.textContent);
+          },true);
+   
+      })
+  </script>
+
+</body>
+</html>
diff --git a/Chapter 10__/element attributes b/Chapter 10__/element attributes
new file mode 100644
index 0000000..80522a8
--- /dev/null
+++ b/Chapter 10__/element attributes	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Complete JavaScript Course</title>
+</head>
+<body>
+    <div id="message"></div>
+    <div id="output"></div>
+    <script>
+        const message = document.querySelector("#message");
+        const myArray = ["Laurence", "Mike", "John", "Larry", "Kim", "Joanne", "Lisa", "Janet", "Jane"];
+        build();
+        addClicks();
+        function build() {
+            let html = "<h1>My Friends Table</h1><table>";
+            myArray.forEach((item, index) => {
+                html += `<tr class="box" data-row="${index+1}" data-name="${item}"><td>${item}</td>`;
+                html += `<td >${index + 1}</td></tr>`;
+            })
+            html += "</table>";
+            document.getElementById("output").innerHTML = html;
+        }
+        function addClicks() {
+            const boxes = document.querySelectorAll(".box");
+            boxes.forEach((el) => {
+                el.addEventListener("click", (e) => {
+                    let temp = el.getAttribute("data-row");
+                    let tempName = el.getAttribute("data-name");
+                    message.innerHTML = `${tempName } is in row #${temp}`;
+                })
+            })
+        }
+    </script>
+</body>
+</html>
diff --git a/Chapter 10__/ex 10 Drag and drop b/Chapter 10__/ex 10 Drag and drop
new file mode 100644
index 0000000..e0a7006
--- /dev/null
+++ b/Chapter 10__/ex 10 Drag and drop	
@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+    <style>
+        .box {
+            width: 100px;
+            height: 100px;
+            border: 1px solid black;
+            background-color: white;
+        }
+        .red {
+            background-color: red;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">1
+        <div id="dragme" draggable="true">
+            Drag Me Please!
+        </div>
+    </div>
+    <div class="box">2</div>
+    <script>
+        const dragme = document.querySelector("#dragme");
+        dragme.addEventListener("dragstart", (e) => {
+            dragme.style.opacity = .5;
+        })
+        dragme.addEventListener("dragend", (e) => {
+            dragme.style.opacity = "";
+        })
+        const boxes = document.querySelectorAll(".box");
+        boxes.forEach(box => {
+            box.addEventListener("dragenter", (e) => {
+                e.target.classList.add('red');
+            })
+            box.addEventListener("dragover", (e) => {
+                e.preventDefault();
+            });
+            box.addEventListener("dragleave", (e) => {
+                //console.log("leave");
+                e.target.classList.remove('red');
+            });
+            box.addEventListener("drop", (e) => {
+                e.preventDefault();
+                console.log("dropped");
+                e.target.appendChild(dragme);
+            });
+        })
+        function dragStart(e) {
+            console.log("Started");
+        }
+    </script>
+</body>
+</html>
diff --git a/Chapter 10__/ex1 darkmode b/Chapter 10__/ex1 darkmode
new file mode 100644
index 0000000..f241612
--- /dev/null
+++ b/Chapter 10__/ex1 darkmode	
@@ -0,0 +1,13 @@
+let darkMode = false;
+window.onclick = () => {
+    console.log(darkMode);
+    if (!darkMode) {
+        document.body.style.backgroundColor = "black";
+        document.body.style.color = "white";
+        darkMode = true;
+    } else {
+        document.body.style.backgroundColor = "white";
+        document.body.style.color = "black";
+        darkMode = false;
+    }
+}
diff --git a/Chapter 10__/ex11 box mover b/Chapter 10__/ex11 box mover
new file mode 100644
index 0000000..1d66f82
--- /dev/null
+++ b/Chapter 10__/ex11 box mover	
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+<style>
+    div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+        position: absolute;
+    }
+</style>
+<body>
+    <div id="block"></div>
+    <script>
+        const main = document.querySelector("#block");
+        let mover = { speed: 10, dir: 1, pos: 0 };
+        main.addEventListener("click", moveBlock);
+        function moveBlock() {
+            let x = 30;
+            setInterval(function () {
+                if (x < 1) {
+                    clearInterval();
+                } else {
+                    if (mover.pos > 800 || mover.pos < 0) {
+                        mover.dir *= -1;
+                    }
+                    x--;
+                    mover.pos += x * mover.dir;
+                    main.style.left = mover.pos + "px";
+                    console.log(mover.pos);
+                }
+            }, 2);
+        }
+    </script>
+</body>
+</html>
diff --git a/Chapter 10__/ex2 Page onload b/Chapter 10__/ex2 Page onload
new file mode 100644
index 0000000..c70eb1a
--- /dev/null
+++ b/Chapter 10__/ex2 Page onload	
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+</head>
+<body>   
+    <script>        
+        document.addEventListener("DOMContentLoaded", (e) => {
+            message("Document ready", e);
+        });
+        window.onload = (e) => {
+            message("Window ready", e);
+        }
+        function message(val, event) {
+            console.log(event);
+            console.log(val);
+        }
+    </script>
+</body>
+</html>
diff --git a/Chapter 10__/ex3 Mouse events b/Chapter 10__/ex3 Mouse events
new file mode 100644
index 0000000..7a71a93
--- /dev/null
+++ b/Chapter 10__/ex3 Mouse events	
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+</head>
+<body> 
+    <div class="output"></div> 
+    <script>        
+        const output = document.querySelector(".output");
+        output.textContent = "hello world";
+        output.style.height = "200px";
+        output.style.width = "400px";
+        output.style.backgroundColor = "red";
+        output.addEventListener("mousedown", function (e) {
+            message("green", e);
+        })
+        output.addEventListener("mouseover", function (e) {
+            message("red", e);
+        })
+        output.addEventListener("mouseout", function (e) {
+            message("yellow", e);
+        })
+        output.addEventListener("mouseup", function (e) {
+            message("blue", e);
+        })
+        function message(elColor, event) {
+            console.log(event.type);
+            output.style.backgroundColor = elColor;
+        }
+    </script>
+</body>
+</html>
diff --git a/Chapter 10__/ex4 analytics b/Chapter 10__/ex4 analytics
new file mode 100644
index 0000000..e4723da
--- /dev/null
+++ b/Chapter 10__/ex4 analytics	
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+    <style>.box{width:200px;height:100px;border:1px solid black}</style>
+</head>
+<body> 
+    <div class="container">
+        <div class="box" id="box0">Box #1</div>
+        <div class="box" id="box1">Box #2</div>
+        <div class="box" id="box2">Box #3</div>
+        <div class="box" id="box3">Box #4</div>
+    </div> 
+    <script>      
+        const counter = [];  
+        const main = document.querySelector('.container');
+        main.addEventListener('click',tracker);
+        function tracker(e){
+            const el = e.target;
+            if(el.id){
+            const temp = {};
+            temp.content = el.textContent;
+            temp.id = el.id;
+            temp.tagName = el.tagName;
+            temp.class = el.className;
+            console.dir(el);
+            counter.push(temp);
+            console.log(counter);
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/Chapter 10__/ex5 UseCapture b/Chapter 10__/ex5 UseCapture
new file mode 100644
index 0000000..9266b13
--- /dev/null
+++ b/Chapter 10__/ex5 UseCapture	
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+    <style>
+        .box {
+            width: 200px;
+            height: 100px;
+            border: 1px solid black
+        }
+    </style>
+</head>
+<body> 
+    <div class="container">
+        <div class="box" id="box0">Box #1</div>
+        <div class="box" id="box1">Box #2</div>
+        <div class="box" id="box2">Box #3</div>
+        <div class="box" id="box3">Box #4</div>
+    </div> 
+    <script>      
+        const main = document.querySelector(".container");
+        const boxes = document.querySelectorAll(".box");
+        main.addEventListener("click", (e) => {
+            console.log("4");
+        },false);
+        main.addEventListener("click", (e) => {
+            console.log("1");
+        },true);
+   
+        boxes.forEach(ele => {
+            ele.addEventListener("click", (e) => {
+                console.log("3");
+            },false);
+            ele.addEventListener("click", (e) => {
+                console.log("2");
+            },true);
+     
+        })
+    </script>
+</body>
+</html>
diff --git a/Chapter 10__/ex6 Event Change b/Chapter 10__/ex6 Event Change
new file mode 100644
index 0000000..405c038
--- /dev/null
+++ b/Chapter 10__/ex6 Event Change	
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+</head>
+<body> 
+    <div class="output1">
+    </div>
+
+    <input type="text" placeholder="First Name" name="first"><br>
+    <input type="text" placeholder="Last Name" name="last"><br>
+    <script>      
+        const output = document.querySelector(".output1");
+       
+        const in1 = document.querySelector("input[name='first']");
+        const in2 = document.querySelector("input[name='last']");
+        in1.addEventListener("change", (e) => {
+            console.log("change");
+            updater(in1.value);
+        })
+        in1.addEventListener("blur", (e) => {
+            console.log("blur");
+        })
+        in1.addEventListener("focus", (e) => {
+            console.log("focus");
+        })
+        in2.addEventListener("change", (e) => {
+            console.log("change");
+            updater(in2.value);
+        })
+        in2.addEventListener("blur", (e) => {
+            console.log("blur");
+        })
+        in2.addEventListener("focus", (e) => {
+            console.log("focus");
+        })
+        function updater(str) {
+            output.textContent = str;
+        }
+    </script>
+</body>
+</html>
diff --git a/Chapter 10__/ex7 Image Generator b/Chapter 10__/ex7 Image Generator
new file mode 100644
index 0000000..e7a48b3
--- /dev/null
+++ b/Chapter 10__/ex7 Image Generator	
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+</head>
+<body>
+    <div class="container">
+        Size: <select id="iSize">
+                        <option value="">Select</option>
+                        <option value="150x150">Small</option>
+                        <option value="350x150" selected>Medium</option>
+                        <option value="750x150">Large</option>
+                    </select>
+        <br>Add Text: <input id="iText" type="text" value="Hello World">
+        <br>Select Color: <input id="iColor" type="color" value="222">
+        <br>Preview:<br><img src="" id="myImage">
+           
+    </div>
+    <script>
+        const base = "http://via.placeholder.com/";
+        const myImage = document.querySelector("#myImage");
+        const myArr = { iColor: "222", iText: "Hello World", iSize: "350x150" };
+        const container = document.querySelector(".container");
+        const eles = container.querySelectorAll("select,input");
+        eles.forEach(el => {
+            el.addEventListener("change", (e) => {
+                console.log(el);
+                let val = el.value.replace("#", "");
+                myArr[el.id] = val;
+                let temp = base + myArr.iSize + "/" + myArr.iColor + "/fff?text=" + myArr.iText;
+                console.log(temp);
+                myImage.src = temp;
+            })
+        })
+    </script>
+</body>
+</html>
diff --git a/Chapter 10__/ex8 Input Number checker b/Chapter 10__/ex8 Input Number checker
new file mode 100644
index 0000000..b971725
--- /dev/null
+++ b/Chapter 10__/ex8 Input Number checker	
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+</head>
+<body>
+    <div class="output"></div>
+        <input type="text" name="myNum1">
+        <input type="text" name="myNum2">
+    <script>
+        const eles = document.querySelectorAll("input");
+        const output = document.querySelector(".output");
+        eles.forEach(el => {
+            el.addEventListener("keydown", (e) => {
+                if (!isNaN(e.key)) {
+                    output.textContent += e.key;
+                }
+            })
+            el.addEventListener("keydown", (e) => {
+                console.log(e.key);
+            })
+            el.addEventListener("paste", (e) => {
+                console.log('pasted');
+            })
+        })
+    </script>
+</body>
+</html>
diff --git a/Chapter 10__/ex9 Form checker b/Chapter 10__/ex9 Form checker
new file mode 100644
index 0000000..bec0436
--- /dev/null
+++ b/Chapter 10__/ex9 Form checker	
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+</head>
+<body>
+    <form action="index2.html" method="get">
+        First: <input type="text" name="first">
+        <br>Last: <input type="text" name="last">
+        <br>Age: <input type="number" name="age">
+        <br><input type="submit" value="submit">
+    </form>
+    <script>
+        const form = document.querySelector("form");
+        const email = document.querySelector("#email");
+        form.addEventListener("submit", (e) => {
+            let error = false;
+            if (checker(form.first.value)) {
+                console.log("First Name needed");
+                error = true;
+            }
+            if (checker(form.last.value)) {
+                console.log("Last Name needed");
+                error = true;
+            }
+            if (form.age.value < 19) {
+                console.log("You must be 19 or over");
+                error = true;
+            }
+            if (error) {
+                e.preventDefault();
+                console.log("please review the form");
+            }
+        })
+        function checker(val) {
+            console.log(val.length);
+            if (val.length < 6) {
+                return true;
+            }
+            return false;
+        }
+    </script>
+</body>
+</html>
diff --git a/Chapter 10__/keyword this button example b/Chapter 10__/keyword this button example
new file mode 100644
index 0000000..e8e86e6
--- /dev/null
+++ b/Chapter 10__/keyword this button example	
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+    <title>JS Tester</title>
+</head>
+<body>
+    <div>
+        <button>Button 1</button>
+        <button>Button 2</button>
+        <button>Button 3</button>
+    </div>
+    <script>
+        const btns = document.querySelectorAll('button');
+        btns.forEach((btn)=>{
+            function output(){
+                console.log(this.textContent);
+            }
+            btn.addEventListener("click",output);
+        })
+    </script>
+</body>
+</html>
diff --git a/Chapter 9__/ex2 b/Chapter 9__/ex2
new file mode 100644
index 0000000..bc8defc
--- /dev/null
+++ b/Chapter 9__/ex2	
@@ -0,0 +1,7 @@
+<body>
+    <div id="one">Hello World</div>
+<script>
+    const myEle = document.getElementById("one");
+    console.log(myEle);
+</script>
+</body>
diff --git a/Chapter 9__/ex3 b/Chapter 9__/ex3
new file mode 100644
index 0000000..e72f1ca
--- /dev/null
+++ b/Chapter 9__/ex3	
@@ -0,0 +1,7 @@
+    <div >Hello World 1</div>
+    <div >Hello World 2</div>
+    <div >Hello World 3</div>
+<script>
+    const myEles = document.getElementsByTagName("div");
+    console.log(myEles[1]);
+</script>
diff --git a/Chapter 9__/ex4 b/Chapter 9__/ex4
new file mode 100644
index 0000000..5aef9c3
--- /dev/null
+++ b/Chapter 9__/ex4	
@@ -0,0 +1,9 @@
+<body>
+    <div class="ele">Hello World 1</div>
+    <div >Hello World 2</div>
+    <div class="ele">Hello World 3</div>
+<script>
+    const myEles = document.getElementsByClassName("ele");
+    console.log(myEles[0]);
+</script>
+</body>
diff --git a/Chapter 9__/mouseEvents b/Chapter 9__/mouseEvents
new file mode 100644
index 0000000..b996988
--- /dev/null
+++ b/Chapter 9__/mouseEvents	
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Complete JavaScript Course</title>
+    <style>
+        .holder {
+            display: inline-block;
+            width: 300px;
+            height: 300px;
+            border: 1px solid black;
+            padding: 10px;
+        }
+
+        .active {
+            background-color: red;
+        }
+    </style>
+</head>
+
+<body> 
+      <div class="holder">   
+            <div id="output"></div>   
+    </div>   
+    <script>     
+        const ele = document.querySelector('.holder');
+        ele.addEventListener('mouseover', () => { this.classList.add('active'); })
+        ele.addEventListener('mouseout', () => { this.classList.remove('active'); })
+        ele.addEventListener('mousemove', coordin);
+        function coordin() {
+            let html = "X:" + event.clientX + " | Y:" + event.clientY;
+            document.getElementById('output').innerHTML = html;
+        }
+    </script>
+</body>
+
+</html>
diff --git a/Chapter 9__/shoppingList b/Chapter 9__/shoppingList
new file mode 100644
index 0000000..29d6f8e
--- /dev/null
+++ b/Chapter 9__/shoppingList	
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>    <title>Complete JavaScript Course</title>   
+</head>
+<body>   
+        <div> 
+        <input type="text" id="addItem">       
+        <input type="button" id="addNew" value="Add to List">
+    </div>      
+      <h1>Shopping List</h1> 
+    <ol id="sList"> </ol> 
+     
+    <script> 
+        const myItem = document.querySelector('#addItem');
+        const btn = document.querySelector('#addNew');
+        const myList = document.querySelector('#sList');
+        btn.addEventListener('click', (e) => {
+            let val = myItem.value;
+            const li = document.createElement('li');
+            li.textContent = val;
+            myList.append(li);
+        })
+    </script>
+</body>
+</html>
diff --git a/Chapter 9__/star project b/Chapter 9__/star project
new file mode 100644
index 0000000..267ec3b
--- /dev/null
+++ b/Chapter 9__/star project	
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Star Rater</title>
+    <style>
+        .stars ul {
+            list-style-type: none;
+            padding: 0;
+        }
+        .star {
+            font-size: 2em;
+            color: #ddd;
+            display: inline-block;
+        }
+        .orange {
+            color: orange;
+        }
+        .output {
+            background-color: #ddd;
+        }
+    </style>
+</head>
+
+<body>
+    <ul class="stars">
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+    </ul>
+    <div class="output"></div>
+    <script>
+        const starsUL = document.querySelector('.stars');
+        const output = document.querySelector('.output');
+        const stars = document.querySelectorAll('.star');
+        stars.forEach((star, index) => {
+            star.starValue = (index + 1);
+            star.addEventListener('click', starRate);
+        })
+
+        function starRate(e) {
+                output.innerHTML = `You Rated this ${e.target.starValue} stars`;
+                stars.forEach((star, index) => {
+                if (index < e.target.starValue) {
+                    star.classList.add('orange');
+                } else {
+                    star.classList.remove('orange');
+                }
+            })
+        }
+
+    </script>
+</body>
+</html>
diff --git a/Chapter 9__/voter b/Chapter 9__/voter
new file mode 100644
index 0000000..2398500
--- /dev/null
+++ b/Chapter 9__/voter	
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+
+<head>    <title>Complete JavaScript Course</title>   
+</head>
+
+<body>   
+    <div id="message">Complete JavaScript Course</div>   
+    <div>     
+        <input type="text" id="addFriend">
+        <input type="button" id="addNew" value="Add Friend">
+    </div>   
+    <table id="output"></table>   
+    <script>
+        window.onload = build;
+        const myArray = ["Laurence", "Mike", "John", "Larry"];
+        const message = document.getElementById('message');
+        const addNew = document.getElementById('addNew');
+        const newInput = document.getElementById('addFriend');
+        const output = document.getElementById('output');
+
+        addNew.onclick = function () {
+            const newFriend = newInput.value;
+            adder(newFriend, myArray.length, 0);
+            myArray.push(newFriend);
+        }
+
+        function build() {
+            myArray.forEach((item, index) => {
+                adder(item, index, 0)
+            })
+        }
+
+        function adder(name, index, counter) {
+            const tr = document.createElement('tr');
+            const td1 = document.createElement('td');
+            td1.classList.add('box');
+            td1.textContent = index + 1;
+            const td2 = document.createElement('td');
+            td2.textContent = name;
+            const td3 = document.createElement('td');
+            td3.textContent = counter;
+            tr.append(td1);
+            tr.append(td2);
+            tr.append(td3);
+            tr.addEventListener('click', (e) => {
+                console.log(tr.lastChild);
+                let val = Number(tr.lastChild.textContent);
+                val++;
+                tr.lastChild.textContent = val;
+            })
+            output.appendChild(tr);
+        }
+
+
+
+
+    </script>
+</body>
+
+</html>
