# Assignment 2: Color Grid

## Introduction

Welcome to your second assignment this summer! You all did an amazing job on the first assignment so I'm excited to see what you create in this assignment. As before, your assignment will consist of two parts.

### Part 1: Replit
1. Reading, Writing & Understanding Code: A major requirement for your success in this class is to develop and strengthen your ability to not only READ and WRITE code BUT also to UNDERSTAND the code you read and write.
2. Coding & Problem Solving Skills: Similarly to math class, it is not only important to know what code looks like and how to write code. You must also know when to use different coding concepts to solve a variety of problems.
3. You must SUBMIT your code on Replit using the submit button above your code editor.

### Part 2: Google Classroom
1. Google Doc: As with Assignment 1, you are to complete the questions on the Google Doc attached to the assignment post on Google Classroom.
2. You must TURN IN your submission on Google Classroom

Again, I believe in you all and I am confident we will all be successful this year! Now on to the assignment.

### Color Grid

- The website has been divided into a four section 2 x 2 grid.
- Each grid element has a unique id which can be found on the index.html file. The ids are as follows:
- "1"
- "2"
- "3"
- "4"
- There one button in the center of the website.
- The button is supposed to randomly change the color of a randomly selected grid element.

### Your task

You are provided with starter code that includes the following:

1. ```function randomNumberGenerator(upperBound)```
- This function takes upperBound as a parameter.
- upperBound is a number
- randomNumberGenerator returns a number from 0 to upperBound - 1
- ```randomNumberGenerator(10)```, will return a random number from 0 to 9
- ```randomNumberGenerator(100)```, will return a random number from 0 to 99
- ```randomNumberGenerator(55)```, will return a random number from 0 to 54

THOROUGHLY READ this starter code to understand how it works and then use it as a guide to write code that uses the button on the right of the website to change the color of the right half of the website.

### Requirements

1. You MUST use the ```function randomNumberGenerator(upperBound)``` to select an id from the ```elementIDs``` array.
2. You MUST use RGB to select a color when changing the color of each grid element. Hint. RGB uses numbers so you SHOULD use the ```function randomNumberGenerator(upperBound)``` to randomly generate numbers for your RGB color selection.
3. You MUST write a function named ```randomColorSelector()``` that meets the following requirements.
i. Takes no parameters.
ii. Has no return value.
iii. Uses the ```function randomNumberGenerator(upperBound)``` to randomly select one of the grid elements on the screen.
iv. Uses the ```function randomNumberGenerator(upperBound)``` to randomly generate RGB values to select a random color.
v. Uses DOM manipulation to change the color of the randomly selected grid element to the randomnly selected RGB color.
4. You MUST add an event listener to the button with id ```colorSelectorButton``` so the ```randomColorSelector()``` function is triggered whenever the button is pressed.
5. Upon successful completion, clicking the button in the center of your website will cause a random grid element to be changed to a random color.
i. This has similarities to the last assignment. Start there if you are confused.

### What You Need
Our second assignment tests you on the following concepts

- Arrays
- [RGB Colors](https://www.w3schools.com/colors/colors_rgb.asp)
- [Math.random()](https://www.w3schools.com/js/js_random.asp)
- Functions
- [DOM Manipulation](https://www.w3schools.com/js/js_htmldom.asp)

### Extra Credit

1. Increase the grid so it has 9 grid elements in a 3 x 3 layout.
2. Simplify the ```randomNumberGenerator(upperBound)``` so it only uses one line of code.

###### tags: `AP CS Principles` `CSH`