mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-23 21:04:36 -05:00
177 lines
3.9 KiB
Markdown
177 lines
3.9 KiB
Markdown
---
|
|
id: 63e9eb5b2328eed3d194b28a
|
|
title: Step 7
|
|
challengeType: 0
|
|
dashedName: 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.
|
|
|
|
```js
|
|
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`.
|
|
|
|
```js
|
|
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.
|
|
|
|
```js
|
|
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--
|
|
|
|
```html
|
|
<!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>
|
|
```
|
|
|
|
```css
|
|
*,
|
|
*::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;
|
|
}
|
|
}
|
|
```
|
|
|
|
```js
|
|
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--
|
|
});
|
|
```
|