0xabdulkhalid/advice-generator

Advice Generator Solution

Frontend Mentor Challenge

View Demo · Report Bug · Request Feature


Solution URL:	ADVICE GENERATOR 🎯 [ ASYNC/AWAIT - ES6 MODULES - WEBPACK - 3D DICE ]
Live Site URL:	https://advice-generator-0xabdulkhalid.vercel.app/

Overall Score 99.3%, Average of Mobile and Desktop
[ Mobile devices score is only shown below ]

Check out Pagespeed Insights to get live score

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

To set up the Advice Generator Application locally, follow these steps:

Clone the GitHub repository to your local machine:

git clone https://github.com/0xabdulkhalid/advice-generator.git

Navigate to the project's directory:
```
cd advice-generator
```
Install the project's dependencies using npm:
```
npm install
```
Build the project to bundle JavaScript, minify HTML and CSS, and move images:
```
npm run build
```
The build files can be found on dist (distribution) directory.

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!