Oladunni Faith

Hello anyone? I'm trying to create a todo with my DOM knowledge of Javascript but I've been stuck because the forEach array creates element for each task more than once. Any help or suggestion on how to stop this would be much appreciated. Also I'm trying to implement saving selected state to local storage. any advice on how to go on this would be much appreciated. 'use-strict' window.addEventListener('load', () => { let localStorageKey = 'task.lists'; let tasks = JSON.parse(localStorage.getItem(localStorageKey)) || []; let selectedState = 'selected.list'; let selectedList = localStorage.getItem(selectedState); const form = document.querySelector('#head'); const input = document.querySelector('#text'); const container1 = document.querySelector('#item1'); const container2 = document.querySelector('#item2'); const container3 = document.querySelector('#item3'); form.addEventListener('submit', (e) => { e.preventDefault(); let todo = input.value; e.target.reset(); if (todo === null || '') { return alert('please Fill Out Task'); } else { let todoList = listItem(todo); tasks.push(todoList); console.log(todoList); console.log(todo); createAndSave(); tasks.forEach((task, i) => { let P1 = document.createElement('p'); container1.appendChild(P1); P1.innerText = task.name; let p2 = document.createElement('p'); container2.appendChild(p2); p2.innerText = 'Incomplete'; let actionContainer = document.createElement('div'); actionContainer.classList.add('button-container'); container3.appendChild(actionContainer); let button1 = document.createElement('button'); button1.setAttribute('id', 'button1'); actionContainer.appendChild(button1); let span1 = document.createElement('span'); span1.classList.add('material-symbols-outlined'); span1.innerText = 'done'; button1.appendChild(span1); let button2 = document.createElement('button'); button2.setAttribute('id', 'button2'); actionContainer.appendChild(button2); let span2 = document.createElement('span'); span2.classList.add('material-symbols-outlined'); span2.innerText = 'delete'; button2.appendChild(span2); button1.addEventListener('click', () => { P1.style.color = 'grey'; p2.style.color = 'green'; p2.innerText = 'COMPLETED' button1.style.color = 'white'; button1.style.backgroundColor = 'transparent'; }) button2.addEventListener('click', function () { deleteItem(); P1.remove(); p2.remove(); button1.remove(); button2.remove() }) }) return; } function createAndSave() { //createTask(); savePage(); } function savePage() { localStorage.setItem(localStorageKey, JSON.stringify(tasks)); localStorage.setItem(selectedState, JSON.stringify(selectedList)); } function deleteItem() { tasks.forEach(function (task, i) { tasks.splice(task[i], 1); localStorage.setItem(localStorageKey, JSON.stringify(tasks)) }) } function listItem(name) { return { id: Date.now().toString(), name: name, tasks: [] } } }) })

Ohh both conditions needed to be true for it to work, but since the || operator makes only one condition true, the loop doesn't stop. Thank You so much! ❤️

I tried to implement a rule that quits the operation on a todo project when I type 'q' or 'quit' in a while loop but it wont work with the logical OR operator || but works fine with the logical && operator. Can someone please Explain why as I'm new to Javascript and it was a code-along group project. Code Below 👇 let message = prompt('Enter q or quit to quit this process!'); while (message !== 'q' || message !== 'quit'){ prompt('Please Enter quit or q to quit this operation!'); } alert('You quit the operation!'); It just continues the loop even when I type q or quit with my keyboard. I know the rules guiding the use of logical (&&) and (||) in a statement but this is a bit complicated for me to understand is why I'm here asking.... I'd really appreciate a very simple explanation to ease my understanding.

Ohh... Ok thanks

Hello anyone, so today I created an html page layout and styled it with CSS, Everything seems to be working well except the background image won't display when I send the HTML file to my Phone. Tried searching answers elsewhere but to no avail..... can someone please help on this? Here's the code I used: .head{ background-color: #817c7c; background: url(testube.png) no-repeat left, url(testing.png) no-repeat right; width: 100vw; height: 30vh; overflow: hidden; position: relative; margin: 0; padding: 0; } .body{ font-family: Arial, Helvetica, sans-serif; background-color: darkgray; background: url(microscope.png) center/cover no-repeat; font-size: medium; width: 100vw; height: 50vw; padding: 5px; margin: 0; overflow: auto; position: relative; } .foot{ width: 100vw; height: 10vh; background-color: #817c7c; background: url(plain.jpg) center/cover repeat; text-align: center; overflow: hidden; margin: 0; padding: 0; }

Ok thanks... I'd look into this..... Haven't studied media queries yet.... Just trying things

I've tried sending a screenshot from my computer but the file seems too large to be uploaded. Yes it stands alone at full screen but it obeys same rule at 900px when @400px

yes each links texts should be standing on its own @400px instead of floating side by side to each other. LIKE THIS: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive

Rule as in? I can't find any problem related with the <li> rules. Each texts on the link should stand on its own @400px. Please take a look at this https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive

Good day Anyone? I was practicing Navigation bars in w3school tutorial earlier today and came across media query. My intention was to just try it the same way it was written on the tutorial platform since I haven't gotten to the topic yet. The first one @900px worked well, the second @400px doesn't seem to work. please can someone help me on this? As I've been trying to find this bug but can't. Also tried making it sticky and it worked. HERE'S THE CODE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sidenav</title> <style> body{ margin: 0; background-color: black; color: white; } h1{ color: darkred; text-align: center; font-weight: bold; font-style: italic; } h3{ color: darkred; text-align: left; font-weight: bold; font-style: italic; } ul.sidenav{ margin: 0; padding: 0; list-style-type: none; background-color: darkgray; overflow: auto; width: 30%; height: 100%; position: fixed; } ul.sidenav li a{ text-decoration: none; color: black; padding: 15px; display: block; } ul.sidenav li a.active{ background-color: dodgerblue; color: white; } ul.sidenav li a:hover:not(.active){ background-color: dodgerblue; color: white; } .content{ margin-left: 30%; height: 1000px; padding: 15px; } @media screen and (max-width: 900px){ ul.sidenav{ width: 100%; height: auto; position: relative; } ul.sidenav li a{ float: left; padding: 15px; } .content{ margin-left: 0; } } @media screen and (max-width: 400px){ ul.sidenav li a{ text-align: center; float: none; } } </style> </head> <body> <span> <ul class="sidenav"> <li> <a href="#home">HOMEPAGE</a> </li> <li> <a class="active" href="blogs">OUR BLOGS</a> </li> <li> <a href="customerservices">OUR CUSTOMER SERVICES</a> </li> <li> <a href="#tour">TAKE A TOUR</a> </li> <li> <a href="#booknow">BOOK A FLIGHT NOW</a> </li> <li> <a href="#contactus">CONTACT US</a> </li> </ul> </span> <div class="content"> <h1>My Responsive Sidenav Practice</h1> <p>This practice use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p> <p>I have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p> <p>I hope to learn more about media queries and responsive web design later in my CSS Tutorial journey.</p> <h3>Resize the browser window to see the effect.</h3> </div> </body> </html>

Ohh.... Now I get it..... Thanks so much

This also worked too... thanks. But why doesn't it work without the */* symbol? I also tried the left/cover and it gave same result as center/cover.... lol COULD THIS BE GENERALLY A CSS RELATED ISSUE?

could have posted the result but it seems the file was too large, so it couldn't be uploaded

ok thanks for the tips..... but same image shows without the *cover command* it also works by setting percentage as well.

I"m new to the world of coding and recently just started learning Css so i tried practicing css shorthand with the aim of making the background image cover the entire screen but it isn't working..... can someone please help me on this?