fix conflicts

2021-11-24 19:50:37 +01:00
parent 6200f79c4e 80ace20cc5
commit 3201b7b09c
263 changed files with 3268 additions and 55 deletions
@@ -0,0 +1 @@
 *.Roff linguist-detectable=false
@@ -0,0 +1 @@
@@ -0,0 +1,6 @@
 10 + 4
 14
 console.log('Laurence')
 Laurence
 undefined
@@ -0,0 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
  <title>Tester</title>
 </head>
 <body>
  <script>
    console.log("hello world");
  </script>
 </body>
 </html>
@@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
  <title>Tester</title>
 </head>
 <body>
  <script src="app.js"></script>
 </body>
 </html>
@@ -0,0 +1,7 @@
 let a = 10; // assign a value of 10 to variable a
 console.log(a); // This will output 10 into the console
 /*
 This is a multi-line 
 Comment
 */
@@ -0,0 +1,15 @@
 <!doctype html>
 <html>
  <head>
    <title>JS Tester</title>
  </head>
  <body>
    <script src="myJS.js"></script>
  </body>
 </html>
 // console.log("Laurence");
 /*
 This is my comment
 Laurence Svekis
 */
@@ -0,0 +1,23 @@
 <!doctype html>
 <html><head><title>Sample Webpage</title></head>
 <body>
    <div class="main">
        <div>
            <ul >
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
            </ul>
        </div>
        <div>blue</div>
        <div>green</div>
        <div>yellow</div>
        <div>Purple</div>
    </div>
 </body>
 </html>
 console.dir(document)
 document.body.children
 document.body.children.children
@@ -0,0 +1,30 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Complete JavaScript Course</title>
    <style>
    </style>
 </head>
 <body>
    <div id="message">Complete JavaScript Course</div>
    <div>
        <input type="text" id="addItem">
        <input type="button" id="addNew" value="Add to List"> </div>
    <div id="output">
        <h1>Shopping List</h1>
        <ol id="sList"> </ol>
    </div>
    <script>
        document.getElementById("addNew").onclick = function () {
            addOne();
        }
        function addOne() {
            var a = document.getElementById("addItem").value;
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(a));
            document.getElementById("sList").appendChild(li);
        }
    </script>
 </body>
 </html>
@@ -0,0 +1,13 @@
 <!doctype html>
 <html>
 <head>
    <title>Canvas HTML5</title>
 </head>
 <body>
    <div id="one">Hello World</div>
    <script>
        const myEle = document.getElementById("one");
        console.log(myEle);
    </script> 
 </body>
 </html>
@@ -0,0 +1,15 @@
 <!doctype html>
 <html>
 <head>
    <title>Dynamic event manipulation</title>
 </head>
 <body>
    <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>
 </body>
 </html>
@@ -0,0 +1,15 @@
 <!doctype html>
 <html>
 <head>
    <title>Canvas HTML5</title>
 </head>
 <body>
    <body>
        <h1 class="ele">Hello World</h1>
        <div class="ele">Hello World 1</div>
        <div class="ele">Hello World 3</div>
    <script>
        const myEles = document.getElementsByClassName("ele");
        console.log(myEles[0]);
    </script>
 </html>
@@ -0,0 +1,16 @@
 <!doctype html>
 <html>
 <head>
    <title>Canvas HTML5</title>
 </head>
 <body>
    <body>
        <h1 class="ele">Hello World</h1>
        <div class="ele">Hello World 1</div>
        <div class="ele">Hello World 3</div>
        <p class="ele">Hello World 4</p>
    <script>
        const myEle = document.querySelector(".ele");
        console.log(myEle);
    </script>
 </html>
@@ -0,0 +1,22 @@
 <!doctype html>
 <html>
 <head>
    <title>JS Tester</title>
 </head>
 <body>
    <div class="container">
        <div class="myEle">One</div>
        <div class="myEle">Two</div>
        <div class="myEle">Three</div>
        <div class="myEle">Four</div>
        <div class="myEle">Five</div>
    </div>
    <script>
        const eles = document.querySelectorAll(".myEle");
        console.log(eles);
        eles.forEach((el) => {
            console.log(el);
        })
    </script>
 </body>
 </html>
