I am proud of my problem solving and the approach to find a solution to this challenge.
What challenges did you encounter, and how did you overcome them?The time to use my programming logic to find the solution to this challenge.
What specific areas of your project would you like help with?I need help with my Js and CSS code.
Greetings!
I think your solution is pretty good, works nicely, only a few thing could use some fixing. I'll try to give you a few pointers:
First, HTML:
<h1> headings, now this is usually reserved as the main heading of a page, and generally there shouldn't be more than 1 since it confuses search engines and screen readers..style.visibility to hide the success window until it's needed, which i like to be honest, however setting visibility to hidden makes it so your content is hidden visually but your <h1> heading will still be visible to screen readers, which will likely still read it out. Using display: none would hide it completely until it is needed.tabindex="0" to your <span> elements housing the rating numbers to allow for keyboard navigation to select them and also trigger the click event you added to them.CSS:
:hover; :focus; :focus-visible and in the case of wanting to style a container based on something focusable nested inside, the :focus-within pseudo-classes.font-family: "Overpass", "Roboto", serif; which will use the challenge suggested font and will still use Roboto and Serif as fallbacks. Alternatively you could download the font files and look into using @font-face to include them.@media query you should look into utilizing that to adjust sizes across various breakpoints for better visibility.As for JavaScript, i think it's fairly well made, the only thing i could say is you should try using try...catch in your code to at least attempt to handle errors if they occur.
Hope i was able to help!
I'm proud that I was actually able to complete this. It proved to be more difficult than I thought. However, I eventually figured it out.
What specific areas of your project would you like help with?Refactoring my JS functions.
Greetings~
Not sure if i can help with refactoring, as your code appears to be cleaner than mine, but i'll still try to write something hopefully helpful.
It took me a little while to realise i have to press Enter to have the app calculate the values. Honestly without any instructions it makes it appear like the app is not working, it's a little better on phone, however another issue is the tip buttons also don't work until you press Enter, which on a phone requires that i tap on an input field and press enter. Personally i'd recommend having the values be calculated automatically, for example by using input event listeners on input fields. Your click events on the .percentage tip buttons could include a call to your findPercentage() function to handle the calculation of new values.
A few other things to note:
<li> percentage buttons should have a tabindex for keyboard navigation.input fields accept negative numbers, that should be fixed.input field for the Number of People accepts decimals, that probably should be changed as well.<div> for the input section design, nesting the <svg> and input field. You could instead style the input field, set the background-color and set the svg as the background-image of the input, or use the shorthand, for example: background: no-repeat center left 1rem / 0.78rem url(./images/icon-dollar.svg);Hope i was able to help a little.
Have a nice day~
I'm proud of using async JS to add dynamic functionality to the app. If I were to do this again, I would perhaps uses OOP and/or use TypeScript.
What challenges did you encounter, and how did you overcome them?Styling the different SVGs onto each dashboard element required some research using the background shorthand property. I used the positioning properties that modify the position of the SVG on the X and Y axis.
Great job!
I like the way the design collapses for smaller screens, i should learn from that.
Great job!
Design mostly matches the design images, with some small mistakes like the desktop success-message is not centered within the parent div and the text inside the sign-up-form on the mobile view having too much inline padding, but overrall doesn't affect functionality.
Some suggestions to fix:
:hover effect works well, however the same effect should be applied to :focus for keyboard navigation which is missing.Have a great day!
Great work!
I like the animations on the socials and the fade-in effect for their container, however the same effect seems to be applied to the Author's details, which feels more like an error than a feature if i'm to be honest.
Hope you have a great day!
I feel proud of understanding Grid every time while practicing.
Greetings~
Great solution, i particularly like the short and easy to read css file.
One suggestion i have is that instead of px consider using rem for better accessibility.
rem units are relative to the root element font size. People with visual impairments often increase text sizes, like their default browser font size for better readability, using rem ensures your layout remains functional.
