GithubHelp home page GithubHelp logo

mastery-exercise-static-web-js-sscotth's Introduction

The Static Web JavaScript Quiz

Setup

When you are ready to start the quiz, request the Github Classroom link from your instructor. After you've successfully created the repository on Github for your quiz, execute the following command.

mkdir -p ~/workspace/quizzes/static-web/javascript && cd $_
  1. Your instructor will send you the Github Classroom link that will create a blank repository to hold your quiz.
  2. Once your repository is created, you will see the Quick Setup page.
  3. Copy the commands for the section labeled …or create a new repository on the command line
  4. Paste those commands into your terminal and press return to make sure the last command gets executed.
  5. Now run the following commands.
git checkout -b quiz
touch index.html
touch quiz.js

You are now ready to work in the quiz branch.

When your work in complete, push up the branch (git push origin quiz) and submit the pull request on Github.

Instructions

It is absolutely critical that you read each of these requirements because as a professional you will be expected to completely understand what you are expected to do. If you submit code that does not fulfill the requirements, you will be sent to your room with no dinner.

Create a tree function that should build a pine tree out of a character in the Chrome dev tools console.

It accepts a single object as an argument. The object should have two key/value pairs.

  1. A key that specifies the height of the pine tree.
  2. The value for the height of the tree should be from user input in a <input type="text"> field in the DOM.
  3. A key that specifies which character to use to build the pine tree.
  4. The character to use should be from user input in a <input type="text"> field in the DOM.

Once the user enters in a number, and a character, the user can either then just press the enter key (as long as the cursor is in one of the input fields), or click a button that is labeled "Grow your tree" and the tree should be shown in the console. This requires you to add an event listener to the button, as well as an event listener for the enter/return key.

If either of the input fields does not have a value in it when the user presses the enter key, or presses the button, then display an alert stating that both fields must have a value.

Grow your tree

Example

Here's what the pine tree should look like when you specify a height of 7, and use the asterisk character.

      *
     ***
    *****
   *******
  *********
 ***********
*************

mastery-exercise-static-web-js-sscotth's People

Watchers

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