Calculator_with_JavaScript.md

Create a Calculator with JavaScript

Grades: 6-8th

Time for Prep: 20 mins

Time for Set-up: 5 mins

Time for Lesson: 2 hours

Learning Objectives:

• The students will understand variables and if statements in JavaScript.
• The students will understand how to create a basic design when given a problem to be solved by computation.

Learning Outcomes:

• The students will use variable(s) in their calculator program.
• The students will use an if statement in their calculator program.
• The students will create a design for their calculator program.

Material Needed:

• Laptop or desktop computers with internet access
• Handouts for the calculator problem. See file -> Lesson Handout
• A sheet of paper that will allow them to write down their design
• Pencils
• Paper
• White board pens (if white board available)

Prep:

• Print lesson handouts.
• Optional: Create signs for the corners to play in the If Game.

Set-Up:

• Set up computers with a browser screen open.
• Place a pencil, a piece of scratch paper, and a handout next to each computer.

Lesson Plan:

Opener: The If Game (whole group)

• Similar to the game Four Corners.
• This game is designed to teach students the basics of if statements and familiarize them with the language used when talking about if statements.
• Game play:
  • Students and parents all start in one corner.
  • They are asked a question (questions should be easy, fun, and engaging).
  • If the answer (the if) is not true for them, they move to the next corner.
  • If the second answer (the else if) does not apply to them, they move to the last corner.
  • Students stay in the last corner (the else).
  • Repeat for a couple of rounds.

Main Activities:

1. Explain Variables (whole group)
   • Use a visual method (such as the bucket metaphor) to go over what a variable is and what they are used for.
   • Different data types will also be discussed, so students understand that a variable can hold a number, string, etc.
2. If statement and variable demonstration in Javascript (whole group)
   • Will allow students and parents to see how to create and use variables in Javascript.
   • Will allow students and parents to see how if statements are structured and used in Javascript.
   • Will allow students and parents to understand how to take in input and print to the console.
3. Design the calculator (whole group)
   • Walk the students through designing a problem that can be solved computationally.
   • Go through the "understanding the problem" step to make sure all students understand what the problem is asking before they try to solve the problem.
   • A flowchart can be drawn to visualize the design.
   • Help students think about how the tools they learned (variables and if statements) can be used to help them create a calculator.
4. Create the Calculator (individual parent-student activity)
   • Use Repl.it to create the calculator in Javascript.
   • The students and parents will implement addition, subtraction, multiplication, and division.
   • For extended learning, students can implement different equations.
   • For further learning, students can implement a ui for their calculator.
   • Sample full calculator (no ui): https://repl.it/@KaitlinDeeDee/JavaScript-Calculator
   • Sample calculator with ui: https://repl.it/@Aidenjn/calculator-UI

Closer: Reflection

• Give parents and students a few questions to talk about together.
• Open up the conversation to the whole group and allow anyone to answer.
• Have a few volunteers share their flowchart. Have them share how/why they approached the problem the way that they did.
• Questions:
  • What was the easiest part of making the calculator?
  • What was the most difficult part of creating the calculator?
  • What was something that happened that you didn’t expect?
  • Do you think you would use this in real life? Why or why not?
  • What else do you think you can do with the skills you learned today?
  • Someone give me an example of something else that is programmable. [Discuss how everything is a program]
  • Do you think you could/would want to do this again on your own?
  • Did you understand all of the steps that we performed? Were there any steps that were harder/easier than others?
  • How does this change your perspective about the calculator you use in class or on your phone/computer?
  • Would you want to continue this project, or work on something new?

Possible Issues

• A student/parent does not bring a laptop or their laptop dies.
  • The school has chromebooks the students can borrow.
  • We bring extension cords in case there is not a near-by outlet.
• A student comes but their guardians are not there.
  • If there are two students, we could make them buddies.
  • We check in on that student more often to make sure they are doing well.
• Tantrum
  • Ask to take a break or a walk with them or just watch
  • Scale back our lesson to do less.
  • Take 5 minute breaks