When you click on the Generate greeting button, a message of the following format should appear in the console:
Hello, *firstName* *lastName*!, where *firstName* is the value of the first field, *lastName* - of the second field.
After that, the fields should be cleared.
Use the internal script.
This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task
index.html
<!DOCTYPE html>
<html>
<head>
<title>Greetings</title>
<style>
* {
font-family: monospace;
letter-spacing: 0;
}
body {
margin: 0;
background-color: #719DCA;
display: grid;
height: 100vh;
place-items: center;
}
form {
background-color: white;
padding: 32px;
}
.input-wrapper {
display: flex;
margin-bottom: 16px;
padding: 4px;
}
input {
flex: 1;
margin-right: 16px;
}
label {
color: #95b8d1;
font-size: 12px;
width: 40px;
}
button {
width: 100%;
height: 28px;
color: white;
border: none;
outline: none;
background-color: #809BCE;
}
</style>
</head>
<body>
<form name="names">
<div class="input-wrapper">
<input type="text" id="firstName" name="firstName">
<label for="firstName">First name</label>
</div>
<div class="input-wrapper">
<input type="text" id="lastName" name="lastName">
<label for="lastName">Last name</label>
</div>
<button>Generate greeting</button>
</form>
</body>
</html>