https://github.com/philopaterhany/advice-generator

Advice Generator - Frontend Mentor Challenge
https://github.com/philopaterhany/advice-generator

api challenge css frontend-mentor html js

Last synced: about 1 month ago
JSON representation

Advice Generator - Frontend Mentor Challenge

• Host: GitHub
• URL: https://github.com/philopaterhany/advice-generator
• Owner: PhilopaterHany
• Created: 2022-08-17T07:34:44.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-26T11:28:55.000Z (over 2 years ago)
• Last Synced: 2023-03-06T06:07:17.820Z (almost 2 years ago)
• Topics: api, challenge, css, frontend-mentor, html, js
• Language: CSS
• Homepage: https://philopaterhany.github.io/Advice-Generator/
• Size: 354 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Advice Generator App Solution

![Preview](./design/desktop-preview.jpg)

This is a solution to the [Advice Generator App Challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/advice-generator-app-QdUG-13db). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

-   [Overview](#overview)

    -   [The challenge](#the-challenge)

    -   [Screenshot](#screenshot)

    -   [Links](#links)

-   [My process](#my-process)

    -   [Built with](#built-with)

    -   [What I learned](#what-i-learned)

    -   [Useful resources](#useful-resources)

-   [Author](#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.

### Screenshots

![Desktop Screenshot](./screenshots/desktop.jpg)

![Mobile Screenshot](./screenshots/mobile.jpg)

### Links

-   Solution URL: [Frontend Mentor](https://www.frontendmentor.io/solutions/advice-generator-app-TVA0_1Ofut/)

-   Live Site URL: [Github Pages](https://philopaterhany.github.io/Advice-Generator/)

## My process

### Built with

-   Semantic HTML5 Markup

-   CSS Custom Properties

-   CSS Flexbox

-   Vanilla Javascript

-   Fetch API (ES6)

### What I learned

```js

function showQuote() {

    fetch("https://api.adviceslip.com/advice")

        .then((response) => response.json())

        .then((data) => data.slip)

        .then((data) => {

            adviceId.innerHTML = `ADVICE #${data.id}`;

            adviceText.innerHTML = data.advice;

        })

        .catch((error) => {

            alert(`Error: ${error}`);

        });

}

```

### Useful resources

-   [Youtube: Elzero Web School - Fetch API](https://www.youtube.com/watch?v=oO0a7tQcGps)

-   [MDN: Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

## Author

-   Website - Portfolio Is Coming Out Soon!

-   Frontend Mentor - [@PhilopaterHany](https://www.frontendmentor.io/profile/PhilopaterHany/)

-   Twitter - [@PhilopaterHany4](https://www.twitter.com/PhilopaterHany4/)

-   Facebook - [Philopater Hany](https://www.facebook.com/philopater.hany.3)

-   Discord - [#8178](https://discord.com/#8178/)