mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-22 03:26:02 -05:00
202 lines
4.2 KiB
Markdown
202 lines
4.2 KiB
Markdown
---
|
|
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 Converter</h1>
|
|
<div class="input-container">
|
|
<label for="number-input">Enter a decimal number:</label>
|
|
<input
|
|
value=""
|
|
type="number"
|
|
name="decimal number input"
|
|
id="number-input"
|
|
class="number-input"
|
|
/>
|
|
<button class="convert-btn" id="convert-btn">Convert</button>
|
|
</div>
|
|
<output id="result" for="number-input"></output>
|
|
<div id="animation-container"></div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
```css
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
--light-grey: #f5f6f7;
|
|
--dark-blue: #1b1b32;
|
|
--orange: #f1be32;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--dark-blue);
|
|
font-family: "Times New Roman", Times, serif;
|
|
font-size: 18px;
|
|
color: var(--light-grey);
|
|
padding: 0 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
font-size: 2.3rem;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.input-container {
|
|
margin: 10px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.convert-btn {
|
|
background-color: var(--orange);
|
|
cursor: pointer;
|
|
border: none;
|
|
padding: 4px;
|
|
}
|
|
|
|
.number-input {
|
|
height: 25px;
|
|
}
|
|
|
|
#result {
|
|
margin: 10px 0;
|
|
min-width: 200px;
|
|
width: fit-content;
|
|
min-height: 80px;
|
|
word-break: break-word;
|
|
padding: 15px;
|
|
border: 5px solid var(--orange);
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
#animation-container {
|
|
margin: auto;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.animation-frame {
|
|
margin: 250px auto 0;
|
|
padding: 15px 10px;
|
|
border: 5px solid var(--orange);
|
|
font-size: 1.2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (min-width: 500px) {
|
|
.input-container {
|
|
flex-direction: row;
|
|
}
|
|
|
|
#result {
|
|
max-width: 460px;
|
|
}
|
|
}
|
|
```
|
|
|
|
```js
|
|
const numberInput = document.getElementById("number-input");
|
|
const convertBtn = document.getElementById("convert-btn");
|
|
const result = document.getElementById("result");
|
|
|
|
const 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();
|
|
}
|
|
});
|
|
```
|