fix conflicts
This commit is contained in:
brightboost
commit
3201b7b09c
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
@ -0,0 +1 @@
|
||||
*.Roff linguist-detectable=false
|
||||
BIN
Chapter 1/.DS_Store
vendored
Normal file
BIN
Chapter 1/.DS_Store
vendored
Normal file
Binary file not shown.
@ -0,0 +1 @@
|
||||
|
||||
6
Chapter 1/Exercise 1.1
Normal file
6
Chapter 1/Exercise 1.1
Normal file
@ -0,0 +1,6 @@
|
||||
10 + 4
|
||||
14
|
||||
|
||||
console.log('Laurence')
|
||||
Laurence
|
||||
undefined
|
||||
14
Chapter 1/Exercise 1.2
Normal file
14
Chapter 1/Exercise 1.2
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tester</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
console.log("hello world");
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
12
Chapter 1/Exercise 1.3
Normal file
12
Chapter 1/Exercise 1.3
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tester</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
Chapter 1/Exercise 1.4
Normal file
7
Chapter 1/Exercise 1.4
Normal file
@ -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
|
||||
*/
|
||||
|
||||
15
Chapter 1/Project 1
Normal file
15
Chapter 1/Project 1
Normal file
@ -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
|
||||
*/
|
||||
23
Chapter 10/Exercise 10.1
Normal file
23
Chapter 10/Exercise 10.1
Normal file
@ -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
|
||||
30
Chapter 10/Exercise 10.10
Normal file
30
Chapter 10/Exercise 10.10
Normal file
@ -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>
|
||||
13
Chapter 10/Exercise 10.2
Normal file
13
Chapter 10/Exercise 10.2
Normal file
@ -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>
|
||||
15
Chapter 10/Exercise 10.3
Normal file
15
Chapter 10/Exercise 10.3
Normal file
@ -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>
|
||||
15
Chapter 10/Exercise 10.4
Normal file
15
Chapter 10/Exercise 10.4
Normal file
@ -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>
|
||||
16
Chapter 10/Exercise 10.5
Normal file
16
Chapter 10/Exercise 10.5
Normal file
@ -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>
|
||||
22
Chapter 10/Exercise 10.6
Normal file
22
Chapter 10/Exercise 10.6
Normal file
@ -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>
|
||||
17
Chapter 10/Exercise 10.7
Normal file
17
Chapter 10/Exercise 10.7
Normal file
@ -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>
|
||||
33
Chapter 10/Exercise 10.8
Normal file
33
Chapter 10/Exercise 10.8
Normal file
@ -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>
|
||||
23
Chapter 10/Exercise 10.9
Normal file
23
Chapter 10/Exercise 10.9
Normal file
@ -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>
|
||||
45
Chapter 10/Project 1
Normal file
45
Chapter 10/Project 1
Normal file
@ -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>
|
||||
53
Chapter 10/Project 2
Normal file
53
Chapter 10/Project 2
Normal file
@ -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>
|
||||
107
Chapter 10/Project 3
Normal file
107
Chapter 10/Project 3
Normal file
@ -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>
|
||||
44
Chapter 10/capture exercise
Normal file
44
Chapter 10/capture exercise
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>
|
||||
35
Chapter 10/element attributes
Normal file
35
Chapter 10/element attributes
Normal file
@ -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>
|
||||
22
Chapter 10/keyword this button example
Normal file
22
Chapter 10/keyword this button example
Normal file
@ -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>
|
||||
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>
|
||||
44
Chapter 11/Exercise 11.10
Normal file
44
Chapter 11/Exercise 11.10
Normal file
@ -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>
|
||||
35
Chapter 11/Exercise 11.11
Normal file
35
Chapter 11/Exercise 11.11
Normal file
@ -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>
|
||||
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>
|
||||
56
Chapter 11/Exercise 11.9
Normal file
56
Chapter 11/Exercise 11.9
Normal file
@ -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>
|
||||
33
Chapter 11/Project 1
Normal file
33
Chapter 11/Project 1
Normal file
@ -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>
|
||||
53
Chapter 11/Project 2
Normal file
53
Chapter 11/Project 2
Normal file
@ -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">✭</li>
|
||||
<li class="star">✭</li>
|
||||
<li class="star">✭</li>
|
||||
<li class="star">✭</li>
|
||||
<li class="star">✭</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>
|
||||
34
Chapter 11/Project 3
Normal file
34
Chapter 11/Project 3
Normal file
@ -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>
|
||||
74
Chapter 11/Project 4
Normal file
74
Chapter 11/Project 4
Normal file
@ -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>
|
||||
28
Chapter 11/Recognizing key presses
Normal file
28
Chapter 11/Recognizing key presses
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>
|
||||
33
Chapter 11/click tracking
Normal file
33
Chapter 11/click tracking
Normal file
@ -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>
|
||||
41
Chapter 11/log of event target
Normal file
41
Chapter 11/log of event target
Normal file
@ -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">
|
||||
<br> Replace with :
|
||||
<input id="rText" type="text">
|
||||
<br>
|
||||
<button>Replace</button>>
|
||||
<input id="sText" type="text">
|
||||
<br> Replace with :
|
||||
<input id="rText" type="text">
|
||||
<br>
|
||||
<button>Replace</button>
|
||||
<script>
|
||||
const output = document.getElementById('output')
|
||||
const findValue = document.getElementById('sText');
|
||||
const replaceValue = document.getElementById('rText');
|
||||
const output = document.getElementById("output")
|
||||
const findValue = document.getElementById("sText");
|
||||
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>
|
||||
|
||||
17
Chapter 12/async await
Normal file
17
Chapter 12/async await
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);
|
||||
}
|
||||
9
Chapter 12/callback
Normal file
9
Chapter 12/callback
Normal file
@ -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);
|
||||
31
Chapter 12/emailchecker
Normal file
31
Chapter 12/emailchecker
Normal file
@ -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>
|
||||
33
Chapter 12/password checker
Normal file
33
Chapter 12/password checker
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');
|
||||
13
Chapter 12/promises
Normal file
13
Chapter 12/promises
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);})
|
||||
15
Chapter 12/try catch throw
Normal file
15
Chapter 12/try catch throw
Normal file
@ -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);
|
||||
9
Chapter 14/Exercise 13.1
Normal file
9
Chapter 14/Exercise 13.1
Normal file
@ -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);
|
||||
13
Chapter 14/Exercise 13.2
Normal file
13
Chapter 14/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 14/Exercise 13.3
Normal file
17
Chapter 14/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);
|
||||
}
|
||||
39
Chapter 14/Exercise 14.1
Normal file
39
Chapter 14/Exercise 14.1
Normal file
@ -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>
|
||||
22
Chapter 14/Exercise 14.2
Normal file
22
Chapter 14/Exercise 14.2
Normal file
@ -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>
|
||||
52
Chapter 14/Exercise 14.3
Normal file
52
Chapter 14/Exercise 14.3
Normal file
@ -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>
|
||||
52
Chapter 14/Exercise 14.4
Normal file
52
Chapter 14/Exercise 14.4
Normal file
@ -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>
|
||||
38
Chapter 14/Exercise 14.5
Normal file
38
Chapter 14/Exercise 14.5
Normal file
@ -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>
|
||||
43
Chapter 14/Exercise 14.6
Normal file
43
Chapter 14/Exercise 14.6
Normal file
@ -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>
|
||||
60
Chapter 14/Exercise 14.7
Normal file
60
Chapter 14/Exercise 14.7
Normal file
@ -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>
|
||||
65
Chapter 14/List maker project
Normal file
65
Chapter 14/List maker project
Normal file
@ -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>
|
||||
37
Chapter 14/Project 1
Normal file
37
Chapter 14/Project 1
Normal file
@ -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>
|
||||
33
Chapter 14/Project 1 copy
Normal file
33
Chapter 14/Project 1 copy
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");
|
||||
96
Chapter 14/Project 2
Normal file
96
Chapter 14/Project 2
Normal file
@ -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>
|
||||
89
Chapter 14/Project 3
Normal file
89
Chapter 14/Project 3
Normal file
@ -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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user