@@ -0,0 +1,17 @@
 <!doctype html>
 <html>
 <head>
    <title>JS Tester</title>
 </head>
 <body>
    <div>
        <button onclick="message(this)">Button 1</button>
        <button onclick="message(this)">Button 2</button>
    </div>
    <script>
        function message(el) {
            console.dir(el.textContent);
        }
    </script>
 </body>
 </html>
@@ -0,0 +1,33 @@
 <!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}" onclick="getData(this)"><td>${item}</td>`;
                    html += `<td >${index + 1}</td></tr>`;
                })
                html += "</table>";
                document.getElementById("output").innerHTML = html;
            }
            function getData(el) {
                let temp = el.getAttribute("data-row");
                let tempName = el.getAttribute("data-name");
                message.innerHTML = `${tempName } is in row #${temp}`;
            }
    </script>
 </body>
 </html>
@@ -0,0 +1,23 @@
 <!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>
@@ -0,0 +1,45 @@
 <!doctype html>
 <html>
 <head>
    <title>JS Tester</title>
    <style>
        .active {
            display: block !important;
        }
        .myText {
            display: none;
        }
        .title {
            font-size: 1.5em;
            background-color: #ddd;
        }
    </style>
 </head>
 <body>
    <div class="container">
        <div class="title">Title #1</div>
        <div class="myText">Just some text #1</div>
        <div class="title">Title #2</div>
        <div class="myText">Just some text #2</div>
        <div class="title">Title #3</div>
        <div class="myText">Just some text #3</div>
    </div>
    <script>
        const menus = document.querySelectorAll(".title");
        const openText = document.querySelectorAll(".myText");
        menus.forEach((el) => {
            el.addEventListener("click", (e) => {
                console.log(el.nextElementSibling);
                remover();
                el.nextElementSibling.classList.toggle("active");
            })
        })
        function remover() {
            openText.forEach((ele) => {
                ele.classList.remove("active");
            })
        }
    </script>
 </body>
 </html>
@@ -0,0 +1,53 @@
 <!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.onclick= function () {
                console.log(tr.lastChild);
                let val = Number(tr.lastChild.textContent);
                val++;
                tr.lastChild.textContent = val;
            }
            output.appendChild(tr);
        }
    </script>
 </body>
 </html>
@@ -0,0 +1,107 @@
 <!doctype html>
 <html><head>
    <title>Hangman Game</title>
    <style>
        .gameArea {
            text-align: center;
            font-size: 2em;
        }
        .box,
        .boxD {
            display: inline-block;
            padding: 5px;
        }
        .boxE {
            display: inline-block;
            width: 40px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1.5em;
        }
    </style>
 </head>
 <body>
    <div class="gameArea">
        <div class="score"> </div>
        <div class="puzzle"></div>
        <div class="letters"></div>
        <button>Start Game</button>
    </div>
    <script>
        const game = { cur: "", solution: "", puzz: [], total: 0 };
        const myWords = ["learn Javascript", "learn html", "learn css"];
        const score = document.querySelector(".score");
        const puzzle = document.querySelector(".puzzle");
        const letters = document.querySelector(".letters");
        const btn = document.querySelector("button");
        btn.addEventListener("click", startGame);
        function startGame() {
            if (myWords.length > 0) {
                btn.style.display = "none";
                game.puzz = [];
                game.total = 0;
                game.cur = myWords.shift();
                game.solution = game.cur.split("");
                builder();
            } else {
                score.textContent = "No More Words.";
            }
        }
        function createElements(elType, parentEle, output, cla) {
            const temp = document.createElement(elType);
            temp.classList.add("boxE");
            parentEle.append(temp);
            temp.textContent = output;
            return temp;
        }
        function updateScore() {
            score.textContent = `Total Letters Left : ${game.total}`;
            if (game.total <= 0) {
                console.log("game over");
                score.textContent = "Game Over";
                btn.style.display = "block";
            }
        }
        function builder() {
            letters.innerHTML = "";
            puzzle.innerHTML = "";
            game.solution.forEach((lett) => {
                let div = createElements("div", puzzle, "-", "boxE");
                if (lett == " ") {
                    div.style.borderColor = "white";
                    div.textContent = " ";
                } else {
                    game.total++;
                }
                game.puzz.push(div);
                updateScore();
            })
            for (let i = 0; i < 26; i++) {
                let temp = String.fromCharCode(65 + i);
                let div = createElements("div", letters, temp,"box");
                let checker = function (e) {
                    div.style.backgroundColor = "#ddd";
                    div.classList.remove("box");
                    div.classList.add("boxD");
                    div.removeEventListener("click", checker);
                    checkLetter(temp);
                }
                div.addEventListener("click", checker);
            }
        }
        function checkLetter(letter) {
            console.log(letter);
            game.solution.forEach((ele, index) => {
                if (ele.toUpperCase() == letter) {
                    game.puzz[index].textContent = letter;
                    game.total--;
                    updateScore();
                };
            }
            )
        }
    </script>
 </body>
 </html>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,26 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Laurence Svekis</title>
 </head>
 <body>
    <script>
        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;
            }
        }
    </script>
 </body>
 </html>
