All solutions

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

Tried to use the maximum number of variables within the functions that I could. to avoid declaring them globally.

It's the first time I've written so much JavaScript code and I think it's all useful +500 lines, of course there are some things that could be done do to make it better.

i've been learning a little bit about A11y, such as the use of aria-hidden to hide icons and other elements.

In my next challenge I will try to use the mobile first approach for the first time! 😁

Edit: after sending the challenge I just realized that I put the background-color that wasn't the right one... (already updated)

Edit 2: solved some HTML report problems.

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

It was very difficult for me to make the mobile design because from a certain width everything began to overflow, what I did was to remove using media querys things like the width, paddings and sizes of some elements.

Bugs

• I had a bug in the way I update the formStep as there were a few times where the animation and show classes they weren't eliminated, I solved it by iterating on all the form steps that aren't the new step and removing those classes.

• had a bug that basically every time you went back to a formStep it added an eventListener from animationend and that's what caused it to glitches in the interface, as it ran the same code 1 time for each event... I solved it using the once property.

• a bug in which I used animations for when you change formStep, before you change the actualFormStep to the nextStep the animation of the actualFormStep started to its initial state and you could see the element for a short time, I solved it using transitions instead of animations.

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

I'd like to get help on the correct use of media queries and the way I did the design for mobile.

Also if someone could tell me if the way I implemented the Aria attributes I used is okay. 😁

I read in an article that you have to use default width and height in images in the HTML markup to avoid CLS, but I don't know if should use a picture element with different sources for things like icons, I would like help with that.

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

I had this challenge almost complete for 3 months in my repository, but I forgot it existed, now that I read the code I only had to change one line to make it ready.

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

I think I'll try to improve the way I check and handle input values.

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

Well... no challenges but I had some errors that I already solved, and most of them only had to change one thing

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

Some tips with JavaScript code and some better ways to write code, such as input checks. But any feedback will be appreciated!

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

JavaScript code, maybe change the way I use CSS variables.

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

I had a problem in the way I displayed the content on the web using the .json file, solved it by wrapping everything in a function.

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

I would like some advice on the way I use CSS variables and also with media queries.

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

The extra interactivity I added.

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

The way to make sections responsive in mobile layout, I solved using absolute positioning.

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

Any help would be appreciated but I would really like some advice on the way I did the mobile design.

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

The way I did the design.

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

Change the color of svg icons, I solved it by using svg in the markup... I was using the img element and the svg as its src.

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

Any kind of help or advice will be appreciated.

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

I thought it would be easy to do it using the html details element and its name attribute, to make there always be only one item, but in Firefox there is no support for the name attribute in the details element... so I had to do it with javascript