@JEJS-IA97Submitted 2 months ago
Jordan Davenport
@jjdavenportAll comments
- @jjdavenportPosted 2 months ago
The solution does include some semantic html, could be improved with footer, and section elements, but lacks accessibility because all the buttons are divs. The layout looks best on desktop however on mobile suffers from compression on smaller screens and does not match the design because main does not fill the width of the viewport. The calculator itself does work sometimes but has lots of bugs, the main bug being that the reset div does not reset the button divs and when a button div is selected there can be an input in the custom input at the same time as a button being selected.
Marked as helpful0 - @sksksk2024Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Definetily I'll do this one in React, TypeScript with Vite and Vitest next time!!! And other than that, I'll be focusing on resolving the JS problem(where in the add ons section, when you select yearly payment, you should see yearly prices, not monthly or incorect calcs)
What specific areas of your project would you like help with?Any ideas to show properly the add-ons when is yearly(not showing as expected) is welcome!
@jjdavenportPosted 3 months agoThe path to your images is wrong, should be "./assets/images/img".
1 - @saifuldtSubmitted 4 months ago@jjdavenportPosted 4 months ago
The site does use semantic html, however the mobile menu is in a <div> and should be a <dialog>. The basic layout of the page is correct on desktop, however some of the content is contained in the wrong elements leading to one of the <img> backgrounds being in the wrong place. The mobile viewport is much worse with significant overflow issues due to some the elements having a fixed width.
0 - @hannakulikowskaSubmitted 4 months ago@jjdavenportPosted 4 months ago
The site looks identical in layout to the original design, it has some different styling choices which work well. It works well across every viewport and device and the mobile solution is as good and accurate as the desktop. I can only think of two ways to improve site, first using a prink linear gradient on the result section and second adding the active states to the solution.
Well done!
0 - @SaeM843Submitted 9 months ago
Hello Front-End Mentor Community! This is my solution for this challenge😊
🛠️ Built with:
- HTML
- SASS
- JS
- BEM
🤝Help / Feedback:
-
Overlay for mobile size I set
height: 342%to an overlay as the overlay won't cover entire body if I set the height 100%. Could you please help me to understand whyheight: 100%;didn't work on the overlay div? -
Overlay for mobile size I set a higher z-index number to the header nav for mobile than overlay, however, the nav went behind the overlay, so I set top position to the overlay. Any idea how to use z-index for this?
@jjdavenportPosted 4 months agoThe solution does include semantic html, its clear and readable, could be improved by using the <dialog> element for the mobile menu and removing any unnecessarycode like the commented out section. The page is accessible however could be improved with aria-labels. The reason the overlay doesnt cover the entire viewport is because you mobile site has overflow although this is not a problem because it has enough content that the user needs to scroll on most viewports. In terms of z-index, think of it as layering your elements the higher the z-index the higher the layer your element will apear on, so its best to set the overlay and nav at a higher z-index for example. The only way the site differs from the design significantly is the font-family.
Well done!
0 - @tortarugaSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
it looks good enough, but next time i'd try making it look better on medium sized screens and I just noticed the hero image should be darker, i forgot to add that
What challenges did you encounter, and how did you overcome them?had some issues setting up sass and then with the layout as always, but after trying fifteen thousand times everything worked.
also, on my screen it doesnt look like in the design comparison, not sure what's up about that
What specific areas of your project would you like help with?all feedback's welcome
@jjdavenportPosted 5 months agoThe basic layout of the site is correct, on the desktop layout the large areas of blank space are likely caused by min-height: 100vh. However the mobile layout is spot on. The hover effects are not quite identical to the solution with the borders on hover being 100% instead of 50% of the element width, I also have a wierd bug on 1440p where I can only see half of the h1. The page could be made more accesible with semantic html elements used on the mobile menu, I would also disable scroll when the mobile menu is active with js. The desktop site needs more work to make is responsive on the viewports its designed for.
Marked as helpful0 - @devEduSousaSubmitted 6 months ago@jjdavenportPosted 5 months ago
The site looks almost identical to the original design, the html is readable as is the stylesheet. The site looks good on all devices and viewports without any bugs or distortion. To improve the site all you need to do is some aria-labels for accessibily.
well done!
0 - @jownsuSubmitted 5 months ago@jjdavenportPosted 5 months ago
The site looks great and works well on all viewports, the only thing I would remove is the alert for the checkout button. There are also some accessibilty features with the site with me being unable to tab to the lightbox main image on desktop and the thumbnails. The styling is mostly perfect apart from the nav on the desktop not being aligned on the left hand side and is also missing the logo image with text used instead. Overall this soluution is great just needs the semantic html correcting, some aria-labels and tab-index's added for accessibility.
Well done!
1 - @bartoszdudziak-devSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
It looks quite good in my opinion.
What challenges did you encounter, and how did you overcome them?The navbar menu. I overcame it with Kevin Powell's video help.
What specific areas of your project would you like help with?Accessibility. What should I add/change in my solution? What about aria attributes?
@jjdavenportPosted 6 months agoThe site looks identical to the original, has the nice addition of an additional media query for mid-sized viewports, and the nav redirects on some viewports. The html is clear and easily readable with plenty of accessibility labels and you can browse the page just by using the keyboard and tabbing between the links.
Well done!
0 - @JumanjigobezSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Perfect challenge that made me dive more in React Js with Vite, use of useful dependencies like Formik, Yup & React-Toastify which I customized it 😊.
Also, the custom radio input part was lovely. 👌
Thanks FrontendMentor, kindly give us more and more 👏
What specific areas of your project would you like help with?Maybe additions and subtractions to the solution would be great.
Don't forget to give it a Like and Comment Mahn. ❤
HAVE A NICE CODING JOURNEY AHEAD! 🤞
@jjdavenportPosted 6 months agoThe site look pretty much identical to the original deisgn on both mobile and desktop views, as the site is built in react I cannot read the HTML however it validates the form how you would expect. It includes some improvements over the original deisgn like the error states for the radio buttons and the ability to dismiss the success message. Two impovements could be made to this site, the first to improve accessibility, the ability to tab onto the radio buttons and have them focus, the second is the problem with verticle and horizon overflow making the site scrollable when there is no need.
Well done!
Marked as helpful1 - @ajkun55Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
This project requirs getting value from input, compute and present the results, the different tip setting can be complex, I use radio input and js to deal with custom value, the output is correct.
@jjdavenportPosted 6 months agoUnfortunately the app doesnt work correctly some of your code is commented out on you JS file, that could be the reason.
0 - @NiloyDas07Submitted 7 months agoWhat specific areas of your project would you like help with?
I made 2 versions. One without JavaScript and one with JavaScript. Both are available in the GitHub repo. Please let me know which one would be more preferable in a professional setting and why, if any. And any other suggestions are also always welcome.
@jjdavenportPosted 6 months agoThe solution looks pretty much identical to the original design aside from a couple of styling differences like the header font size and the faq borders. The page looks good on desktop and mobile with easliy readable and resuable html with excellent accessibility. The only way to improve the solution is just some minor styling corrections to make it look more like the original design.
Well done!
0
