https://github.com/mogoatlhe/etch-a-sketch

Etch-a-aketch implemented in JavaScript as part of The Odin Project curriculum.
https://github.com/mogoatlhe/etch-a-sketch

css-flexbox css3 figma gimp html5 javascript

Last synced: about 1 month ago
JSON representation

Etch-a-aketch implemented in JavaScript as part of The Odin Project curriculum.

• Host: GitHub
• URL: https://github.com/mogoatlhe/etch-a-sketch
• Owner: Mogoatlhe
• Created: 2021-12-31T20:49:16.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-06T17:58:46.000Z (about 3 years ago)
• Last Synced: 2024-11-10T17:17:33.705Z (3 months ago)
• Topics: css-flexbox, css3, figma, gimp, html5, javascript
• Language: JavaScript
• Homepage: https://mogoatlhe.github.io/etch-a-sketch/
• Size: 52.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# etch-a-sketch

## Purpose

Etch a sketch functionality implemented in JavaScript as part of [The Odin Project](https://theodinproject.com) curriculum.

## Live Version

https://mogoatlhe.github.io/etch-a-sketch/

![](images/design.png)

## Challenges Encountered

I tried using JavaScript's `defer` attribute which fetches the `.script` file as it is parsing the HTML, instead of fetching it only **after** the HTML has been parsed like when the `script` tags are placed as the last elements of the body tag.

`defer` attribute

```

(html fetch and parse -> javascript fetch, while still parsing html) -> javascript execute

```

`script` tag at the bottom of the body

```

html fetch -> html parse -> javascript fetch, once the html has been parsed -> javascript execute

```

As illustrasted above, `defer` is a bit more efficient compared to just placing the `script` tag at the bottom of the body tag

Unfortunately for me, `defer` executes when the DOM is ready but **before the DOMContentLoaded event**. And the [DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets*...](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event). Meaning that the JS was firing before my styles were loaded, this caused problems because I perform calculations in JS using the `width` that I set in my stylesheet.

Short story short, I'll be sticking with just placing the `script` tag as the last child of the body