mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-27 20:01:56 -04:00
chore(curriculum): add decimal to binary converter workshop to FSD cert (#57047)
This commit is contained in:
Dario-DC
@@ -3064,7 +3064,14 @@
|
||||
]
|
||||
},
|
||||
"dtfv": { "title": "240", "intro": [] },
|
||||
"bnvw": { "title": "242", "intro": [] },
|
||||
"bnvw": { "title": "241", "intro": [] },
|
||||
"workshop-decimal-to-binary-converter": {
|
||||
"title": "Build a Decimal to Binary Converter",
|
||||
"intro": [
|
||||
"Recursion is a programming concept where a function calls itself. This can reduce a complex problem into simpler sub-problems, until they become straightforward to solve.",
|
||||
"In this workshop, you’ll build a decimal-to-binary converter using JavaScript. You’ll practice the fundamental concepts of recursion, explore the call stack, and build out a visual representation of the recursion process through an animation."
|
||||
]
|
||||
},
|
||||
"xkhk": { "title": "243", "intro": [] },
|
||||
"yaxm": { "title": "245", "intro": [] },
|
||||
"udia": { "title": "248", "intro": [] },
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Introduction to the Build a Decimal to Binary Converter
|
||||
block: workshop-decimal-to-binary-converter
|
||||
superBlock: full-stack-developer
|
||||
---
|
||||
|
||||
## Introduction to the Build a Decimal to Binary Converter
|
||||
|
||||
Recursion is a programming concept where a function calls itself. This can reduce a complex problem into simpler sub-problems, until they become straightforward to solve.
|
||||
|
||||
In this workshop, you’ll build a decimal-to-binary converter using JavaScript. You’ll practice the fundamental concepts of recursion, explore the call stack, and build out a visual representation of the recursion process through an animation.
|
||||
@@ -0,0 +1,445 @@
|
||||
{
|
||||
"name": "Build a Decimal to Binary Converter",
|
||||
"blockType": "workshop",
|
||||
"blockLayout": "challenge-grid",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "workshop-decimal-to-binary-converter",
|
||||
"superBlock": "full-stack-developer",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "63db7f4677d06d7500a13321",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "63e9de47885cd4d08c29f8e2",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "63e9e5bcec5d33d21b82397e",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "6448e475f904ad580cd7e722",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "6448d62ce222044458b75931",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "6448fefcd6445d6b3d9d63db",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "63e9eb5b2328eed3d194b28a",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "64005ab13a78eb062547c12d",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "644905b34f614973a8252a26",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "64005eb6d2d06a15d9f7611f",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "640067f276acd525509646cc",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "64007367d54d2a7efbf44fcf",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "64475c0b61cddb6feaab4e2e",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "644760f4fb15ce765baebb62",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "6448ab52a902de04fc56b3fa",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "6448b2c9aec64c0ecd41573d",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "645b9ea45d3a9a9d711df81a",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "6448b4107aadc110a6ab4f65",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "644a0eadcbccaf1d13c7d137",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "644a2013b2ceea32c44d09f9",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "644a37d773b7610ac5ede66e",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "645b5c05986aba539ba6ca03",
|
||||
"title": "Step 22"
|
||||
},
|
||||
{
|
||||
"id": "644b6a23d398bb5f05ef796b",
|
||||
"title": "Step 23"
|
||||
},
|
||||
{
|
||||
"id": "644b82e0dc8e5e7ca47fcd9b",
|
||||
"title": "Step 24"
|
||||
},
|
||||
{
|
||||
"id": "644b6ad4fa8dfd600a9dff2c",
|
||||
"title": "Step 25"
|
||||
},
|
||||
{
|
||||
"id": "644b71f678b5e1687666c88d",
|
||||
"title": "Step 26"
|
||||
},
|
||||
{
|
||||
"id": "644b765b3bf09e6dff5e0931",
|
||||
"title": "Step 27"
|
||||
},
|
||||
{
|
||||
"id": "644b77a563c51f6ff5237b99",
|
||||
"title": "Step 28"
|
||||
},
|
||||
{
|
||||
"id": "644b7ac994d7dd73a61b4fa6",
|
||||
"title": "Step 29"
|
||||
},
|
||||
{
|
||||
"id": "645b65b681a62f5fa125ff62",
|
||||
"title": "Step 30"
|
||||
},
|
||||
{
|
||||
"id": "645b6693d8e1bf60f2d92e67",
|
||||
"title": "Step 31"
|
||||
},
|
||||
{
|
||||
"id": "645b6c92876e836832538e34",
|
||||
"title": "Step 32"
|
||||
},
|
||||
{
|
||||
"id": "645b6dad50514e69df601df6",
|
||||
"title": "Step 33"
|
||||
},
|
||||
{
|
||||
"id": "645b7f6a575ffc807877a8c6",
|
||||
"title": "Step 34"
|
||||
},
|
||||
{
|
||||
"id": "645b9d56b48971997a8055dd",
|
||||
"title": "Step 35"
|
||||
},
|
||||
{
|
||||
"id": "645b9de38df75b9a5cfc2e85",
|
||||
"title": "Step 36"
|
||||
},
|
||||
{
|
||||
"id": "645c803cad8434791a5f57b6",
|
||||
"title": "Step 37"
|
||||
},
|
||||
{
|
||||
"id": "645c80ee8b65917a24afcb14",
|
||||
"title": "Step 38"
|
||||
},
|
||||
{
|
||||
"id": "645c81579c54a57ae7c1a5f7",
|
||||
"title": "Step 39"
|
||||
},
|
||||
{
|
||||
"id": "645c81683d816b7b3a044143",
|
||||
"title": "Step 40"
|
||||
},
|
||||
{
|
||||
"id": "645c82268b9a8d7c4debd8dc",
|
||||
"title": "Step 41"
|
||||
},
|
||||
{
|
||||
"id": "645c85251dc1827fe4a6c4ce",
|
||||
"title": "Step 42"
|
||||
},
|
||||
{
|
||||
"id": "645c86f92a102d82250ce3e8",
|
||||
"title": "Step 43"
|
||||
},
|
||||
{
|
||||
"id": "645c8a55eca2118650ee3ce3",
|
||||
"title": "Step 44"
|
||||
},
|
||||
{
|
||||
"id": "645cb99035b8f046f1d669e4",
|
||||
"title": "Step 45"
|
||||
},
|
||||
{
|
||||
"id": "645cbad5f77ce948b35cf83e",
|
||||
"title": "Step 46"
|
||||
},
|
||||
{
|
||||
"id": "645cbb5ab1296e49946adb6e",
|
||||
"title": "Step 47"
|
||||
},
|
||||
{
|
||||
"id": "645cc5925f158b5b33e2698f",
|
||||
"title": "Step 48"
|
||||
},
|
||||
{
|
||||
"id": "645ccf7ec9aca267d84b053e",
|
||||
"title": "Step 49"
|
||||
},
|
||||
{
|
||||
"id": "645cd17b061afb6a8cba945a",
|
||||
"title": "Step 50"
|
||||
},
|
||||
{
|
||||
"id": "645cd267410ac06bfcaf0bd4",
|
||||
"title": "Step 51"
|
||||
},
|
||||
{
|
||||
"id": "645cd2b76488fd6cb8d1ae79",
|
||||
"title": "Step 52"
|
||||
},
|
||||
{
|
||||
"id": "645cd4eb6edf6e6f91acabbb",
|
||||
"title": "Step 53"
|
||||
},
|
||||
{
|
||||
"id": "645cd5b506ed8970b7ea953d",
|
||||
"title": "Step 54"
|
||||
},
|
||||
{
|
||||
"id": "645cd65c33bdc871bb72def4",
|
||||
"title": "Step 55"
|
||||
},
|
||||
{
|
||||
"id": "645cd8b7f4d8e27526694448",
|
||||
"title": "Step 56"
|
||||
},
|
||||
{
|
||||
"id": "645ca158fb7fa3237437fbbd",
|
||||
"title": "Step 57"
|
||||
},
|
||||
{
|
||||
"id": "645c8fe0c9505407650c4ac6",
|
||||
"title": "Step 58"
|
||||
},
|
||||
{
|
||||
"id": "645c9e6cf5c7251f7b3308f6",
|
||||
"title": "Step 59"
|
||||
},
|
||||
{
|
||||
"id": "645ca381c8f87f263034954f",
|
||||
"title": "Step 60"
|
||||
},
|
||||
{
|
||||
"id": "645ca5ca11d0d7293e61c6c7",
|
||||
"title": "Step 61"
|
||||
},
|
||||
{
|
||||
"id": "645ca62092c53f29f4ea9bf6",
|
||||
"title": "Step 62"
|
||||
},
|
||||
{
|
||||
"id": "645cb1306eb27a397be7f18c",
|
||||
"title": "Step 63"
|
||||
},
|
||||
{
|
||||
"id": "645cb07132281a380223e458",
|
||||
"title": "Step 64"
|
||||
},
|
||||
{
|
||||
"id": "645cb0ce6dc93738b442b0d0",
|
||||
"title": "Step 65"
|
||||
},
|
||||
{
|
||||
"id": "645ce315efe609814258b0bc",
|
||||
"title": "Step 66"
|
||||
},
|
||||
{
|
||||
"id": "645ce3c80f1c29824f1a8359",
|
||||
"title": "Step 67"
|
||||
},
|
||||
{
|
||||
"id": "645ce4375221138326895726",
|
||||
"title": "Step 68"
|
||||
},
|
||||
{
|
||||
"id": "6461f79f4ea2ef042fb2c0f4",
|
||||
"title": "Step 69"
|
||||
},
|
||||
{
|
||||
"id": "6461fd4c1bc6620aed6435b2",
|
||||
"title": "Step 70"
|
||||
},
|
||||
{
|
||||
"id": "64620068f97fe70ea47a9e75",
|
||||
"title": "Step 71"
|
||||
},
|
||||
{
|
||||
"id": "646203cdc054d012b5d71428",
|
||||
"title": "Step 72"
|
||||
},
|
||||
{
|
||||
"id": "6462060b0a8a2c15726649ec",
|
||||
"title": "Step 73"
|
||||
},
|
||||
{
|
||||
"id": "64620800e0c6ab17f0e31d6d",
|
||||
"title": "Step 74"
|
||||
},
|
||||
{
|
||||
"id": "646463be7341819690797ad2",
|
||||
"title": "Step 75"
|
||||
},
|
||||
{
|
||||
"id": "6464650a962e3d9852713549",
|
||||
"title": "Step 76"
|
||||
},
|
||||
{
|
||||
"id": "64646577f28ade99100a55c3",
|
||||
"title": "Step 77"
|
||||
},
|
||||
{
|
||||
"id": "646467130d7acc9b4e565c42",
|
||||
"title": "Step 78"
|
||||
},
|
||||
{
|
||||
"id": "646467683f25e19bfc9cf9b0",
|
||||
"title": "Step 79"
|
||||
},
|
||||
{
|
||||
"id": "64646bc0e5a60ea131e03f91",
|
||||
"title": "Step 80"
|
||||
},
|
||||
{
|
||||
"id": "64646db2c684b7a3a174a1d0",
|
||||
"title": "Step 81"
|
||||
},
|
||||
{
|
||||
"id": "646477c82475ffaf0c3c0771",
|
||||
"title": "Step 82"
|
||||
},
|
||||
{
|
||||
"id": "64647cf70a4556b5105e65b2",
|
||||
"title": "Step 83"
|
||||
},
|
||||
{
|
||||
"id": "64648534ff5498bee5dceb28",
|
||||
"title": "Step 84"
|
||||
},
|
||||
{
|
||||
"id": "646486adf52652c0ee103aab",
|
||||
"title": "Step 85"
|
||||
},
|
||||
{
|
||||
"id": "64648963e014f8c42a65b83a",
|
||||
"title": "Step 86"
|
||||
},
|
||||
{
|
||||
"id": "646493b7dc53b5d45c9c50fc",
|
||||
"title": "Step 87"
|
||||
},
|
||||
{
|
||||
"id": "64648c3703ad2ec796ab8d1e",
|
||||
"title": "Step 88"
|
||||
},
|
||||
{
|
||||
"id": "64648cf52e1ce1c8c00956ae",
|
||||
"title": "Step 89"
|
||||
},
|
||||
{
|
||||
"id": "6464905afec9efcf7328ce58",
|
||||
"title": "Step 90"
|
||||
},
|
||||
{
|
||||
"id": "646491d2c856afd17c2f380d",
|
||||
"title": "Step 91"
|
||||
},
|
||||
{
|
||||
"id": "646492f5c672c9d32f340c22",
|
||||
"title": "Step 92"
|
||||
},
|
||||
{
|
||||
"id": "64649b243b9cc3ddabacc593",
|
||||
"title": "Step 93"
|
||||
},
|
||||
{
|
||||
"id": "64649c6d77059edf80279a32",
|
||||
"title": "Step 94"
|
||||
},
|
||||
{
|
||||
"id": "64649efb555939e30462c79b",
|
||||
"title": "Step 95"
|
||||
},
|
||||
{
|
||||
"id": "64649f91446721e3ff391d88",
|
||||
"title": "Step 96"
|
||||
},
|
||||
{
|
||||
"id": "6464a057702d04e537d56d49",
|
||||
"title": "Step 97"
|
||||
},
|
||||
{
|
||||
"id": "6464a6d98c43acecb8a7867b",
|
||||
"title": "Step 98"
|
||||
},
|
||||
{
|
||||
"id": "6464a9f7d81939f08d04f435",
|
||||
"title": "Step 99"
|
||||
},
|
||||
{
|
||||
"id": "6464aabd17cd45f1d17cfe56",
|
||||
"title": "Step 100"
|
||||
},
|
||||
{
|
||||
"id": "6464ab8c06ea92f30bc548d5",
|
||||
"title": "Step 101"
|
||||
},
|
||||
{
|
||||
"id": "6464abfb6cf778f3cb33d379",
|
||||
"title": "Step 102"
|
||||
},
|
||||
{
|
||||
"id": "6464ad3c9b2e6cf58224cfa9",
|
||||
"title": "Step 103"
|
||||
},
|
||||
{
|
||||
"id": "6464b1384318a5087190950a",
|
||||
"title": "Step 104"
|
||||
},
|
||||
{
|
||||
"id": "6464b25851863b0a119eb7b1",
|
||||
"title": "Step 105"
|
||||
},
|
||||
{
|
||||
"id": "6464b3adeee9310bd37ff636",
|
||||
"title": "Step 106"
|
||||
},
|
||||
{
|
||||
"id": "6464b8ccb1a5d612c2f857d1",
|
||||
"title": "Step 107"
|
||||
},
|
||||
{
|
||||
"id": "6464c6d6698a8027f8c9d6be",
|
||||
"title": "Step 108"
|
||||
}
|
||||
],
|
||||
"helpCategory": "JavaScript"
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
---
|
||||
id: 63db7f4677d06d7500a13321
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this workshop, you'll build a decimal and binary converter and practice both number systems. You'll also use recursion to perform the conversions.
|
||||
|
||||
All of the HTML and CSS for this project has been provided for you.
|
||||
|
||||
When you're ready to get started, use the `.getElementById()` method to get the `input` element with the id `"number-input"`, and store it in a variable called `numberInput`. Use the same method to get the `button` element with the id `"convert-btn"` and store it in a variable called `convertBtn`, and the `output` element with the id `"result"` and store it in a variable called `result`.
|
||||
|
||||
|
||||
**NOTE**: This project will only convert positive numbers into binary.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `document.getElementById()` method to get the `#number-input` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)number-input\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare a variable called `numberInput` and assign it the `#number-input` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+numberInput\s*=\s*document\.getElementById\(\s*('|"|`)number-input\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use the `document.getElementById()` method to get the `#convert-btn` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)convert-btn\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare a variable called `convertBtn` and assign it the `#convert-btn` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+convertBtn\s*=\s*document\.getElementById\(\s*('|"|`)convert-btn\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use the `document.getElementById()` method to get the `#result` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)result\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare a variable called `result` and assign it the `#result` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+result\s*=\s*document\.getElementById\(\s*('|"|`)result\1\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,203 @@
|
||||
---
|
||||
id: 63e9de47885cd4d08c29f8e2
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you'll do some setup to check the value in the number input element whenever the user clicks the `Convert` button.
|
||||
|
||||
First, create an empty function called `checkUserInput`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`checkUserInput` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(checkUserInput);
|
||||
```
|
||||
|
||||
Your `checkUserInput` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /\{\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,205 @@
|
||||
---
|
||||
id: 63e9e5bcec5d33d21b82397e
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A good way to test that everything is working is to log the `value` attribute of `numberInput` to the console. As a reminder, you can access the `value` attribute of an element by using dot or bracket notation.
|
||||
|
||||
Within the `checkUserInput` function, use `console.log()` to log the `value` of `numberInput` to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `console.log()` call should be inside the `checkUserInput` function.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /console\.log\(\s*.*/);
|
||||
```
|
||||
|
||||
You should use `console.log()` to log the `value` of `numberInput` to the console.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /console\.log\(\s*numberInput\.value\s*\)|console\.log\(\s*numberInput\s*\[\s*('|"|`)value\1\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const checkUserInput = () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
```
|
||||
@@ -0,0 +1,221 @@
|
||||
---
|
||||
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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```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--
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,205 @@
|
||||
---
|
||||
id: 64005ab13a78eb062547c12d
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, within the body of the `if` statement, call the `checkUserInput()` function. After this, if you enter numbers into the number input and press the `Enter` / `Return` key, you should see numbers logged to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `checkUserInput()` function within the body of your `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*e\s*\.\s*key\s*===?\s*('|"|`)Enter\1\s*\)\s*\{\s*checkUserInput\(\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```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) => {
|
||||
if (e.key === "Enter") {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,226 @@
|
||||
---
|
||||
id: 64005eb6d2d06a15d9f7611f
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In an earlier lecture video 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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```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();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,225 @@
|
||||
---
|
||||
id: 640067f276acd525509646cc
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Because the `input type="number"` element allows special characters like `.`, `+`, and `e`, users can input floats like `2.2`, equations like `2e+3`, or even just `e`, which you don't want to allow.
|
||||
|
||||
A good way to check and normalize numbers in JavaScript is to use the built-in `parseInt()` function, which converts a string into an integer or whole number. `parseInt()` takes at least one argument, a string to be converted into an integer, and returns either an integer or `NaN` which stands for `Not a Number`. For example:
|
||||
|
||||
```js
|
||||
parseInt(2.2); // 2
|
||||
parseInt("2e+3"); // 2
|
||||
parseInt("e") // NaN
|
||||
```
|
||||
|
||||
Add a logical OR operator (`||`) after the first condition in your `if` statement. Then, pass the value of `numberInput` into the `parseInt()` function as the second condition of your `if` statement.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the logical OR operator (`||`) after the first condition in your `if` statement, then pass the value of `numberInput` into the `parseInt()` function as the second condition of your `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /if\s*\(\s*!\s*numberInput\s*\.\s*value\s*\|\|\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*\)\s*\{|if\s*\(\s*!\s*numberInput\s*\.\s*value\s*\|\|\s*parseInt\(\s*numberInput\s*\[\s*('|"|`)value\1\s*\]\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```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();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,234 @@
|
||||
---
|
||||
id: 64007367d54d2a7efbf44fcf
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, you need to check if the value returned by the `parseInt()` function is a number or not.
|
||||
|
||||
To do that, you can use the `isNaN()` function. This function takes in a string or number as an argument, and returns `true` if it evaluates to `NaN`. For example:
|
||||
|
||||
```js
|
||||
isNaN("test"); // true
|
||||
isNaN(2); // false
|
||||
isNaN("3.5"); // false
|
||||
```
|
||||
|
||||
Update the second condition in your `if` statement to use the `isNaN()` function to check if the value returned by `parseInt()` is `NaN`.
|
||||
|
||||
Also,as we mentioned in step 1 that we are considering only positive numbers, we should add a third condition in `if` statement to check whether the number is less than 0 (i.e negative numbers)
|
||||
|
||||
```js
|
||||
6 < 0; // false
|
||||
-1 < 0; // true
|
||||
-8 < 0; // true
|
||||
0 < 0; //false
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should wrap the value returned by `parseInt()` in the `isNaN()` function. And add a third condition which checks the value returned by `parseInt()` to be less than 0.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /if\s*\(\s*!\s*numberInput\s*\.\s*value\s*\|\|\s*isNaN\(\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*\)\s*\|\|\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*\<\s*0\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```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 || parseInt(numberInput.value)) {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
console.log(numberInput.value);
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,230 @@
|
||||
---
|
||||
id: 64475c0b61cddb6feaab4e2e
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you can alert the user if they don't enter a number, or the number is invalid before you attempt to convert it into binary.
|
||||
|
||||
In the body of the `if` statement, use the `alert()` method to display the text `"Please provide a decimal number greater than or equal to 0"`.
|
||||
|
||||
Note that `alert()` is a method on the `window` object in the browser, so you can use either `window.alert()` or `alert()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `alert()` method within the body of your `if` statement within `checkUserInput`.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /if\s*\(\s*.+\s*\)\s*\{\s*(window\s*.)?\s*alert\(/);
|
||||
```
|
||||
|
||||
When there is a falsy value in the `#number-input` element and the `checkUserInput()` function is called, the `alert()` method should display the text `"Please provide a decimal number greater than or equal to 0"`.
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
let alertMessage;
|
||||
window.alert = (message) => alertMessage = message; // Override alert and store message
|
||||
|
||||
numberInput.value = '';
|
||||
checkUserInput();
|
||||
|
||||
assert.strictEqual(alertMessage.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'please provide a decimal number greater than or equal to 0');
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
console.log(numberInput.value);
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,216 @@
|
||||
---
|
||||
id: 644760f4fb15ce765baebb62
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After alerting the user if the number input is empty or the value is not a number, you can use the `return` keyword to break out of this function early. This will prevent future code in this function from running.
|
||||
|
||||
Add the `return` keyword after `alert()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `return` keyword after `alert()`.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /if\s*\(\s*.+\s*\)\s*\{\s*(window\s*.)?\s*alert\(\s*('|"|`)please provide a decimal number greater than or equal to 0\2\s*\)\s*;?\s*return\s*;?\s*\}/i);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
--fcc-editable-region--
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
console.log(numberInput.value);
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,230 @@
|
||||
---
|
||||
id: 6448ab52a902de04fc56b3fa
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you'll start building the function to actually do the decimal to binary conversion.
|
||||
|
||||
Create a function called `decimalToBinary` with `input` as a parameter. Leave the body of the function empty for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
`decimalToBinary` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(decimalToBinary);
|
||||
```
|
||||
|
||||
You should pass `input` as a parameter to your `decimalToBinary` function.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /function\s+decimalToBinary\s*\(\s*input\s*\)/);
|
||||
```
|
||||
|
||||
The body of your `decimalToBinary` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /function\s+decimalToBinary\s*\(\s*input\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(numberInput.value);
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,230 @@
|
||||
---
|
||||
id: 6448b2c9aec64c0ecd41573d
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `checkUserInput` function, remove the `console.log()` statement. Then, call the `decimalToBinary` function and pass in the `value` of `numberInput` as an argument. Also, make sure to use the `parseInt()` function to convert the input into a number.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `console.log()` statement from your `checkUserInput` function.
|
||||
|
||||
```js
|
||||
assert.notMatch(String(checkUserInput), /alert\(\s*('|"|`)\s*(\s|.)*\s*\1\s*\)\s*;?\s*return\s*;?\s*\}\s*console\.log\((\s|.)*\)/);
|
||||
```
|
||||
|
||||
You should call the `decimalToBinary` function after the `if` statement within the body of your `checkUserInput` function.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /alert\(\s*('|"|`)\s*(\s|.)*\s*\1\s*\)\s*;?\s*return\s*;?\s*\}\s*decimalToBinary\(/);
|
||||
```
|
||||
|
||||
You should use `parseInt()` to convert the `value` of `numberInput` into a number, and pass that as an argument to the `decimalToBinary` function.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /decimalToBinary\(\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*\)|decimalToBinary\(\s*parseInt\(\s*numberInput\s*\[\s*('|"|`)value\1\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
console.log(numberInput.value);
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,231 @@
|
||||
---
|
||||
id: 6448b4107aadc110a6ab4f65
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that your function is set up, it's time to learn about <dfn>binary numbers</dfn>.
|
||||
|
||||
Binary numbers are a <dfn>base-2</dfn> number system. Unlike the <dfn>base-10</dfn> or decimal number system we use every day that uses 10 digits (`0-9`) to form numbers, the binary number system only has two digits, `0` and `1`. In computer science, these binary digits are called <dfn>bits</dfn>, and are the smallest unit of data computers can process. For computers, `0` represents `false` or "off", and `1` represents `true` or "on".
|
||||
|
||||
In your `decimalToBinary` function, use the `return` keyword to return a string of the binary number representation of `true`.
|
||||
|
||||
Note: Binary numbers can be long sequences that start with `0`, so they are often represented as strings.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `decimalToBinary` function should return a string.
|
||||
|
||||
```js
|
||||
assert.isString(decimalToBinary());
|
||||
```
|
||||
|
||||
Your `decimalToBinary` function should return `1` as a string.
|
||||
|
||||
```js
|
||||
assert.strictEqual(decimalToBinary(), '1');
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 6448d62ce222044458b75931
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your `Convert` button should be working now. But it could get tiring for users to enter in a number, then click that button each time they want to convert from decimal to binary. It would be much more convenient to perform the conversion when the `Enter` or `Return` key is pressed.
|
||||
|
||||
The `keydown` event fires every time a user presses a key on their keyboard, and is a good way to add more interactivity to `input` elements.
|
||||
|
||||
Chain `.addEventListener()` to `numberInput`. The event listener should listen for `keydown` events and take an empty arrow function as a callback.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `.addEventListener()` method on your `numberInput` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /numberInput\s*\.\s*addEventListener\s*\(/);
|
||||
```
|
||||
|
||||
Your `.addEventListener()` method should listen for the `keydown` event.
|
||||
|
||||
```js
|
||||
assert.match(code, /numberInput\s*\.\s*addEventListener\s*\(\s*('|"|`)keydown\1\s*,?/);
|
||||
```
|
||||
|
||||
Your `.addEventListener()` method should take a callback function using the arrow syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /('|"|`)keydown\1\s*,\s*\(\s*\)\s*=>/);
|
||||
```
|
||||
|
||||
Your callback function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /('|"|`)keydown\1\s*,\s*\(\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```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);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,215 @@
|
||||
---
|
||||
id: 6448e475f904ad580cd7e722
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that your `checkUserInput()` function is set up for testing, you can use an event listener to call the function when users click the `Convert` button.
|
||||
|
||||
Chain the `.addEventListener()` method to `convertBtn`. The event listener should listen for `click` events and take a reference to the `checkUserInput` function as a callback. Remember that function references are not called with parentheses.
|
||||
|
||||
Once that's done, whenever you click the `Convert` button, the value of the number input should be logged to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `.addEventListener()` method on your `convertBtn` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /convertBtn\s*\.\s*addEventListener\s*\(/);
|
||||
```
|
||||
|
||||
Your `.addEventListener()` method should listen for the `click` event.
|
||||
|
||||
```js
|
||||
assert.match(code, /convertBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,?/);
|
||||
```
|
||||
|
||||
Your `.addEventListener()` method should take `checkUserInput` as the callback. Remember to pass the function reference, not the function call.
|
||||
|
||||
```js
|
||||
assert.match(code, /convertBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*checkUserInput\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const checkUserInput = () => {
|
||||
console.log(numberInput.value);
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 6448fefcd6445d6b3d9d63db
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Whenever an event listener is triggered by an event, an event object is created automatically. You don't always need to use this object, like with your `click` handler above, but it can be useful to access information about the event that was triggered.
|
||||
|
||||
First, pass `e` as a parameter to your callback function. Remember that `e` is a common parameter name for the event object. Next, log `e` to the console in the body of your callback function.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your callback function should take the parameter `e`.
|
||||
|
||||
```js
|
||||
assert.match(code, /('|"|`)keydown\1\s*,\s*(\(\s*e\s*\)|e)\s*=>/);
|
||||
```
|
||||
|
||||
You should log `e` to the console in the body of your callback function.
|
||||
|
||||
```js
|
||||
assert.match(code, /('|"|`)keydown\1\s*,\s*(\(\s*e\s*\)|e)\s*=>\s*{\s*console\.log\(\s*e\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```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);
|
||||
|
||||
--fcc-editable-region--
|
||||
numberInput.addEventListener("keydown", () => {
|
||||
|
||||
});
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,217 @@
|
||||
---
|
||||
id: 644905b34f614973a8252a26
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that your `Convert` button and number input are listening for clicks and `Enter` key presses, it's time to complete the `checkUserInput()` function.
|
||||
|
||||
It would be helpful to alert users if they don't enter a value into the number input, or the number they enter is invalid. While the `input type="number"` element makes validation easier by only allowing numbers and some special characters, remember that all values you get from HTML elements are actually strings. Also, if the number input is empty, the `value` property will be an empty string.
|
||||
|
||||
Inside your `checkUserInput` function, use an `if` statement to check if the `value` of `numberInput` is equal to an empty string. Leave the body of the `if` statement empty for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `if` statement within `checkUserInput` should check if the `value` of `numberInput` is equal to an empty string.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /if\s*\(\s*numberInput\s*\.\s*value\s*===?\s*('|"|`)\1\s*\)\s*\{|if\s*\(\s*numberInput\s*\[\s*('|"|`)value\2\s*\]\s*===?\s*('|"|`)\3\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const checkUserInput = () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
console.log(numberInput.value);
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,252 @@
|
||||
---
|
||||
id: 644a0eadcbccaf1d13c7d137
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the base-2 number system, the rightmost digit represents the ones place, the next digit to the left represents the twos place, then the fours place, then the eights place, and so on. In this system, each digit's place value is two times greater than the digit to its right.
|
||||
|
||||
Here are numbers zero to nine in the base-10 and base-2 number systems:
|
||||
|
||||
```md
|
||||
| Base-10 | Base-2 |
|
||||
| ------- | ------ |
|
||||
| 0 | 0 |
|
||||
| 1 | 1 |
|
||||
| 2 | 10 |
|
||||
| 3 | 11 |
|
||||
| 4 | 100 |
|
||||
| 5 | 101 |
|
||||
| 6 | 110 |
|
||||
| 7 | 111 |
|
||||
| 8 | 1000 |
|
||||
| 9 | 1001 |
|
||||
```
|
||||
|
||||
Notice that binary numbers are formed from left to right, from the digit with the greatest place value on the left, to the least significant on the right. For example, the number `3` in binary is `11`, or `1` in the twos place and `1` in the ones place. Then for the number `4`, a digit to represent the fours place is included on the left and set to `1`, the twos place is `0`, and the ones place is `0`.
|
||||
|
||||
In your `decimalToBinary` function, convert the number `10` into binary and `return` it as a string.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `decimalToBinary` function should return a string.
|
||||
|
||||
```js
|
||||
assert.isString(decimalToBinary());
|
||||
```
|
||||
|
||||
Your `decimalToBinary` function should return a string with a length of `4`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(decimalToBinary().length, 4);
|
||||
```
|
||||
|
||||
Your `decimalToBinary` function should return `"1010"` as a string.
|
||||
|
||||
```js
|
||||
assert.strictEqual(decimalToBinary(), '1010');
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
--fcc-editable-region--
|
||||
return "1";
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 644a2013b2ceea32c44d09f9
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bits are often grouped into an octet, which is an 8-bit set known as a <dfn>byte</dfn>. A byte can represent any number between `0` and `255`. Here are the placement values for each bit in a byte:
|
||||
|
||||
```md
|
||||
128 | 64 | 32 | 16 | 8 | 4 | 2 | 1
|
||||
```
|
||||
|
||||
Because bits are often grouped into bytes, it's common to see binary numbers represented in groups of eight, sometimes with leading zeros. For example, the number `52` can be represented as `110100`, or `00110100` with leading zeros. Here's how that breaks down with the placement values:
|
||||
|
||||
```md
|
||||
128 | 64 | 32 | 16 | 8 | 4 | 2 | 1
|
||||
0 | 0 | 1 | 1 | 0 | 1 | 0 | 0
|
||||
```
|
||||
|
||||
In your `decimalToBinary` function, convert the number `118` into binary with leading zeros and `return` it as a string.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `decimalToBinary` function should return a string.
|
||||
|
||||
```js
|
||||
assert.isString(decimalToBinary());
|
||||
```
|
||||
|
||||
Your `decimalToBinary` function should return a string with a length of `8`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(decimalToBinary().length, 8);
|
||||
```
|
||||
|
||||
Your `decimalToBinary` function should return `"01110110"` as a string.
|
||||
|
||||
```js
|
||||
assert.strictEqual(decimalToBinary(), '01110110');
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
--fcc-editable-region--
|
||||
return "1010";
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,259 @@
|
||||
---
|
||||
id: 644a37d773b7610ac5ede66e
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you're familiar with binary numbers, it's time to finish building the function to do the conversion for you. You'll start off with a simpler solution first, then refactor that into a recursive solution.
|
||||
|
||||
First, you need to create some arrays to store the inputs and results of the division you'll do in the following steps. These will make it easier to see how the decimal to binary conversion works.
|
||||
|
||||
Remove the `return` statement from your `decimalToBinary` function. Then, declare variables named `inputs`, `quotients`, and `remainders`, and assign an empty array to each of them.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `return` statement from your `decimalToBinary` function.
|
||||
|
||||
```js
|
||||
assert.notMatch(String(decimalToBinary), /return\s*('|"|`)(\s|\d)*\1\s*;?\s*\}$/);
|
||||
```
|
||||
|
||||
You should declare a variable named `inputs`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /(var|let|const)\s+inputs/);
|
||||
```
|
||||
|
||||
You should assign an empty array to `inputs`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /inputs\s*=\s*\[\s*\]/);
|
||||
```
|
||||
|
||||
You should declare a variable named `quotients`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /(var|let|const)\s+quotients/);
|
||||
```
|
||||
|
||||
You should assign an empty array to `quotients`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /quotients\s*=\s*\[\s*\]/);
|
||||
```
|
||||
|
||||
You should declare a variable named `remainders`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /(var|let|const)\s+remainders/);
|
||||
```
|
||||
|
||||
You should assign an empty array to `remainders`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /remainders\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
--fcc-editable-region--
|
||||
return "01110110";
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 644b6a23d398bb5f05ef796b
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the decimal to binary conversion, you need to divide `input` by `2` until the <dfn>quotient</dfn>, or the result of dividing two numbers, is `0`. But since you don't know how many times you need to divide `input` by `2`, you can use a `while` loop to run a block of code as long as `input` is greater than `0` and can be divided.
|
||||
|
||||
As a reminder, a `while` loop is used to run a block of code as long as the condition evaluates to `true`, and the condition is checked before the code block is executed. For example:
|
||||
|
||||
```js
|
||||
let i = 0;
|
||||
|
||||
while (i < 5) {
|
||||
console.log(i);
|
||||
i++;
|
||||
}
|
||||
```
|
||||
|
||||
Create a `while` loop that runs as long as `input` is greater than `0`. Leave the body of the loop empty for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
The condition of your `while` loop should check if `input` is greater than `0`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /while\s*\(\s*input\s*>\s*0\s*\)\s*\{/);
|
||||
```
|
||||
|
||||
Your `while` loop should have an empty body.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
input = 0;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,241 @@
|
||||
---
|
||||
id: 644b6ad4fa8dfd600a9dff2c
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To divide numbers in JavaScript, use the division operator (`/`). For example:
|
||||
|
||||
```js
|
||||
const quotient = 5 / 2; // 2.5
|
||||
```
|
||||
|
||||
In the example above, `5` is the <dfn>dividend</dfn>, or the number to be divided, and `2` is the <dfn>divisor</dfn>, or the number to divide by. The result, `2.5`, is called the <dfn>quotient</dfn>.
|
||||
|
||||
Inside your `while` loop, create a variable named `quotient` and assign it the value of `input` divided by `2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a variable named `quotient` inside your `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{\s*(var|let|const)\s+quotient\s*=/);
|
||||
```
|
||||
|
||||
You should assign `quotient` the value of `input` divided by `2`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /(var|let|const)\s+quotient\s*=\s*input\s*\/\s*2\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
while (input > 0) {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
input = 0;
|
||||
}
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,229 @@
|
||||
---
|
||||
id: 644b71f678b5e1687666c88d
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Like you saw in the last step, division can lead to a floating point number, or a number with a decimal point. The best way to handle this is to round down to the nearest whole number.
|
||||
|
||||
Use the `Math.floor()` function to round down the quotient of `input` divided by `2` before it's assigned to `quotient`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `Math.floor()` function to round down the quotient of `input` divided by `2`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /(var|let|const)\s+quotient\s*=\s*Math\.floor\s*\(\s*input\s*\/\s*2\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
while (input > 0) {
|
||||
--fcc-editable-region--
|
||||
const quotient = input / 2;
|
||||
--fcc-editable-region--
|
||||
|
||||
input = 0;
|
||||
}
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,229 @@
|
||||
---
|
||||
id: 644b765b3bf09e6dff5e0931
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have an operation that will lower the value of `input` each time the loop runs, you don't have to worry about the loop running forever.
|
||||
|
||||
Update the last line of your `while` loop and assign `quotient` to `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign `quotient` to `input` at the end of your `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{[\s\S]*input\s*=\s*quotient\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
while (input > 0) {
|
||||
const quotient = Math.floor(input / 2);
|
||||
|
||||
--fcc-editable-region--
|
||||
input = 0;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,242 @@
|
||||
---
|
||||
id: 644b77a563c51f6ff5237b99
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, you need to calculate the remainder of `input` divided by `2`. You can do this by using the <dfn>remainder operator</dfn> (`%`), which returns the remainder of the division of two numbers. For example:
|
||||
|
||||
```js
|
||||
const remainder = 5 % 2; // 1
|
||||
```
|
||||
|
||||
In other words, the dividend, `5`, can be divided by the divisor, `2`, multiple times. Then you're left with a remainder of `1`.
|
||||
|
||||
Inside your `while` loop, create a variable named `remainder` and use the remainder operator to assign it the remainder of `input` divided by `2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a variable named `remainder` inside your `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{[\s\S]*(var|let|const)\s+remainder\s*=/);
|
||||
```
|
||||
|
||||
You should use `input` as the dividend and `2` as the divisor when calculating the remainder.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /(var|let|const)\s+remainder\s*=\s*input\s*%\s*2\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
while (input > 0) {
|
||||
const quotient = Math.floor(input / 2);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
input = quotient;
|
||||
}
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,235 @@
|
||||
---
|
||||
id: 644b7ac994d7dd73a61b4fa6
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `while` loop, use the `.push()` method to append `input` to the `inputs` array. This will help you get a better idea of how the conversion works later when you log the contents of your arrays to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.push()` method on the `inputs` array within your `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{[\s\S]*inputs\.push\(/);
|
||||
```
|
||||
|
||||
You should use the `.push()` method to append `input` to the `inputs` array.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /inputs\.push\(\s*input\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
while (input > 0) {
|
||||
const quotient = Math.floor(input / 2);
|
||||
const remainder = input % 2;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
input = quotient;
|
||||
}
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,231 @@
|
||||
---
|
||||
id: 644b82e0dc8e5e7ca47fcd9b
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The tricky part about `while` loops is that, if you're not careful, they can run forever. This is called an <dfn>infinite loop</dfn>, and can cause your browser to crash.
|
||||
|
||||
To avoid infinite loops, you need to make sure that the condition for the `while` loop eventually becomes `false`. In this case, you want to make sure that the `input` variable eventually becomes `0`.
|
||||
|
||||
Move the `input = 0` statement into the body of the `while` loop. This will make it so that the loop will only run up to one time.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should move the `input = 0` statement into the body of the `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{\s*input\s*=\s*0\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
--fcc-editable-region--
|
||||
input = 0;
|
||||
|
||||
while (input > 0) {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 645b5c05986aba539ba6ca03
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set `input` equal to the number `0` for now. We'll change this in the next few steps.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set `input` equal to the number `0`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /input\s*=\s*0\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,248 @@
|
||||
---
|
||||
id: 645b65b681a62f5fa125ff62
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use `.push()` to append the `quotient` variable to the `quotients` array. Also, append the `remainder` variable to the `remainders` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.push()` method on the `quotients` array within your `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{[\s\S]*quotients\.push\(/);
|
||||
```
|
||||
|
||||
You should use the `.push()` method to append `quotient` to the `quotients` array.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /quotients\.push\(\s*quotient\s*\)\s*;?/);
|
||||
```
|
||||
|
||||
You should use the `.push()` method on the `remainders` array within your `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{[\s\S]*remainders\.push\(/);
|
||||
```
|
||||
|
||||
You should use the `.push()` method to append `remainder` to the `remainders` array.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /remainders\.push\(\s*remainder\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
while (input > 0) {
|
||||
const quotient = Math.floor(input / 2);
|
||||
const remainder = input % 2;
|
||||
|
||||
--fcc-editable-region--
|
||||
inputs.push(input);
|
||||
|
||||
--fcc-editable-region--
|
||||
input = quotient;
|
||||
}
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,235 @@
|
||||
---
|
||||
id: 645b6693d8e1bf60f2d92e67
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now's a good time to check your work.
|
||||
|
||||
Log the text `"Inputs: "`, followed by a comma, followed by the `inputs` array to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should log the text `"Inputs: "` and the `inputs` array to the console, separated by a comma.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /console\.log\(\s*('|"|`)Inputs:\s*\1\s*,\s*inputs\s*\)/i);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
while (input > 0) {
|
||||
const quotient = Math.floor(input / 2);
|
||||
const remainder = input % 2;
|
||||
|
||||
inputs.push(input);
|
||||
quotients.push(quotient);
|
||||
remainders.push(remainder);
|
||||
input = quotient;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,240 @@
|
||||
---
|
||||
id: 645b6c92876e836832538e34
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, log the text `"Quotients: "`, followed by a comma, followed by the `quotients` array to the console. Also, log the text `"Remainders: "`, followed by a comma, followed by the `remainders` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should log the text `"Quotients: "` and the `quotients` array to the console, separated by a comma.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /console\.log\(\s*('|"|`)Quotients:\s*\1\s*,\s*quotients\s*\)/i);
|
||||
```
|
||||
|
||||
You should log the text `"Remainders: "` and the `remainders` array to the console, separated by a comma.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /console\.log\(\s*('|"|`)Remainders:\s*\1\s*,\s*remainders\s*\)/i);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
while (input > 0) {
|
||||
const quotient = Math.floor(input / 2);
|
||||
const remainder = input % 2;
|
||||
|
||||
inputs.push(input);
|
||||
quotients.push(quotient);
|
||||
remainders.push(remainder);
|
||||
input = quotient;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
console.log("Inputs: ", inputs);
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,262 @@
|
||||
---
|
||||
id: 645b6dad50514e69df601df6
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now if you enter in the number `6` and click the `Convert` button, you'll see the following output:
|
||||
|
||||
```md
|
||||
Inputs: [ 6, 3, 1 ]
|
||||
Quotients: [ 3, 1, 0 ]
|
||||
Remainders: [ 0, 1, 1 ]
|
||||
```
|
||||
|
||||
Notice that the `remainders` array is the binary representation of the number `6`, but in reverse order.
|
||||
|
||||
Use the `.reverse()` method to reverse the order of the `remainders` array, and `.join()` with an empty string as a separator to join the elements into a binary number string. Then, set `result.innerText` equal to the binary number string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.reverse()` method on the `remainders` array.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /remainders\.reverse\(\s*\)/);
|
||||
```
|
||||
|
||||
You should use the `.join()` with an empty string as a separator on the reversed `remainders` array.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /remainders\.reverse\(\s*\)\.join\(\s*('|"|`)\1\s*\)/);
|
||||
```
|
||||
|
||||
You should set `result.innerText` equal to the binary number string.
|
||||
|
||||
```js
|
||||
const result = document.getElementById('result');
|
||||
|
||||
decimalToBinary(6);
|
||||
assert.strictEqual(result.innerText.trim(), '110');
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
while (input > 0) {
|
||||
const quotient = Math.floor(input / 2);
|
||||
const remainder = input % 2;
|
||||
|
||||
inputs.push(input);
|
||||
quotients.push(quotient);
|
||||
remainders.push(remainder);
|
||||
input = quotient;
|
||||
}
|
||||
|
||||
console.log("Inputs: ", inputs);
|
||||
console.log("Quotients: ", quotients);
|
||||
console.log("Remainders: ", remainders);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,253 @@
|
||||
---
|
||||
id: 645b7f6a575ffc807877a8c6
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your `decimalToBinary` function works well, but there is an issue – because of the condition in your `while` loop, it only works for numbers greater than `0`. If you try to convert `0` to binary, nothing will get added to the page.
|
||||
|
||||
To fix this, add an `if` statement to check if `input` is equal to `0`. Leave the body of the `if` statement empty for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `if` statement that checks if `input` is equal to `0`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{/);
|
||||
```
|
||||
|
||||
The body of your `if` statement should be empty.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{\s*\}/);
|
||||
```
|
||||
|
||||
Your `if` statement should be written before your `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{\s*\}[\s\S]*while\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
while (input > 0) {
|
||||
const quotient = Math.floor(input / 2);
|
||||
const remainder = input % 2;
|
||||
|
||||
inputs.push(input);
|
||||
quotients.push(quotient);
|
||||
remainders.push(remainder);
|
||||
input = quotient;
|
||||
}
|
||||
|
||||
console.log("Inputs: ", inputs);
|
||||
console.log("Quotients: ", quotients);
|
||||
console.log("Remainders: ", remainders);
|
||||
|
||||
result.innerText = remainders.reverse().join("");
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,246 @@
|
||||
---
|
||||
id: 645b9d56b48971997a8055dd
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the body of the `if` statement, set the `innerText` property of `result` equal to the string `"0"`. Then, use an early `return` statement to break out of the function early.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `innerText` property of `result` equal to the string `"0"`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{\s*result\.innerText\s*=\s*('|"|`)\s*0\s*\1/);
|
||||
```
|
||||
|
||||
After setting the `innerText` of the `result` element, you should use an early `return` statement to break out of the function early.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{\s*result\.innerText\s*=\s*('|"|`)\s*0\s*\1\s*;?\s*return\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
--fcc-editable-region--
|
||||
if (input === 0) {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
while (input > 0) {
|
||||
const quotient = Math.floor(input / 2);
|
||||
const remainder = input % 2;
|
||||
|
||||
inputs.push(input);
|
||||
quotients.push(quotient);
|
||||
remainders.push(remainder);
|
||||
input = quotient;
|
||||
}
|
||||
|
||||
console.log("Inputs: ", inputs);
|
||||
console.log("Quotients: ", quotients);
|
||||
console.log("Remainders: ", remainders);
|
||||
|
||||
result.innerText = remainders.reverse().join("");
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,264 @@
|
||||
---
|
||||
id: 645b9de38df75b9a5cfc2e85
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now your `decimalToBinary` function is complete. Feel free to play around with it.
|
||||
|
||||
But there are some ways to improve it. For example, it's not necessary to keep track of the inputs and quotients. We can clean things up so the function is more efficient.
|
||||
|
||||
First, remove everything in the body of the `decimalToBinary` function. Then, use `let` to create a variable named `binary` and assign it an empty string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `let` to create the `binary` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s+binary\s*/);
|
||||
```
|
||||
|
||||
You should create a variable named `binary` inside your `decimalToBinary` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+decimalToBinary\s*=\s*(\(\s*input\s*\)|input)\s*=>\s*\{\s*let\s+binary\s*/);
|
||||
```
|
||||
|
||||
You should assign `binary` an empty string.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s+binary\s*=\s*('|"|`)\1\s*;?/);
|
||||
```
|
||||
|
||||
You should remove everything else from the body of your `decimalToBinary` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+decimalToBinary\s*=\s*(?:\(\s*input\s*\)|input)\s*=>\s*\{\s*let\s+binary\s*=\s*('|"|`)\1\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
--fcc-editable-region--
|
||||
const inputs = [];
|
||||
const quotients = [];
|
||||
const remainders = [];
|
||||
|
||||
if (input === 0) {
|
||||
result.innerText = "0";
|
||||
return;
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
const quotient = Math.floor(input / 2);
|
||||
const remainder = input % 2;
|
||||
|
||||
inputs.push(input);
|
||||
quotients.push(quotient);
|
||||
remainders.push(remainder);
|
||||
input = quotient;
|
||||
}
|
||||
|
||||
console.log("Inputs: ", inputs);
|
||||
console.log("Quotients: ", quotients);
|
||||
console.log("Remainders: ", remainders);
|
||||
|
||||
result.innerText = remainders.reverse().join("");
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,221 @@
|
||||
---
|
||||
id: 645b9ea45d3a9a9d711df81a
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, you should clear the number input by setting its value to an empty string. Then later when you convert several numbers in a row, you won't have to delete the previous number before entering the next one.
|
||||
|
||||
Set the `value` property of `numberInput` to an empty string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `value` property of `numberInput` to an empty string.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /decimalToBinary\((\s|.)*\)\s*;?\s*numberInput\s*\.\s*value\s*=\s*('|"|`)\2|decimalToBinary\((\s|.)*\)\s*;?\s*numberInput\s*\[\s*('|"|`)value\4\s*\]\s*=\s*('|"|`)\5/);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,227 @@
|
||||
---
|
||||
id: 645c803cad8434791a5f57b6
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Since you'll want to display the result of the conversion, assign the `binary` variable to the `innerText` property of `result` at the end of the function.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign `binary` to the `innerText` property of `result`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /result\.innerText\s*=\s*binary\s*/);
|
||||
```
|
||||
|
||||
You should assign `binary` to the `innerText` property of `result` at the end of the function.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /result\.innerText\s*=\s*binary\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,231 @@
|
||||
---
|
||||
id: 645c80ee8b65917a24afcb14
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `while` loop that runs as long as `input` is greater than `0`. Inside the loop, assign `0` to `input` for now.
|
||||
|
||||
Note: Be careful not to trigger the `decimalToBinary` function before you set `input` equal to `0` inside the loop. Otherwise, you could cause an infinite loop.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `while` loop that runs as long as `input` is greater than `0`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /while\s*\(\s*input\s*>\s*0\s*\)\s*\{/);
|
||||
```
|
||||
|
||||
Inside the loop, you should assign `0` to `input`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /while\s*\([\s\S]+input\s*=\s*0\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,241 @@
|
||||
---
|
||||
id: 645c81579c54a57ae7c1a5f7
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Recall that, each time the loop runs, `input` is the quotient of the previous value of `input` divided by `2`, rounded down. Eventually, `input` is less than `1`, and the loop stops running.
|
||||
|
||||
You can do this in a single step.
|
||||
|
||||
Inside your `while` loop, set `input` equal to the quotient of `input` divided by `2`. Also, remember to use `Math.floor()` to round the quotient down.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the value of `input` within your `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{\s*input\s*=/);
|
||||
```
|
||||
|
||||
You should use `Math.floor()` to round the quotient down.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{\s*input\s*=\s*Math\.floor\(/);
|
||||
```
|
||||
|
||||
You should set `input` equal to the quotient of `input` divided by `2`, rounded down, within your `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{\s*input\s*=\s*Math\.floor\(\s*input\s*\/\s*2\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
while (input > 0) {
|
||||
--fcc-editable-region--
|
||||
input = 0;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,236 @@
|
||||
---
|
||||
id: 645c81683d816b7b3a044143
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous version of this function, you pushed the remainder of `input` divided by `2` to `binaryArray`. Then later you reversed and joined the entries into a binary number string.
|
||||
|
||||
But it would be easier to use string concatenation within the loop to build the binary string from right to left, so you won't need to reverse it later.
|
||||
|
||||
First, use the `remainder` operator (`%`) to set `binary` equal to the remainder of `input` divided by `2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the value of `binary` within your `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{[\s\S]+binary\s*=/);
|
||||
```
|
||||
|
||||
You should set `binary` equal to the remainder of `input` divided by `2`.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{[\s\S]+binary\s*=\s*input\s*%\s*2\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
while (input > 0) {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,226 @@
|
||||
---
|
||||
id: 645c82268b9a8d7c4debd8dc
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Then, use the addition operator to add the current value of `binary` to the end of the equation `input % 2`. This is what will build the binary string from right to left.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the addition operator (`+`) to add `binary` to the end of the equation `input % 2`.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{[\s\S]+binary\s*=\s*input\s*%\s*2\s*\+\s*binary\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
while (input > 0) {
|
||||
--fcc-editable-region--
|
||||
binary = input % 2;
|
||||
--fcc-editable-region--
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,226 @@
|
||||
---
|
||||
id: 645c85251dc1827fe4a6c4ce
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To clean things up a bit, wrap `input % 2` in parentheses. This can sometimes change the order of operations, but in this case, it just makes your code easier to read.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should wrap `input % 2` in parentheses.
|
||||
|
||||
```js
|
||||
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{[\s\S]+binary\s*=\s*\(\s*input\s*%\s*2\s*\)\s*\+\s*binary\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
while (input > 0) {
|
||||
--fcc-editable-region--
|
||||
binary = input % 2 + binary;
|
||||
--fcc-editable-region--
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,236 @@
|
||||
---
|
||||
id: 645c86f92a102d82250ce3e8
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, you need to handle cases where `input` is `0`. Rather than update the DOM and return early like you did before, you can update the `binary` string and let the rest of the code in the function run.
|
||||
|
||||
Create an `if` statement that checks if `input` is equal to `0`. If it is, set `binary` equal to the string `"0"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `if` statement that checks if `input` is equal to `0`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{?/);
|
||||
```
|
||||
|
||||
In the body of your `if` statement, you should set `binary` equal to the string `"0"`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{?\s*binary\s*=\s*('|"|`)0\1\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,240 @@
|
||||
---
|
||||
id: 645c8a55eca2118650ee3ce3
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Awesome. Now you have a more efficient way to convert decimal numbers into binary. After learning a bit about the call stack and recursion, you'll refactor the `decimalToBinary` function to use recursion instead of a `while` loop.
|
||||
|
||||
Create a function named `a` that returns the following: `"freeCodeCamp " + b()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a function named `a`.
|
||||
|
||||
```js
|
||||
assert.isFunction(a);
|
||||
```
|
||||
|
||||
Your function `a` should return `"freeCodeCamp " + b()`.
|
||||
|
||||
```js
|
||||
assert.match(String(a), /return\s*('|"|`)freeCodeCamp\s*\1\s*\+\s*b\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,246 @@
|
||||
---
|
||||
id: 645c8fe0c9505407650c4ac6
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A recursive function is a function that calls itself over and over. But you have to be careful because you can easily create an infinite loop. That's where the <dfn>base case</dfn> comes in. The base case is when the function stops calling itself, and it is a good idea to write it first.
|
||||
|
||||
Since your `countdown()` function will count down from a given number to zero, the base case is when the `number` parameter is equal to `0`. Then it should `return` to break out of its recursive loop.
|
||||
|
||||
Use an `if` statement to check if `number` is equal to `0`. If it is, use the `return` keyword to break out of the function.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `countdown` function should have an `if` statement that checks if `number` is equal to `0`.
|
||||
|
||||
```js
|
||||
assert.match(String(countdown), /if\s*\(\s*number\s*===?\s*0\s*\)\s*\{?/);
|
||||
```
|
||||
|
||||
Your `countdown` function should `return` when `number` is equal to `0`.
|
||||
|
||||
```js
|
||||
assert.match(String(countdown), /if\s*\(\s*number\s*===?\s*0\s*\)\s*\{?\s*return\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const countdown = (number) => {
|
||||
console.log(number);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,246 @@
|
||||
---
|
||||
id: 645c9e6cf5c7251f7b3308f6
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Recursive functions also have a <dfn>recursive case</dfn>, which is where the function calls itself.
|
||||
|
||||
First, convert your `if` statement into an `if...else` statement. Leave the body of your `else` statement empty for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should change your `if` statement into an `if...else` statement.
|
||||
|
||||
```js
|
||||
assert.match(String(countdown), /if\s*\(\s*number\s*===?\s*0\s*\)\s*\{\s*return\s*;?\s*\}\s*else\s*\{/);
|
||||
```
|
||||
|
||||
The body of your `else` statement should be empty.
|
||||
|
||||
```js
|
||||
assert.match(String(countdown), /else\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const countdown = (number) => {
|
||||
console.log(number);
|
||||
|
||||
--fcc-editable-region--
|
||||
if (number === 0) {
|
||||
return;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,237 @@
|
||||
---
|
||||
id: 645ca158fb7fa3237437fbbd
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The first thing you need to do is log the current value of `number` to the console to act as the countdown.
|
||||
|
||||
Use `console.log()` to log `number` to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `console.log()` to log `number` to the console within the body of your `countdown` function.
|
||||
|
||||
```js
|
||||
assert.match(String(countdown), /console\.log\(\s*number\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
|
||||
const countdown = (number) => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,252 @@
|
||||
---
|
||||
id: 645ca381c8f87f263034954f
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When writing the recursive case, you need to remember two things:
|
||||
|
||||
1. What is the base case?
|
||||
2. What is the least amount of work you need to do to get closer to the base case?
|
||||
|
||||
Since the base case is when `number` is equal to `0`, you need to call `countdown()` again while also lowering the value of `number` by `1`.
|
||||
|
||||
Inside the `else` block, call `countdown()` and pass it `number - 1` as an argument.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call `countdown()` within the body of your `else` statement.
|
||||
|
||||
```js
|
||||
assert.match(String(countdown), /else\s*\{\s*countdown\(/);
|
||||
```
|
||||
|
||||
You should pass `number - 1` as an argument to `countdown()`.
|
||||
|
||||
```js
|
||||
assert.match(String(countdown), /countdown\(\s*number\s*-\s*1\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const countdown = (number) => {
|
||||
console.log(number);
|
||||
|
||||
--fcc-editable-region--
|
||||
if (number === 0) {
|
||||
return;
|
||||
} else {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,242 @@
|
||||
---
|
||||
id: 645ca5ca11d0d7293e61c6c7
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It's time to test your function. Call `countdown()` with an argument of `3` to see if it works.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call `countdown()` with an argument of `3`.
|
||||
|
||||
```js
|
||||
assert.match(code, /countdown\(\s*3\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const countdown = (number) => {
|
||||
console.log(number);
|
||||
|
||||
if (number === 0) {
|
||||
return;
|
||||
} else {
|
||||
countdown(number - 1);
|
||||
}
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,262 @@
|
||||
---
|
||||
id: 645ca62092c53f29f4ea9bf6
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To really see the call stack in action, you just need to modify the function slightly.
|
||||
|
||||
First, rename the `countdown()` function to `countDownAndUp()`. Remember to update your function calls, too.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have a function named `countdown()` in your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(var|let|const)\s+countdown\s*=\s*\(\s*[^)]*\s*\)\s*=>\s*\{[\s\S]+\}/);
|
||||
```
|
||||
|
||||
You should have a function named `countDownAndUp()` in your code.
|
||||
|
||||
```js
|
||||
assert.isFunction(countDownAndUp);
|
||||
```
|
||||
|
||||
Within the body of the `else` statement in your `countDownAndUp()` function, you should call `countDownAndUp()` with an argument of `number - 1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /else\s*\{\s*countDownAndUp\(\s*number\s*-\s*1\s*\)/);
|
||||
```
|
||||
|
||||
You should call `countDownAndUp()` with an argument of `3`.
|
||||
|
||||
```js
|
||||
assert.match(code, /countDownAndUp\(\s*3\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
--fcc-editable-region--
|
||||
const countdown = (number) => {
|
||||
console.log(number);
|
||||
|
||||
if (number === 0) {
|
||||
return;
|
||||
} else {
|
||||
countdown(number - 1);
|
||||
}
|
||||
};
|
||||
|
||||
countdown(3);
|
||||
--fcc-editable-region--
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 645cb07132281a380223e458
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Then, log `number` to the console after your recursive `countDownAndUp(number - 1)` function call.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should log `number` to the console after your recursive `countDownAndUp(number - 1)` function call.
|
||||
|
||||
```js
|
||||
assert.match(String(countDownAndUp), /countDownAndUp\(\s*number\s*-\s*1\s*\)\s*;?\s*console\.log\(\s*number\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const countDownAndUp = (number) => {
|
||||
console.log(number);
|
||||
|
||||
if (number === 0) {
|
||||
console.log("Reached base case");
|
||||
return;
|
||||
} else {
|
||||
--fcc-editable-region--
|
||||
countDownAndUp(number - 1);
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
};
|
||||
|
||||
countDownAndUp(3);
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,254 @@
|
||||
---
|
||||
id: 645cb0ce6dc93738b442b0d0
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you should see a countdown from `3` to `0`, followed by `Reached base case`, and a count from `1` to `3`. This is because, after the recursive loop is finished, the function will continue to execute the code after the recursive call. This is why you see `Reached base case` before the count from `1` to `3`.
|
||||
|
||||
Now that you have a better understanding of how the call stack and recursion work, you'll refactor the `decimalToBinary()` function to use recursion instead of a `while` loop.
|
||||
|
||||
First, remove your `countDownAndUp()` function and function call.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should not have a function named `countDownAndUp`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(var|let|const)\s+countDownAndUp\s*=\s*[\s\S]+\}/);
|
||||
```
|
||||
|
||||
Your code should not call the `countDownAndUp` function.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /countDownAndUp\([\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
--fcc-editable-region--
|
||||
const countDownAndUp = (number) => {
|
||||
console.log(number);
|
||||
|
||||
if (number === 0) {
|
||||
console.log("Reached base case");
|
||||
return;
|
||||
} else {
|
||||
countDownAndUp(number - 1);
|
||||
console.log(number);
|
||||
}
|
||||
};
|
||||
|
||||
countDownAndUp(3);
|
||||
--fcc-editable-region--
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,243 @@
|
||||
---
|
||||
id: 645cb1306eb27a397be7f18c
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In your base case, log `"Reached base case"` to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should log `"Reached base case"` to the console in your base case.
|
||||
|
||||
```js
|
||||
assert.match(String(countDownAndUp), /if\s*\(\s*number\s*===?\s*0\s*\)\s*\{\s*console\.log\(\s*('|"|`)\s*Reached base case\s*\1\s*\)\s*;?\s*return\s*;?\s*\}/i);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const countDownAndUp = (number) => {
|
||||
console.log(number);
|
||||
|
||||
if (number === 0) {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
return;
|
||||
} else {
|
||||
countDownAndUp(number - 1);
|
||||
}
|
||||
};
|
||||
|
||||
countDownAndUp(3);
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,256 @@
|
||||
---
|
||||
id: 645cb99035b8f046f1d669e4
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, create a function named `b` that returns the following: `"is " + c()`.
|
||||
|
||||
Also, create a function named `c` that returns the following: `"awesome!"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a function named `b`.
|
||||
|
||||
```js
|
||||
assert.isFunction(b);
|
||||
```
|
||||
|
||||
You should create a function named `c`.
|
||||
|
||||
```js
|
||||
assert.isFunction(c);
|
||||
```
|
||||
|
||||
Your function `b` should return `"is " + c()`.
|
||||
|
||||
```js
|
||||
assert.match(String(b), /return\s*('|"|`)is\s*\1\s*\+\s*c\s*\(\s*\)\s*;?/);
|
||||
```
|
||||
|
||||
Your function `c` should return `"awesome!"`.
|
||||
|
||||
```js
|
||||
assert.match(String(c), /return\s*('|"|`)awesome!\1\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const a = () => {
|
||||
return "freeCodeCamp " + b();
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 645cbad5f77ce948b35cf83e
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, call `a()` from within a `console.log()` statement to log the output to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call `a()` from within a `console.log()` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(\s*a\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const a = () => {
|
||||
return "freeCodeCamp " + b();
|
||||
};
|
||||
|
||||
const b = () => {
|
||||
return "is " + c();
|
||||
};
|
||||
|
||||
const c = () => {
|
||||
return "awesome!";
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,259 @@
|
||||
---
|
||||
id: 645cbb5ab1296e49946adb6e
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In computer science, a <dfn>stack</dfn> is a data structure where items are stored in a <dfn>LIFO</dfn> (last-in-first-out) manner. If you imagine a stack of books, the last book you add to the stack is the first book you can take off the stack. Or an array where you can only `.push()` and `.pop()` elements.
|
||||
|
||||
The <dfn>call stack</dfn> is a collection of function calls stored in a stack structure. When you call a function, it is added to the top of the stack, and when it returns, it is removed from the top / end of the stack.
|
||||
|
||||
You'll see this in action by creating mock call stack.
|
||||
|
||||
Initialize a variable named `callStack` and assign it an empty array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a variable named `callStack`.
|
||||
|
||||
```js
|
||||
assert.exists(callStack);
|
||||
```
|
||||
|
||||
You should assign `callStack` an empty array.
|
||||
|
||||
```js
|
||||
assert.isArray(callStack);
|
||||
assert.isEmpty(callStack);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const a = () => {
|
||||
return "freeCodeCamp " + b();
|
||||
};
|
||||
|
||||
const b = () => {
|
||||
return "is " + c();
|
||||
};
|
||||
|
||||
const c = () => {
|
||||
return "awesome!";
|
||||
};
|
||||
|
||||
console.log(a());
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,259 @@
|
||||
---
|
||||
id: 645cc5925f158b5b33e2698f
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When your code runs, the `a()` function is added to the call stack first.
|
||||
|
||||
In your `callStack` array, add the following string: `'a(): returns "freeCodeCamp " + b()'`. This represents the function call and the code that will be executed.
|
||||
|
||||
Note: Since the string you're adding includes double quotation marks (`"`), wrap it in single quotation marks (`'`) or backticks (`` ` ``).
|
||||
|
||||
# --hints--
|
||||
|
||||
`callStack` have a single element that is a string.
|
||||
|
||||
```js
|
||||
assert.lengthOf(callStack, 1);
|
||||
assert.isString(callStack[0]);
|
||||
```
|
||||
|
||||
The string in `callStack` should be the string `'a(): returns "freeCodeCamp " + b()'`.
|
||||
|
||||
```js
|
||||
assert.match(callStack[0], /a\(\s*\):\s*returns\s*('|"|`)freeCodeCamp\s*\1\s*\+\s*b\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
const callStack = [
|
||||
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
const a = () => {
|
||||
return "freeCodeCamp " + b();
|
||||
};
|
||||
|
||||
const b = () => {
|
||||
return "is " + c();
|
||||
};
|
||||
|
||||
const c = () => {
|
||||
return "awesome!";
|
||||
};
|
||||
|
||||
console.log(a());
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,262 @@
|
||||
---
|
||||
id: 645ccf7ec9aca267d84b053e
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Then, since `a()` calls `b()`, the function `b()` is added to the call stack.
|
||||
|
||||
Next, add the following string to your `callStack` array: `"b(): returns 'is ' + c()"`.
|
||||
|
||||
Remember that the call stack is a LIFO data structure, so the last function is added to the top or end of the stack, similar to pushing an element into an array.
|
||||
|
||||
# --hints--
|
||||
|
||||
`callStack` should have two elements that are strings.
|
||||
|
||||
```js
|
||||
assert.lengthOf(callStack, 2);
|
||||
assert.isTrue(callStack.every((element) => typeof element === "string"));
|
||||
```
|
||||
|
||||
The second element in `callStack` should be the string `"b(): returns 'is ' + c()"`.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
callStack[1],
|
||||
/b\(\s*\):\s*returns\s*('|"|`)is\s*\1\s*\+\s*c\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
const callStack = [
|
||||
'a(): returns "freeCodeCamp " + b()'
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
const a = () => {
|
||||
return "freeCodeCamp " + b();
|
||||
};
|
||||
|
||||
const b = () => {
|
||||
return "is " + c();
|
||||
};
|
||||
|
||||
const c = () => {
|
||||
return "awesome!";
|
||||
};
|
||||
|
||||
console.log(a());
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,261 @@
|
||||
---
|
||||
id: 645cd17b061afb6a8cba945a
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
And since `b()` calls `c()`, the function `c()` is added to the call stack.
|
||||
|
||||
Add the following string to your `callStack` array: `"c(): returns 'awesome!'"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`callStack` should have three elements that are strings.
|
||||
|
||||
```js
|
||||
assert.lengthOf(callStack, 3);
|
||||
assert.isTrue(callStack.every((element) => typeof element === "string"));
|
||||
```
|
||||
|
||||
The third element in `callStack` should be the string `"c(): returns 'awesome!'"`.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
callStack[2],
|
||||
/c\(\s*\):\s*returns\s*('|"|`)awesome!\1/
|
||||
);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
const callStack = [
|
||||
'a(): returns "freeCodeCamp " + b()',
|
||||
'b(): returns "is " + c()'
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
const a = () => {
|
||||
return "freeCodeCamp " + b();
|
||||
};
|
||||
|
||||
const b = () => {
|
||||
return "is " + c();
|
||||
};
|
||||
|
||||
const c = () => {
|
||||
return "awesome!";
|
||||
};
|
||||
|
||||
console.log(a());
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,264 @@
|
||||
---
|
||||
id: 645cd267410ac06bfcaf0bd4
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your call stack is complete. As you can see, `a()` is at the bottom or beginning of the stack, which calls `b()` in the middle, which calls `c()` at the top or end. Once they're all in place, they begin to execute from top to bottom.
|
||||
|
||||
`c()` executes, returns the string `"awesome!"`, and is popped off or removed from the top of the stack.
|
||||
|
||||
Remove your `"c(): returns 'awesome!'"` string from the top of the `callStack` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
`callStack` should have two elements that are strings.
|
||||
|
||||
```js
|
||||
assert.lengthOf(callStack, 2);
|
||||
assert.isTrue(callStack.every((element) => typeof element === "string"));
|
||||
```
|
||||
|
||||
The final element in `callStack` should be the string `"b(): returns 'is ' + c()"`.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
callStack[callStack.length - 1],
|
||||
/b\(\s*\):\s*returns\s*('|"|`)is\s*\1\s*\+\s*c\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
const callStack = [
|
||||
'a(): returns "freeCodeCamp " + b()',
|
||||
'b(): returns "is " + c()',
|
||||
'c(): returns "awesome!"'
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
const a = () => {
|
||||
return "freeCodeCamp " + b();
|
||||
};
|
||||
|
||||
const b = () => {
|
||||
return "is " + c();
|
||||
};
|
||||
|
||||
const c = () => {
|
||||
return "awesome!";
|
||||
};
|
||||
|
||||
console.log(a());
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,261 @@
|
||||
---
|
||||
id: 645cd2b76488fd6cb8d1ae79
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Then the function `b()` executes and evaluates to `"is " + "awesome!"`.
|
||||
|
||||
Update your mock call to `b()` so it looks like this: `"b(): returns 'is ' + 'awesome!'"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`callStack` should have two elements that are strings.
|
||||
|
||||
```js
|
||||
assert.lengthOf(callStack, 2);
|
||||
assert.isTrue(callStack.every((element) => typeof element === "string"));
|
||||
```
|
||||
|
||||
The final element in `callStack` should be the string `"b(): returns 'is ' + 'awesome!'"`.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
callStack[callStack.length - 1],
|
||||
/b\(\s*\):\s*returns\s*('|"|`)is\s*\1\s*\+\s*('|"|`)awesome!\2/
|
||||
);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
const callStack = [
|
||||
'a(): returns "freeCodeCamp " + b()',
|
||||
'b(): returns "is " + c()'
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
const a = () => {
|
||||
return "freeCodeCamp " + b();
|
||||
};
|
||||
|
||||
const b = () => {
|
||||
return "is " + c();
|
||||
};
|
||||
|
||||
const c = () => {
|
||||
return "awesome!";
|
||||
};
|
||||
|
||||
console.log(a());
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,259 @@
|
||||
---
|
||||
id: 645cd4eb6edf6e6f91acabbb
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that `b()` has executed, pop it off the call stack. Then, update your mock call to `a()` to the following: `"a(): returns 'freeCodeCamp ' + 'is awesome!'"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`callStack` should have one element that is a string.
|
||||
|
||||
```js
|
||||
assert.lengthOf(callStack, 1);
|
||||
assert.isString(callStack[0]);
|
||||
```
|
||||
|
||||
The string in `callStack` should be the string `"a(): returns 'freeCodeCamp ' + 'is awesome!'"`.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
callStack[0],
|
||||
/a\(\s*\):\s*returns\s*('|"|`)freeCodeCamp\s*\1\s*\+\s*('|"|`)is\s+awesome!\2/
|
||||
);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
const callStack = [
|
||||
'a(): returns "freeCodeCamp " + b()',
|
||||
'b(): returns "is " + "awesome!"'
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
const a = () => {
|
||||
return "freeCodeCamp " + b();
|
||||
};
|
||||
|
||||
const b = () => {
|
||||
return "is " + c();
|
||||
};
|
||||
|
||||
const c = () => {
|
||||
return "awesome!";
|
||||
};
|
||||
|
||||
console.log(a());
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,250 @@
|
||||
---
|
||||
id: 645cd5b506ed8970b7ea953d
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, `a()` returns the concatenated string `"freeCodeCamp is awesome!"`.
|
||||
|
||||
Pop `a()` off the top of the call stack.
|
||||
|
||||
# --hints--
|
||||
|
||||
`callStack` should be an empty array.
|
||||
|
||||
```js
|
||||
assert.isEmpty(callStack);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
const callStack = [
|
||||
'a(): returns "freeCodeCamp " + "is awesome!"',
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
const a = () => {
|
||||
return "freeCodeCamp " + b();
|
||||
};
|
||||
|
||||
const b = () => {
|
||||
return "is " + c();
|
||||
};
|
||||
|
||||
const c = () => {
|
||||
return "awesome!";
|
||||
};
|
||||
|
||||
console.log(a());
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,264 @@
|
||||
---
|
||||
id: 645cd65c33bdc871bb72def4
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
While that's a simple example, it demonstrates how the call stack steps through your code and calls multiple functions.
|
||||
|
||||
Now it's time to jump into recursion, and see how the call stack fits into the picture.
|
||||
|
||||
Remove your `callStack` array, the `a()`, `b()`, and `c()` functions, and the `console.log()` statement.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `callStack` array from your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(var|let|const)\s+callStack\s*=\s*\[\s*\]/);
|
||||
```
|
||||
|
||||
You should remove the `a()`, `b()`, and `c()` functions from your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(var|let|const)\s+a\s*=\s*\(\s*\)\s*=>\s*\{[\s\S]+\}/);
|
||||
assert.notMatch(code, /(var|let|const)\s+b\s*=\s*\(\s*\)\s*=>\s*\{[\s\S]+\}/);
|
||||
assert.notMatch(code, /(var|let|const)\s+c\s*=\s*\(\s*\)\s*=>\s*\{[\s\S]+\}/);
|
||||
```
|
||||
|
||||
Your code should not have a `console.log()` statement.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /console\.log\([\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
const callStack = [];
|
||||
|
||||
const a = () => {
|
||||
return "freeCodeCamp " + b();
|
||||
};
|
||||
|
||||
const b = () => {
|
||||
return "is " + c();
|
||||
};
|
||||
|
||||
const c = () => {
|
||||
return "awesome!";
|
||||
};
|
||||
|
||||
console.log(a());
|
||||
--fcc-editable-region--
|
||||
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,246 @@
|
||||
---
|
||||
id: 645cd8b7f4d8e27526694448
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you'll create a function that will count down from a given number to zero using recursion.
|
||||
|
||||
Create a new function named `countdown` with `number` as a parameter. Leave the function body empty for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a function named `countdown`.
|
||||
|
||||
```js
|
||||
assert.isFunction(countdown);
|
||||
```
|
||||
|
||||
Your function `countdown` should accept `number` as a parameter.
|
||||
|
||||
```js
|
||||
assert.match(String(countdown), /function\s+countdown\s*\(\s*number\s*\)/);
|
||||
```
|
||||
|
||||
The body of your `countdown` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(String(countdown), /function\s+countdown\s*\(\s*number\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,230 @@
|
||||
---
|
||||
id: 645ce315efe609814258b0bc
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Then, remove the contents of your `decimalToBinary()` function. Leave the body of the function empty for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
The body of your `decimalToBinary()` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /function\s+decimalToBinary\s*\(\s*input\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
--fcc-editable-region--
|
||||
const decimalToBinary = (input) => {
|
||||
let binary = "";
|
||||
|
||||
if (input === 0) {
|
||||
binary = "0";
|
||||
}
|
||||
|
||||
while (input > 0) {
|
||||
binary = (input % 2) + binary;
|
||||
input = Math.floor(input / 2);
|
||||
}
|
||||
|
||||
result.innerText = binary;
|
||||
};
|
||||
--fcc-editable-region--
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,229 @@
|
||||
---
|
||||
id: 645ce3c80f1c29824f1a8359
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, it's often best to start with the base case when writing a recursive function so you know what you're working towards, and to prevent an infinite loop.
|
||||
|
||||
Similar to your last implementation, you'll divide `input` by `2` repeatedly until `input` is `0`.
|
||||
|
||||
Use an `if` statement to check if `input` is equal to `0`. If it is, `return` an empty string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use an `if` statement to check if `input` is equal to `0`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)/);
|
||||
```
|
||||
|
||||
You should return an empty string if `input` is equal to `0`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{?\s*return\s*('|"|`)\1\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,233 @@
|
||||
---
|
||||
id: 645ce4375221138326895726
|
||||
title: Step 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the recursive case, add an `else` statement and `return` the result of calling `decimalToBinary()`. Pass in `input` divided by `2` rounded down with `Math.floor()` as the argument.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should convert your `if` statement into an `if...else` statement.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /\{\s*return\s+('|"|`)\1\s*;?\s*\}\s*else\s*\{/);
|
||||
```
|
||||
|
||||
Within the body of your `else` statement, you should `return` the result of calling `decimalToBinary`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /else\s*\{\s*return\s+decimalToBinary\(/);
|
||||
```
|
||||
|
||||
You should pass in `input` divided by `2` rounded down with `Math.floor()` as the argument to `decimalToBinary`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /decimalToBinary\(\s*Math\.floor\(\s*input\s*\/\s*2\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
--fcc-editable-region--
|
||||
if (input === 0) {
|
||||
return "";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,233 @@
|
||||
---
|
||||
id: 6461f79f4ea2ef042fb2c0f4
|
||||
title: Step 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
This effectively lowers the `input` by roughly half each time the `decimalToBinary()` function is called.
|
||||
|
||||
However, remember that the binary number string is built by calculating the remainder of `input` divided by `2` and concatenating that to the end.
|
||||
|
||||
After your call to `decimalToBinary()`, use the addition operator (`+`) to concatenate the remainder of `input` divided by `2` to the end of the string your recursive function returns. Also, wrap the operation in parentheses.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the addition operator (`+`) to concatenate the remainder of `input` divided by `2` to the end of the string your recursive function returns.
|
||||
|
||||
```js
|
||||
assert.match(code, /decimalToBinary\(\s*Math\.floor\(\s*input\s*\/\s*2\s*\)\s*\)\s*\+\s*\(?\s*input\s*%\s*2\s*\)?/);
|
||||
```
|
||||
|
||||
You should wrap `input % 2` in parentheses.
|
||||
|
||||
```js
|
||||
assert.match(code, /\)\s*\+\s*\(\s*input\s*%\s*2\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0) {
|
||||
return "";
|
||||
} else {
|
||||
--fcc-editable-region--
|
||||
return decimalToBinary(Math.floor(input / 2));
|
||||
--fcc-editable-region--
|
||||
}
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,235 @@
|
||||
---
|
||||
id: 6461fd4c1bc6620aed6435b2
|
||||
title: Step 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, in your `checkUserInput()` function, set the `textContent` property of `result` equal to the string returned by your `decimalToBinary()` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `textContent` property of `result` equal to the string returned by your `decimalToBinary()` function.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
String(checkUserInput),
|
||||
/result\.textContent\s*=\s*decimalToBinary\(/
|
||||
);
|
||||
```
|
||||
|
||||
You should continue to pass in `parseInt(numberInput.value)` as an argument to `decimalToBinary()`.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
String(checkUserInput),
|
||||
/decimalToBinary\(\s*parseInt\(\s*numberInput\s*\.\s*value\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0) {
|
||||
return "";
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
decimalToBinary(parseInt(numberInput.value));
|
||||
--fcc-editable-region--
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,227 @@
|
||||
---
|
||||
id: 64620068f97fe70ea47a9e75
|
||||
title: Step 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your converter should be working now. Feel free to try out different numbers and think about what is happening each time `decimalToBinary()` is called.
|
||||
|
||||
But if you test your converter with `0`, you'll see that nothing happens. This is because you return an empty string in your base case when `input` is `0`. We can fix this now.
|
||||
|
||||
Update your base case so that it returns the string `"0"` when `input` is equal to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should return the string `"0"` when `input` is equal to `0` in your base case.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{?\s*return\s*('|"|`)0\1\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0) {
|
||||
--fcc-editable-region--
|
||||
return "";
|
||||
--fcc-editable-region--
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,241 @@
|
||||
---
|
||||
id: 646203cdc054d012b5d71428
|
||||
title: Step 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
This mostly works – if you convert `0` into binary, `0` is displayed on the page. But now when you convert other numbers greater than `0`, your binary number starts with a leading `0`. For example, if you convert `1`, the result is `01`.
|
||||
|
||||
But if you think about it, `0` and `1` in base-10 always convert to `0` and `1` in base-2, respectively. So you can add another base case to handle when `input` is `1`.
|
||||
|
||||
Add an `else if` statement to your function that checks if `input` is equal to `1`. If it is, return the string `"1"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `else if` statement to your `decimalToBinary()` function.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)[\s\S]+else\s+if\s*\(/);
|
||||
```
|
||||
|
||||
For the condition of your `else if` statement, you should check if `input` is equal to `1`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /else\s+if\s*\(\s*input\s*===?\s*1\s*\)/);
|
||||
```
|
||||
|
||||
You should return the string `"1"` if `input` is equal to `1`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /else\s+if\s*\(\s*input\s*===?\s*1\s*\)\s*\{?\s*return\s*('|"|`)1\1\s*;?\s*\}?\s*else\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
--fcc-editable-region--
|
||||
if (input === 0) {
|
||||
return "0";
|
||||
}
|
||||
|
||||
else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,248 @@
|
||||
---
|
||||
id: 6462060b0a8a2c15726649ec
|
||||
title: Step 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now everything should work as expected. And since you know that `input` will either be the numbers `0` or `1` at this point, you can combine your two base cases and just return `input` as a string.
|
||||
|
||||
For a reliable way to convert a value into a string, even falsy values like `null` and `undefined`, you can use the `String()` function. For example:
|
||||
|
||||
```js
|
||||
const num = 5;
|
||||
|
||||
console.log(String(num)); // "5"
|
||||
console.log(String(null)); // "null"
|
||||
```
|
||||
|
||||
Combine your `if` and `else if` statements into a single `if` statement checking if `input` is equal to `0` or `1`. If it is, use the `String()` function to convert `input` into a string and return it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `decimalToBinary()` function should not have an `else if` statement.
|
||||
|
||||
```js
|
||||
assert.notMatch(String(decimalToBinary), /else\s+if\s*\([\s\S]+\)/);
|
||||
```
|
||||
|
||||
Your `decimalToBinary()` function should have an `if` statement that checks if `input` is equal to `0` or `1`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\|\|\s*input\s*===?\s*1\s*\)|if\s*\(\s*input\s*===?\s*1\s*\|\|\s*input\s*===?\s*0\s*\)/);
|
||||
```
|
||||
|
||||
If input is equal to `0` or `1`, your `decimalToBinary()` function should return `String(input)`.
|
||||
|
||||
```js
|
||||
assert.match(String(decimalToBinary), /if\s*\([\s\S]+\)\s*\{?\s*return\s+String\(\s*input\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
--fcc-editable-region--
|
||||
if (input === 0) {
|
||||
return "0";
|
||||
} else if (input === 1) {
|
||||
return "1";
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,235 @@
|
||||
---
|
||||
id: 64620800e0c6ab17f0e31d6d
|
||||
title: Step 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now your `decimalToBinary()` function is complete. Feel free to test it out.
|
||||
|
||||
If you're still confused about how it works under the hood, don't worry. Next, you'll create a simple animation to help you understand what's happening each step of the way.
|
||||
|
||||
Create a new function called `showAnimation`. Leave the body of the function empty for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a function named `showAnimation`.
|
||||
|
||||
```js
|
||||
assert.isFunction(showAnimation);
|
||||
```
|
||||
|
||||
The body of your `showAnimation` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /function\s+showAnimation\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,249 @@
|
||||
---
|
||||
id: 646463be7341819690797ad2
|
||||
title: Step 75
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You'll show the animation when users try to convert the decimal number `5` to binary, so you'll need to add a check for that within your `checkUserInput()` function.
|
||||
|
||||
Use an `if` statement to check if the `value` attribute of `numberInput` is equal to the number `5`. Remember to use the `parseInt()` function to convert the string into a number before comparing it to `5`. Leave the `if` statement empty for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a second `if` statement to your `checkUserInput()` function, after the existing `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /if\s*\(\s*!numberInput\s*\.\s*value\s*\|\|\s*isNaN\(\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)[\s\S]+if\s*\(/);
|
||||
```
|
||||
|
||||
You should use the `parseInt()` function within the condition of your new `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /if\s*\(\s*parseInt\(/);
|
||||
```
|
||||
|
||||
You should check if the `value` attribute of `numberInput` is equal to `5`.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /if\s*\(\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*===?\s*5\s*\)/);
|
||||
```
|
||||
|
||||
The body of your new `if` statement should be empty.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /if\s*\(\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*===?\s*5\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
result.textContent = decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,237 @@
|
||||
---
|
||||
id: 6464650a962e3d9852713549
|
||||
title: Step 76
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If the `value` of `numberInput` is equal to `5`, call the `showAnimation()` function, then `return` early.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `showAnimation()` function within the body of your second `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /if\s*\(\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*===?\s*5\s*\)\s*\{\s*showAnimation\(\s*\)/);
|
||||
```
|
||||
|
||||
After calling the `showAnimation()` function, you should use the `return` keyword to exit the `checkUserInput()` function early.
|
||||
|
||||
```js
|
||||
assert.match(String(checkUserInput), /if\s*\(\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*===?\s*5\s*\)\s*\{\s*showAnimation\(\s*\)\s*;?\s*return\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (parseInt(numberInput.value) === 5) {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,252 @@
|
||||
---
|
||||
id: 64646577f28ade99100a55c3
|
||||
title: Step 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now your `showAnimation()` function is set up. But if you look at your `checkUserInput()` function, you'll notice that it is calling `parseInt()` to convert `numberInput.value` into a number several times.
|
||||
|
||||
This is generally a poor practice, for reasons like performance concerns or even just the fact that you'd have to change your logic in multiple places to update the `parseInt()` call.
|
||||
|
||||
To fix this, create a new variable to store the converted number. Then you only have to convert the number once and can use it throughout the function.
|
||||
|
||||
Create a new variable called `inputInt` and assign it the number converted from `numberInput.value`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new variable called `inputInt`.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
String(checkUserInput),
|
||||
/(var|let|const)\s+inputInt/
|
||||
);
|
||||
```
|
||||
|
||||
You should use the `parseInt()` function to convert the `value` of `numberInput` into a number and assign it to `inputInt`.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
String(checkUserInput),
|
||||
/(var|let|const)\s+inputInt\s*=\s*parseInt\(\s*numberInput\s*\.\s*value\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (parseInt(numberInput.value) === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,276 @@
|
||||
---
|
||||
id: 646467130d7acc9b4e565c42
|
||||
title: Step 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Replace all instances of `parseInt(numberInput.value)` with `inputInt`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should replace `isNaN(parseInt(numberInput.value))` with `isNaN(inputInt)` and `parseInt(numberInput.value) < 0` with `inputInt < 0`.
|
||||
|
||||
```js
|
||||
assert.notMatch(
|
||||
String(checkUserInput),
|
||||
/isNaN\(\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*\)\s*\|\|s*\(\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*\<\s*0/
|
||||
);
|
||||
assert.match(
|
||||
String(checkUserInput),
|
||||
/isNaN\(\s*inputInt\s*\)\s*\|\|\s*inputInt\s*\<\s*0/
|
||||
);
|
||||
```
|
||||
|
||||
You should replace `parseInt(numberInput.value) === 5` with `inputInt === 5`.
|
||||
|
||||
```js
|
||||
assert.notMatch(
|
||||
String(checkUserInput),
|
||||
/parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*===?\s*5/
|
||||
);
|
||||
assert.match(
|
||||
String(checkUserInput),
|
||||
/inputInt\s*===?\s*5/
|
||||
);
|
||||
```
|
||||
|
||||
You should replace `decimalToBinary(parseInt(numberInput.value))` with `decimalToBinary(inputInt)`.
|
||||
|
||||
```js
|
||||
assert.notMatch(
|
||||
String(checkUserInput),
|
||||
/decimalToBinary\(\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*\)/
|
||||
);
|
||||
assert.match(
|
||||
String(checkUserInput),
|
||||
/decimalToBinary\(\s*inputInt\s*\)/
|
||||
);
|
||||
```
|
||||
|
||||
Your `checkUserInput()` function should only contain one instance of `parseInt(numberInput.value)`.
|
||||
|
||||
```js
|
||||
assert.lengthOf(
|
||||
String(checkUserInput).match(/parseInt\(\s*numberInput\s*\.\s*value\s*\)/g),
|
||||
1
|
||||
);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
--fcc-editable-region--
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (
|
||||
!numberInput.value ||
|
||||
isNaN(parseInt(numberInput.value)) ||
|
||||
parseInt(numberInput.value) < 0
|
||||
) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (parseInt(numberInput.value) === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(parseInt(numberInput.value));
|
||||
numberInput.value = "";
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 646467683f25e19bfc9cf9b0
|
||||
title: Step 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that your `showAnimation()` function is set up, let's do some testing.
|
||||
|
||||
Add three `console.log()` statements in the `showAnimation()` function to log the text `"free"`, `"Code"`, and `"Camp"` to the console. You should see that text in the console when you enter `5` into the number input and click the `Convert` button.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `console.log()` statement for the string `"free"`.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /console\.log\(\s*('|"|`)\s*free\s*\1\s*\)/i);
|
||||
```
|
||||
|
||||
You should add a `console.log()` statement for the string `"Code"`.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /console\.log\(\s*('|"|`)\s*Code\s*\1\s*\)/i);
|
||||
```
|
||||
|
||||
You should add a `console.log()` statement for the string `"Camp"`.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /console\.log\(\s*('|"|`)\s*Camp\s*\1\s*\)/i);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,262 @@
|
||||
---
|
||||
id: 64646bc0e5a60ea131e03f91
|
||||
title: Step 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Before you start writing code for the animation, let's take a look at the function you'll use to add and remove elements from the DOM: `setTimeout`.
|
||||
|
||||
The `setTimeout` function takes two arguments: a callback function and a number representing the time in milliseconds to wait before executing the callback function.
|
||||
|
||||
For example, if you wanted to log `"Hello, world!"` to the console after `3` seconds, you would write:
|
||||
|
||||
```js
|
||||
setTimeout(() => {
|
||||
console.log("Hello, world!");
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
Use the `setTimeout` function to add a one second delay before the text `"Code"` is logged to the console. Then see what happens after you enter `5` into the number input and click the `Convert` button.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `showAnimation()` function should contain a call to the `setTimeout` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /setTimeout\(/);
|
||||
```
|
||||
|
||||
You should pass a callback function as the first argument to the `setTimeout` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /setTimeout\(\s*\(\s*\)\s*=>\s*\{?|setTimeout\(\s*function\s*\(\s*\)\s*\{/);
|
||||
```
|
||||
|
||||
Within the callback function, you should log the text `"Code"` to the console.
|
||||
|
||||
```js
|
||||
assert.match(code, /setTimeout\(\s*\(\s*\)\s*=>\s*\{?\s*console\.log\(\s*('|"|`)\s*Code\s*\1\s*\)|setTimeout\(\s*function\s*\(\s*\)\s*\{\s*console\.log\(\s*('|"|`)\s*Code\s*\2\s*\)/i);
|
||||
```
|
||||
|
||||
You should pass `1000` as the second argument to the `setTimeout` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(\s*('|"|`)\s*Code\s*\1\s*\)\s*;?\s*\}?\s*,\s*1000\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
console.log("free");
|
||||
--fcc-editable-region--
|
||||
console.log("Code");
|
||||
--fcc-editable-region--
|
||||
console.log("Camp");
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,268 @@
|
||||
---
|
||||
id: 64646db2c684b7a3a174a1d0
|
||||
title: Step 81
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you test your code, you'll notice that your console logs are not in the expected order. Instead of logging `"free"`, pausing for a second before logging `"Code"`, and finally logging `"Camp"`, you'll see this:
|
||||
|
||||
```md
|
||||
free
|
||||
Camp
|
||||
Code
|
||||
```
|
||||
|
||||
This is because the `setTimeout()` function is <dfn>asynchronous</dfn>, meaning that it doesn't stop the execution of the rest of your code. All the code in the `showAnimation()` function runs line by line, but because `setTimeout()` is asynchronous, `free` and `Camp` are logged to the console immediately, and then `Code` is logged to the console after a one second delay.
|
||||
|
||||
One way to fix this is to use multiple `setTimeout()` functions. Use `setTimeout()` to log `free` to the console after half a second, or `500` milliseconds.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a second `setTimeout()` function to your `showAnimation()` function.
|
||||
|
||||
```js
|
||||
assert.lengthOf(
|
||||
code.match(/setTimeout\(/g),
|
||||
2
|
||||
);
|
||||
```
|
||||
|
||||
You should pass a callback function as the first argument to the new `setTimeout()` function.
|
||||
|
||||
```js
|
||||
assert.lengthOf(
|
||||
code.match(/setTimeout\(\s*\(\s*\)\s*=>\s*\{?|setTimeout\(\s*function\s*\(\s*\)\s*\{/g),
|
||||
2
|
||||
);
|
||||
```
|
||||
|
||||
Within the new `setTimeout()` function's callback, you should log the text `"free"` to the console.
|
||||
|
||||
```js
|
||||
assert.match(code, /setTimeout\(\s*\(\s*\)\s*=>\s*\{?\s*console\.log\(\s*('|"|`)\s*free\s*\1\s*\)|setTimeout\(\s*function\s*\(\s*\)\s*\{\s*console\.log\(\s*('|"|`)\s*free\s*\2\s*\)/i);
|
||||
```
|
||||
|
||||
You should pass `500` as the second argument to the new `setTimeout()` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(\s*('|"|`)\s*free\s*\1\s*\)\s*;?\s*\}?\s*,\s*500\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
--fcc-editable-region--
|
||||
console.log("free");
|
||||
--fcc-editable-region--
|
||||
setTimeout(() => {
|
||||
console.log("Code");
|
||||
}, 1000);
|
||||
console.log("Camp");
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,268 @@
|
||||
---
|
||||
id: 646477c82475ffaf0c3c0771
|
||||
title: Step 82
|
||||
challengeType: 0
|
||||
dashedName: step-82
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
While asynchronous, or async, code can be difficult to understand at first, it has many advantages. One of the most important is that it allows you to write non-blocking code.
|
||||
|
||||
For example, imagine you're baking a cake, and you put the cake in the oven and set a timer. You don't have to sit in front of the oven waiting the entire time – you can wash dishes, read a book, or do anything else while you wait for the timer to go off.
|
||||
|
||||
Async code works in a similar way. You can start an async operation and other parts of your code will still work while that operation is running.
|
||||
|
||||
You'll learn more about async code in a future module, but the `setTimeout()` function is a good introduction.
|
||||
|
||||
Add a `1500` millisecond delay before the text `"Camp"` is logged to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a third `setTimeout()` function to your `showAnimation()` function.
|
||||
|
||||
```js
|
||||
assert.lengthOf(
|
||||
code.match(/setTimeout\(/g),
|
||||
3
|
||||
);
|
||||
```
|
||||
|
||||
You should pass a callback function as the first argument to the new `setTimeout()` function.
|
||||
|
||||
```js
|
||||
assert.lengthOf(
|
||||
code.match(/setTimeout\(\s*\(\s*\)\s*=>\s*\{?|setTimeout\(\s*function\s*\(\s*\)\s*\{/g),
|
||||
3
|
||||
);
|
||||
```
|
||||
|
||||
Within the new `setTimeout()` function's callback, you should log the text `Camp` to the console.
|
||||
|
||||
```js
|
||||
assert.match(code, /setTimeout\(\s*\(\s*\)\s*=>\s*\{?\s*console\.log\(\s*('|"|`)\s*Camp\s*\1\s*\)|setTimeout\(\s*function\s*\(\s*\)\s*\{\s*console\.log\(\s*('|"|`)\s*Camp\s*\2\s*\)/i);
|
||||
```
|
||||
|
||||
You should pass `1500` as the second argument to the new `setTimeout()` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(\s*('|"|`)\s*Camp\s*\1\s*\)\s*;?\s*\}?\s*,\s*1500\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
setTimeout(() => {
|
||||
console.log("free");
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
console.log("Code");
|
||||
}, 1000);
|
||||
--fcc-editable-region--
|
||||
console.log("Camp");
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,248 @@
|
||||
---
|
||||
id: 64647cf70a4556b5105e65b2
|
||||
title: Step 83
|
||||
challengeType: 0
|
||||
dashedName: step-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you're ready to start on the animation itself. You'll use an array of objects to store data for each frame of the animation.
|
||||
|
||||
First, create a new variable called `animationData` and assign it an empty array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a variable named `animationData`.
|
||||
|
||||
```js
|
||||
assert.exists(animationData);
|
||||
```
|
||||
|
||||
Your `animationData` variable should be an empty array.
|
||||
|
||||
```js
|
||||
assert.isArray(animationData);
|
||||
assert.isEmpty(animationData);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
setTimeout(() => {
|
||||
console.log("free");
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
console.log("Code");
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
console.log("Camp");
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,283 @@
|
||||
---
|
||||
id: 64648534ff5498bee5dceb28
|
||||
title: Step 84
|
||||
challengeType: 0
|
||||
dashedName: step-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, you'll create an object to represent the first frame of your animation. Your object should have two properties or keys: `inputVal`, and `addElDelay`.
|
||||
|
||||
`inputVal` will represent the value of the input each time your recursive function runs. And `addElDelay` will be the delay between adding DOM elements to the page.
|
||||
|
||||
Add an object to `animationData` with an `inputVal` property set to `5`, and an `addElDelay` property set to `1000`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `animationData` array should have a length of `1`.
|
||||
|
||||
```js
|
||||
assert.lengthOf(animationData, 1);
|
||||
```
|
||||
|
||||
The `animationData` array should contain an object.
|
||||
|
||||
```js
|
||||
assert.isObject(animationData[0]);
|
||||
```
|
||||
|
||||
You should add an `inputVal` property to the object.
|
||||
|
||||
```js
|
||||
assert.property(animationData[0], 'inputVal');
|
||||
```
|
||||
|
||||
You should set the value of the `inputVal` property to the number `5`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(
|
||||
animationData[0],
|
||||
'inputVal',
|
||||
5
|
||||
);
|
||||
```
|
||||
|
||||
You should add an `addElDelay` property to the object.
|
||||
|
||||
```js
|
||||
assert.property(animationData[0], 'addElDelay');
|
||||
```
|
||||
|
||||
You should set the value of the `addElDelay` property to the number `1000`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(
|
||||
animationData[0],
|
||||
'addElDelay',
|
||||
1000
|
||||
);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationData = [
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
setTimeout(() => {
|
||||
console.log("free");
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
console.log("Code");
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
console.log("Camp");
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,276 @@
|
||||
---
|
||||
id: 646486adf52652c0ee103aab
|
||||
title: Step 85
|
||||
challengeType: 0
|
||||
dashedName: step-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Recall that the call stack is a LIFO (last in, first out) data structure. This means that, as functions are called, they are added to the top or end of the stack, and as functions return, they are removed from the top of the stack.
|
||||
|
||||
Treat your `animationData` array as a stack and add a new object to it. Your new object should have the properties `inputVal`, and `addElDelay` set to `2`, and `1500`, respectively. Remember to add this object to the top of the stack, or in other words, to the end of the `animationData` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `animationData` array should have a length of `2`.
|
||||
|
||||
```js
|
||||
assert.lengthOf(animationData, 2);
|
||||
```
|
||||
|
||||
Each element in the `animationData` array should be an object.
|
||||
|
||||
```js
|
||||
assert.isTrue(animationData.every((el) => typeof el === 'object'));
|
||||
```
|
||||
|
||||
You should add an `inputVal` property to the object at the top of the stack.
|
||||
|
||||
```js
|
||||
assert.property(animationData[1], 'inputVal');
|
||||
```
|
||||
|
||||
You should set the value of the `inputVal` property to the number `2`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(animationData[1], 'inputVal', 2);
|
||||
```
|
||||
|
||||
You should add an `addElDelay` property to the object at the top of the stack.
|
||||
|
||||
```js
|
||||
assert.property(animationData[1], 'addElDelay');
|
||||
```
|
||||
|
||||
You should set the value of the `addElDelay` property to the number `1500`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(animationData[1], 'addElDelay', 1500);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationData = [
|
||||
--fcc-editable-region--
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
}
|
||||
--fcc-editable-region--
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
setTimeout(() => {
|
||||
console.log("free");
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
console.log("Code");
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
console.log("Camp");
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,278 @@
|
||||
---
|
||||
id: 64648963e014f8c42a65b83a
|
||||
title: Step 86
|
||||
challengeType: 0
|
||||
dashedName: step-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add another object to the `animationData` array. Your new object should have the properties `inputVal`, and `addElDelay` set to `1`, and `2000`, respectively. Remember to treat the `animationData` array as a stack and add the new object to the top of the stack.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `animationData` array should have a length of `3`.
|
||||
|
||||
```js
|
||||
assert.lengthOf(animationData, 3);
|
||||
```
|
||||
|
||||
Each element in the `animationData` array should be an object.
|
||||
|
||||
```js
|
||||
assert.isTrue(animationData.every((el) => typeof el === 'object'));
|
||||
```
|
||||
|
||||
You should add an `inputVal` property to the object at the top of the stack.
|
||||
|
||||
```js
|
||||
assert.property(animationData[2], 'inputVal');
|
||||
```
|
||||
|
||||
You should set the value of the `inputVal` property to the number `1`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(animationData[2], 'inputVal', 1);
|
||||
```
|
||||
|
||||
You should add an `addElDelay` property to the object at the top of the stack.
|
||||
|
||||
```js
|
||||
assert.property(animationData[2], 'addElDelay');
|
||||
```
|
||||
|
||||
You should set the value of the `addElDelay` property to the number `2000`.
|
||||
|
||||
```js
|
||||
assert.propertyVal(animationData[2], 'addElDelay', 2000);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationData = [
|
||||
--fcc-editable-region--
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
--fcc-editable-region--
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
setTimeout(() => {
|
||||
console.log("free");
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
console.log("Code");
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
console.log("Camp");
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,259 @@
|
||||
---
|
||||
id: 64648c3703ad2ec796ab8d1e
|
||||
title: Step 88
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, clear out your `showAnimation()` function by removing all of your `setTimeout()` calls.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove all of the `setTimeout()` calls from your `showAnimation()` function.
|
||||
|
||||
```js
|
||||
assert.notMatch(String(showAnimation), /setTimeout\(/);
|
||||
```
|
||||
|
||||
The body of your `showAnimation()` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /function\s+showAnimation\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationContainer = document.getElementById("animation-container");
|
||||
const animationData = [
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
{
|
||||
inputVal: 1,
|
||||
addElDelay: 2000
|
||||
}
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
--fcc-editable-region--
|
||||
setTimeout(() => {
|
||||
console.log("free");
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
console.log("Code");
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
console.log("Camp");
|
||||
}, 1500);
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,256 @@
|
||||
---
|
||||
id: 64648cf52e1ce1c8c00956ae
|
||||
title: Step 89
|
||||
challengeType: 0
|
||||
dashedName: step-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you'll start building the animation itself.
|
||||
|
||||
First, set the `innerText` property of `result` to `"Call Stack Animation"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `innerText` property of `result` to the string `"Call Stack Animation"`.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /result\.innerText\s*=\s*('|"|`)Call Stack Animation\1/i);
|
||||
```
|
||||
|
||||
After calling the `showAnimation` function, the `innerText` property of `result` should be `"Call Stack Animation"`.
|
||||
|
||||
```js
|
||||
const result = document.getElementById("result");
|
||||
|
||||
showAnimation();
|
||||
assert.strictEqual(result.innerText.trim().toLowerCase(), "call stack animation");
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationContainer = document.getElementById("animation-container");
|
||||
const animationData = [
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
{
|
||||
inputVal: 1,
|
||||
addElDelay: 2000
|
||||
}
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,259 @@
|
||||
---
|
||||
id: 6464905afec9efcf7328ce58
|
||||
title: Step 90
|
||||
challengeType: 0
|
||||
dashedName: step-90
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, use the `.forEach()` method to loop through the `animationData` array. For the `.forEach()` method's callback function, pass in `obj` as a parameter, but leave the body of the callback function empty for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.forEach()` method to loop through the `animationData` array.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /animationData\s*\.\s*forEach\(/);
|
||||
```
|
||||
|
||||
You should pass in `obj` as a parameter to the `.forEach()` method's callback function.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /animationData\s*\.\s*forEach\(\s*(\(\s*obj\s*\)|obj)\s*=>\s*\{|animationData\s*\.\s*forEach\(\s*function\s*\(\s*obj\s*\)\s*\{/);
|
||||
```
|
||||
|
||||
The body of your `.forEach()` method's callback function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /animationData\s*\.\s*forEach\([\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationContainer = document.getElementById("animation-container");
|
||||
const animationData = [
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
{
|
||||
inputVal: 1,
|
||||
addElDelay: 2000
|
||||
}
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
result.innerText = "Call Stack Animation";
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,269 @@
|
||||
---
|
||||
id: 646491d2c856afd17c2f380d
|
||||
title: Step 91
|
||||
challengeType: 0
|
||||
dashedName: step-91
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Since you have the timing for each frame of animation stored in `addElDelay`, you can use that value with `setTimeout()` to set up the delay to add elements to the DOM.
|
||||
|
||||
Within the body of the `.forEach()` method's callback function, add a `setTimeout()` function. Pass in an empty callback function as the first argument, and `obj.addElDelay` as the second argument.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the `setTimeout()` function within the body of your `.forEach()` method's callback function.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /animationData\s*\.\s*forEach\([\s\S]+\{\s*setTimeout\(/);
|
||||
```
|
||||
|
||||
You should pass in an empty callback function as the first argument to the `setTimeout()` function.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /animationData\s*\.\s*forEach\([\s\S]+\{\s*setTimeout\(\s*\(\s*\)\s*=>\s*\{|animationData\s*\.\s*forEach\([\s\S]+\{\s*setTimeout\(\s*function\s*\(\s*\)\s*\{/);
|
||||
```
|
||||
|
||||
The body of your `setTimeout()` function's callback function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /animationData\s*\.\s*forEach\([\s\S]+\{\s*setTimeout\([\s\S]+\{\s*\}/);
|
||||
```
|
||||
|
||||
You should pass in `obj.addElDelay` as the second argument to the `setTimeout()` function.
|
||||
|
||||
```js
|
||||
assert.match(String(showAnimation), /animationData\s*\.\s*forEach\([\s\S]+\{\s*setTimeout\([\s\S]+,\s*obj\s*\.\s*addElDelay\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationContainer = document.getElementById("animation-container");
|
||||
const animationData = [
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
{
|
||||
inputVal: 1,
|
||||
addElDelay: 2000
|
||||
}
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
result.innerText = "Call Stack Animation";
|
||||
|
||||
animationData.forEach((obj) => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,251 @@
|
||||
---
|
||||
id: 646492f5c672c9d32f340c22
|
||||
title: Step 92
|
||||
challengeType: 0
|
||||
dashedName: step-92
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Then, use the compound assignment operator (`+=`) to set the `innerHTML` property of the `animationContainer` to an empty template literal string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the compound assignment operator (`+=`) to set the `innerHTML` property of the `animationContainer` to an empty template literal string.
|
||||
|
||||
```js
|
||||
assert.match(code, /setTimeout\([\s\S]+\{\s*animationContainer\.innerHTML\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationContainer = document.getElementById("animation-container");
|
||||
const animationData = [
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
{
|
||||
inputVal: 1,
|
||||
addElDelay: 2000
|
||||
}
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
result.innerText = "Call Stack Animation";
|
||||
|
||||
animationData.forEach((obj) => {
|
||||
setTimeout(() => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}, obj.addElDelay);
|
||||
});
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,261 @@
|
||||
---
|
||||
id: 646493b7dc53b5d45c9c50fc
|
||||
title: Step 87
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you'll start building the animation itself.
|
||||
|
||||
First, use the `document.getElementById()` method to select the element with the id `animation-container` and assign it to a variable called `animationContainer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `document.getElementById()` method to get the `#animation-container` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)animation-container\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare a variable called `animationContainer` and assign it the `#animation-container` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+animationContainer\s*=\s*document\.getElementById\(\s*('|"|`)animation-container\1\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
const animationData = [
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
{
|
||||
inputVal: 1,
|
||||
addElDelay: 2000
|
||||
}
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
setTimeout(() => {
|
||||
console.log("free");
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
console.log("Code");
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
console.log("Camp");
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,263 @@
|
||||
---
|
||||
id: 64649b243b9cc3ddabacc593
|
||||
title: Step 93
|
||||
challengeType: 0
|
||||
dashedName: step-93
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the template literal, add a paragraph element with the `id` attribute equal to an empty string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `id` attribute to the paragraph element.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
code,
|
||||
/animationContainer\.innerHTML\s*\+=\s*`\s*<p\s+id/
|
||||
);
|
||||
```
|
||||
|
||||
You should set the value of the `id` attribute to an empty string.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
code,
|
||||
/animationContainer\.innerHTML\s*\+=\s*`\s*<p\s+id\s*=\s*('|"|`)\1\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationContainer = document.getElementById("animation-container");
|
||||
const animationData = [
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
{
|
||||
inputVal: 1,
|
||||
addElDelay: 2000
|
||||
}
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
result.innerText = "Call Stack Animation";
|
||||
|
||||
animationData.forEach((obj) => {
|
||||
setTimeout(() => {
|
||||
--fcc-editable-region--
|
||||
animationContainer.innerHTML += ``;
|
||||
--fcc-editable-region--
|
||||
}, obj.addElDelay);
|
||||
});
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,256 @@
|
||||
---
|
||||
id: 64649c6d77059edf80279a32
|
||||
title: Step 94
|
||||
challengeType: 0
|
||||
dashedName: step-94
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, use string interpolation to set the `id` attribute to the `inputVal` property of the current object, `obj`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use string interpolation to set the `id` attribute to the `inputVal` property of `obj`.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
code,
|
||||
/animationContainer\.innerHTML\s*\+=\s*`\s*<p\s+id\s*=\s*('|"|`)\s*\$\{\s*obj\.inputVal\s*\}\s*\1\s*>\s*<\s*\/\s*p\s*>\s*`|animationContainer\.innerHTML\s*\+=\s*`\s*<p\s+id\s*=\s*('|"|`)\s*\$\{\s*obj\s*\[\s*('|"|`)\s*inputVal\s*\3\s*\]\s*\}\2\s*>\s*<\s*\/\s*p\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationContainer = document.getElementById("animation-container");
|
||||
const animationData = [
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
{
|
||||
inputVal: 1,
|
||||
addElDelay: 2000
|
||||
}
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
result.innerText = "Call Stack Animation";
|
||||
|
||||
animationData.forEach((obj) => {
|
||||
setTimeout(() => {
|
||||
animationContainer.innerHTML += `
|
||||
--fcc-editable-region--
|
||||
<p id=""></p>
|
||||
--fcc-editable-region--
|
||||
`;
|
||||
}, obj.addElDelay);
|
||||
});
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,266 @@
|
||||
---
|
||||
id: 64649efb555939e30462c79b
|
||||
title: Step 95
|
||||
challengeType: 0
|
||||
dashedName: step-95
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `class` attribute set to `"animation-frame"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `class` attribute to the paragraph element.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
code,
|
||||
/animationContainer\.innerHTML\s*\+=\s*`\s*<p[\s\S]+class/
|
||||
);
|
||||
```
|
||||
|
||||
You should set the value of the `class` attribute to `"animation-frame"`.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
code,
|
||||
/animationContainer\.innerHTML\s*\+=\s*`\s*<p[\s\S]+class\s*\=\s*('|"|`)\s*animation-frame\s*\1/
|
||||
);
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationContainer = document.getElementById("animation-container");
|
||||
const animationData = [
|
||||
{
|
||||
inputVal: 5,
|
||||
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
{
|
||||
inputVal: 1,
|
||||
addElDelay: 2000
|
||||
}
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
result.innerText = "Call Stack Animation";
|
||||
|
||||
animationData.forEach((obj) => {
|
||||
setTimeout(() => {
|
||||
animationContainer.innerHTML += `
|
||||
--fcc-editable-region--
|
||||
<p id="${obj.inputVal}"></p>
|
||||
--fcc-editable-region--
|
||||
`;
|
||||
}, obj.addElDelay);
|
||||
});
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,258 @@
|
||||
---
|
||||
id: 64649f91446721e3ff391d88
|
||||
title: Step 96
|
||||
challengeType: 0
|
||||
dashedName: step-96
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, use string interpolation to set the text of the paragraph element to `decimalToBinary(${currVal})`, where `currVal` is the `inputVal` property of the current object. After this, test out your code by entering the number `5` into the number input and clicking the `Convert` button.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use string interpolation to set the text of the paragraph element to `decimalToBinary(${obj.inputVal})`.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
code,
|
||||
/animationContainer\.innerHTML\s*\+=\s*`\s*<p[\s\S]+>\s*decimalToBinary\s*\(\s*\$\{\s*obj\.inputVal\s*\}\s*\)\s*<\s*\/\s*p\s*>\s*`|animationContainer\.innerHTML\s*\+=\s*`\s*<p[\s\S]+>\s*decimalToBinary\s*\(\s*\$\{\s*obj\s*\[\s*('|"|`)\s*inputVal\s*\1\s*\]\s*\}\s*\)\s*<\s*\/\s*p\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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationContainer = document.getElementById("animation-container");
|
||||
const animationData = [
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
{
|
||||
inputVal: 1,
|
||||
addElDelay: 2000
|
||||
}
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
result.innerText = "Call Stack Animation";
|
||||
|
||||
animationData.forEach((obj) => {
|
||||
setTimeout(() => {
|
||||
animationContainer.innerHTML += `
|
||||
<p id="${obj.inputVal}" class="animation-frame">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</p>
|
||||
`;
|
||||
}, obj.addElDelay);
|
||||
});
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,270 @@
|
||||
---
|
||||
id: 6464a057702d04e537d56d49
|
||||
title: Step 97
|
||||
challengeType: 0
|
||||
dashedName: step-97
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it's time to set up for the next phase of the animation where you'll update and remove the paragraphs you append to the DOM during the animation.
|
||||
|
||||
Add the property `msg` to the animation object at the top of the stack, and set its value to an empty string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the property `msg` to the animation object at the top of the stack.
|
||||
|
||||
```js
|
||||
assert.property(
|
||||
animationData[2],
|
||||
'msg',
|
||||
)
|
||||
```
|
||||
|
||||
You should set the value of the `msg` property to an empty string.
|
||||
|
||||
```js
|
||||
assert.propertyVal(
|
||||
animationData[2],
|
||||
'msg',
|
||||
''
|
||||
)
|
||||
```
|
||||
|
||||
# --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 <br />
|
||||
Converter
|
||||
</h1>
|
||||
<section 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>
|
||||
</section>
|
||||
<section class="output-container">
|
||||
<output id="result" for="number-input"></output>
|
||||
<h2>Call stack</h2>
|
||||
<div id="animation-container"></div>
|
||||
</section>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
font-size: 1.125rem;
|
||||
color: var(--light-grey);
|
||||
background-color: var(--dark-blue);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.125rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
white-space: nowrap;
|
||||
word-spacing: -6px;
|
||||
}
|
||||
|
||||
.convert-btn {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background-color: var(--orange);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
font-size: inherit;
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-inline: auto;
|
||||
width: clamp(320px, 50vw, 460px);
|
||||
}
|
||||
|
||||
#result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
margin-block-start: 20px;
|
||||
padding: 15px;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#animation-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
min-height: 40vh;
|
||||
border: 2px dashed var(--orange);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.animation-frame {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
padding: 15px 10px;
|
||||
border: 5px solid var(--orange);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 36em) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numberInput = document.getElementById("number-input");
|
||||
const convertBtn = document.getElementById("convert-btn");
|
||||
const result = document.getElementById("result");
|
||||
const animationContainer = document.getElementById("animation-container");
|
||||
const animationData = [
|
||||
{
|
||||
inputVal: 5,
|
||||
addElDelay: 1000
|
||||
},
|
||||
{
|
||||
inputVal: 2,
|
||||
addElDelay: 1500
|
||||
},
|
||||
--fcc-editable-region--
|
||||
{
|
||||
inputVal: 1,
|
||||
addElDelay: 2000
|
||||
}
|
||||
--fcc-editable-region--
|
||||
];
|
||||
|
||||
const decimalToBinary = (input) => {
|
||||
if (input === 0 || input === 1) {
|
||||
return String(input);
|
||||
} else {
|
||||
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
||||
}
|
||||
};
|
||||
|
||||
const showAnimation = () => {
|
||||
result.innerText = "Call Stack Animation";
|
||||
|
||||
animationData.forEach((obj) => {
|
||||
setTimeout(() => {
|
||||
animationContainer.innerHTML += `
|
||||
<p id="${obj.inputVal}" class="animation-frame">
|
||||
decimalToBinary(${obj.inputVal})
|
||||
</p>
|
||||
`;
|
||||
}, obj.addElDelay);
|
||||
});
|
||||
};
|
||||
|
||||
const checkUserInput = () => {
|
||||
const inputInt = parseInt(numberInput.value);
|
||||
|
||||
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
||||
alert("Please provide a decimal number greater than or equal to 0");
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputInt === 5) {
|
||||
showAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
result.textContent = decimalToBinary(inputInt);
|
||||
numberInput.value = "";
|
||||
};
|
||||
|
||||
convertBtn.addEventListener("click", checkUserInput);
|
||||
|
||||
numberInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
checkUserInput();
|
||||
}
|
||||
});
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user