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

reorganize

Browse Source
This commit is contained in:
brightboost 2021-11-24 19:42:15 +01:00
parent 6e1df7995f
commit 6200f79c4e
44 changed files with 0 additions and 1298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

46
Chapter 13/bouncing ball
View File

@ -1,46 +0,0 @@
<!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>

43
Chapter 13/canvas image uploader
View File

@ -1,43 +0,0 @@
<!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>

27
Chapter 13/canvas rectangle
View File

@ -1,27 +0,0 @@
<!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>

54
Chapter 13/canvas stickman
View File

@ -1,54 +0,0 @@
<!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>

32
Chapter 13/canvas text
View File

@ -1,32 +0,0 @@
<!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');
const str = "Hello World";
ctx.font = 'italic 50px Comic';
ctx.fillStyle = 'blue';
//ctx.textAlign = 'left';
ctx.fillText(str, 100, 100);
ctx.font = 'bold 20px Arial';
ctx.fillStyle = 'red';
for (let x = 1; x < 11; x++) {
ctx.fillText("counter:" + x, 50, (200 + (40 * x)));
}
</script>
</body>
</html>

13
Chapter 13/ch13-browser-supporting-file-reader.html
View File

@ -1,13 +0,0 @@
<html>
<body>
<div id="message"></div>
<script>
let message = document.getElementById("message");
if (window.FileReader) {
message.innerText = "Good to go!";
} else {
message.innerText = "No FileReader :(";
}
</script>
</body>
</html>

42
Chapter 13/ch13-canvas-animation.html
View File

@ -1,42 +0,0 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = init;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 500;
var pos = {
x: 0,
y: 50,
};
function init() {
draw();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
pos.x = pos.x + 5;
if (pos.x > canvas.width) {
pos.x = 0;
}
if (pos.y > canvas.height) {
pos.y = 0;
}
ctx.fillRect(pos.x, pos.y, 100, 100);
window.setTimeout(draw, 50);
}
</script>
</body>
</html>

21
Chapter 13/ch13-canvas-circle.html
View File

@ -1,21 +0,0 @@
<html>
<head>
<style>
#canvas1 {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<script>
let canvas = document.getElementById("canvas1");
let ctx = canvas.getContext("2d");
canvas.width = 150;
canvas.height = 200;
ctx.beginPath();
ctx.arc(75, 100, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>

63
Chapter 13/ch13-canvas-draw-mouse.html
View File

@ -1,63 +0,0 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<input type="color" id="bgColor" />
<br>
<img src="" width="300" height="200" id="holder" />
<input type="button" id="save" value="save" />
<script>
window.onload = init;
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 700;
canvas.height = 700;
let pos = {
x: 0,
y: 0,
};
let bgColor = "red";
let bgC = document.getElementById("bgColor");
bgC.addEventListener("change", function () {
bgColor = event.target.value;
});
document.getElementById("save").addEventListener("click", function () {
let dataURL = canvas.toDataURL();
console.log(dataURL);
document.getElementById("holder").src = dataURL;
});
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 = bgColor;
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();
}
function setPosition(e) {
pos.x = e.pageX;
pos.y = e.pageY;
}
</script>
</body>
</html>

31
Chapter 13/ch13-canvas-drawing-canvas.html
View File

@ -1,31 +0,0 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
<canvas id="canvas3"></canvas>
<script>
let canvas1 = document.getElementById("canvas1");
let ctx1 = canvas1.getContext("2d");
ctx1.strokeRect(5, 5, 150, 100);
let canvas2 = document.getElementById("canvas2");
let ctx2 = canvas2.getContext("2d");
ctx2.beginPath();
ctx2.fillStyle = "blue";
ctx2.arc(60, 60, 20, 0, 2 * Math.PI);
ctx2.stroke();
let canvas3 = document.getElementById("canvas3");
let ctx3 = canvas3.getContext("2d");
ctx3.drawImage(canvas1, 10, 10);
ctx3.drawImage(canvas2, 10, 10);
</script>
</body>
</html>

23
Chapter 13/ch13-canvas-lines.html
View File

@ -1,23 +0,0 @@
<html>
<head>
<style>
#canvas1 {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<script>
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
canvas.width = 100;
canvas.height = 100;
ctx.lineWidth = 2;
ctx.moveTo(0, 20);
ctx.lineTo(50, 100);
ctx.stroke();
</script>
</body>
</html>

34
Chapter 13/ch13-canvas-save-image.html
View File

