CSS:

body {

height: 98vh;

font: 16px Verdana;

display: flex;

align-items: center;

justify-content: center;

background: linear-gradient(to top left, #289fb4, #6fa7d5);

}

h1 {

display: block;

font-family: sans-serif;

font-size: 60px;

line-height: 1.3;

width: 100%;

text-align: center;

padding: 30px;

color: white;

}

form {

background-color: #6fa7d5;

padding: 10px;

}

label {

font-size: 1.2rem;

font-weight: bold;

/* font-family: 'calibri light', Verdana, Geneva, Tahoma, sans-serif; */

}

input,

select {

min-height: 1.5rem;

min-width: 200px;

background-color: #88dfee;

border: 2px solid #444;

border-radius: 6px;

outline: none;

font: 1.2rem/1.2 Verdana;

}

select {

min-height: 1.7rem;

min-width: 263px;

}

button {

background-color: brown;

color: #bbe5ec;

min-height: 2.5rem;

border-radius: 10px;

padding: 10px 15px;

font-size: 1.4rem;

outline: none;

}

button:hover {

background-color: #bbe5ec;

color: brown;

}

button:focus {

background-color: #0b2e6e;

color: rgb(199, 182, 182);

}

.correctAns {

background-color: rgb(92, 240, 87);

color: rgb(173, 49, 18);

font-weight: 800;

padding: 20px;

}

.wrongAns {

background-color: rgb(196, 56, 56);

color: yellow;

font-weight: bolder;

font-size: 1.3rem;

padding: 20px;

}

.result {

background-color: inherit;

color: inherit;

font-weight: normal;

padding: 15px;

}

.caption {

font-weight: bold;

font-size: 1.3rem;

}

HTML:

Introduction to JavaScript

CS206 Unit 2

Fill in the information requested below:

First Name:

Last Name:

Year of Birth:

Result:

Introduction

HTML Forms provide a good introduction to DOM elements and events. In this exercise, we will take an existing form and populate options from a script, then collect user information and process it for reflection and storage.

Create an event listener and prevent the default page behavior.

In the event listener, call a function that will calculate the user's age (approximately) by subtracting the birthyear from the currentYear.

Use a hard-coded variable for the current year.

Display the information back to the user in a designated area of the page by using a template string with all the variable values.

Test Data:

First Name: Mike

Last Name: Martin

birthYear: 1991

currentYear: 2021

Result: Hello, Mike Martin, you are at approximately 30 years old.

EXTRA! Format the output by adding a class to the result area that indicates a friendly correct response. There are no extra points for this part, it is just for experience.