Code Monkey home page Code Monkey logo

hide-and-seek's Introduction

Hide and Seek

Learning Objectives

  • Identify and describe the core JavaScript types: strings, numbers, objects, arrays, undefined/null, and booleans.
  • Describe the difference between let and const, and describe when each is useful.
  • Describe the relationship between state and view in an application.
  • Increment numerical state, stored in a let, in response to a user event (usually a click).
  • Derive implicit numerical state using explicitly tracked numerical state.
  • When updating numerical state on click, update the DOM to reflect the new state to the user.
  • Create an array of primitive values and access any item in that array by index using bracket notation
  • Use document.getElementById to β€˜grab’ a DOM element by id
  • Add an event listener to a 'grabbed' button element and call a function (console.log , alert , etc) inside that event listener.
  • On click, manipulate the textContent, style.color, and style.backgroundColor of a DOM element with a hard-coded string value
  • On click, use classList.toggle() to add a css class to a DOM element.
  • Describe the difference between declaring and calling a function.
  • Describe the benefits and risks of both WET (write everything twice) and DRY (don't repeat yourself) code
  • Write an impure function to bundle and reuse DOM manipulation that is repeated multiple times
  • Use Math.random to get a random item from an array
  • Use a truthy/falsey expression in an if/else statement to perform an action conditionally
  • Describe the difference between (and give examples of) true and truthy, false and falsey values.

Buggy Hide and Seek

Live Example:

https://alchemycodelab.github.io/js-hide-and-seek/

User should be able to . . .
Visit the deployed pages on GitHub pages, with link in the About section of the Github repo 1
See three hiding places, with a button beneath each of them. 1
Events . . .
On clicking a hiding place button, the total number of guesses increment 1
On clicking the correct hiding place button, the total number of correct guesses increment 1
On clicking the incorrect hiding place button, the number of incorrect guesses increments 1
On click, see the correct hiding place's image change, clearing out the previous correct guess style 1
Functions
IMPURE: resetStyles() 1
IMPURE: getRandomItem(arr) : returns random item from given array 1
IMPURE: handleGuess(userGuess, correctSpot) 2

hide-and-seek's People

Contributors

dpcairns avatar

Watchers

James Cloos avatar  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.