Frontend Mentor - Advice generator app solution

This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The application gives a new pice of advice fetching information from Advice Slip Api. The response is cached within 2 seconds, so the user might have the same advice if the dice icon is clicked within this timeframe

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Generate a new piece of advice by clicking the dice icon

Screenshot

Links

• Solution URL: FrontendMentor Link
• Live Site URL: Vercel Link

My process

I tried to make this simple as possible. I built the application using only Vanilla JS to re-enforce some knowledge, CSS3 and HTML5

Built with

• Semantic HTML5 markup
• CSS3
• Vanilla JS
• Desktop-first workflow
• Vite - Frontend Tooling
• Vercel - Deployment

What I learned

Hover transitions over dice button

.dice-container:hover, .dice-button:hover{
  box-shadow: 0 0 20px hsl(150, 100%, 66%);
}

Fetch information when DOM is loaded. I've originally put static data

window.onload = async () => {
  const response = await fetchAdvice()
  $('.advice-id').innerHTML = response.slip.id
  $('.advice').innerHTML = `"${response.slip.advice}"`
}

Continued development

I would like to make improvements to the CSS markup. If the advice is too long, it takes over the div content and it looks ugly.

Author

• Website - Nadia Ujovich
• Frontend Mentor - @nujovich
• Twitter - @NUjovich