Category: JavaScript Questions
<!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 = document.querySelector('div').textContent; console.log(result); }); div { width: 100%; background-color: maroon; text-align: center; padding: 10px; margin-bottom: 15px;
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 =>{
<!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>
<!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>
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); }); function showFruitsArray(fruitsArray){ const html = !fruitsArray.length ? '' : fruitsArray.join(''); document.querySelector('ul').innerHTML = html; }
