All solutions

What are you most proud of, and what would you do differently next time?

• Most proud of: mobile navigation menu
• To do differently next time: at first I tried to complete this challenge without Vite, it didn't work out, I should have used it from the get go

What challenges did you encounter, and how did you overcome them?

• using GitHub Pages: found an article called Deploying Vite App to GitHub Pages, it helped me to deploy the project
• self-hosting fonts: the paths to font files in @font-face were wrong, also now I know to pay more attention to terminal output

What specific areas of your project would you like help with?

Is this a well-written piece of code? I'm happy to have completed it, but I'm unsure about the quality of my projects. I'd appreciate if anybody could share some insight

Hello everyone 👋

Here is my version of the Results summary component. I decided to use the JSON file provided to learn how to get data from it. I also added some animations, which proved to be quite of a challenge for me:

• I used an animation for result from each category - the number is increased, which needs to happen after data loads, so I called a function that increases the number in a then call. This seems clumsy as the function that creates the list items does two things: creates items and triggers the animation
• because I have animations that trigger one after the other finishes, I ended up with repeated code in animateNumber and increaseNumber functions

I've read that I could trigger one function after another is executed with a Promise, but I'm not comfortable with that. Can I improve the things I described here in another way?

Hello everyone 👋

Here is my advice generator. I chose this challenge to practice working with API and error handling. The latter proved to be the difficult part for me, so feedback on it is welcome.

1. The documentation says that when something goes wrong, you get a message object instead of slip object, but the response is still successful, so I added code for that in a then call. Is this correct?
2. You don't get the message object in case of all errors. I divided others into two categories:

• there is no body, so there was a network error and "Network Error" text is displayed.
• the error response has a body, then user gets info about the error code and message
• in both cases described above the user is asked to check Internet connection or contact (imaginary) support

How can I improve that? The way it is now doesn't seem that helpful. I'd be grateful for any tips.

Thank you and happy coding 😄

Hello everyone 👋

This is my tip calculator. I'm really happy that I've completed this challenge. It took me a long while and felt like a never-ending story 😅 When I thought it's finally done, I suddenly noticed something that need fixing, adding or improving. But now it's finished 🥳 And it rounds the results correctly!

Something that proved quite challenging to me was making sure users can freely switch between buttons and custom field when choosing the tip percentage.

Another thing was structuring the form itself. I decided to have a header with visually hidden h1 that will provide the name to screen-reader users and an SVG that is hidden from screen readers and in turn provides the name to sighted users who don't see the heading. Seems a bit confusing but in makes sense to me at least. Yet I'm not sure if this is a good practice.

Another challenge were the error messages and making them accessible.

I added some small details to the calculator: I made sure the calculated values are rounded - as far as I can see in the design they are just truncated. Also I think there is no check for the custom field in the design, yet I made sure it's there.

Questions:

• While I'm happy that the calculator works, I'm unsure of the JS code quality. I know what I did there, but I worry that it's chaotic and there are too many variables. Is the code OK?
• Should I use a sanitizer for this one? Since the calculator accepts numbers and not strings, I didn't add a sanitizer but I'm not sure about it.
• Is it OK to have the visually hidden heading and SVG for sighted users only the way it was done here? Or does it go against good practices?
• Is it OK to have filedset + legend + hidden labels or is this an overkill?
• Is inputmode="numeric" a good choice? If not, what should I use?

Hello everyone 👋

I wanted this page to have a good structure for assistive technologies and so I added some invisible headings (like h1 - I know there's the logo but it didn't seem a good candidate for me on this particular page) and divided it into 3 separate sections. Yet I'm not sure if those were good choices and if building the page like this actually helps users who use assistive technologies or actually makes life more difficult for them. I'd be grateful for any suggestions in this topic. Any other comments are also welcome.

Happy coding!

This website was rebuilt after completing the Kevin Powell x Scrimba x Frontend Mentor course, so it is not independent work. The course itself is awesome! I recommend taking it 😊

• (FIXED, PLEASE IGNORE THIS ONE.) I used class toggling to show and hide social links menu, yet when the class is removed, opacity transition does not work. Any hints about why this happens will be appreciated.
• I had trouble with positioning the menu, so that the button is centered. How to do that more effectively without trying out many random padding values?

• I'm using Andy Bell's Modern Reset with some minor changes. The reset contains the following bit:

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

Yet setting role to list is treated as a mistake in the report. Is it a bad idea to use role="list" to remove default styling?

• There was no tablet view. It doesn't seem necessary but should it be added somehow anyway?

• There was no hover color in the README file, so I matched the shade the best I could.
• I'm not sure about the "Perfume" text at the top. I decided it is a category of the product and put it in a separate div. I read a bit about double headers while trying to figure out how to approach this. I don't know if my choice was good. Are there any best practices assuming it's separate from the header?
• It seems to me this is too much code for a small component like this, but I don't know how to reduce the volume. Any suggestions?

1. I couldn't get the image to look like in the design. It similar but not exact. Can anyone offer a hint how to match it better?
2. I couldn't match the font sizes and paddings (I don't have Figma files). Does anybody have any tips on how to match them better without specific values?
3. I tried using CUBE CSS but it seems there is too much code and it looks complex. Can anyone offer any advice on how I can improve? Am I right in thinking it's too complicated?