This app generates wise advices every time you click on the dice button. It is fully responsive.
Check it out here : https://advice-generator-v2.surge.sh/
Clone the project, then jump into your command line and run these :
# install dependencies
yarn
# start the application
yarn start
# open the application in the browser
open http://localhost:3000
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- SCSS
- Mobile-first workflow
- React - JS library
- Typescript - JS with an emphasis on types
This app is pretty light in the logic side of the code (hence TS), I mostly improved in my CSS (SCSS in this case) skills while coding this project.
Using SCSS, I learned how to create mixins :
@mixin mq-mobile {
@media screen and (max-width: $mq-mobile) {
@content;
}
}
And how to use them in my other .scss files like so :
@import '../../styles/mixins';
As you can see there is a little issue with the hover state of the button in the mobile version. I will try to improve the behavior of the button in order to improve the UX on smartphone devices.