При нажатии на кнопку Generate greeting
в консоли должно появится сообщение такого формата:
Hello, *firstName* *lastName*!
, где *firstName*
значение первого поля, *lastName*
- второго поля.
После этого поля должны очиститься.
Используй внутренний скрипт.
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
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>