Giter VIP home page Giter VIP logo

etch-a-sketch's Introduction

The Odin Project - Foundations Path

Etch-a-Sketch

Another classic game brought to life on this very internet.

Live version

Getting familiar with JavaScript

DOM Corleone

This project was a bit more complex than the Rock Paper Scissors project, but an excellent challenge nonetheless. There was significantly more DOM manipulation and use of event listeners. Everything from creating the drawing area of the sketch device to getting the device to function properly in response to mouseovers and button clicks proved to be a bit tricky.

One quick fix that tripped me up was not realizing that some event listeners initially were called before the drawing area existed, and therefore were not altering the grid as expected (obviously).

CSS I Must Profess

A functional but brute force design. This stems from some, but not enough planning, and doubling down instead of starting over. Likely my most important takeaway from this project is to devise an even better plan before getting started.

Under my HTML-a

HTML truly is the gift that keeps on giving. Takeaway here is learning about the very versatile selector.

  • Range (slider)
  • Color (color-selector)

Features added:

  • Rainbow button
  • Media query for screens 800px wide (not fully functional on mobile)

etch-a-sketch's People

Contributors

jzaager avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.