Scribd
Upload
101 views22 pages

JavaScript Projects with Source Code

The document contains multiple JavaScript project examples by Laurence Svekis, showcasing various concepts such as animations, switch statements, event listeners, and dynamic HTML element creation. Each project includes HTML and JavaScript code snippets that demonstrate practical applications of these concepts. The projects are aimed at enhancing understanding of JavaScript for web development.

Uploaded by

KS Ayana
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
101 views22 pages

JavaScript Projects with Source Code

The document contains multiple JavaScript project examples by Laurence Svekis, showcasing various concepts such as animations, switch statements, event listeners, and dynamic HTML element creation. Each project includes HTML and JavaScript code snippets that demonstrate practical applications of these concepts. The projects are aimed at enhancing understanding of JavaScript for web development.

Uploaded by

KS Ayana
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

10 JavaScript Projects - Laurence

Svekis
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 = [Link]('div');
[Link] = "hello";
[Link] = "red";
[Link] = "absolute";
[Link] = '50px';
div.x = 50;
Code by Laurence Svekis - JavaScript Course [Link]
Get the Full Modern Web Development Course at
[Link]
[Link]('click', stopper);
const topEle = [Link]('.top');
[Link](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;
[Link] = div.x + 'px';
myAni = requestAnimationFrame(mover);
}
</script>
</body>