@@ -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>
@@ -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>
@@ -0,0 +1,17 @@
 <!doctype html>
 <html>
 <body>
    <div>red</div>
    <div>blue</div>
    <div>green</div>
    <div>yellow</div>
    <script>
        const divs = document.querySelectorAll("div");
        divs.forEach((el)=>{
            el.addEventListener("click",()=>{
                document.body.style.backgroundColor = el.textContent;
            })
        })
    </script>
 </body>
 </html>
@@ -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>
@@ -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>
@@ -0,0 +1,42 @@
 <!doctype html>
 <html>
 <head>
    <title>JS Tester</title>
 </head>
 <body>
    <div class="output"></div>
    <input type="text" name="message" placeholder="Your Message">
    <button class="btn1">Button 1</button>
    <button class="btn2">Button 2</button>
    <div>
        <button class="btn3">Log</button>
    </div>
    <script>
        const myInput = document.querySelector("input[name='message']");
        const output = document.querySelector(".output");
        const btn1 = document.querySelector(".btn1");
        const btn2 = document.querySelector(".btn2");
        const btn3 = document.querySelector(".btn3");
        const log = [];
        btn1.addEventListener("click", tracker);
        btn2.addEventListener("click", tracker);
        btn3.addEventListener("click", (e) => {
            console.log(log);
        })
        function tracker(e) {
            output.textContent = myInput.value;
            const ev = e.target;
            console.dir(ev);
            const temp = {
                message: myInput.value,
                type: ev.type,
                class: ev.className,
                tag: ev.tagName
            };
            log.push(temp);
            myInput.value = "";
        }
    </script>
 </body>
 </html>
@@ -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>
@@ -0,0 +1,43 @@
 <!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>
@@ -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("keyup", (e) => {
                console.log(e.key);
            })
            el.addEventListener("paste", (e) => {
                console.log('pasted');
            })
        })
    </script>
 </body>
 </html>
@@ -0,0 +1,56 @@
 <!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>
@@ -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>
@@ -0,0 +1,53 @@
 <!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>
@@ -0,0 +1,34 @@
 <!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", (e) => { e.target.classList.add("active"); })
        ele.addEventListener("mouseout", (e) => { e.target.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>
@@ -0,0 +1,74 @@
 <!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;
        }
        .message {
            text-align: center;
            padding: 10px;
            font-size: 1.3em;
        }
    </style>
 </head>
 <body>
    <div class="output"></div>
    <div class="message"></div>
    <script>
        const output = document.querySelector('.output');
        const message = document.querySelector('.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>
@@ -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("keyup", (e) => {
                console.log(e.key);
            })
            el.addEventListener("paste", (e) => {
                console.log('pasted');
            })
        })
    </script>
 </body>
 </html>
@@ -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>
@@ -0,0 +1,41 @@
 <!doctype html>
 <html>
 <head>
    <title>JS Tester</title>
 </head>
 <body>
    <div class="output"></div>
    <input type="text" name="message" placeholder="Your Message">
    <button class="btn1">Button 1</button>
    <button class="btn2">Button 2</button>
    <div>
        <button class="btn3">Log</button>
    </div>
    <script>
        const myInput = document.querySelector("input[name='message']");
        const output = document.querySelector(".output");
        const btn1 = document.querySelector(".btn1");
        const btn2 = document.querySelector(".btn2");
        const btn3 = document.querySelector(".btn3");
        const log = [];
        btn1.addEventListener("click", tracker);
        btn2.addEventListener("click", tracker);
        btn3.addEventListener("click", (e) => {
            console.log(log);
        })
        function tracker(e) {
            output.textContent = myInput.value;
            const ev = e.target;
            console.dir(ev);
            const temp = {
                message: myInput.value,
                type: ev.type,
                class: ev.className,
                tag: ev.tagName
            };
            log.push(temp);
            myInput.value = "";
        }
    </script>
 </body>
 </html>
