Skip to content

Latest commit

 

History

History
80 lines (55 loc) · 2.46 KB

README.md

File metadata and controls

80 lines (55 loc) · 2.46 KB
Raw

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 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

Desktop View Mobile View

Links

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