We're going to explore a website that you run right on your desktop today. Use a text document to answer the questions.
-
Open the index.html file inside of the rgb folder.
-
Play the game for a few minutes, get to know it, change the difficulty.
a. How would you expand the game? What options or settings could you add?
-
Using this documentation https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction to guide you:
a. What is the DOM?
b. When is the DOM different than HTML?
c. What is the state of the DOM when you first load the page?
d. What is the state of the DOM if you turn off JavaScript and refresh the page?
-
Now let's explore the code. Use the inspector to investigate the HTML, CSS and Javascript.
a. Which parts of UI are being generated by the HTML file? The CSS? The JavaScript?
b. What happens inside the CSS file when you click on various elements in the page?
i. What elements does the CSS file change?c. What happens inside the HTML file when you click on various elements in the page?
d. Use breakpoints in the JavaScript to walk through what happens when you click on various elements on the page.
i. What happens when you click on a color block? ii. What happens when you click on the winning color block? iii. What happens when you click "Play again"? iv. What HTML and CSS elements can JavaScript change? v. How does score keeping work? vi. Why does it persist through closing the page? vii. When you win what happens when the title changes? viii. What does Asynchronous mean in the context of JavaScript? ix. What is the fetch function inside of updateColorName? x. What does it do? xi. What's an alternative to using fetch? xii. Why use one over the other? -
Add comments to the JavaScript code explaining what you think each function does.
-
As you went through this process which of the 3E's did you draw from most? How?
a. Curiosity, Deal with Uncertainty, Observation Skills
-
Push your changes to Git.
Other Resources: