10 JavaScript Projects Full Source Code PDF Download

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”>&times;</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>

Related Posts

Leave a Reply

%d bloggers like this: