https://github.com/benhyh/advice-generator
https://github.com/benhyh/advice-generator
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/benhyh/advice-generator
- Owner: benhyh
- Created: 2024-05-23T08:02:17.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-05-23T08:12:43.000Z (12 months ago)
- Last Synced: 2024-05-23T09:26:40.139Z (12 months ago)
- Language: HTML
- Size: 368 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Advice generator app solution
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)
## 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 Design
Active State
### Links
- Solution URL: [FrontEnd Mentor](https://www.frontendmentor.io/solutions/advice-generator-parcel-scss-x2p3ArfjZd)
- Live Site URL: [Netlify](https://shiny-bunny-c86982.netlify.app/)
## My process
### Built with
- HTML5
- SCSS
- Parcel (JavaScript bundler)
- JavaScript API
- Node.js
### What I learned
With Parcel, I was able to quickly implement and use SCSS for the first time. It's truly a remarkable language and the code snippet below is some SCSS functions that I used to build the project:
```SCSS
@media(max-width: 768px) {
.adviceContainer {
width: 90vw;
.svgContainer {
display: none;
}
.svgContainerMobile {
display: block !important;
}
}
}
```
### Useful resources
- [Learn how to fetch API in 6 minutes](https://www.youtube.com/watch?v=cuEtnrL9-H0) - As this is my first project working with API, without this video, I wouldn't be able to complete the project!