-
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.
ES6 Modules | Webpack Bundling | API Integration | Cross-Browser Compatibility | Responsive Design | Code Formatting Guidelines | Automated Deployment with Vercel
-
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 thedispatchEvent
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 withpreserve-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!
- Challenge was provided by Frontend Mentor