commit

2021-11-24 20:48:35 +05:30
parent ce86e6d971
commit 98fabf5a93
28 changed files with 0 additions and 1383 deletions
@@ -1,126 +0,0 @@
 /*
 Exercise 1
 const myList = ['Milk', 'Bread', 'Apples'];
 console.log(myList.length);
 myList[1] = 'Bananas';
 console.log(myList);
 Exercise 2
 const myList = [];
 myList.push('Milk', 'Bread', 'Apples');
 myList.splice(1, 1, 'Bananas', 'Eggs');
 const removeLast = myList.pop();
 console.log(removeLast);
 myList.sort();
 console.log(myList.indexOf('Milk'));
 myList.splice(1, 0, 'Carrots', 'Lettuce');
 const myList2 = ['Juice', 'Pop'];
 const finalList = myList.concat(myList2, myList2);
 console.log(finalList.lastIndexOf('Pop'));
 console.log(finalList);
 Exercise 3
 const myArr = [1, 2, 3];
 const bigArr = [myArr, myArr, myArr];
 console.log(bigArr[0][1]);
 console.log(bigArr[1][1]);
 console.log(bigArr[2][1]);
 console.log(bigArr);
 Exercise 4
 const myCar = {
    make: 'Toyota',
    model: 'Camry',
    tires: 4,
    doors: 4,
    color: 'blue',
    forSale: false
 };
 let propColor = 'color';
 myCar[propColor] = 'red';
 propColor = 'forSale';
 myCar[propColor] = true;
 console.log(myCar.make + ' ' + myCar.model);
 console.log(myCar.forSale);
 Exercise 5
 const people = {friends:[]};
 const friend1 = {first:'Laurence',last:'Svekis',id:1};
 const friend2 = {first:'Jane',last:'Doe',id:2};
 const friend3 = {first:'John',last:'Doe',id:3};
 people.friends.push(friend1,friend2,friend3);
 console.log(people);
 const theList = ['Laurence', 'Svekis', true, 35, null, undefined, {
        test: 'one',
        score: 55
    },
    ['one', 'two']
 ];
 theList.length;
 Array.isArray(theList);
 theList[1] = "hello World";
 theList.indexOf('Laurence');
 theList.push("new one push");
 theList.pop();
 theList.shift();
 theList.unshift("make me first");
 theList.splice(1, 2);
 console.log(theList);
 */
 const myArr1 = [1,3,5,6,8,9,15];
 console.log(myArr1.indexOf(0));
 console.log(myArr1.indexOf(3));
 //What is output in the console.
 //How do you replace the second element in an array myArr = [1,3,5,6,8,9,15] with the value 4?
 const myArr = [1,3,5,6,8,9,15]
 myArr.splice(1,1,4);
 console.log(myArr);
 const myArr2 = [];
 myArr2[10] = 'test'
 console.log(myArr2);
 console.log(myArr2[2]);
 //What is output in the console.
 const myArr3 = [3,6,8,9,3,55,553,434];
 myArr3.sort();
 myArr3.length = 0;
 console.log(myArr3[0]);
 //What is output in the console.
 Final Project
 const inventory = [];
 const item3 = {
    name: 'computer',
    model: 'imac',
    cost: 1000,
    qty: 3
 }
 const item2 = {
    name: 'phone',
    model: 'android',
    cost: 500,
    qty: 11
 }
 const item1 = {
    name: 'tablet',
    model: 'ipad',
    cost: 650,
    qty: 1
 }
 inventory.push(item1, item2, item3);
 console.log(inventory);
 let total = 0;
 inventory.forEach(el => {
    total += el.qty;
 })
 console.log(total);
@@ -1,77 +0,0 @@
 <!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>
@@ -1,44 +0,0 @@
 <!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>
@@ -1,35 +0,0 @@
 <!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>
@@ -1,55 +0,0 @@
 <!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>
@@ -1,13 +0,0 @@
 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;
    }
 }
@@ -1,35 +0,0 @@
 <!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>
@@ -1,20 +0,0 @@
 <!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>
