Advice Generator

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.

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

Demo

Live Site: https://advice-generator-nh.vercel.app/

Links

Solution URL: https://www.frontendmentor.io/solutions/random-advice-generator-using-nextjs-1xwvNbKjSR

Screenshots

Built with

• Next.js - React framework
• Tailwind CSS - For styles

Run Locally

Clone the project

  git clone https://github.com/nandanholla/advice-generator.git

Go to the project directory

  cd project-folder-name

Install dependencies

  npm install

Start the server

  npm run dev

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

API Reference

Advice Slip JSON API

Get random advice

  GET /api/advice

HTTP Method	GET
URL	https://api.adviceslip.com/advice
Description	Returns a random advice slip as a slip object.

Note: Advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice.

Color Reference

Color	Hex
Light Cyan	#cee3e9
Neon Green	#52ffa8
Dark Grayish Blue	#323a49
Dark Blue	#1f2632

Author

• Frontend Mentor - @nandanholla
• Twitter - @nandanholla