🎨 Etch-a-sketch

About the project

Game for user to draw on a grid, upon mouse hover.
Created as part of The Odin Project Web Development Foundations curriculum.

► Live demo 👀

Features

• 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

Built with

🪄 Technologies

• JS
• CSS
• HTML

🔧 Tools

• Visual Studio Code
• Git & GitHub
• macOS Terminal

💙 Credits

• 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

Takeaways

• 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