Giter VIP home page Giter VIP logo

dom-i's Introduction

DOM I

Topics:

  • Interacting with the DOM
  • Selectors
  • selectElementsByClassname
  • selectElementbyId
  • querySelector
  • querySelectorAll
  • NodeList
  • HTMLCollection

Objectives

  • Manipulate the DOM using JavaScript
  • Choose selectors for a given problem
  • Work with the object the different selectors return

Beginning Project

  • You'll be working in the digital_timer directory
  • Add your script tag into you index.html
  • You can open your index.html file in your browser to see your work, but you may also work in codepen.io first if you'd like
  • All your work will be done in index.js
  • Make sure to read both the index.html and styles.css files so that you know what you're working with
  • Organization of your code in index.js will be up to you. There will be suggestions provided later in the day

Project Description

You will be making a timer that:

  • Counts up to 10 seconds
  • Increments every 10 ms
  • Has digits change to red when it gets to 10 seconds
  • Should not count past 10 seconds

You will also need to look up and use window.setInterval. For this method, and any of those listed in the "Topics" section of this README, you are encouraged to use MDN as your resource for Documentation. MDN can be challenging to consume at first, so you may also use something like W3schools if the MDN documentation on a given subject is a bit too complicated.

Stretch Goals

If you compelete the timer with time to spare:

  • Self study and research DOM events and event listeners
  • SG1: Implement a start button. The digital timer should not start until the button is pressed.
  • SG2: Once you have a start button working, configure it so that when a user presses the start button it is disabled and not enabled until the timer finishes.
  • SG3: Once you have finished SG2, add new new button called reset that resets the timer to 0:00:00 and then pressing the start button again will start the timer from 0.
  • SG4: Finally, if you have completed all the stretch goals, spend some time styling your timer and buttons.

dom-i's People

Contributors

jaivonmassena avatar ivanmora avatar tetondan avatar

Watchers

James Cloos avatar  avatar

Forkers

ilhokim

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.