Frontend Mentor | EL harabiy's profile

@f-avalosSubmitted 5 months ago

Contact Form

@Mubarak-AdeyemiPosted 5 months ago

Great job done! I think you should set the form to reset where all the input fields will become empty after the display of the success message.

0

P

Austin•430

@astnioSubmitted 6 months ago

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

So creating this without any animation is simple enough. The challenge came when I decided I wanted the accordion to animate when closing/opening each element. Lucky for me, I came across this issue before, and already had a solution for it.

The main issue is that height is not supported for animation, so most alternative solutions may involve quite a bit of JavaScript to setup a timer and then adjust the height by pixel. I didn't like that idea, though, and discovered that you can actually animate height using CSS grid.

So I have this element:


  
    Is Frontend Mentor free?
    
      
      
    
  
  
    
      
        Yes, Frontend Mentor offers both free and premium coding challenges,
        with the free option providing access to a range of projects suitable
        for all skill levels.

Whenever I click the button, I want that div with card-paragraph-wrapper to appear. I have this CSS to make that happen with an animation:

.card-paragraph-wrapper {
  display: grid;
  transition: grid-template-rows 0.15s ease-out;
}

.card-paragraph-wrapper[data-active='true'] {
  grid-template-rows: 1fr;
}

.card-paragraph-wrapper[data-active='false'] {
  grid-template-rows: 0fr;
}

.card-paragraph-wrapper &gt; div {
  overflow: hidden;
}

The only particularly odd thing is you need the extra div in there. It does not work without it.

Then you simply add event listeners to change the data-active to true or false in your script, and the CSS takes care of itself.

Animated Accordion - No Frameworks, Just CSS and JS

1

EL harabiy•250

@Mubarak-AdeyemiPosted 6 months ago

I had the same issue but I used this line of code to solve just that in JavaScript 👇.

answer.style.maxHeight = answer.scrollHeight + "px";

After I had set the answer max-height to 0 in CSS.

then I used the above code to determine the height of the answer container for smooth transition after a certain class has been added with JavaScript to show the container.

0

hannerr•100

@hannerrSubmitted 6 months ago

fm-accessability-rating-comp

1

EL harabiy•250

@Mubarak-AdeyemiPosted 6 months ago

JavaScript Refinement: Rating Selection Validation: Ensure users can't submit without selecting a rating. You can add a simple validation to check if any radio button is selected before showing the success message.
CSS Refinement: Radio Button Accessibility: The input should have better focus states for keyboard accessibility. Consider adding a :focus style to labels for users navigating via the keyboard.
Simplifying the Success Message:

Instead of hiding and showing sections with style.display, consider using classList.toggle to add a class like hidden to simplify the logic and maintain better readability in your JavaScript.

File Separation:

While embedding styles and scripts in the HTML works for small projects, separating CSS and JS into their own files is good for scalability and maintainability.

Marked as helpful

0

hannerr•100

@hannerrSubmitted 6 months ago