Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0xabdulkhaliq/advice-generator
This is a solution to the "Advice generator" challenge on Frontend Mentor
https://github.com/0xabdulkhaliq/advice-generator
css3 es6-modules html5 javascript pagespeed-insights vercel webpack
Last synced: 8 days ago
JSON representation
This is a solution to the "Advice generator" challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/0xabdulkhaliq/advice-generator
- Owner: 0xabdulkhaliq
- License: mit
- Created: 2023-09-23T11:39:07.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-15T04:03:41.000Z (about 1 year ago)
- Last Synced: 2024-08-14T03:38:13.120Z (3 months ago)
- Topics: css3, es6-modules, html5, javascript, pagespeed-insights, vercel, webpack
- Language: CSS
- Homepage: https://advice-generator-0xabdulkhalid.vercel.app/
- Size: 206 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Preview
## Links
- |||
| :----- | :----- |
| Solution URL: | [ADVICE GENERATOR 🎯 [ ASYNC/AWAIT - ES6 MODULES - WEBPACK - 3D DICE ]](https://www.frontendmentor.io/solutions/advice-generator-asyncawait-es6-modules-webpack-3d-dice-kW5sm9EPZa) |
| Live Site URL: | [https://advice-generator-0xabdulkhalid.vercel.app/](https://advice-generator-0xabdulkhalid.vercel.app/) |
|||
## Pagespeed Insights Score
- ||
| :-----: |
| Overall Score 99.3%, Average of Mobile and Desktop
[ Mobile devices score is only shown below ] |
| |
| 
|
| |
| Check out [**Pagespeed Insights**](https://pagespeed.web.dev/analysis/https-advice-generator-0xabdulkhalid-vercel-app/ne163fkmse?form_factor=mobile) to get live score |
||
## 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
## Installation
To set up the Advice Generator Application locally, follow these steps:
1. Clone the GitHub repository to your local machine:
```bash
git clone https://github.com/0xabdulkhalid/advice-generator.git
```
2. Navigate to the project's directory:
```bash
cd advice-generator
```
3. Install the project's dependencies using npm:
```bash
npm install
```
4. Build the project to bundle JavaScript, minify HTML and CSS, and move images:
```bash
npm run build
```
5. The build files can be found on `dist` (distribution) directory.
## Tags
ES6 Modules | Webpack Bundling | API Integration | Cross-Browser Compatibility | Responsive Design | Code Formatting Guidelines | Automated Deployment with Vercel
## Learnings / Notes
- Finded a manual way for trigger/invoke click event for button element by creating a new `MouseEvent` object of type `"click"` and dispatch it on the button element using the `dispatchEvent` method.
- This will simulate a click on the button, and any event listeners attached to it will be triggered as if the button were clicked by the user.
- I have implemented this feature for initializing advice feed once the user visits/open the app.
- Learned to create a 3D Dice by using multiple `div` elements for Dice face along with `preserve-3d`.
- Each one uses the transform property to rotate or translate the face in 3D space, giving the illusion of a 3D object.
- It also applies the dice-spin animation, which presumably spins the dice, the overall result is wonderfull!
## Built With
     
## Tools Used
     
## Acknowledgment
- Challenge was provided by [Frontend Mentor](https://www.frontendmentor.io)
## Let's Connect 👋
