In this video, you will learn what is the key difference between innertext and textcontent property in javascript. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div> Hello World <span>This is hidden</span> </div> <button>Click Here</button> <script src="script.js"></script> </body> </html> document.querySelector('button').addEventListener('click', ()=>{ const result
This is another challenge in Javascript where you have to make use of LocalStorage api. Please do checkout my previous video about localStorage to learn more about it. window.addEventListener('load', showAll); function setStorage(){ const name = document.querySelector('#name').value; const age = document.querySelector('#age').value; localStorage.setItem(name, age); showAll(); } function showAll(){ document.querySelector('ol').innerHTML = ''; const keys = Object.keys(localStorage); keys.forEach(name =>{
A quick video tutorial about local storage api in Javascript. I hope you will like it. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <input type="text" placeholder="key" id="storageKey"> <input type="text" placeholder="value" id="storageValue"> <button onclick="setStorage()">Submit</button> <button onclick="removeStorage()">Remove</button> </div> <script src="script.js"></script> </body> </html>
In this video tutorial, you will learn how to use Geolocation api in javascript. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button onclick="getGeoLocation()">Find My Location</button> <br><br> <div style="display:none;"> <a href="#">Click Here</a> </div> <script src="script.js"></script> </body> </html>
This is another challenge for you guys. Its pretty simple and easy to achieve. Please try it on your own first, then watch whole video. const fruits = ['Apple', 'Orange', 'Mango', 'Watermelon', 'Kiwi', 'Banana', 'Grapes']; document.getElementById('search').addEventListener('input', (e)=>{ let fruitsArray = ; if(e.target.value){ fruitsArray = fruits.filter(fruit => fruit.toLowerCase().includes(e.target.value)); fruitsArray = fruitsArray.map(fruit => `<li>${fruit}</li>`) } showFruitsArray(fruitsArray); });
