mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-22 03:26:02 -05:00
91e0a94906
Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: Joy Shaheb <khondokoralam@gmail.com>
182 lines
3.7 KiB
Markdown
182 lines
3.7 KiB
Markdown
---
|
|
id: 64005eb6d2d06a15d9f7611f
|
|
title: Step 10
|
|
challengeType: 0
|
|
dashedName: step-10
|
|
---
|
|
|
|
# --description--
|
|
|
|
In an earlier project you learned about truthy and falsy values, which are values that evaluate to `true` or `false`. In JavaScript, some common falsy values you'll see are `null`, `undefined`, the number `0`, and empty strings.
|
|
|
|
Rather than check if a value is equal to a falsy value, you can use the <dfn>logical NOT</dfn> operator (`!`) to check if the value itself is falsy. For example:
|
|
|
|
```js
|
|
const num = 0;
|
|
|
|
console.log(num === 0); // true
|
|
console.log(!num); // true
|
|
```
|
|
|
|
Update the condition in your `if` statement to use the logical NOT operator to check if `numberInput.value` is falsy.
|
|
|
|
# --hints--
|
|
|
|
You should use the logical NOT operator (`!`) to check if `numberInput.value` is falsy.
|
|
|
|
```js
|
|
assert.match(String(checkUserInput), /if\s*\(\s*!\s*numberInput\s*\.\s*value\s*\)\s*\{|if\s*\(\s*!\s*numberInput\s*\[\s*('|"|`)value\1\s*\]\s*\)\s*\{/)
|
|
```
|
|
|
|
The body of your `if` statement within `checkUserInput` should be empty.
|
|
|
|
```js
|
|
assert.match(String(checkUserInput), /if\s*\(\s*.+\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 = () => {
|
|
--fcc-editable-region--
|
|
if (numberInput.value === "") {
|
|
|
|
}
|
|
--fcc-editable-region--
|
|
|
|
console.log(numberInput.value);
|
|
};
|
|
|
|
convertBtn.addEventListener("click", checkUserInput);
|
|
|
|
numberInput.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") {
|
|
checkUserInput();
|
|
}
|
|
});
|
|
```
|