Frontend Mentor - Advice generator app solution

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

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • 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

Screenshot

Desktop

Mobile

Links

• Frontend Mentor solution URL: Advice Generator App Solution
• Live Site URL: Advice Generator App Live Website

My process

Built with

• Semantic HTML5 markup
• CSS Flexbox
• Node.js
• Express.js
• EJS (Embedded JavaScript templating)
• Fetch API
• Mobile-first workflow

Useful resources

• Advice Slip JSON API - is a free and open API that provides a collection of advice messages in JSON format. It allows developers to easily fetch random advice messages to integrate into their applications or websites

• FETCH API - is a modern browser technology that allows web developers to make HTTP requests to server resources and retrieve data from them. It provides a simple and flexible interface to fetch data from servers using a Promise-based approach, which allows developers to handle responses in an asynchronous way

Author

• Frontend Mentor - @rfcho322