ecki/JavaScript-from-Beginner-to-Professional
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Karan
2021-11-24 20:48:35 +05:30
parent ce86e6d971
commit 98fabf5a93
28 changed files with 0 additions and 1383 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Chapter3/Exercises
-126
View File
@@ -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);
chapter10/Final Project
-77
View File
@@ -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>
chapter10/capture exercise
-44
View File
@@ -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>
chapter10/element attributes
-35
View File
@@ -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>
chapter10/ex 10 Drag and drop
-55
View File
@@ -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>
chapter10/ex1 darkmode
-13
View File
@@ -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;
}
}
chapter10/ex11 box mover
-35
View File
@@ -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>
chapter10/ex2 Page onload
-20
View File
@@ -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>
chapter10/ex3 Mouse events
-32
View File
@@ -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>
chapter10/ex4 analytics
-33
View File
@@ -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>
chapter10/ex5 UseCapture
-41
View File
@@ -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>
chapter10/ex6 Event Change
-42
View File
@@ -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>
chapter10/ex7 Image Generator
-37
View File
@@ -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>
chapter10/ex8 Input Number checker
-28
View File
@@ -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>
chapter10/ex9 Form checker
-44
View File
@@ -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>
chapter10/keyword this button example
-22
View File
@@ -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>
chapter2/2-1
-5
View File
@@ -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);
chapter2/ex2
-14
View File
@@ -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);
chapter4/exercises
-274
View File
@@ -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);
chapter5/Random String Generator
-15
View File
@@ -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>
chapter5/exercises
-190
View File
@@ -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);
chapter9/ex2
-7
View File
@@ -1,7 +0,0 @@
<body>
<div id="one">Hello World</div>
<script>
const myEle = document.getElementById("one");
console.log(myEle);
</script>
</body>
chapter9/ex3
-7
View File
@@ -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>
chapter9/ex4
-9
View File
@@ -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>
chapter9/mouseEvents
-37
View File
@@ -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>
chapter9/shoppingList
-25
View File
@@ -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>
chapter9/star project
-55
View File
@@ -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>
chapter9/voter
-61
View File
@@ -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>