Giter Site home page Giter Site logo

The DOM Challenge

I built this small application during Flatiron School's Software Engineering Immersive Bootcamp while initially learning about JavaScript functionalities. It has a few features:

  • A Counter that increases by 1 each second
  • Plus and Minus buttons that increment or decrement the counter
  • A 'like' button (❤️) that adds a 'like' for the number that is currently displayed by the timer
  • A comment box that adds comments when submitted

As part of the practice, I had to explore and test out the behavior of a working, finished page to understand what is happening underneath each of these features. Note: the HTML framework was provided.

The challenge was to reverse engineer these features and build them myself, using what I learned in two days about JavaScript and DOM Manipulation.

Rewriting the functionality

The deliverables for the practice are included below. They describe the features from the perspective of a user when they visit the page.

  1. As a user, I should see the timer increment every second once the page has loaded.
  2. As a user, I can manually increment and decrement the counter using the plus and minus buttons.
  3. As a user, I can 'like' an individual number of the counter. I should see count of the number of 'likes' associated with that number.
  4. As a user, I can pause the counter, which should
    • pause the counter
    • disable all buttons except the pause button
    • the pause button should then show the text "resume." When 'resume' is clicked, it should restart the counter and re-enable the buttons.
  5. As a user, I can leave comments on my gameplay, such as: "Wow, what a fun game this is."

To view the lesson and play with the code, please click on Flatiron School's DOM Challenge page and start learning to code for free on Learn.co.

Head back to my DOM Challenge site.

Gee-Wey Yue's Projects

13-card-game icon 13-card-game

Single page application of the "Thirteen" card game, also known as Tiến Lên or VC. Played with 4 separate hands.

algo-front icon algo-front

Algos is an algorithm visualizer built by Gee-Wey Yue, Gordy Lanza, and Li Xie using React.

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.