@@ -1,32 +0,0 @@
 <!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>
@@ -1,33 +0,0 @@
 <!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>
@@ -1,41 +0,0 @@
 <!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>
@@ -1,42 +0,0 @@
 <!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>
@@ -1,37 +0,0 @@
 <!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>
@@ -1,28 +0,0 @@
 <!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>
@@ -1,44 +0,0 @@
 <!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>
@@ -1,22 +0,0 @@
 <!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>
@@ -1,5 +0,0 @@
 const myName = "Maaike";
 const myAge = 29;
 const coder = true;
 const message = "Hello, my name is "+myName+", I am "+myAge+" years old and I can code JavaScript: "+coder+"."; 
 console.log(message); 
@@ -1,14 +0,0 @@
 let myDistanceKM = 130;
 let myDistanceMiles = myDistanceKM * 1.60934;
 console.log('The distance of ' + myDistanceKM + ' kms is equal to ' + myDistanceMiles + ' miles')
 //1 inch = 2.54 centimeters.
 //2.2046 pounds in a kilo
 let inches = 72;
 let pounds = 180;
 let weight = pounds / 2.2046; // in kilos
 let height = inches * 2.54; // height in centemeters
 console.log(inches,pounds);
 console.log(weight, height);
 let bmi = weight/(height/100*height/100);
 console.log(bmi);
