@roysaucedoSubmitted about 2 years ago
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.
Chisom Ogbonna
@MavreonAll comments
- @MavreonPosted about 2 years ago
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 😊
Marked as helpful0 - @4002-NonyeSubmitted about 2 years ago
- @vjkarthik1987Submitted over 2 years ago
Not able to build the right div
@MavreonPosted over 2 years agoHello 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 thealign-items-centerclass. Like this...<div class="row align-items-center">...</div>I hope this helps, happy coding ✨Marked as helpful0 - @arajasmineSubmitted over 2 years ago
- When I tested it on other phones, it did not use the mobile view but the desktop view. How do I improve with making the mobile view compatible with all mobile screens?
- Is there a better way than using CSS Grid?
- What more can I do to improve my work?
@MavreonPosted over 2 years agoHello 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 changeflex-direction: columnif you used a flex box orgrid-template-columns: 1frif 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
1 - @4002-NonyeSubmitted over 2 years ago@MavreonPosted over 2 years ago
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🥳Marked as helpful0 - @mannaaazSubmitted over 2 years ago
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?
@MavreonPosted over 2 years agoHey 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👍🎉
0 - @GFJankavsSubmitted over 2 years ago
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.
@MavreonPosted over 2 years agoHello Fricis, congratulations completing this challenge🎉. Based on your concerns, Yes! it's okay to use the
background-imageproperty, I also used it when I executed this challenge so no worries on that end. Also, I noticed your text$169.99is not centered, so I looked into your code and found out you setalign-items: flex-startinstead ofalign-items: center. I think you nailed the rest of the design for the most part. Happy coding 🚀Marked as helpful2 - @juliofragosoSubmitted over 2 years ago@MavreonPosted over 2 years ago
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👍
0 - @EileenpkSubmitted over 2 years ago
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!
@MavreonPosted over 2 years agoGreat work on this Eileen, you really nailed it 🎉🎉🎉
0 - @chikarlSubmitted over 2 years ago@MavreonPosted over 2 years ago
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👍Marked as helpful2 - @Kaushaljoshi29Submitted over 2 years ago
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.
@MavreonPosted over 2 years agoHey 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👍Marked as helpful0 - @superschoolerSubmitted over 2 years ago
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?
@MavreonPosted over 2 years agoHello 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 RepoMarked as helpful1
