CSCI-UA.0061 : Fall 2020

This semester our class will be running 1x per week, online. In order to make the most of our weekly meeting, and to prevent "Zoom Fatigue", I will be teaching the class using a "flipped classroom" model. Here's how this model will operate in our class this semester:

Before most classes you will be asked to watch a video lesson - the lesson for this week can be found below.
After you watch all of the videos in today's lesson you will have a small task to perform - we will refer to these as "micro assignments". These "micro" assignments are fairly straightforward and short and are directly related to the content covered in the video lesson for the week.
These "micro" assignments are due before our next class meeting. You cannot turn in a "micro" assignment late. We are setting up these assignments in this way so that everyone has a baseline level of knowledge of the topics being covered in the video lesson. This will allow us to make the most of our time together during our weekly course meeting.
During our course meeting we will cover new topics during the first half of class. During the second half of class we will focus on working on a larger programming assignment together and in small groups.

JavaScript Arrays

JavaScript Functions

Objects in JavaScript

Introduction to the Document Object Model (DOM)

Micro Assignment #02

Your task is to edit the HTML document below to include some JavaScript that will make some changes to the page. Here is the code you will be working with:

<!doctype html>
<html>

  <head>
    <title>Micro Assignment 02</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
  </head>

  <body>

    <!-- you cannot modify anything from this point forward until you reach the next HTML comment -->

    <h1>Micro Assignment 02</h1>

    <script>

      let boxColors = ['#ff0000', '#00ff00', '#0000ff', '#ffcc00', '#006699', '#fcde53']

      let boxProperties = {
        width: '200px',
        height: '50px',
        backgroundColor: 'pink'
      }

      function magic() {
        let r = parseInt(Math.random() * 256)
        let g = parseInt(Math.random() * 256)
        let b = parseInt(Math.random() * 256)

        return [r,g,b]
      }

    </script>

      <div id="one" class="box"></div>
      <div id="two" class="box"></div>
      <div id="three" class="box"></div>

    <!-- you may modify the script tag below -->

    <script>

      // Task #1: Add the text 'Hello, World!' to the div with an id of 'one'.
      // use a DOM query to isolate the element (you cannot change the element directly, nor can you use document.write to add new content to the page)

      // Task #2: change the div with an id of 'two' so that it has a random background color taken from the 'boxColors' array
      // use a DOM query to isolate the element (you cannot change the element directly, nor can you use document.write to add new content to the page)

      // Task #3: use the 'boxProperties' object to alter the div with an id of 'three' - set up this div to use the width, height and backgroundColor specified in this object
      // use a DOM query to isolate the element (you cannot change the element directly, nor can you use document.write to add new content to the page)

      // Task #4: use the 'magic' function to generate three random values.  These values will be returned to you as an array.  Use these random values as the font color for the 'h1' tag at the top of the page
      // hint: the CSS 'color' rule can be used to change the font color of an element
      // you can use 'rgb(a,b,c)' as a value for this rule
      // for example:
      // color: rgb(255,0,0)
    </script>

  </body>

</html>

Your finished product should look like the following image:

Here are some hints to get you started:

You can ONLY make changes to the second script tag - no changes to HTML, CSS or JavaScript outside of this tag is allowed.
You will be using the two DOM methods - document.getElementById() and document.querySelector() - to isolate elements and make changes to them using the DOM.
You cannot "hard-code" any values - if the program says "use the array named 'boxColors'" you must use that array.

When you are finished please upload a copy of this file to your i6 website using the process described in Assignment 01. Name your file micro_assignment_02.html and ensure that it is accessible from within your webdev folder. You will also want to submit a link to your work on NYU Classes under the 'Assignments' tool. You will want to include this project as a link on your homepage (also described in Assignment 01)

Video Lesson 02

JavaScript Arrays

JavaScript Functions

Objects in JavaScript

Introduction to the Document Object Model (DOM)

Micro Assignment #02