@ -1,34 +0,0 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<input type="file" id="imgLoader" />
<br>
<canvas id="canvas"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let imgLoader = document.getElementById("imgLoader");
imgLoader.addEventListener("change", upImage, false);
function upImage() {
let fr = new FileReader();
fr.readAsDataURL(event.target.files[0]);
fr.onload = function (e) {
let img = new Image();
img.src = event.target.result;
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
console.log(fr);
};
}
</script>
</body>
</html>

38
Chapter 13/ch13-canvas-saving-image.html
View File

@ -1,38 +0,0 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<input type="color" id="squareColor" />
<br>
<img src="" width="200" height="200" id="holder" />
<input type="button" id="save" value="save" />
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;
let bgC = document.getElementById("squareColor");
bgC.addEventListener("change", function () {
color = event.target.value;
draw(color);
});
document.getElementById("save").addEventListener("click", function () {
let dataURL = canvas.toDataURL();
document.getElementById("holder").src = dataURL;
});
function draw(color) {
ctx.fillStyle = color;
ctx.fillRect(70, 70, 100, 100);
}
</script>
</body>
</html>

21
Chapter 13/ch13-canvas-text.html
View File

@ -1,21 +0,0 @@
<html>
<head>
<style>
#canvas1 {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<script>
let canvas = document.getElementById("canvas1");
let ctx = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;
ctx.font = "24px Arial";
let txt = "Hi canvas!";
ctx.fillText(txt, 10, 35);
</script>
</body>
</html>

20
Chapter 13/ch13-canvas.html
View File

@ -1,20 +0,0 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c1"></canvas>
<script>
let canvas = document.getElementById("c1");
let ctx = canvas.getContext("2d");
canvas.width = 500; //px
canvas.height = 500; //px
//ctx.fillStyle = "pink";
ctx.fillRect(20, 40, 100, 100);
</script>
</body>
</html>

23
Chapter 13/ch13-drawing-image.html
View File

@ -1,23 +0,0 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c1"></canvas>
<img id="flower" src="flower.jpg" />
<script>
window.onload = function () {
let canvas = document.getElementById("c1");
canvas.height = 300;
canvas.width = 300;
let ctx = canvas.getContext("2d");
let myImage = document.getElementById("flower");
ctx.drawImage(myImage, 10, 10);
};
</script>
</body>
</html>

15
Chapter 13/ch13-geo-getlocation.html
View File

@ -1,15 +0,0 @@
<html>
<body>
<script>
window.onload = init;
function init() {
navigator.geolocation.getCurrentPosition(showGeoPosition);
}
function showGeoPosition(data) {
console.dir(data);
}
</script>
</body>
</html>

11
Chapter 13/ch13-inspect-geo.html
View File

@ -1,11 +0,0 @@
<html>
<body>
<script>
window.onload = init;
function init() {
console.dir(navigator.geolocation);
}
</script>
</body>
</html>

14
Chapter 13/ch13-localstorage.html
View File

@ -1,14 +0,0 @@
<html>
<body>
<div id="stored"></div>
<script>
let message = "Hello storage!";
// localStorage.setItem("example", message);
if (localStorage.getItem("example")) {
document.getElementById("stored").innerHTML =
localStorage.getItem("example");
}
</script>
</body>
</html>

18
Chapter 13/ch13-media.html
View File

@ -1,18 +0,0 @@
<html>
<body>
<audio controls>
<source src="sound.ogg" type="audio/ogg" />
<source src="sound.mp3" type="audio/mpeg" />
</audio>
<video width="1024" height="576" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
</video>
<iframe
width="1024"
height="576"
src="https://www.youtube.com/embed/v6VTv7czb1Y"
>
</iframe>
</body>
</html>

17
Chapter 13/ch13-reading-file.html
View File

@ -1,17 +0,0 @@
<html>
<body>
<input type="file" onchange="uploadFile(this.files)" />
<div id="message"></div>
<script>
let message = document.getElementById("message");
function uploadFile(files) {
let fr = new FileReader();
fr.onload = function (e) {
message.innerHTML = e.target.result;
};
fr.readAsText(files[0]);
}
</script>
</body>
</html>

14
Chapter 13/ch13-upload-file.html
View File

@ -1,14 +0,0 @@
<html>
<body>
<input type="file" onchange="uploadFile(this.files)" />
<div id="message"></div>
<script>
let message = document.getElementById("message");
function uploadFile(files) {
console.log(files[0]);
message.innerText = files[0].name;
}
</script>
</body>
</html>

15
Chapter 13/ch13-upload-files.html
View File

@ -1,15 +0,0 @@
<html>
<body>
<input type="file" multiple onchange="uploadFile(this.files)" />
<div id="message"></div>
<script>
let message = document.getElementById("message");
function uploadFile(files) {
for (let i = 0; i < files.length; i++) {
message.innerHTML += files[i].name + "<br>";
}
}
</script>
</body>
</html>