@@ -1,26 +1,28 @@
 <!doctype html>
 <html>
 <head>
-        <title>Complete JavaScript Course</title>
+    <title>Complete JavaScript Course</title>
 </head>
 <body>
-        <div id="output">Complete JavaScript Course</div>
+    <div id="output">Complete JavaScript Course</div>
    Search for :
-        <input id="sText" type="text">
+    <input id="sText" type="text">
-        <br> Replace with :
+    <br> Replace with :
-        <input id="rText" type="text">
+    <input id="rText" type="text">
-        <br>
+    <br>
-        <button>Replace</button>>
+    <button>Replace</button>
    <script>
-        const output = document.getElementById('output')
+        const output = document.getElementById("output")
-        const findValue = document.getElementById('sText');
+        const findValue = document.getElementById("sText");
-        const replaceValue = document.getElementById('rText');
+        const replaceValue = document.getElementById("rText");
        document.querySelector("button").addEventListener("click", lookUp);
        function lookUp() {
            const s = output.textContent;
            const rt = replaceValue.value;
            const re = new RegExp(findValue.value, "gi");
            if (s.match(re)) {
                let newValue = s.replace(re, rt);
                output.textContent = newValue;
@@ -28,4 +30,5 @@
        }
    </script>
 </body>
 </html>
@@ -0,0 +1,17 @@
    let cnt = 0;
    function outputTime(val) {
        return new Promise(resolve => {
            setTimeout(() => {
                cnt++;
                resolve(`x value ${val} counter:${cnt}`);
            }, 1000);
        });
    }
    async function aCall(val) {
        console.log(`ready ${val} counter:${cnt}`);
        const res = await outputTime(val);
        console.log(res);
    }
    for (let x = 1; x < 4; x++) {
        aCall(x);
    }
@@ -0,0 +1,9 @@
 function greet(fullName){
    console.log(`Welcome, ${fullName[0]} ${fullName[1]}`)
 }
 function processCall(user,callback){
    const fullName = user.split(" ");
    callback(fullName);
 }
 processCall("Laurence Svekis",greet);
@@ -0,0 +1,31 @@
 <!doctype html>
 <html>
 <head>
    <title>JavaScript Course</title>
 </head>
 <body>
    <div class="output"></div>
    <input type="text" placeholder="Enter Email">
    <button>Check</button>
    <script>
        const output = document.querySelector(".output");
        const emailVal = document.querySelector("input");
        const btn = document.querySelector("button");
        const emailExp = /([A-Za-z0-9._-]+@[A-Za-z0-9._-]+\.[A-Za-z0-9]+)\w+/;
        btn.addEventListener("click", (e) => {
            const val = emailVal.value;
            const result = emailExp.test(val);
            let response = "";
            if (!result) {
                response = "Invalid Email";
                output.style.color = "red";
            } else {
                response = "Valid Email";
                output.style.color = "green";
            }
            emailVal.value = "";
            output.textContent = response;
        })
    </script>
 </body>
 </html>
@@ -0,0 +1,33 @@
 const allowed = ["1234", "pass", "apple"];
 function passwordChecker(pass) {
    return allowed.includes(pass);
 }
 function login(password) {
    return new Promise((resolve, reject) => {
        if (passwordChecker(password)) {
            resolve({
                status: true
            })
        } else {
            reject({
                status: false
            })
        }
    })
 }
 function checker(pass) {
    login(pass)
        .then(token => {
            console.log('Approve:');
            console.log(token)
        })
        .catch(value => {
            console.log('Reject:');
            console.log(value)
        })
 }
 checker('1234');
 checker('wrong');
@@ -0,0 +1,13 @@
 const myPromise = new Promise((resolve, reject) => {
    resolve('Start Counting');
 });
 function counter(val){
    console.log(val);
 }
 myPromise
  .then(value => {counter(value); return "one"})
  .then(value => {counter(value); return "two"})
  .then(value => {counter(value); return "three"})
  .then(value => {counter(value);})
@@ -0,0 +1,15 @@
 function test(val) {
    try {
        if (isNaN(val)) {
            throw "Not a number";
        } else {
            console.log("Got number");
        }
    } catch (e) {
        console.error(e);
    } finally {
        console.log("Done " + val);
    }
 }
 test("a");
 test(100);
@@ -0,0 +1,9 @@
 function greet(fullName){
    console.log(`Welcome, ${fullName[0]} ${fullName[1]}`)
 }
 function processCall(user, callback){
    const fullName = user.split(" ");
    callback(fullName);
 }
 processCall("Laurence Svekis", greet);
@@ -0,0 +1,13 @@
 const myPromise = new Promise((resolve, reject) => {
    resolve("Start Counting");
 });
 function counter(val){
    console.log(val);
 }
 myPromise
  .then(value => {counter(value); return "one"})
  .then(value => {counter(value); return "two"})
  .then(value => {counter(value); return "three"})
  .then(value => {counter(value);})
@@ -0,0 +1,17 @@
 let cnt = 0;
 function outputTime(val) {
    return new Promise(resolve => {
        setTimeout(() => {
            cnt++;
            resolve(`x value ${val} counter:${cnt}`);
        }, 1000);
    });
 }
 async function aCall(val) {
    console.log(`ready ${val} counter:${cnt}`);
    const res = await outputTime(val);
    console.log(res);
 }
 for (let x = 1; x < 4; x++) {
    aCall(x);
 }
@@ -0,0 +1,39 @@
 <!doctype html>
 <html>
 <head>
    <title>Complete JavaScript Course</title>
    <style>
        .thumb {
            max-height: 100px;
        }
    </style>
 </head>
 <body>
    <input type="file" multiple accept="image/*" />
    <div class="output"></div>
    <script>
        const message = document.getElementById("message");
        const output = document.querySelector(".output");
        const myInput = document.querySelector("input");
        myInput.addEventListener("change", uploadAndReadFile);
        function uploadAndReadFile(e) {
            const files = e.target.files;
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const img = document.createElement("img");
                img.classList.add("thumb");
                img.file = file;
                output.appendChild(img);
                const reader = new FileReader();
                reader.onload = (function (myImg) {
                    return function (e) {
                        myImg.src = e.target.result;
                    };
                })(img);
                reader.readAsDataURL(file);
            }
        }
    </script>
 </body>
 </html>
