Thursday, December 11th

Class Hours: 10:05 – 2:40
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

CCV Class tomorrow – Last Class
Cookie Sign Ups
Adult visitors stopping by today
Did you order your CCV lunch?
CCV will offer 6 online courses this spring. The courses are free to college-ready students in any Vermont technical center program and were selected based on your survey responses and conversations over the fall semester. Talk to Emmy if you are interested!
- February 3 – May 18
  - PSY-1050 Human Growth and Development (3 Credits)
  - BIO-10300 Nutrition (3 Credits)
  - BUS-1010 Introduction to Business (3 Credits)
  - ENG-1061 English Composition (3 Credits)
- March 3 – April 6
  - BUS-1125 Startup 802 – An Entrepreneurship Mindset (1 Credit)
  - CIS-1714 Special Topics: Generative Artificial Intelligence (AI) (1 Credit)

10:10 Finish Presentations / Purinton Tree Farm

10:50 Morning Break (10 minutes)

11:00 JS – Event Handlers

Today’s concept will be Event Handlers in JS.

JavaScript event handlers are functions that execute in response to specific user interactions or browser actions (known as events). They allow web pages to be dynamic and interactive, responding to actions like a button click, a form submission, or a page load.

An Event Listener “listens” for a specific event to occur (like a button click).

An Event Handler is the function that is called or triggered (this is your JS block of code)

An Event Object contains information about the event (for example an input field is populated)

JavaScript supports a wide variety of events, including:
-Mouse Events: click, dblclick, mouseover, mouseout, mousedown, mouseup.
-Keyboard Events: keydown, keyup, keypress.
-Form Events: submit, change, focus, blur.
–Window/Document Events: load, unload, resize, scroll.

Activity: Making a Custom Shopping List & Our Own Mobile App

Let’s apply the information above into our very own shopping list application.

Here is an overview of what we are going to do:

We’ll start by making a simple form input (the most important form field) to capture some information for the shopping list.
When the user clicks the button, a list will be created below the input
We’ll want the input field to clear each time we submit
We’ll design for the small screen as a starting point and then scale up the design for larger screens using a min-width approach
Finally, we’ll add to our server and learn how to turn our shopping list into a web application on our mobile devices.