Project completed. If you have some spare time to check it I will really appreciate it! CSS and HTML should be alright. All I need here is JS. I'm not sure if its all good so please write me any complaint you can see about my code! Thanks a lot!
Hi @Davee89 Great Code !
You just need to add some validations for input fields , for example:
min="0" attribute to the input element).This is my Solution To this challenge, a review is really appreciated.
Happy Coding
Hey!! if you are checking repo please check the style.css file, my media query is not working, Please help me if u can . Thenks!
Hi @Bingolast Congratulations on solving this challenge.
You just need some modifications for your CSS file:
You need to put your media queries at the end of your CSS files (after the main styles) because by putting them before your main styles you overwrite them again with the main styles that is the main reason your media styles don't work.
Your .card:nth-of-type(3) have a grid-column: 4; you only want 1 column with 100% width but you tell the browser you want this card to be on the 4th column so the browser will translate this as if there were 4 columns even if you already defined the grid-template-columns: 1fr in the parent element, so by changing that to grid-column: 1; you will get your wanted result.
Happy Coding
I am submitting this solution even though I did't solve one problem. That is because I was impatient to see how this feedbacks and community works. The problem is the heading just below the image. I simply can't make it to look the same like on preview. Something with font weight.. I did everything by instructions, but as i said .. impatience.
Feedbacks are more than welcome! thnx
Hi @wanderstweek great start, congrats on completing the challenge
To get the heading like the preview you just need some simple modifications to your code:
<br> tag the text will automatically wrap when the heading exceeds it's container width.margin:15px on the h3 it adds unnecessary 15px on left and write of the headingh3 to font-size:1.2rem.Now you have the heading just like the preview
Good job , and Happy Coding
please do review the code I know I have lot to improve your feedbacks gives me motivation
Hi @payalpagaria Great job,
I am still working on this challenge too,
just a little thing that I have noticed the total/person doesn't add the tip amount , and the tip/total only gets calculated when user enters the (number of people) field, I think it will be more convenient to calculate when user selects a tip%
Unfortunately I had a problem when I wanted to prevent the the procedure if there was no number been selected, Any ideas ?
to prevent submitting the rate if the user didn't choose a rate, you can simply add a condition in your event handler for the submit button event, for example :
btn.addEventListener("click", () => { if(!finalValue) { return false } else { valueS.textContent = finalValue; secondCard.style.display = "flex"; firstCard.style.display = "none"; } });
The condition means if the user didn't choose a rate so the finalValue variable is equal to undefined (undefined values === false) the function will just return false otherwise the button submits the rate (when user choose a rate)
Any input on my solution would be greatly appreciated.
Hi @stwslim83, congrats on completing this one
<main> instead of <div> to improve the accessibility of your page.max-width: 1440px and min-width: 375px to the body element won't make the content centered properly in screens larger than 1440px or lower than 375px , you can remove those styles and replace it with a margin: 20px for the wrapper div to avoid card touching screen edges in smaller screens