All solutions

👋 I added a loading spinner whenever the app is fetching user data!

👋 I used a recursive function to animate the number increase when the age is calculated. I also took account of leap years.

Learned more about APIs with this challenge!

For the animation:

• loader when fetching advice
• dice spin animation when clicking the button
• Button has temporary disabled state to ensure that new advice is fetched before each succeeding click.

For the accessibility:

• alert notifier for screen readers when getting new advice and when it is successfully retrieved.

• I learned how to make curved sections with clip-path through this challenge!
• For the load-in animations, I made a fallback for people browsing with JavaScript disabled through the <noscript> tag.

If you can't access the netlify site, please use this alternative link.

• Aside from the load-in animations on desktop, I made the header sticky using IntersectionObserver

• Used loading="lazy" for better performance

If you can't access the netlify site, please use this alternative link.

This is the first time I made a slideshow!

I went back to my solution and updated the slider to notify screen readers whenever buttons are pressed. I also used aria-hidden to only let the screen readers read the currently viewed slide.

If you can't access the netlify site, please go use this alternative link.

For the accessibility:

I used aria-invalid, aria-describedby, and aria-live to inform screen readers when the input is invalid, and to read the error message.

For the animation:

I used transition-delay to stagger the appearance of the elements upon page load.

Learned how to make dropdowns through this challenge!

The animations are:

• The slide-in of the hero content on page load (for desktop layout)
• The slide-in of the nav menu (on mobile layout)
• The opening and collapsing of the dropdowns

I learned how to make scroll animations through this challenge! I used a little JS, particularly IntersectionObserver.

I learned how to make range sliders through this challenge!

For the animations:

• The header and card slide upon page load
• Smooth transitions between pageview and price numbers
• Ripple effect when the toggle is clicked

I learned how to use regular expressions with this project!

For the form:

• the card number automatically inputs a space after every 4 numbers.
• the number input fields have a shake animation when the user tries to add a space.

I learned how to make a theme switcher through this challenge!

For the animation keyframes:

• I made the cards flip on page load, using transform: rotateX()

• Using pseudoelements, I included a ripple animation whenever the viewer activates the toggle!

I also made the transition between themes a bit slow so that it's easier on the eyes.

For the desktop version's on-load animations, I used keyframes and the transform attribute.

To animate each card's top and bottom borders on hover, I used ::after and ::before pseudoelements!

I learned how to make a working toggle switch with this challenge!

To animate the changing of prices, I used the transform attribute.

My script observes the keydown event when the toggle is focused. The toggle then works by pressing the spacebar or enter key.

Learned how to make progress bars with this challenge!

For laptops with screen heights less than or equal to 800px, I made the grid's height responsive by using vh. I disabled that for taller screens, though, because I didn't want the gap between the header and the testimonials to over-expand.

I opted to use background-image for the stars, because inserting that as an <img> 15 times in the html makes it seem bloated (in my opinion!). Also, they're just decorative elements.

I used grid-template-areas to lay out the <header>, <main> and the <div> with the background-image.

I reused my own script for the form validation. I added a success message when the email is valid and an alert() for when the email is submitted.

I also gave the <main> and <header> a maximum width and justified both to center on the grid. I know that it makes the spacing slightly different from the design, but it ensures that the margins are appropriately sized across all screen widths.

I practiced using grid for this project, since I'm only used to flex. I used grid-template-areas to lay out the desktop design.

Also, I avoided using pure white (#fffff) for the white background and text here. Instead I used #fdfdfd to make it easier on the eyes.

*Note: the project is properly centered on the live site. I don't know why the screenshot looks different. 🤷‍♂️ Here's a screen capture by another site.

For the form, I made the script so that it validates the input even before pressing submit.

Also, I made queries that change the layout for smaller laptops, as seen in here.

In this challenge, I practiced using background-image for the card illustration. I learned that using <img> for something like this isn't appropriate because it's not essential to the content. I'll come back and revise previous similar projects soon.