6
Chapter 13/ch13.js
View File

@ -1,6 +0,0 @@
let varContainingFunction = function () {
let varInFunction = "I'm in a function.";
console.log("hi there!");
};
varContainingFunction();

7
Chapter 13/concurrency_chapter/eventloop-async.js
View File

@ -1,7 +0,0 @@
console.log("Hi there");
setTimeout(() => console.log("Sorry I'm late"), 1000);
console.log(add(4,5));
function add(x, y) {
return x + y;
}

6
Chapter 13/concurrency_chapter/eventloop-sync.js
View File

@ -1,6 +0,0 @@
console.log("Hi there");
add(4,5);
function add(x, y) {
return x + y;
}

101
Chapter 13/countdown timer
View File

@ -1,101 +0,0 @@
<!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>

91
Chapter 13/draw on canvas
View File

@ -1,91 +0,0 @@
<!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>

37
Chapter 13/ex1 Image Thumbnails
View File

@ -1,37 +0,0 @@
<!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 (ele) { myImg.src = ele.target.result; }; })(img);
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>

37
Chapter 13/ex1 Image preview
View File

@ -1,37 +0,0 @@
<!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 (ele) { myImg.src = ele.target.result; }; })(img);
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>

44
Chapter 13/matrix effect
View File

@ -1,44 +0,0 @@
<!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', '600');
canvas.setAttribute('height', '400');
document.body.prepend(canvas);
const textPos = Array(60).join(0).split('');
console.log(textPos);
function matrix() {
let output = '0';
ctx.fillStyle = 'rgba(0,0,0,.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'green';
textPos.map((posY, index) => {
output = String.fromCharCode(62 + Math.random() * 26);
console.log(output);
let posX = (index * 10) + 10;
ctx.fillText(output, posX, posY);
if (posY > 100 + Math.random() * 1000) {
textPos[index] = 0;
}
else {
textPos[index] = posY + 10;
}
})
}
setInterval(matrix, 50);
</script>
</body>
</html>

77
Chapter 13/task List
View File

