10 JavaScript Projects – Laurence Svekis
Get the Full Modern Web Development Course at https://www.udemy.com/course/modern-web-design/
requestAnimationFrame and cancelAnimationFrame Code Sample
<!doctype html><html>
<head>
<title>Questions and Answers JavaScript</title>
</head>
<body>
<div class=”top”>
<div class=”nested1″>Nested 1</div>
<div class=”nested2″>Nested 2</div>
<div class=”nested3″>Nested 3</div>
</div>
<script>
let tog = true;
const div = document.createElement(‘div’);
div.textContent = “hello”;
div.style.color = “red”;
div.style.position = “absolute”;
div.style.left = ’50px’;
div.x = 50;
div.addEventListener(‘click’, stopper);
const topEle = document.querySelector(‘.top’);
topEle.append(div);
let myAni = requestAnimationFrame(mover);
function stopper() {
if (tog) {
cancelAnimationFrame(myAni);
tog = false;
}
else {
tog = true;
myAni = requestAnimationFrame(mover);
}
}
function mover() {
div.x = div.x + 1;
div.style.left = div.x + ‘px’;
myAni = requestAnimationFrame(mover);
}
</script>
</body>
</html>
JavaScript Switch Statement
<!doctype html>
<html>
<head>
<title>Questions and Answers JavaScript</title>
</head>
<body>
<div class=”top”>
<div class=”nested1″>Nested 1</div>
<div class=”nested2″>Nested 2</div>
<div class=”nested3″>Nested 3</div>
</div>
<div class=”message”>What time is it</div>
<input type=”text”>
<button>Click</button>
<script>
const btn = document.querySelector(‘button’);
const answer = document.querySelector(‘input’);
const message = document.querySelector(‘.message’);
btn.addEventListener(‘click’, function () {
console.log(answer.value);
//let ans = Number(answer.value);
let ans = parseInt(answer.value);
//console.log(typeof(answer.value));
console.log(typeof (ans));
console.log(ans);
if (!Number(ans)) {
console.log(‘not a number’);
}
else {
console.log(‘Okay’);
message.textContent = checkTimeofDay(ans);
}
})
outputToday();
function outputToday() {
const today = new Date().getDay();
let dayName = ‘Unknown’;
let weekStatus = ‘Unknown’;
switch (today) {
case 0:
dayName = “Sunday”;
break;
case 1:
dayName = “Monday”;
break;
case 2:
dayName = “Tuesday”;
break;
case 3:
dayName = “Wednesday”;
break;
case 4:
dayName = “Thursday”;
break;
case 5:
dayName = “Friday”;
break;
case 6:
dayName = “Saturday”;
break;
}
switch (dayName) {
case “Thursday”:
case “Friday”:
case “Saturday”:
weekStatus = “end of Week”;
break;
default:
weekStatus = “Start of Week”;
}
console.log(today);
message.textContent = `Today is a ${dayName} its the ${weekStatus}`;
}
function checkTimeofDay(num) {
switch (num < 12) {
case true:
return ‘Good Morning’;
break;
case false:
return ‘Good Afternoon’;
break;
default:
return ‘something went wrong’
}
}
</script>
</body>
</html>
Example of using Continue and Break in For loop and While Loop
<!doctype html>
<html>
<head>
<title>Questions and Answers JavaScript</title>
</head>
<body>
<div class=”top”>
<div class=”nested1″>Nested 1</div>
<div class=”nested2″>Nested 2</div>
<div class=”nested3″>Nested 3</div>
</div>
<div class=”message”>What time is it</div>
<input type=”text”>
<button>Click</button>
<script>
for (let i = 0; i < 10; i++) {
if (i === 3) {
continue;
}
if (i === 8) {
break;
}
console.log(i);
}
let x = 0;
while (x < 10) {
//if(x===3){continue;}
if (x === 8) {
break;
}
//console.log(x);
x++;
}
//console.log(x);
</script>
</body>
</html>
Keyboard Event Listeners – Dynamically Add Page Elements input and divs
<!doctype html><html>
<head>
<title>Questions and Answers JavaScript</title>
</head>
<body>
<script>
const output = document.createElement(‘div’);
const message = document.createElement(‘div’);
const btn = document.createElement(‘button’);
document.body.append(output);
output.append(message);
output.append(btn);
btn.textContent = “Click to add input”;
btn.style.backgroundColor = ‘red’;
btn.style.color = ‘white’;
btn.style.padding = ’10px’;
btn.addEventListener(‘click’, maker)
function maker() {
const tempDiv = document.createElement(‘div’);
const newInput = document.createElement(‘input’);
output.append(tempDiv);
tempDiv.append(newInput);
newInput.value = ‘test’;
newInput.hiddenValue = Math.random().toString(16).substr(-6);
newInput.style.backgroundColor = ‘#’ + newInput.hiddenValue;
newInput.focus();
newInput.addEventListener(‘keyup’, log);
newInput.addEventListener(‘keypress’, log);
newInput.addEventListener(‘keydown’, function (e) {
console.log(e.keyCode);
if (e.keyCode == 13) {
message.innerHTML += `<div style=”background:#${newInput.hiddenValue}”>${newInput.value}</div>`;
}
});
}
function log(event) {
console.log(event);
}
</script>
</body>
</html>
Create Page Elements add Dynamically on the Page
<!doctype html><html>
<head>
<title>Questions and Answers JavaScript</title>
</head>
<body>
<script>
const btn = document.createElement(‘button’);
const output = document.createElement(‘div’);
const message = document.createElement(‘div’);
btn.textContent = “Click Me!”;
message.textContent = “Hello World”;
document.body.append(output);
output.append(message);
output.append(btn);
btn.addEventListener(‘click’, () => {
const today = new Date();
message.textContent = `${today.getHours()} ${today.getMinutes()} ${today.getSeconds()}`;
})
</script>
</body>
</html>
Pure JavaScript Dice – Create Elements and Build HTML for Dice
<!doctype html><html>
<head>
<title>Questions and Answers JavaScript</title>
</head>
<body>
<script>
const diceView = [[5], [1, 9], [1, 5, 9], [1, 3, 7, 9], [1, 3, 5, 7, 9], [1, 3, 4, 6, 7, 9]];
const btn = document.createElement(‘button’);
btn.textContent = “Roll Dice”;
const playArea = document.createElement(‘div’);
document.body.prepend(playArea);
playArea.append(btn);
const area1 = document.createElement(‘div’);
const area2 = document.createElement(‘div’);
const container = document.createElement(‘div’);
playArea.append(container);
container.append(area1);
container.append(area2);
area1.textContent = “first Dice”;
area2.textContent = “second Dice”;
addBorders(area1);
addBorders(area2);
btn.addEventListener(‘click’, () => {
rollValue();
console.log(area1.val);
console.log(area2.val);
})
function genDice(val) {
let html = ‘<div>’;
let tempArr = diceView[val];
console.log(tempArr);
for (let x = 1; x < 10; x++) {
let tempVal = ‘white’;
if (tempArr.includes(x)) {
tempVal = ‘black’;
}
html += `<span style=”width:90px;display:inline-block;height:90px;border-radius:20px;background-color:${tempVal};margin:2px;”></span>`;
}
html += ‘</div>’;
return html;
}
function rollValue() {
area1.val = Math.floor(Math.random() * 6);
area2.val = Math.floor(Math.random() * 6);
area1.innerHTML = genDice(area1.val);
area2.innerHTML = genDice(area2.val);
}
function addBorders(el) {
el.style.border = ‘1px solid #ddd’;
el.style.borderRadius = “10px”;
el.style.padding = ’10px’;
el.style.fontSize = ‘1.5em’;
el.style.width = ‘290px’;
el.style.height = ‘290px’;
el.style.margin = ’10px’;
el.style.backgroundColor = ‘white’;
//el.style.width = ‘40%’;
el.style.float = ‘left’;
//el.style.height = el.offsetWidth+’px’;
}
</script>
</body>
</html>
Create a JavaScript popup Modal
<!doctype html><!doctype html>
<html>
<head>
<title>Course</title>
<style>
.modal {
position: fixed;
z-index: 5;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.3);
display: none;
}
.modal-body {
background-color: white;
margin: 20% auto;
padding: 20px;
border: 1px solid #333;
border-radius: 25px;
width: 70%;
min-height: 200px;
}
.close {
float: right;
color: red;
font-size: 2em;
font-weight: bold;
}
.close:hover {
color: black;
cursor: pointer;
}
</style>
</head>
<body>
<button class=’modal1′>Open 1</button>
<button class=’modal1′>Open 2</button>
<div class=”modal” id=”main”>
<div class=”modal-body”> <span class=”close”>×</span>
<div class=”modal-text”>Modal Text
<br> test </div>
</div>
</div>
<script>
const btns = document.querySelectorAll(‘.modal1’);
const output = document.querySelector(‘.modal-text’);
btns.forEach((btn) => {
btn.addEventListener(‘click’, (e) => {
myModal.style.display = ‘block’;
console.log(e.target.textContent);
let val = e.target.textContent;
let html = “”;
switch (val) {
case ‘Open 1’:
html = ‘Number one is open <h1>ONE</h1>’;
break;
case ‘Open 2’:
html = ‘<h1>TWO</h1>’;
break;
default:
html = ‘<h1>ERROR</h1>’;
}
output.innerHTML = html;
})
})
const closer = document.querySelector(‘.close’);
const myModal = document.querySelector(‘#main’);
closer.addEventListener(‘click’, closeModal);
myModal.addEventListener(‘click’, closeModal);
function closeModal() {
myModal.style.display = ‘none’;
}
</script>
</body>
</html>
JavaScript Request Animation Frame Simple Counter
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<h1>Hello World</h1>
<script>
const output = document.querySelector(‘h1’);
output.textContent = ‘Counter’;
let reqVal = requestAnimationFrame(step);
let start;
function step(cnt) {
console.log(cnt);
if (start == undefined) {
start = cnt;
}
const val = Math.floor(cnt – start);
const str = String(val);
console.log(str[0]);
const mil = str.slice(1, 4);
console.log(mil);
console.log(val);
output.textContent = `${str[0]} : ${mil}`;
if (val < 5000) {
reqVal = requestAnimationFrame(step);
}
}
</script>
</body>
</html>
QuerySelector adding elements dynamically to page use of NodeList
<!doctype html>
<html>
<head>
<title>Example querySelectorAll</title>
</head>
<body>
<ul></ul>
<input type=”text” name=”myInput” value=”test”>
<button>Click Me to add item</button>
<script>
const ul = document.querySelector(‘ul’);
const li = document.querySelectorAll(‘li’);
const myInput = document.querySelector(‘input[name=”myInput”]’);
const btn = document.querySelector(‘button’);
let x = 0;
let val = myInput.value;
btn.addEventListener(‘click’, (e) => {
//console.log(e);
x++;
e.target.textContent = ‘Clicked ‘ + x;
addListItem();
})
function addListItem() {
//console.log(myInput.value);
//console.log(val);
console.dir(ul);
console.log(ul.children.length);
console.log(ul.childElementCount);
const lis = document.querySelectorAll(‘li’);
//console.log(lis.length);
if (myInput.value.length > 3 && lis.length < 5) {
const li = document.createElement(‘li’);
li.textContent = myInput.value;
const val1 = ul.appendChild(li);
//console.log(val1);
}
}
</script>
</body>
</html>
Adding Event Listeners to All Matching Elements on Page – Dynamically adding
<!doctype html>
<html>
<head>
<title>Example querySelectorAll Click</title>
<style>
.active {
color: blue;
}
</style>
</head>
<body>
<h1>Hello</h1>
<ul class=”myList”>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<script>
const ul = document.querySelector(‘ul.myList’);
const lis = ul.querySelectorAll(‘li’);
const btn = document.createElement(‘button’);
let counter = lis.length;
btn.textContent = ‘Click Me’;
document.body.append(btn);
btn.addEventListener(‘click’, (e) => {
counter++;
const li = document.createElement(‘li’);
li.acter = 0;
li.textContent = `Value (${counter}) ${li.acter} – `;
li.addEventListener(‘click’, updateItem);
ul.append(li);
})
lis.forEach((li) => {
console.log(li);
li.acter = 0;
li.addEventListener(‘click’, updateItem);
})
function updateItem(e) {
const ele = e.target;
console.dir(ele);
ele.acter++;
console.log(ele.acter);
let temp = ele.textContent;
ele.textContent = `${temp} ${ele.acter}`;
ele.classList.toggle(‘active’);
console.log(ele.classList.contains(‘active’));
}
</script>
</body>
</html>
