This is a webpage I created for The Odin Project. It is an etch-a-sketch emulator, which uses mouse swipes to draw images.
In accordance with the Assignment's specifications, I created every element, besides the outermost container, using javascript.
The drawable area of the etch-a-sketch emulator is made up of a grid of divs. When users hover their mouse over a div, it changes from light to dark blue.
Clicking on the left dial beneath the drawable area will open a modal containing a slider which users can click and drag to adjust the grid's dimensions. The range is 16x16 - 100x100, which amounts to 256 - 10,000 dynamically created divs for the drawable area alone.
Clicking on the right dial will open a modal with a small "about me" section, with a link to my github account.
ATTRIBUTIONS: I used google's font api for the headings, github's "Inverted Octocat logo" to link my github account, and I learned to build modals and range slider with W3schools**.
-
Font: LilyScriptOne-Regular.ttf: Copyright (c) 2012-2013, Julia Petretta (www.juliapetretta.com [email protected]), with Reserved Font Name 'Lily'
-
Octocat: https://github.com/logos
-
range slider: https://www.w3schools.com/howto/howto_js_rangeslider.asp
** In compliance with W3schools' fair use and terms of service, I did not copy any code and methodology verbatim. Link to terms of service below: https://www.w3schools.com/about/about_copyright.asp