search

Javascript - DOM 2

hashtag
Learning objectives

  • Input elements

  • Events expanded

hashtag
Flipped classroom videos

hashtag
Peer instruction

hashtag
Question 1

Assume there is a button in the html page. What will happen when the button is clicked?

const button = document.querySelector('button');
button.addEventListener('click', logMessage());

function logMessage() {
  console.log('Message');
}

  1. The string logMessage() will be logged to the console

  2. The string Message will be logged to the console

  3. The string logMessage will be logged to the console

  4. Nothing

  5. Syntax error

hashtag
Teacher instruction

hashtag
Forms and input elements

Forms are used to send data from the client to a server. Often times you need to write your name, email, telephonenumber etc.

hashtag
Inputs

Inputs are used to get text from a user. This is how an input is defined 👇 Notice that it is selfclosing! Like the img tag

This is probably the most famous input field ever

Google input field

There are different types of input fields. One for numbers, text, telephone number, date. See them all herearrow-up-right

hashtag
Checkboxes

Checkboxes are used to get a value that can either be true or false. It is typically used for the remember me functionality

Checkbox

hashtag
Radio buttons

Radio buttons are used to select between a given set of options.

The label tag shows the text for the radio button. What is important is that the id attribute and the for attribute matched their value. Otherwise the label is not connected to the radio button.

Another important thing is that the groups that are together have the same name attribute

Radio buttons

hashtag
Select

Select is also used to select between a given set of options. It is typically used to select country. The difference from the radio buttons is that in select the user has the possibility to select multiple options!

It is similar to the ul and li. Inside of the select tag there has to be an option tag for each option the user can select. You can give the option tag a value but you dont have to

![Select list](assets/select box.png)

hashtag
Buttons

Buttons are used for some kind of interactivity. Should not be used as links!

There are some more form fields but i have covered the most important ones here

hashtag
Exercises

hashtag
Exercise 1

Brug den her GPT til at få feedback på din portefølje 3: https://chatgpt.com/g/g-e86Y0eXNp-webteknologi-web-feedbackarrow-up-right

hashtag
Exercise 2

Make a boarding pass form where users will input the following:

  • Name

  • Year of birth

  • Password number

  • Destination - can only choose between a specific number of destinations

  • First class, Coach or Premium - Can only select one

Think about what form elements would fit best to capture the information

When the boardning pass is submitted, render the boarding pass with the passed information

hashtag
Casetime

You can create you own exercise using the prompt below. You can also work on on of the projects that can be found under the prompt

Make a plan for how to create this application before you start writing any code. I want to see the plan when i come around!

hashtag
Tab countdown timer - level 2

Lav en hjemmeside hvor en bruger kan taste hvor mange sekunder en nedtælling skal ske fra. Når brugeren så trykker på en knap skal nedtællingen ske i sidetitlen. Ligesom på den her side:

https://www.timer-tab.com/

hashtag
🌍 Personal CO2 Emission Calculator - level 2

Create a web application that allows users to calculate their personal CO2 emissions based on their daily activities. This could be based on the distance they drive, the type of food they consume, their electricity usage, etc.

  • Maybe a user inputs how many miles they drive in a week and the type of vehicle they own, and the website calculates their weekly CO2 emissions.

  • Maybe a user inputs the type of food they consume in a week (vegetarian, non-vegetarian, vegan) and the website calculates the CO2 emissions based on their diet.

  • Maybe a user inputs their monthly electricity bill, and the website estimates their CO2 emissions based on average energy sources.

If you cannot think of any idea, try researching common sources of personal CO2 emissions and see if you can incorporate them into your calculator!

hashtag
Requirements

  • The user should input details about their daily activities.

  • There should be a button that initiates the calculation.

  • The application should display the calculated CO2 emissions based on the user's input.

hashtag
📝 Imprecise Calculator - level 3

Create a project that works as a calculator. It should be possible for a user to add numbers via buttons as seen in a classic calculator. BUT the calculator should sometimes give a slightly wrong answer.

Advanced:

Make it possible for a user to use the calculator using the keyboard aswell. Remember to foucs on writing good HTML and CSS

If you are unsure how to start then maybe get ChatGPT to help you scaffold this exercise

Please dont make the app make a fart sound when the equal button is clicked!

And please please please dont make the app make different fart sounds when clicking any buttons. It would be childish and it would be below you to create such a feature!

hashtag
Scaffolding prompt

Prompt for helping you scafold out the project you are working on

PreviousJavascript - DOM 1NextAPI, JSON and fetch

Last updated