@ -1,77 +0,0 @@
<!doctype html>
<html>
<head>
<title>JavaScript</title>
<style>
.ready {
background-color: #ddd;
color: red;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="main">
<input placeholder="New Item" value="test item" maxlength="30">
<button>Add</button>
</div>
<ul class="output">
</ul>
<script>
const userTask = document.querySelector('.main input');
const addBtn = document.querySelector('.main button');
const output = document.querySelector('.output');
const tasks = JSON.parse(localStorage.getItem('tasklist')) || [];
addBtn.addEventListener('click', createListItem);
if (tasks.length > 0) {
tasks.forEach((task) => {
genItem(task.val, task.checked);
})
}
function saveTasks() {
localStorage.setItem('tasklist', JSON.stringify(tasks));
}
function buildTasks() {
tasks.length = 0;
const curList = output.querySelectorAll('li');
curList.forEach((el) => {
const tempTask = {
val: el.textContent,
checked: false
};
if (el.classList.contains('ready')) {
tempTask.checked = true;
}
tasks.push(tempTask);
})
saveTasks();
}
function genItem(val, complete) {
const li = document.createElement('li');
const temp = document.createTextNode(val);
li.appendChild(temp);
output.append(li);
userTask.value = '';
if (complete) {
li.classList.add('ready');
}
li.addEventListener('click', (e) => {
li.classList.toggle('ready');
buildTasks();
})
return val;
}
function createListItem() {
const val = userTask.value;
if (val.length > 0) {
const myObj = {
val: genItem(val, false),
checked: false
};
tasks.push(myObj);
saveTasks();
}
}
</script>
</body>
</html>

22
Chapter 14/ch14-ajax.html
View File

@ -1,22 +0,0 @@
<html>
<head> </head>
<body>
<div id="content">
<h1>AJAX in action!</h1>
<button type="button" onclick="call()">Go go greek God!</button>
</div>
<script>
function call() {
let xhttp = new XMLHttpRequest();
let url = "some valid url";
xhttp.load = function () {
if (this.status == 200 && this.readyState == 4) {
document.getElementById("content").innerHTML = this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
</script>
</body>
</html>

13
Chapter 14/ch14-example-json.json
View File

@ -1,13 +0,0 @@
{
"name": "Malika",
"age": 50,
"profession": "programmer",
"languages": ["JavaScript", "C#", "Python"],
"address": {
"street": "Some street",
"number": 123,
"zipcode": "3850AA",
"city": "Utrecht",
"country": "The Netherlands"
}
}

10
Chapter 14/ch14-express.js
View File

@ -1,10 +0,0 @@
const express = require('express');
const app = express();
app.get('/', (request, response) => {
response.send('Hello Express!');
});
app.listen(3000, () => {
console.log('Express app at http://localhost:3000');
});

22
Chapter 14/ch14-jquery.html
View File

@ -1,22 +0,0 @@
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>Let's play a game!</p>
<p>Of hide and seek...</p>
<p class="easy">I'm easy to find!</p>
<button id="hidebutton">Great idea</button>
<button id="revealbutton">Found you!</button>
<script>
$(document).ready(function () {
$("#hidebutton").click(function () {
$("p").hide();
});
$("#revealbutton").click(function () {
$(".easy").show();
});
});
</script>
</body>
</html>

11
Chapter 14/ch14-node.js
View File

@ -1,11 +0,0 @@
const http = require('http');
http.createServer(function(req, res){
res.writeHead(200, {'Content-Type': 'text/html'}); //header status code
let name = 'maaike';
res.write(`Finally, hello ${name}`); //body
res.end();
}).listen(5000); //listen to port 8080
console.log('Listening on port 8080...');

18
Chapter 14/ch14-vue-component.html
View File

@ -1,18 +0,0 @@
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app">
<maaike></maaike>
</div>
<script>
Vue.component("maaike", {
template: "<p>Maaike says: good job!</p>",
});
new Vue({ el: "#app" });
</script>
</body>
</html>

23
Chapter 14/ch14-vue.html
View File

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app">
<p v-if="!hide">
Let's play hide and seek. <br />
Go to the console and type: <br />
obj._data.hide = true <br />
</p>
</div>
<script>
var obj = new Vue({
el: "#app",
data: {
hide: false,
},
});
</script>
</body>
</html>

24
Chapter 14/exampled3.html
View File

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
svg {
background-color: lightgrey;
}
</style>
</head>
<body>
<svg id="drawing-area" height=100 width=500></svg>
<script>
let svg = d3.select("#drawing-area");
svg.append("circle")
.attr("cx", 100).attr("cy", 50).attr("r", 20).style("fill", "pink");
svg.append("circle")
.attr("cx", 200).attr("cy", 20).attr("r", 20).style("fill", "black");
svg.append("circle")
.attr("cx", 300).attr("cy", 70).attr("r", 20).style("fill", "grey");
</script>
</body>
</html>

20
Chapter 14/examplereact.html
View File

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script>
let p = React.createElement("p", null, "Hi Emile, what's up?");
ReactDOM.render(
p,
document.getElementById("root")
);
</script>
</body>
</html>

15
Chapter 14/exampleunderscore.html
View File

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js
"></script>
</head>
<body>
<script>
_.each([1, 2, 3], alert);
</script>
</body>
</html>

79
chapter 13/task List
View File

@ -1,79 +0,0 @@
<!doctype html>
<html>
<head>
<title>JavaScript</title>
<style>
.ready {
background-color: #ddd;
color: red;
text-decoration: line-through ;
}
</style>
</head>
<body>
<div class="main">
<input placeholder="New Item" value="test item" maxlength="30">
<button>Add</button>
</div>
<ul class="output">
</ul>
<script>
const userTask = document.querySelector('.main input');
const addBtn = document.querySelector('.main button');
const output = document.querySelector('.output');
const tasks = JSON.parse(localStorage.getItem('tasklist')) || [];
addBtn.addEventListener('click', createListItem);
if (tasks.length > 0) {
tasks.forEach((task) => {
genItem(task.val, task.checked);
})
}
function saveTasks() {
localStorage.setItem('tasklist', JSON.stringify(tasks));
}
function buildTasks() {
tasks.length = 0;
const curList = output.querySelectorAll('li');
curList.forEach((el) => {
const tempTask = {
val: el.textContent,
checked: false
};
if (el.classList.contains('ready')) {
tempTask.checked = true;
}
tasks.push(tempTask);
})
saveTasks();
}
function genItem(val, complete) {
const li = document.createElement('li');
const temp = document.createTextNode(val);
li.appendChild(temp);
output.append(li);
userTask.value = '';
if (complete) {
li.classList.add('ready');
}
li.addEventListener('click', (e) => {
li.classList.toggle('ready');
buildTasks();
})
return val;
}
function createListItem() {
const val = userTask.value;
if (val.length > 0) {
const myObj = {
val: genItem(val, false),
checked: false
};
tasks.push(myObj);
saveTasks();
buildTasks();
}
}
</script>
</body>
</html>