createdDate | timeRequired | topics |
---|---|---|
2021-11-29 |
1 Hour |
instruction,workshop,javascript,dom-scripting,event-listeners,forms |
- Objective: Create a page with a form that takes a user name and assigns a number to them, and displays the list on the page
- Create a directory called ticket-taker
- cd into the directory
- create an
index.html
and aticket.js
file - Set-up the html file and add an
<h1>
that says "Hello!" - Go Live
- What do you see? If nothing, please raise hand
- Create a
<form>
- Inside the form, create a
<textarea
>/<input>
and<button>
/<input>
- Create an area for the order list to display
- Once you have created the elements for the page set-up, link you ids to variable names in your js file.
- Organization is key, especially in your js files. In this js file, you will be using DOM Scripting, Event Listeners, & functions
let user = document.getElementbyID("user")
- Link the elements that will be used (i.e. where the user inputs their name, the button and the where the list will render)
- Add an event listener to the button for when the user clicks submit -
element.addEventListener()
- This will listen for the "click" and run a callback function that does some things
- There are many ways to approach this problem. Again, the task is to generate an list with a user's name and an assigned number in chronological order.
- This output should resemble in some fashion:
- Bob - 1
- G.J. - 2
- Olivia - 3
- Devon - 4
- Is there another way to accomplish the task? Order list? Count ++? Try it another way.
- Jazz it up! Add some css elements to the page.
- Cap the list. Stop the ability to populate after a certain amount of submissions.