How do you allow the user to submit their own tip amount?
I ended up removing that part for this first iteration but I would love to see how others have tackled this.
How do you allow the user to submit their own tip amount?
I ended up removing that part for this first iteration but I would love to see how others have tackled this.
Hello Roy, congratulations on completing this challenge 🎉 Concerning your question, that's simple, you'd use an input tag/element to get a custom value for the tip and then calculate accordingly when the calculate button is clicked. You can reference my solution to this challenge, here is a link to my solution. Happy Coding 😊
Not able to build the right div
Hello Karthik,
Congratulations on completing this challenge 🎉
Concerning centering the items in the right div, looking at your code you are using bootstrap.
You have a class missing in addition to row
, you didn't add the align-items-center
class. Like this...
<div class="row align-items-center">...</div>
I hope this helps, happy coding ✨
Hello Jasmine, congratulations on completing this challenge 👏
Check your html code, in the head section for this line of code <meta name="viewport" content="width=width-device, initial-scale=1.0">
... Then make sure you have your media query set up and in it change flex-direction: column
if you used a flex box or grid-template-columns: 1fr
if you used grids. Tweak the other elements to your linking... If you still don't get this, I could share my solution to thus challenge with you... Happy coding 👏🎊
PS: Oh it seems you've fixed it, imma just leave this here
Hello Nonye, congratulations on completing this challenge🎊. You nailed replicating the design for the most part. I can see there are a lot of html and accessibility issues you might really want to check out the report and solve your issues. I took a look at the report and for the accessibility issues, most of them have to deal with the way you handled assigning certain properties for your tags, the img and anchor tags. Also stating landmarks are very much important like header
, main
, footer
... If you need me to break it down further feel free to reach out to me on LinkedIn, you should be able to spot my profile easily with my name...
Happy coding🥳
Unfortunately, I couldn't complete the JavaScript Section, it was hard. However, I tried a lot, any suggestions on how to develop my JS Skills?
Hey Zain! Congratulations on completing this challenge. It's really responsive, I think you nailed most parts of the design.
Here are a few pointers to help with your HTML validation issues and accessibility issues:
In order to resolve some of your accessibility issues, you might wanna use landmarks in your HTML code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main>
or <header>
or <footer>
you need to do this according to how your page is structured. In case you want to know more about landmarks, follow this link.
You might want to add labels to your form input elements, this enables the browser to properly identify the input elements within your form and it's also beneficial to people who use screen readers.
On how to go about improving your javascript skills, you get a course on that, it would help a lot. I am currently following a course on Udemy, click here. I love this instructor and I have all his courses, he's really detailed in his explanation and carries his students along well.
I hope this helps, happy coding, and keep up the good work👍🎉
Had a bit of a mess for the image implementation as I was using background-image CSS property. I hope that I have used it correctly. Any suggestions are welcomed.
Hello Fricis, congratulations completing this challenge🎉. Based on your concerns, Yes! it's okay to use the background-image
property, I also used it when I executed this challenge so no worries on that end.
Also, I noticed your text $169.99
is not centered, so I looked into your code and found out you set align-items: flex-start
instead of align-items: center
. I think you nailed the rest of the design for the most part.
Happy coding 🚀
Hey Julio! Congratulations on completing this challenge. For the design you nailed it for the most part, but the mobile appeal is a bit off, I can see your title overflowing into the unknown of my web browser... Incase you need a few pointers on how to address that, I'd be happy to share my repo link so you could use my code as reference. Also I think you might have rounded up the tip amount maybe because you observed the calculation yielded a value with a very long decimal point. You can address that using the toFixed() function, Read more about it
Here's a few pointers to help with your HTML validation issues and accessibility issues:
In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main>
or <header>
or <footer>
you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.
You might want to add labels to your form input elements, this enables the browser to properly identify the input elements within your form and it's also beneficial to people with using screen readers.
Happy coding and keep up the good work👍
I had to read up on mix-blend-mode to get the layering of the picture correct, but it wasn't complicated, the background-color had to be on the parent container, and the background-image + mix-blend-mode property on the child element. Any feedback is always welcome!
Great work on this Eileen, you really nailed it 🎉🎉🎉
Also here's a few pointers to help with your HTML validation issues and accessibility issues:
In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main>
or <header>
or <footer>
you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.
You might want to add labels to your form input elements, this enables the browser to properly identify the input elements within your form and it's also beneficial to people with using screen readers.
Happy coding and keep up the good work👍
I am a beginner to front-end development. Tried my best to make the page responsive to small display sizes. Feedbacks and suggestions to optimize the code are welcome.
Hey Joshi! Congratulations on completing this challenge. It's really responsive and functional, I think you nailed most part of the design.
Here's a few pointers to help with your HTML validation issues and accessibility issues:
In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main>
or <header>
or <footer>
you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.
You might want to add labels to your form input elements, this enables the browser to properly identify the input elements within your form and it's also beneficial to people with using screen readers.
Happy coding and keep up the good work👍
I had a hard time getting the image and text elements to both take up 50% width on the desktop view. I think if I use the background-image property in CSS instead of the image element in HTML it would allow me to more easily accomplish this without distorting the picture. Any other advice / suggestions?
Additionally, I had a hard time figuring out how to center the entire element vertically without setting a top margin with a viewport height attribute. Any thoughts on how to make this work?
Hello Brian,
Great job on this one, you really nailed the design, and it is responsive too, congratulations🎉
Now to your concerns, you had a hard time centering the card and also handling the image at different views(Mobile and Desktop). I would share my GitHub repo link to my version of the challenge if that helps so you could see how I went about handling centering the card and also not really need to use the <img src=" " alt=" ">
tag in my HTML script.
Github Link: Mavreon's Repo