Frontend Mentor - Advice generator app solution

This is a solution to the Advice generator app challenge on Frontend Mentor.

Table of contents

• Frontend Mentor - Advice generator app solution
  • Table of contents
  • Overview
    • The challenge
    • Extra Features
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources
  • Author

Overview

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

Extra Features

• Intro transition animation
• Shows a snackbar on request failure
• Shows a simple loader while loading for advices
• Progressively enhanced

Screenshot

Links

• Solution URL
• Live Site URL

My process

Built with

• Vanilla HTML
• Vanilla CSS
• Vanilla JavaScript

What I learned

This was a simple straightforward project to make. Instead of learning new things, in this project my focus was to use the things that I already knew.

Though, I did learn one new Git command. This command can be used to clean up unreachable or "orphaned" Git objects or to delete the obsolete tracking objects in Git.

git fetch --all --prune

Useful resources

• CSS { In Real Life } - An amazing blog to learn about CSS related stuff

Author

• Frontend Mentor - @farispalayi
• Twitter - @farispalayi