JavaScript ‐ User Interactions

Opening Task (20 Minutes)

• Scholars will complete opening task on Schoology covering topics learned from python foundations unit
• Randomly selected scholar will facilitate review with peers

Inputs & Javascript (30 Minutes)

Teacher demonstration of using Inputs with JavaScript to get user values Getting Values of Inputs

<h1 id="myHeader">My Header</h1>
<input id="name" />

<script>
  let myHeader = document.getElementById('myHeader')
  let nameInput = document.getElementById('name')

  console.log(nameInput.value) // What is the output we get? If we write something in our input does it change?
</script>

<h1 id="myHeader">My Header</h1>
<input id="name" />

<button onclick="clickMe()">Click Me</button>

<script>
  let myHeader = document.getElementById('myHeader')
  let nameInput = document.getElementById('name')

  function clickMe() {
    console.log(nameInput.value) // When in a function this will have the updated value
  }
</script>

Break (10 Minutes)

Return of the MadLibs (30 Minutes)

Students will work on creating a MadLibs game using JavaScript

It’s time to do MadLibs! (again).

1. Create a new MadLibs Story that meets the following criteria:
   • Minimum 4 Sentences
   • Minimum 5 words to be replaced
     • One of these words must be a color.
2. Create a new HTML file called mad_libs.html
3. Inside this HTML file create input elements for each
   • Remember each should have a unique ID!
4. Create a button that when clicked will do the following:
   • Display the combined story on the webpage
   • Change the color of the text or background to the color the user inputted
5. Add visual elements to enhance your webpage, for example:
   • Choose font that matches your story
   • Add images that match your story
   • Add an intro statement that introduces players to your MadLibs game