#Order food app problem, image and buttons

14 messages · Page 1 of 1 (latest)

spare mist
#

Hello!
I am working on my order food app and I been having problem with the complete order button and the modal and now even the header image has disappeared! Here is my project https://scrimba.com/scrim/ck2r68tv
The problem is that the modal is showing even though it is display:none, I want it to appear when the button complete order is clicked! And the complete order button wont work I have added an addeventlistener and wrote a console.log() to see if it works but nothing happens! I don´t know what I´m doing wrong!

Need some help please!

image.png image.png
dense spade
#

Hello. For the header issue, the header is present and is being displayed, but you just can't see everything there. So look at how CSS is specifying the image for that element, and compare that to where in your project that image is actually located. Spoiler: ||The CSS rule for the header background image is specifying a path of image/header-img.png, but the header-img.png file is actually in the root of the project, not in the image folder.||

#

For the modal issue, look at how your CSS is controlling the modal element, then check the modal in the HTML file to see how you've "tagged" it to be controlled by CSS. Spoiler: ||The CSS rule is using .modal-form for the modal element, but in the HTML, the element class name is specified as modalform.||

spare mist
#

@dense spade OMG!!! 10000000 thank you, I got blind! I didn´t see that! Even though I looked at this problem a 10000000000 times! And the header I must have moved it from the folder, cause I moved it back and its now working!
thank you!
I still have problems that when I click the complete order button the modal doesnt appear completeOrderBtn?.addEventListener("click", function() {
/* modal.style.display = "inline" */
console.log('click')
})

dense spade
#

Fantastic! Feel free to react with a purple heart emoji 💜 to any post in this Discord that you find helpful. It gives the poster positive karma points!

spare mist
#

Yes I will but I still have problems with the complete order button that the modal dont show

dense spade
#

The issue with getting the "Complete order" button working is somewhat more complicated, but I will let you work on it for a while. Here's a hint, though: when your code does document.querySelector(...) or document.getElementById(...) (or any other DOM queries), the element that you are trying to locate with that call must be in the DOM at the time of the query. If the element isn't (yet) in the DOM, the query can not find it.

spare mist
#

ok so it has to be in HTML ? it cant be where I have it now?

dense spade
#

There are usually different ways to solve an issue like this. Moving it to the HTML (so you know it's always in the DOM) is one approach. Leaving it where it currently is and running the code to add the event listener after it's been added to the DOM is another approach. So it's kind of up to you to decide how you want to approach solving the problem.

#

Maybe moving it to the HTML makes more sense in this case? This will require some restructuring of the HTML in the orders section, and some refactoring of the JS code in consideration of the restructuring. Hopefully this makes sense? Based on what you've done so far, I think you can do this change!

spare mist
#

I tryed to solve it like this else if(e.target.dataset.completeorder){
console.log(e.target.dataset.completeorder)
modal.style.display = "block"
console.log(modal)
}
In the console log I can see the
HTML code :
2
›completeorder
›<div class="modal-form" id="modal-form" style="display: block;">

#

But I cant see it on the screen

dense spade
#

Just looked at your current scrim, and the issue now is that when you edited the HTML earlier, it looks like a closing </div> tag was commented out around line 28. So just make sure that the <div class="order" id="order"> on line 24 has a proper closing tag, and I think things should start working.