@@ -1,274 +0,0 @@
 //Exercise 1
 /*
 const test = false;
 console.log((test));
 if(test){
    console.log("Its True");
 }
 if(!test){
    console.log("False now");
 }
 //Exercise 2
 let age = 10;
 let cost = 0;
 let message;
 if (age < 3) {
    cost = 0;
    message = "Access is free under three.";
 } else if (age >= 3 && age < 12) {
    cost = 5;
    message ="With the child discount, the fee is 5 dollars";
 } else if (age >= 12 && age < 65) {
    cost = 10;
    message ="A regular ticket costs 10 dollars.";
 } else {
    cost = 7;
    message ="A ticket is 7 dollars.";
 }
 console.log(message);
 console.log("Your Total cost "+cost);
 let age = prompt("How old are you?");
 age = Number(age);
 let message;
 if(age >= 21){
    message = "You can enter and drink.";
 }else if(age >= 19){
    message = "You can enter but not drink.";
 }else{
    message = "You are not allowed in!";
 }
 console.log(message);
 //Exercise 3
 const id = true;
 const message = (id) ? "Allowed In" : "Denied Entry";
 console.log(message);
 //Exercise 4
 let prize = prompt("Pick a number 0-10");
 prize = Number(prize);
 let output = "My Selection: ";
 switch (prize){
    case 0: 
        output += "Gold ";
    case 1:
        output += "Coin ";
        break;
    case 2:
        output += "Big ";
    case 3:
        output += "Box of ";
    case 4:
        output += "Silver ";
    case 5:
        output += "Bricks ";
        break;
    default:
        output += "Sorry Try Again";
 }
 console.log(output);
 //Project 1
 let answer = "Something went wrong";
 let question = prompt("Ask me anything");
 const randomNumber = Math.floor(Math.random() * 6);
 switch (randomNumber) {
    case 0:
        answer = "It will work out";
        break;
    case 1:
        answer = "Maybe maybe not";
        break;
    case 2:
        answer = "Probably not";
        break;
    case 3:
        answer = "Highly likely";
        break;
    default:
        answer = "I don"t know about that";
 }
 let output = "You asked me " + question + ". I think that " + answer;
 console.log(output);
 const myArr = ["Rock", "Paper", "Scissors"]; 
 let computer = Math.floor(Math.random() * 3); 
 let player = Math.floor(Math.random() * 3); 
 let message = "player " + myArr[player] + " vs computer " + myArr[computer] + " "; 
 if (player === computer) { 
    message += "its a tie"; 
 } else if (player > computer) { 
    if (computer == 0 && player == 2) { 
        message += "Computer Wins"; 
    } else { 
        message += "Player Wins"; 
    } 
 } else { 
    if (computer == 2 && player == 0) { 
        message += "Player Wins"; 
    } else { 
        message += "Computer Wins"; 
    } 
 } 
 console.log(message); 
 //Question 1
 const q = 1;
 switch (q) {
    case "1":
        answer = "one";
    case 1:
        answer = 1;
    case 2:
        answer = "this is the one";
        break;
    default:
        answer = "not working";
 }
 console.log(answer);
 let myTime = 9;
 let output;
 if (myTime >= 8 && myTime < 12) {
    output = "Wake up its morning";
 } else if (myTime >= 12 && myTime < 13) {
    output = "go to Lunch";
 } else if (myTime >= 13 && myTime <= 16) {
    output = "Go to work";
 } else if (myTime > 16 && myTime < 20) {
    output = "Dinner Time";
 } else if (myTime >= 22) {
    output = "Time to go to sleep";
 } else {
    output = "You should be sleeping";
 }
 console.log(output);
 let today = prompt("pick a number");
 today = Number(today);
 let output;
 switch (today) {
 case 0:
  output = "Sunday";
  break;
 case 1:
  output = "Monday";
  break;
 case 2:
  output = "Tuesday";
  break;
 case 3:
  output = "Wednesday";
  break;
 case 4:
  output = "Thursday";
  break;
 case 5:
  output = "Friday";
  break;
 case 6:
  output = "Saturday";
  break;
 default:
  output = "Not found";
 }
 console.log("Today is "+output);
 let val = 100;
 let message = (val > 100) ? "${val} was greater than 100" : "${val} was LESS or Equal to 100";
 console.log(message);
 let check = (val % 2) ? "Odd" : "Even";
 check = "${val} is ${check}";
 console.log(check);
 let a = 5; 
 let b = 10; 
 let c = 20; 
 let d = 30; 
 console.log(a > b || b > a); 
 console.log(a > b && b > a); 
 console.log(d > b || b > a); 
 console.log(d > b && b > a); 
 let age = prompt("How old are you?");
 age = Number(age);
 if (!age) {
    age = prompt("Enter a Number?");
 }
 let message;
 if (age >= 21) {
    message = "You are " + age + " and allowed to come in and drink.";
 } else if (age >= 18) {
    message = "You are " + age + "  and allowed to come in but NOT drink.";
 } else {
    message = "You are NOT allowed in.  Sorry you are only " + age + " ";
 }
 console.log(message);
 let val = prompt("what number?");
 val = Number(val);
 let num = 100;
 let message = "nothing";
 if (val > num) {
    message = val + "  was greater than " + num;
 } else if (val == num) {
    message = val + "  was equal to " + num;
 } else {
    message = val + " is less than " + num;
 }
 console.log(message);
 let person = prompt("Enter a name?");
 let message;
 switch (person) {
    case "John" :
    case "Larry" :
    case "Jane" :
    case "Laurence" :
    message = person +" is my friend";
    break;
    default :
    message = "I don\"t know "+person;
 }
 console.log(message);
 */
 const userNames = ["Mike", "John", "Larry"]; 
 const userInput = "John"; 
 let htmlOutput = ""; 
 if (userNames.indexOf(userInput) > -1) { 
    htmlOutput = "Welcome, that is a user"; 
 } else { 
    htmlOutput = "Denied, was not a usernot true "; 
 } 
 console.log(htmlOutput + ":, " + userInput); 
@@ -1,15 +0,0 @@
 <!DOCTYPE html><html>
 <head><title>Random String Generator</title></head>
 <body>
    <script>
        let output = "";
        let letters = "abcdefghijklmnopqrstuvwxyz";
        let total = prompt('How many letters in the output?');
        total = (isNaN(total)) ? 10 : total;
        for (var i = 0; i < total; i++) {
            output += letters.charAt(Math.floor(Math.random() * letters.length));
        }
        console.log(output);
    </script>
 </body>
 </html>