</html>

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
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 = [Link]('button');
const answer = [Link]('input');
const message = [Link]('.message');
[Link]('click', function () {
[Link]([Link]);
//let ans = Number([Link]);
let ans = parseInt([Link]);
//[Link](typeof([Link]));
[Link](typeof (ans));
[Link](ans);
Code by Laurence Svekis - JavaScript Course [Link]
Get the Full Modern Web Development Course at
[Link]
if (!Number(ans)) {
[Link]('not a number');
}
else {
[Link]('Okay');
[Link] = 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:

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
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";
}
[Link](today);
[Link] = `Today is a ${dayName} its the
${weekStatus}`;
}

function checkTimeofDay(num) {
switch (num < 12) {
case true:
return 'Good Morning';
break;

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
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>
Code by Laurence Svekis - JavaScript Course [Link]
Get the Full Modern Web Development Course at
[Link]
</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;
}
[Link](i);
}
let x = 0;
while (x < 10) {
//if(x===3){continue;}
if (x === 8) {
break;
}
//[Link](x);
x++;
}
//[Link](x);
</script>
</body>

</html>

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
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 = [Link]('div');
const message = [Link]('div');
const btn = [Link]('button');
[Link](output);
[Link](message);
[Link](btn);
[Link] = "Click to add input";
[Link] = 'red';
[Link] = 'white';
[Link] = '10px';
[Link]('click', maker)

function maker() {
const tempDiv = [Link]('div');
const newInput = [Link]('input');
Code by Laurence Svekis - JavaScript Course [Link]
Get the Full Modern Web Development Course at
[Link]
[Link](tempDiv);
[Link](newInput);
[Link] = 'test';
[Link] =
[Link]().toString(16).substr(-6);
[Link] = '#' +
[Link];
[Link]();
[Link]('keyup', log);
[Link]('keypress', log);
[Link]('keydown', function (e) {
[Link]([Link]);
if ([Link] == 13) {
[Link] += `<div
style="background:#${[Link]}">${[Link]}</d
iv>`;
}
});
}

function log(event) {
[Link](event);
}
</script>
</body>

</html>

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
Create Page Elements add Dynamically
on the Page
<!doctype html><html>

<head>
<title>Questions and Answers JavaScript</title>
</head>

<body>
<script>
const btn = [Link]('button');
const output = [Link]('div');
const message = [Link]('div');
[Link] = "Click Me!";
[Link] = "Hello World";
[Link](output);
[Link](message);
[Link](btn);
[Link]('click', () => {
const today = new Date();
[Link] = `${[Link]()}
${[Link]()} ${[Link]()}`;
})
</script>
</body>

</html>

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
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 = [Link]('button');
[Link] = "Roll Dice";
const playArea = [Link]('div');
[Link](playArea);
[Link](btn);
const area1 = [Link]('div');
const area2 = [Link]('div');
const container = [Link]('div');
[Link](container);
[Link](area1);
[Link](area2);
[Link] = "first Dice";
[Link] = "second Dice";
addBorders(area1);
Code by Laurence Svekis - JavaScript Course [Link]
Get the Full Modern Web Development Course at
[Link]
addBorders(area2);
[Link]('click', () => {
rollValue();
[Link]([Link]);
[Link]([Link]);
})

function genDice(val) {
let html = '<div>';
let tempArr = diceView[val];
[Link](tempArr);
for (let x = 1; x < 10; x++) {
let tempVal = 'white';
if ([Link](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() {
[Link] = [Link]([Link]() * 6);
[Link] = [Link]([Link]() * 6);
[Link] = genDice([Link]);

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
[Link] = genDice([Link]);
}

function addBorders(el) {
[Link] = '1px solid #ddd';
[Link] = "10px";
[Link] = '10px';
[Link] = '1.5em';
[Link] = '290px';
[Link] = '290px';
[Link] = '10px';
[Link] = 'white';
//[Link] = '40%';
[Link] = 'left';
//[Link] = [Link]+'px';
}
</script>
</body>

</html>

Create a JavaScript popup Modal


<!doctype html><!doctype html>
<html>

<head>
<title>Course</title>
Code by Laurence Svekis - JavaScript Course [Link]
Get the Full Modern Web Development Course at
[Link]
<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;

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
}

.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">&times;</span>
<div class="modal-text">Modal Text
<br> test </div>
</div>
</div>
<script>
const btns = [Link]('.modal1');
const output = [Link]('.modal-text');
[Link]((btn) => {
[Link]('click', (e) => {
[Link] = 'block';
[Link]([Link]);
let val = [Link];
let html = "";
switch (val) {

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
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>';
}
[Link] = html;
})
})
const closer = [Link]('.close');
const myModal = [Link]('#main');
[Link]('click', closeModal);
[Link]('click', closeModal);

function closeModal() {
[Link] = 'none';
}
</script>
</body>

</html>

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
JavaScript Request Animation Frame
Simple Counter
<!DOCTYPE html>
<html>

<head>
<title>test</title>
</head>

<body>
<h1>Hello World</h1>
<script>
const output = [Link]('h1');
[Link] = 'Counter';
let reqVal = requestAnimationFrame(step);
let start;

function step(cnt) {
[Link](cnt);
if (start == undefined) {
start = cnt;
}
const val = [Link](cnt - start);
const str = String(val);
[Link](str[0]);
const mil = [Link](1, 4);
[Link](mil);

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
[Link](val);
[Link] = `${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 = [Link]('ul');
Code by Laurence Svekis - JavaScript Course [Link]
Get the Full Modern Web Development Course at
[Link]
const li = [Link]('li');

const myInput =
[Link]('input[name="myInput"]');
const btn = [Link]('button');
let x = 0;
let val = [Link];
[Link]('click', (e) => {
//[Link](e);
x++;
[Link] = 'Clicked ' + x;
addListItem();
})

function addListItem() {

//[Link]([Link]);
//[Link](val);
[Link](ul);
[Link]([Link]);
[Link]([Link]);
const lis = [Link]('li');
//[Link]([Link]);

if ([Link] > 3 && [Link] < 5) {


const li = [Link]('li');
[Link] = [Link];
const val1 = [Link](li);

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
//[Link](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">
Code by Laurence Svekis - JavaScript Course [Link]
Get the Full Modern Web Development Course at
[Link]
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

<script>
const ul = [Link]('[Link]');
const lis = [Link]('li');
const btn = [Link]('button');
let counter = [Link];
[Link] = 'Click Me';
[Link](btn);
[Link]('click', (e) => {
counter++;
const li = [Link]('li');
[Link] = 0;
[Link] = `Value (${counter}) ${[Link]} - `;
[Link]('click', updateItem);
[Link](li);
})

[Link]((li) => {
[Link](li);
[Link] = 0;
[Link]('click', updateItem);
})

function updateItem(e) {

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]
const ele = [Link];
[Link](ele);
[Link]++;
[Link]([Link]);
let temp = [Link];
[Link] = `${temp} ${[Link]}`;
[Link]('active');
[Link]([Link]('active'));

}
</script>
</body>

</html>

Code by Laurence Svekis - JavaScript Course [Link]


Get the Full Modern Web Development Course at
[Link]

You might also like