Game for user to draw on a grid, upon mouse hover.
Created as part of The Odin Project Web Development Foundations curriculum.
► Live demo 👀
- Draw upon mouse hover
- Single colour mode: choose colour using colour picker
- Rainbow mode: assign random background colours to cells
- Eraser mode: remove cells' background colour
- Change canva's grid size using toggle
- Clear canvas
- JS
- CSS
- HTML
- Visual Studio Code
- Git & GitHub
- macOS Terminal
- Referred to michalosman's project to understand the logic of the user interaction with the calculator, and figure out potential bug scenarios in order to prevent them
- Learned how to generate a random colour upon event listened to, using
'#'+Math.floor(Math.random()*16777215).toString(16)
formula - Learned to use the DOM to generate a grid from scratch
- Practiced resetting application state
- Practiced printing variables' values in DOM elements
- Practiced assigning CSS classes in DOM using
Element.classList
- Practiced event listeners with mouse hover events
- Practiced CSS Flexbox
- Improved my code organisation
- Practiced BEM naming convention for CSS classes