https://github.com/danutsss/advice-generator-application
Advice generator application built with HTML, CSS and JavaScript.
https://github.com/danutsss/advice-generator-application
Last synced: over 1 year ago
JSON representation
Advice generator application built with HTML, CSS and JavaScript.
- Host: GitHub
- URL: https://github.com/danutsss/advice-generator-application
- Owner: danutsss
- Created: 2022-04-04T19:14:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-04T19:18:40.000Z (over 4 years ago)
- Last Synced: 2025-02-07T13:38:10.634Z (over 1 year ago)
- Language: CSS
- Size: 255 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Advice generator application - Solution
This is a solution to the [Advice generator app challenge on NewTech Github](https://github.com/Newtech-Academy/28feb_group/tree/Project-Advice-Generator-App).
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Useful resources](#useful-resources)
## Overview
### The challenge
My challange was to create an app that generates a random advice for the user.
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 cliking on the dice icon.
### Screenshot
## My process
### Built with
- Semantic HTML5 markup;
- CSS custom properties;
- Flexbox;
- Mobile-first workflow;
- JavaScript.
### What I learned
Working on this project I learned about using the Fetch API for JavaScript.
```js
fetch("https://api.adviceslip.com/advice")
.then((response) => response.json())
.then((data) => {
adviceID.textContent = "Advice #" + data.slip.id;
adviceQuote.textContent = data.slip.advice;
});
```
### Useful resources
- [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) - This helped me understand what is Fetch API.
- [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) - This is an amazing article which helped me finally understand using the Fetch API.