JavaScript and Forms
Posted on Aug 3rd, 2022
🗓️ Today’s topics
- HTML forms
- Working with form data in JavaScript
- Client-side form validation with JavaScript
🎬 End of Phase Technical Presentations
The presentations at the end of this phase will be in the form of a short video. Each of you will record a screencast on one of the projects you did in Phase 1. The video should be 4-5 minutes long, and no longer.
Your target audience is a brand new Momentum student who is just at the beginning of Phase 1 after Foundations. Imagine you are teaching them how to do what you’ve done in this project. Give them the benefit of your experience over these past several weeks.
This video does not have to be polished, scripted, or edited. But your viewer should be able to follow what you’re saying and understand the points you are making. You should illustrate the concepts you are talking about with examples from your code.
Suggestions for how to use your time. ~ 1 min - show the project in the browser and highlight its functions ~ 3 min - pick a couple of elements of the code that you want to explain line by line and show what you learned in the process ~ 1 min - a challenge you encountered in the project and how you got through it
I suggest using Loom – it’s very simple to use for screencasts and for camera videos and will let you share your video easily. The free account also limits your videos to 5 minutes, so it should help you with timing!
Loom lets you record a screencast with or without your face showing. You can choose according to your preference.
Please post your video and share the url for it using this form. Your videos are due by EOD on Thursday, August 4.
✅ Requirements for passing the phase
- The code you chose to illustrate runs without errors.
- The code you illustrate meets the (non-spicy) requirements of the assignment.
- You can explain how your code works.
- Your presentation includes JavaScript.
- You turn in a video.
🔖 Resources
- MDN Client-Side Form Validation
- MDN HTML5 Constraint Validation
- MDN Forms Guide
- MDN HTML form element
- MDN HTMLFormElement
- MDN HTML input element
- MDN HTML label element
- MDN submit event
- MDN Event.preventDefault