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>
3.7 KiB
3.7 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 64005eb6d2d06a15d9f7611f | Step 10 | 0 | 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 logical NOT operator (!) to check if the value itself is falsy. For example:
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.
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.
assert.match(String(checkUserInput), /if\s*\(\s*.+\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 = () => {
--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();
}
});