@@ -1,190 +0,0 @@
 /*
 const hiddenNumbers = [];
 const total = 3;
 const max = 5;
 for(let x=0;x<total;x++){
 }
 //Exercise #1
 const max = 5;
 const ranNumber = Math.floor(Math.random() * max) + 1;
 console.log(ranNumber);
 let correct = false;
 while (!correct) {
    let guess = prompt('Guess a Number 1 - ' + max);
    guess = Number(guess);
    if (guess === ranNumber) {
        correct = true;
        console.log('You got it ' + ranNumber)
    } else if (guess > ranNumber) {
        console.log('Too high');
    } else {
        console.log('Too Low');
    }
 }
 //Exercise #3
 let tempNum = ''; 
 let total = prompt('How many digits in the number?'); 
 let max = 5; 
 total = Number(total); 
 for (let x = 0; x < total; x++) { 
    const ranNumber = Math.floor(Math.random() * (max + 1))  ;
    tempNum += ranNumber; 
 } 
 console.log(tempNum); 
 //Exercise #2
 let step = 105;
 let counter = 0;
 do {
    console.log(counter);
    counter += step;
 }
 while (counter <= 100);
 //Exercise 4
 const myTable = [];
 const rows = 4;
 const cols = 7;
 let counter = 0;
 for (let y = 0; y < rows; y++) {
    let tempTable = [];
    for (let x = 0; x < cols; x++) {
        counter++;
        tempTable.push(counter);
    }
    myTable.push(tempTable);
 }
 console.table(myTable);
 //Exercise 5
 const grid = [];
 const cells = 64;
 let counter = 0;
 let row;
 for (let x = 0; x < cells + 1; x++) {
    if (counter % 8 == 0) {
        if (row != undefined) {
            //console.log(row);
            grid.push(row);
        }
        row = [];
    }
    counter++;
    let temp = counter;
    //console.log(temp);
    row.push(temp);
 }
 console.table(grid);
 const myArray = [];
 for (let x = 0; x < 10; x++) {
    myArray.push(x + 1);
 }
 console.log(myArray);
 for (let val of myArray) {
    console.log(val);
 }
 for (let i = 0; i < myArray.length; i++) {
    console.log(myArray[i]);
 }
 const myWork = [];
 for (let x = 1; x < 10; x++) {
    let stat = x % 2 ? true : false;
    let temp = {
        name: `Lesson ${x}`
        , status: stat
    };
    myWork.push(temp);
 }
 console.log(myWork);
 const obj = {
    a: 1,
    b: 2,
    c: 3
 };
 console.log(obj);
 for (let prop in obj) {
    console.log(prop, obj[prop]);
 }
 const arr = ['a', 'b', 'c'];
 for (let w = 0; w < arr.length; w++) {
    console.log(w, arr[w]);
 }
 for (el in arr) {
    console.log(el, arr[el]);
 }
 arr.forEach(function (el, index, array) {
    console.log(array);
    console.log(index, el);
 })
 let output = '';
 let skipThis = 7;
 for (let i = 0; i < 10; i++) {
  if (i === skipThis) {
    break;
  }
  output += i;
 }
 console.log(output);
 const myTable = [];
 const numm = 10;
 for(let x=0;x< numm;x++){
    const temp = [];
    for(let y = 0;y<numm;y++){
        temp.push(x*y);
    }
    myTable.push(temp);
 }
 console.table(myTable);
 let step = 3;
 for (let i = 0; i < 1000; i += step) {
    if (i > 10) {
        break;
    }
    console.log(i);
 }
 */
 const myArray = [1,5,7];
 for(el in myArray){
    console.log(Number(el));
    el = Number(el) + 5;
    console.log(el);
 }
 console.log(myArray);
@@ -1,7 +0,0 @@
 <body>
    <div id="one">Hello World</div>
 <script>
    const myEle = document.getElementById("one");
    console.log(myEle);
 </script>
 </body>
@@ -1,7 +0,0 @@
    <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>
@@ -1,9 +0,0 @@
 <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>
@@ -1,37 +0,0 @@
 <!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>
@@ -1,25 +0,0 @@
 <!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>
@@ -1,55 +0,0 @@
 <!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>
@@ -1,61 +0,0 @@
 <!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>