Merge branch 'main' of https://github.com/PacktPublishing/JavaScript-from-Beginner-to-Professional into main
This commit is contained in:
Karan
commit
32498b5e90
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
@ -0,0 +1 @@
|
||||
*.Roff linguist-detectable=false
|
||||
@ -1 +0,0 @@
|
||||
*.roff linguist-detectable=false
|
||||
26
Chapter 11/Exercise 11.1
Normal file
26
Chapter 11/Exercise 11.1
Normal file
@ -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>
|
||||
17
Chapter 11/Exercise 11.2
Normal file
17
Chapter 11/Exercise 11.2
Normal file
@ -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>
|
||||
20
Chapter 11/Exercise 11.3
Normal file
20
Chapter 11/Exercise 11.3
Normal file
@ -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>
|
||||
32
Chapter 11/Exercise 11.4
Normal file
32
Chapter 11/Exercise 11.4
Normal file
@ -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>
|
||||
42
Chapter 11/Exercise 11.5
Normal file
42
Chapter 11/Exercise 11.5
Normal file
@ -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>
|
||||
44
Chapter 11/Exercise 11.6
Normal file
44
Chapter 11/Exercise 11.6
Normal file
@ -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>
|
||||
43
Chapter 11/Exercise 11.7
Normal file
43
Chapter 11/Exercise 11.7
Normal file
@ -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>
|
||||
28
Chapter 11/Exercise 11.8
Normal file
28
Chapter 11/Exercise 11.8
Normal file
@ -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>
|
||||
13
Chapter 13/Exercise 13.2
Normal file
13
Chapter 13/Exercise 13.2
Normal file
@ -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);})
|
||||
17
Chapter 13/Exercise 13.3
Normal file
17
Chapter 13/Exercise 13.3
Normal file
@ -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);
|
||||
}
|
||||
33
Chapter 13/Project 1
Normal file
33
Chapter 13/Project 1
Normal file
@ -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");
|
||||
Loading…
x
Reference in New Issue
Block a user