@@ -0,0 +1,22 @@
 <!doctype html>
 <html>
 <head>
    <title>Canvas HTML5</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
 </head>
 <body>
    <canvas id="canvas" width="640" height="640">Not Supported</canvas>
    <script>
        const canvas = document.querySelector('#canvas');
        const ctx = canvas.getContext("2d");
        ctx.fillStyle = "red";
        ctx.fillRect(100, 100, 500, 300); //filled shape
        ctx.strokeRect(90, 90, 520, 320); // outline
        ctx.clearRect(150, 150, 400, 200); //transparent
    </script>
 </body>
 </html>
@@ -0,0 +1,52 @@
 <!doctype html>
 <html>
 <head>
    <title>Canvas HTML5</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
 </head>
 <body>
    <canvas id="canvas" width="640" height="640">Not Supported</canvas>
    <script>
        const canvas = document.querySelector("#canvas");
        const ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(300, 130, 100, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(250, 120, 20, 0, Math.PI * 2);
        ctx.moveTo(370, 120);
        ctx.arc(350, 120, 20, 0, Math.PI * 2);
        ctx.moveTo(240, 160);
        ctx.arc(300, 160, 60, 0, Math.PI);
        ctx.fill();
        ctx.moveTo(300, 130);
        ctx.lineTo(300, 150);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(300, 230);
        ctx.lineTo(300, 270);
        ctx.lineTo(400, 270);
        ctx.lineTo(200, 270);
        ctx.lineTo(300, 270);
        ctx.lineTo(300, 350);
        ctx.lineTo(400, 500);
        ctx.moveTo(300, 350);
        ctx.lineTo(200, 500);
        ctx.stroke();
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.moveTo(200, 50);
        ctx.lineTo(400, 50);
        ctx.lineTo(300, 20);
        ctx.lineTo(200, 50);
        ctx.fill();
        ctx.stroke();
    </script>
 </body>
 </html>
@@ -0,0 +1,52 @@
 <!doctype html>
 <html>
 <head>
    <title>Canvas HTML5</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
 </head>
 <body>
    <canvas id="canvas" width="640" height="640">Not Supported</canvas>
    <script>
        const canvas = document.querySelector("#canvas");
        const ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(300, 130, 100, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(250, 120, 20, 0, Math.PI * 2);
        ctx.moveTo(370, 120);
        ctx.arc(350, 120, 20, 0, Math.PI * 2);
        ctx.moveTo(240, 160);
        ctx.arc(300, 160, 60, 0, Math.PI);
        ctx.fill();
        ctx.moveTo(300, 130);
        ctx.lineTo(300, 150);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(300, 230);
        ctx.lineTo(300, 270);
        ctx.lineTo(400, 270);
        ctx.lineTo(200, 270);
        ctx.lineTo(300, 270);
        ctx.lineTo(300, 350);
        ctx.lineTo(400, 500);
        ctx.moveTo(300, 350);
        ctx.lineTo(200, 500);
        ctx.stroke();
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.moveTo(200, 50);
        ctx.lineTo(400, 50);
        ctx.lineTo(300, 20);
        ctx.lineTo(200, 50);
        ctx.fill();
        ctx.stroke();
    </script>
 </body>
 </html>
@@ -0,0 +1,38 @@
 <!doctype html>
 <html>
 <head>
    <title>Canvas HTML5</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
 </head>
 <body>
    <div><label>Image</label>
        <input type="file" id="imgLoader" name="imgLoader">
    </div>
    <div><canvas id="canvas"></canvas></div>
    <script>
        const canvas = document.querySelector("#canvas");
        const ctx = canvas.getContext("2d");
        const imgLoader = document.querySelector("#imgLoader");
        imgLoader.addEventListener("change", handleUpload);
        function handleUpload(e) {
            console.log(e);
            const reader = new FileReader();
            reader.onload = function (e) {
                console.log(e);
                const img = new Image();
                img.onload = function () {
                    canvas.width = img.width / 2;
                    canvas.height = img.height / 2;
                    ctx.drawImage(img, 0, 0, img.width / 2, img.height / 2);
                }
                img.src = e.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);
        }
    </script>
 </body>
 </html>
@@ -0,0 +1,43 @@
 <!doctype html>
 <html>
 <head>
    <title>Canvas HTML5</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
 </head>
 <body>
    <div><canvas id="canvas"></canvas></div>
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const ballSize = 10;
        let x = canvas.width / 2;
        let y = canvas.height / 2;
        let dirX = 1;
        let dirY = 1;
        function drawBall() {
            ctx.beginPath();
            ctx.arc(x, y, ballSize, 0, Math.PI * 2);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
        }
        function move() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            if (x > canvas.width - ballSize || x < ballSize) {
                dirX *= -1;
            }
            if (y > canvas.height - ballSize || y < ballSize) {
                dirY *= -1;
            }
            x += dirX;
            y += dirY;
        }
        setInterval(move, 10);
    </script>
 </body>
 </html>
@@ -0,0 +1,60 @@
 <!doctype html>
 <html>
 <head>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
 </head>
 <body>
    <div class="controls">
        <button class="clear">Clear</button> <span>Color
            <input type="color" value="#ffff00" id="penColor"></span> <span>Width
            <input type="range" min="1" max="20" value="10" id="penWidth"></span> </div>
    </div>
    <canvas id="canvas"></canvas>
    <script>
        window.onload = init;
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        canvas.style.border = "1px solid black";
        const penColor = document.querySelector("#penColor");
        const penWidth = document.querySelector("#penWidth");
        document.querySelector(".clear").addEventListener("click", clearImg);
        canvas.width = 700;
        canvas.height = 700;
        let pos = {
            x: 0,
            y: 0,
        };
        function init() {
            canvas.addEventListener("mousemove", draw);
            canvas.addEventListener("mousemove", setPosition);
            canvas.addEventListener("mouseenter", setPosition);
        }
        function draw(e) {
            if (e.buttons !== 1) return;
            ctx.beginPath();
            ctx.moveTo(pos.x, pos.y);
            setPosition(e);
            ctx.lineTo(pos.x, pos.y);
            ctx.strokeStyle = penColor.value;
            ctx.lineWidth = penWidth.value;
            ctx.lineCap = "round";
            ctx.stroke();
        }
        function setPosition(e) {
            pos.x = e.pageX;
            pos.y = e.pageY;
        }
        function clearImg() {
            const temp = confirm("Clear confirm?");
            if (temp) {
                ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
            }
        }
    </script>
 </body>
 </html>
@@ -0,0 +1,65 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>JavaScript List Project</title>
 </head>
 <body>
    <div class="output"></div>
    <input type="text"><button>add</button>
    <script>
        const output = document.querySelector(".output");
        const myValue = document.querySelector("input");
        const btn1 = document.querySelector("button");
        const url = "list.json";
        btn1.addEventListener("click", addToList);
        let localData = localStorage.getItem("myList");
        let myList = [];
        window.addEventListener("DOMContentLoaded", () => {
            output.textContent = "Loading......";
            if (localData) {
                myList = JSON.parse(localStorage.getItem("myList"));
                output.innerHTML = "";
                myList.forEach((el, index) => {
                    maker(el);
                });
            } else {
                reloader();
            }
        });
        function addToList() {
            if (myValue.value.length > 3) {
                const myObj = {
                    "name": myValue.value
                }
                myList.push(myObj);
                maker(myObj);
                savetoStorage();
            }
            myValue.value = "";
        }
        function savetoStorage() {
            console.log(myList);
            localStorage.setItem("myList", JSON.stringify(myList));
        }
        function reloader() {
            fetch(url).then(rep => rep.json())
                .then((data) => {
                    myList = data;
                    myList.forEach((el, index) => {
                        maker(el);
                    });
                    savetoStorage();
                })
        }
        function maker(el) {
            const div = document.createElement("div");
            div.innerHTML = `${el.name}`;
            output.append(div);
        }
    </script>
 </body>
 </html>
@@ -0,0 +1,37 @@
 <!doctype html>
 <html>
 <head>
    <title>Canvas HTML5</title>
 </head>
 <body>
    <div class="output"></div>
    <script>
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        canvas.setAttribute("width", "500");
        canvas.setAttribute("height", "300");
        document.body.prepend(canvas);
        const colVal = [];
        for(let x=0;x<50;x++){
            colVal.push(0);
        }
        function matrix() {
            ctx.fillStyle = "rgba(0,0,0,.05)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "green";
            colVal.map((posY, index) => {
                let output = Math.random()<0.5?0:1;
                let posX = (index * 10) + 10;
                ctx.fillText(output, posX, posY);
                if (posY > 100 + Math.random() * 300) {
                    colVal[index] = 0;
                } else {
                    colVal[index] = posY + 10;
                }
            })
        }
        setInterval(matrix, 50);
    </script>
 </body>
 </html>
@@ -0,0 +1,33 @@
 const allowed = ["1234", "pass", "apple"];
 function passwordChecker(pass) {
    return allowed.includes(pass);
 }
 function login(password) {
    return new Promise((resolve, reject) => {
        if (passwordChecker(password)) {
            resolve({
                status: true
            })
        } else {
            reject({
                status: false
            })
        }
    })
 }
 function checker(pass) {
    login(pass)
        .then(token => {
            console.log("Approve:");
            console.log(token)
        })
        .catch(value => {
            console.log("Reject:");
            console.log(value)
        })
 }
 checker("1234");
 checker("wrong");
@@ -0,0 +1,96 @@
 <!doctype html>
 <html>
 <head>
    <title>JavaScript</title>
    <style>
        .clock {
            background-color: blue;
            width: 400px;
            text-align: center;
            color: white;
            font-size: 1em;
        }
        .clock>span {
            padding: 10px;
            border-radius: 10px;
            background-color: black;
        }
        .clock>span>span {
            padding: 5px;
            border-radius: 10px;
            background-color: red;
        }
        input {
            padding: 15px;
            margin: 20px;
            font-size: 1.5em;
        }
    </style>
 </head>
 <body>
    <div>
        <input type="date" name="endDate">
        <div class="clock"> <span><span class="days">0</span> Days</span> <span><span class="hours">0</span>
                Hours</span> <span><span class="minutes">0</span> Minutes</span> <span><span class="seconds">0</span>
                Seconds</span>
        </div>
    </div>
 <script>
        const endDate = document.querySelector("input[name='endDate']");
        const clock = document.querySelector(".clock");
        let timeInterval;
        let timeStop = true;
        const savedValue = localStorage.getItem("countdown") || false;
        if (savedValue) {
            startClock(savedValue);
            let inputValue = new Date(savedValue);
            endDate.valueAsDate = inputValue;
        }
        endDate.addEventListener("change", function (e) {
            e.preventDefault();
            clearInterval(timeInterval);
            const temp = new Date(endDate.value);
            localStorage.setItem("countdown", temp);
            startClock(temp);
            timeStop = true;
        })
        function startClock(d) {
            function updateCounter() {
                let tl = (timeLeft(d));
                if (tl.total <= 0) {
                    timeStop = false;
                }
                for (let pro in tl) {
                    let el = clock.querySelector("." + pro);
                    if (el) {
                        el.innerHTML = tl[pro];
                    }
                }
            }
            updateCounter();
            if (timeStop) {
                timeInterval = setInterval(updateCounter, 1000);
            } else {
                clearInterval(timeInterval);
            }
        }
        function timeLeft(d) {
            let currentDate = new Date();
            let t = Date.parse(d) - Date.parse(currentDate);
            let seconds = Math.floor((t / 1000) % 60);
            let minutes = Math.floor((t / 1000 / 60) % 60);
            let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
            let days = Math.floor(t / (1000 * 60 * 60 * 24));
            return {
                "total": t,
                "days": days,
                "hours": hours,
                "minutes": minutes,
                "seconds": seconds
            };
        }
    </script>
 </body>
 </html>
@@ -0,0 +1,89 @@
 <!doctype html>
 <html>
 <head>
    <title>Canvas HTML5</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
 </head>
 <body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <div>
        <button class="save">Save</button>
        <button class="clear">clear</button>
        <span>Color: <input type="color" value="#ffff00" id="penColor"></span>
        <span>Width: <input type="range" min="1" max="20" value="10" id="penWidth"></span>
    </div>
    <div class="output"></div>
    <script>
        const canvas = document.querySelector("#canvas");
        const ctx = canvas.getContext("2d");
        const penColor = document.querySelector("#penColor");
        const penWidth = document.querySelector("#penWidth");
        const btnSave = document.querySelector(".save");
        const btnClear = document.querySelector(".clear");
        const output = document.querySelector(".output");
        const mLoc = {
            draw: false,
            x: 0,
            y: 0,
            lastX: 0,
            lastY: 0
        };
        canvas.style.border = "1px solid black";
        btnSave.addEventListener("click", saveImg);
        btnClear.addEventListener("click", clearCanvas);
        canvas.addEventListener("mousemove", (e) => {
            mLoc.lastX = mLoc.x;
            mLoc.lastY = mLoc.y;
            //console.log(e);
            mLoc.x = e.clientX;
            mLoc.y = e.clientY;
            draw();
        })
        canvas.addEventListener("mousedown", (e) => {
            mLoc.draw = true;
        })
        canvas.addEventListener("mouseup", (e) => {
            mLoc.draw = false;
        })
        canvas.addEventListener("mouseout", (e) => {
            mLoc.draw = false;
        })
        function saveImg() {
            const dataURL = canvas.toDataURL();
            console.log(dataURL);
            const img = document.createElement("img");
            output.prepend(img);
            img.setAttribute("src", dataURL);
            const link = document.createElement("a");
            output.append(link);
            let fileName = Math.random().toString(16).substr(-8) + ".png"
            link.setAttribute("download", fileName);
            link.href = dataURL;
            link.click();
            output.removeChild(link);
        }
        function clearCanvas() {
            let temp = confirm("clear canvas?");
            if (temp) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
        }
        function draw() {
            if (mLoc.draw) {
                ctx.beginPath();
                ctx.moveTo(mLoc.lastX, mLoc.lastY);
                ctx.lineTo(mLoc.x, mLoc.y);
                ctx.strokeStyle = penColor.value;
                ctx.lineWidth = penWidth.value;
                ctx.stroke();
                ctx.closePath();
            }
        }
    </script>
 </body>
 </html>
--- a/Show More
+++ b/Show More