3.9 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 63e9eb5b2328eed3d194b28a | Step 7 | 0 | step-7 |
--description--
If you open your browser's console and type in the number input, you'll see event objects logged to the browser. And if you take a closer look at one of those event objects, you'll see helpful properties like type and target.
Since you want to perform an action when the Enter key is pressed, the most helpful property is key, which tells you the string value of the key that was pressed.
Remove the console.log() statement from the callback function and add an if statement that checks if e.key is equal to the string Enter. Leave the body of your if statement empty for now.
Note: Since the Enter and Return keys have similar functions, they both have the same string value of Enter.
--hints--
Your callback function should not contain a console.log() statement.
assert.notMatch(code, /('|"|`)keydown\1\s*,\s*(\(\s*e\s*\)|e)\s*=>\s*{\s*.*console\.log\(/);
Your if statement should check if e.key is equal to the string Enter.
assert.match(code, /if\s*\(\s*(?:e\s*\.\s*key\s*===?\s*('|"|`)Enter\1|('|"|`)Enter\2\s*===?\s*e\s*\.key)\s*\)\s*\{/);
The body of your if statement should be empty.
assert.match(code, /if\s*\(\s*(?:e\s*\.\s*key\s*===?\s*('|"|`)Enter\1|('|"|`)Enter\2\s*===?\s*e\s*\.key)\s*\)\s*\{\s*\}/);
--seed--
--seed-contents--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Decimal to Binary Converter</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Decimal to Binary Converter</h1>
<div class="input-container">
<label for="number-input">Enter a decimal number:</label>
<input
value=""
type="number"
name="decimal number input"
id="number-input"
class="number-input"
/>
<button class="convert-btn" id="convert-btn">Convert</button>
</div>
<output id="result" for="number-input"></output>
<div id="animation-container"></div>
<script src="script.js"></script>
</body>
</html>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--light-grey: #f5f6f7;
--dark-blue: #1b1b32;
--orange: #f1be32;
}
body {
background-color: var(--dark-blue);
font-family: "Times New Roman", Times, serif;
font-size: 18px;
color: var(--light-grey);
padding: 0 15px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
text-align: center;
font-size: 2.3rem;
margin: 20px 0;
}
.input-container {
margin: 10px 0;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.convert-btn {
background-color: var(--orange);
cursor: pointer;
border: none;
padding: 4px;
}
.number-input {
height: 25px;
}
#result {
margin: 10px 0;
min-width: 200px;
width: fit-content;
min-height: 80px;
word-break: break-word;
padding: 15px;
border: 5px solid var(--orange);
font-size: 2rem;
text-align: center;
}
#animation-container {
margin: auto;
max-width: 300px;
}
.animation-frame {
margin: 250px auto 0;
padding: 15px 10px;
border: 5px solid var(--orange);
font-size: 1.2rem;
text-align: center;
}
@media screen and (min-width: 500px) {
.input-container {
flex-direction: row;
}
#result {
max-width: 460px;
}
}
const numberInput = document.getElementById("number-input");
const convertBtn = document.getElementById("convert-btn");
const result = document.getElementById("result");
const checkUserInput = () => {
console.log(numberInput.value);
};
convertBtn.addEventListener("click", checkUserInput);
numberInput.addEventListener("keydown", (e) => {
--fcc-editable-region--
console.log(e);
--fcc-editable-region--
});