mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): break number sorter down into steps (#49715)
* chore: create new project * feat: break projects down into steps * chore: solution * feat: write tests * fix: broken tests * chore: apply Jessica's review suggestions * chore: correct title case for block name * chore: apply kolade's review * chore: apply kolade's review * chore: apply sem's review Co-authored-by: Sem Bauke <semboot699@gmail.com> * chore: apply sem's updated review * chore: add aria-label to selects * fix: labels on the steps where the camper changed a value This is why find and replace didn't work ); * chore: apply zaira's review suggestions Co-authored-by: Zaira <33151350+zairahira@users.noreply.github.com> * chore: apply zaira's review suggestions Co-authored-by: Zaira <33151350+zairahira@users.noreply.github.com> --------- Co-authored-by: Sem Bauke <semboot699@gmail.com> Co-authored-by: Zaira <33151350+zairahira@users.noreply.github.com>
This commit is contained in:
Naomi Carrigan
@@ -355,6 +355,10 @@
|
||||
"learn-regular-expressions-by-building-a-spam-filter": {
|
||||
"title": "Learn Regular Expressions by Building a Spam Filter",
|
||||
"intro": ["", ""]
|
||||
},
|
||||
"learn-basic-algorithmic-thinking-by-building-a-number-sorter": {
|
||||
"title": "Learn Basic Algorithmic Thinking by Building a Number Sorter",
|
||||
"intro": ["", ""]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Introduction to the Learn Basic Algorithmic Thinking by Building a Number Sorter
|
||||
block: learn-basic-algorithmic-thinking-by-building-a-number-sorter
|
||||
superBlock: JavaScript Algorithms and Data Structures
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the Learn Basic Algorithmic Thinking by Building a Number Sorter
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@@ -130,6 +130,7 @@
|
||||
"learn-simple-and-compound-interest": "Python",
|
||||
"college-algebra-with-python-conclusion": "Python",
|
||||
"learn-data-structures-by-building-a-shopping-cart": "JavaScript",
|
||||
"learn-fetch-and-promises-by-building-an-fcc-authors-page": "JavaScript",
|
||||
"learn-regular-expressions-by-building-a-spam-filter": "JavaScript"
|
||||
"learn-regular-expressions-by-building-a-spam-filter": "JavaScript",
|
||||
"learn-basic-algorithmic-thinking-by-building-a-number-sorter": "JavaScript",
|
||||
"learn-fetch-and-promises-by-building-an-fcc-authors-page": "JavaScript"
|
||||
}
|
||||
|
||||
+184
@@ -0,0 +1,184 @@
|
||||
{
|
||||
"name": "Learn Basic Algorithmic Thinking by Building a Number Sorter",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-basic-algorithmic-thinking-by-building-a-number-sorter",
|
||||
"order": 9,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "2022/javascript-algorithms-and-data-structures",
|
||||
"superOrder": 4,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"64061a98f704a014b44afdb2",
|
||||
"Step 1"
|
||||
],
|
||||
[
|
||||
"64067c1041a80c366b852407",
|
||||
"Step 2"
|
||||
],
|
||||
[
|
||||
"6406a71d2b35103a340dba06",
|
||||
"Step 3"
|
||||
],
|
||||
[
|
||||
"6406a9945fa5d23c225d31cc",
|
||||
"Step 4"
|
||||
],
|
||||
[
|
||||
"6406adbca6b41d3d7cef85ab",
|
||||
"Step 5"
|
||||
],
|
||||
[
|
||||
"6406bb32f9ed593f26c33b2b",
|
||||
"Step 6"
|
||||
],
|
||||
[
|
||||
"6407b940b8983005578d0824",
|
||||
"Step 7"
|
||||
],
|
||||
[
|
||||
"6407c303b4272606c019f338",
|
||||
"Step 8"
|
||||
],
|
||||
[
|
||||
"6407c4abf5be6d07d8c12ade",
|
||||
"Step 9"
|
||||
],
|
||||
[
|
||||
"6407c627ddc93708c8dee796",
|
||||
"Step 10"
|
||||
],
|
||||
[
|
||||
"6407c6a2c2159309994779a5",
|
||||
"Step 11"
|
||||
],
|
||||
[
|
||||
"6407c6d3f19c4e0a7ba320bb",
|
||||
"Step 12"
|
||||
],
|
||||
[
|
||||
"6407c722498bc80b76d29073",
|
||||
"Step 13"
|
||||
],
|
||||
[
|
||||
"6410da6df463a606dfade96f",
|
||||
"Step 14"
|
||||
],
|
||||
[
|
||||
"6410dfb965c72108196ef24a",
|
||||
"Step 15"
|
||||
],
|
||||
[
|
||||
"6410e1b58efc2c091a13bcd9",
|
||||
"Step 16"
|
||||
],
|
||||
[
|
||||
"6410e3c19c21cd09c32dc7c6",
|
||||
"Step 17"
|
||||
],
|
||||
[
|
||||
"6410e70c84bb660b4d2a5ea1",
|
||||
"Step 18"
|
||||
],
|
||||
[
|
||||
"6410edb33eeaf50dd9a22ab4",
|
||||
"Step 19"
|
||||
],
|
||||
[
|
||||
"6410efff0ae97c0f06856511",
|
||||
"Step 20"
|
||||
],
|
||||
[
|
||||
"6410f9a443d57414ee50fada",
|
||||
"Step 21"
|
||||
],
|
||||
[
|
||||
"6410f149110ec60fd40fcfe1",
|
||||
"Step 22"
|
||||
],
|
||||
[
|
||||
"64110377201e7b1a0de0d558",
|
||||
"Step 23"
|
||||
],
|
||||
[
|
||||
"6410f97a721cd1144804b7a8",
|
||||
"Step 24"
|
||||
],
|
||||
[
|
||||
"6410fb3b68429716a810ea4b",
|
||||
"Step 25"
|
||||
],
|
||||
[
|
||||
"6410fcd1f731fd17cdb101a7",
|
||||
"Step 26"
|
||||
],
|
||||
[
|
||||
"6411024727181d190ef03166",
|
||||
"Step 27"
|
||||
],
|
||||
[
|
||||
"64110727cefd3d1d9bdb0128",
|
||||
"Step 28"
|
||||
],
|
||||
[
|
||||
"6411083020a3101e9514a0f5",
|
||||
"Step 29"
|
||||
],
|
||||
[
|
||||
"64110998bc00321fd8052ab5",
|
||||
"Step 30"
|
||||
],
|
||||
[
|
||||
"64110a03f6a450209b01f45c",
|
||||
"Step 31"
|
||||
],
|
||||
[
|
||||
"64110b1849454521871243ca",
|
||||
"Step 32"
|
||||
],
|
||||
[
|
||||
"6411108bc8b9c324f66aab4c",
|
||||
"Step 33"
|
||||
],
|
||||
[
|
||||
"641110e4fb696b259dbf0bcf",
|
||||
"Step 34"
|
||||
],
|
||||
[
|
||||
"6411135e9ee2fa26c882eb02",
|
||||
"Step 35"
|
||||
],
|
||||
[
|
||||
"64112c9cf53d632910ea2f9b",
|
||||
"Step 36"
|
||||
],
|
||||
[
|
||||
"64112cea9e6ac22a314628b0",
|
||||
"Step 37"
|
||||
],
|
||||
[
|
||||
"64112d0943e1bb2aef11e2d1",
|
||||
"Step 38"
|
||||
],
|
||||
[
|
||||
"64112fa63a0f812c66499a54",
|
||||
"Step 39"
|
||||
],
|
||||
[
|
||||
"641130423e5f512d8972dae1",
|
||||
"Step 40"
|
||||
],
|
||||
[
|
||||
"64113124efd2852edafaf25f",
|
||||
"Step 41"
|
||||
],
|
||||
[
|
||||
"64113249bab9952fb2ce4469",
|
||||
"Step 42"
|
||||
]
|
||||
]
|
||||
}
|
||||
+327
@@ -0,0 +1,327 @@
|
||||
---
|
||||
id: 64061a98f704a014b44afdb2
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this project, you will be building a number sorter. The HTML and CSS have been provided for you. Feel free to explore them.
|
||||
|
||||
When you are ready, declare a `sortButton` variable and assign it the value of `.getElementById()` with the argument `sort`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `sortButton` variable with `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortButton\s*=/);
|
||||
```
|
||||
|
||||
You should call `document.getElementById()` with the argument `sort`.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)sort\1\s*\)/);
|
||||
```
|
||||
|
||||
You should assign the value of `document.getElementById()` to `sortButton`.
|
||||
|
||||
```js
|
||||
assert.match(code, /sortButton\s*=\s*document\.getElementById\(\s*('|"|`)sort\1\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+339
@@ -0,0 +1,339 @@
|
||||
---
|
||||
id: 64067c1041a80c366b852407
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To prepare your project's logic, use `const` and arrow syntax to declare a `sortInputArray` function. It should take a single `event` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `sortInputArray` function with `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortInputArray\s*=/);
|
||||
```
|
||||
|
||||
Your `sortInputArray` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(sortInputArray);
|
||||
```
|
||||
|
||||
Your `sortInputArray` should take a single `event` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortInputArray\s*=\s*\(\s*event\s*\)/);
|
||||
```
|
||||
|
||||
Your `sortInputArray` should use arrow syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortInputArray\s*=\s*\(\s*event\s*\)\s*=>/);
|
||||
```
|
||||
|
||||
Your `sortInputArray` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(sortInputArray.toString(), /\(\s*event\s*\)\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+317
@@ -0,0 +1,317 @@
|
||||
---
|
||||
id: 6406a71d2b35103a340dba06
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You will be using this as an event listener for the `sortButton`. Because buttons associated with a `form` element submit by default, you need to prevent that behavior. Call `event.preventDefault()` in your function to do this.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `sortInputArray` function should call `event.preventDefault()`.
|
||||
|
||||
```js
|
||||
assert.match(sortInputArray.toString(), /event\.preventDefault\(\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
--fcc-editable-region--
|
||||
const sortInputArray = (event) => {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+331
@@ -0,0 +1,331 @@
|
||||
---
|
||||
id: 6406a9945fa5d23c225d31cc
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To test your code as you write it, mount an event listener to your `sortButton` element. It should listen for the `click` event, and take `sortInputArray` as the callback.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `.addEventListener()` method on your `sortButton` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /sortButton\s*\.\s*addEventListener\s*\(/);
|
||||
```
|
||||
|
||||
Your `.addEventListener()` method should listen for the `click` event.
|
||||
|
||||
```js
|
||||
assert.match(code, /sortButton\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,/);
|
||||
```
|
||||
|
||||
Your `.addEventListener()` method should take `sortInputArray` as the callback. Remember to pass the function reference, not the function call.
|
||||
|
||||
```js
|
||||
assert.match(code, /sortButton\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*sortInputArray\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+335
@@ -0,0 +1,335 @@
|
||||
---
|
||||
id: 6406adbca6b41d3d7cef85ab
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Back in your `sortInputArray` function, you need to get the values from your `select` elements. Since they all have the class `values-dropdown`, you can query them all at once.
|
||||
|
||||
Use `document.getElementsByClassName()` to get all the elements with the class `values-dropdown`. Assign that to an `inputValues` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `document.getElementsByClassName()` to get all the elements with the class `values-dropdown`.
|
||||
|
||||
```js
|
||||
assert.match(sortInputArray.toString(), /document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)/);
|
||||
```
|
||||
|
||||
You should assign the result of `document.getElementsByClassName()` to a variable named `inputValues`.
|
||||
|
||||
```js
|
||||
assert.match(sortInputArray.toString(), /inputValues\s*=\s*document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare `inputValues`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+inputValues\s*=\s*document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
--fcc-editable-region--
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+329
@@ -0,0 +1,329 @@
|
||||
---
|
||||
id: 6406bb32f9ed593f26c33b2b
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remember that `.getElementsByClassName()` returns an array-like object. You can use the spread operator to convert it into an array.
|
||||
|
||||
Convert the `document.getElementsByClassName()` call to an array with the spread operator and assign it to a variable called `inputValues`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the spread operator on `document.getElementsByClassName()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.\.\.document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)/);
|
||||
```
|
||||
|
||||
You should wrap the spread operator and `.getElementsByClassName()` in square brackets to create an array.
|
||||
|
||||
```js
|
||||
assert.match(code, /\[\s*\.\.\.document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)\s*\]/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
--fcc-editable-region--
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = document.getElementsByClassName("values-dropdown");
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+341
@@ -0,0 +1,341 @@
|
||||
---
|
||||
id: 6407b940b8983005578d0824
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You need to get the values from your `select` elements. However, these values are strings, and you need them to be numbers.
|
||||
|
||||
Since you have an array, you can use the `map` method to convert each value to a number. Do this by passing a callback function to `map` that takes a `dropdown` parameter and returns `Number(dropdown.value)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should chain the `map` method directly on your array.
|
||||
|
||||
```js
|
||||
assert.match(code, /inputValues\s*=\s*\[\s*\.\.\.document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)\s*\]\s*\.map\(/);
|
||||
```
|
||||
|
||||
Your `map` callback function should use arrow function syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /inputValues\s*=\s*\[\s*\.\.\.document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)\s*\]\s*\.map\s*\(\s*\(?dropdown?\)?\s*\s*=>/);
|
||||
```
|
||||
|
||||
Your `map` callback function should take a `dropdown` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /inputValues\s*=\s*\[\s*\.\.\.document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)\s*\]\s*\.map\s*\(\s*\(?dropdown\s*\)?\s*=>/);
|
||||
```
|
||||
|
||||
Your `map` callback function should implicitly return `Number(dropdown.value)`.
|
||||
|
||||
```js
|
||||
assert.match(code, /inputValues\s*=\s*\[\s*\.\.\.document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)\s*\]\s*\.map\s*\(\s*\(?dropdown\s*\)?\s*=>\s*Number\s*\(\s*dropdown\.value\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
--fcc-editable-region--
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [...document.getElementsByClassName("values-dropdown")];
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+363
@@ -0,0 +1,363 @@
|
||||
---
|
||||
id: 6407c303b4272606c019f338
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You need a function to update the display with the sorted numbers. Start by using arrow syntax to declare an `updateUI` function that takes a single `array` parameter.
|
||||
|
||||
Because you will be writing algorithms that won't immediately have a return value, set a fallback value for `array` to be an empty array. Here is an example of a function that has a fallback value:
|
||||
|
||||
```js
|
||||
const myFunction = (string = "") => {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare an `updateUI` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+updateUI\s*=/);
|
||||
```
|
||||
|
||||
`updateUI` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(updateUI);
|
||||
```
|
||||
|
||||
`updateUI` should use arrow syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+updateUI\s*=\s*\(.*\)\s*=>/);
|
||||
```
|
||||
|
||||
`updateUI` should take a single `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+updateUI\s*=\s*\(\s*array/);
|
||||
```
|
||||
|
||||
`updateUI` should have a fallback value of an empty array for `array`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+updateUI\s*=\s*\(\s*array\s*=\s*\[\s*\]\s*\)/);
|
||||
```
|
||||
|
||||
`updateUI` should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+updateUI\s*=\s*\(\s*array\s*=\s*\[\s*\]\s*\)\s*=>\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+347
@@ -0,0 +1,347 @@
|
||||
---
|
||||
id: 6407c4abf5be6d07d8c12ade
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To perform an action on each element in the array, use the method that is meant for iterating over arrays.
|
||||
|
||||
Use the `forEach()` method, and pass it an empty callback which takes `num` and `i` as the parameters.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.forEach()` method to iterate over the `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\(/);
|
||||
```
|
||||
|
||||
Your `.forEach()` method should take a callback function using arrow syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\s*\(\s*\(.*\)\s*=>/);
|
||||
```
|
||||
|
||||
Your callback function should take two parameters, `num` and `i`.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\s*\(\s*\(\s*num\s*,\s*i\s*\)\s*=>/);
|
||||
```
|
||||
|
||||
Your callback function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\s*\(\s*\(\s*num\s*,\s*i\s*\)\s*=>\s*{\s*}\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const updateUI = (array = []) => {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+341
@@ -0,0 +1,341 @@
|
||||
---
|
||||
id: 6407c627ddc93708c8dee796
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a variable named `outputValueNode` and set its value to the result of calling the `document.getElementById()` method. Use template literal syntax to pass in the `output-value-${i}` string to `.getElementById()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Use `const` to declare an `outputValueNode` variable in your `.forEach()` callback.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\s*\(\s*\(\s*num\s*,\s*i\s*\)\s*=>\s*\{\s*const\s*outputValueNode\s*=/)
|
||||
```
|
||||
|
||||
`outputValueNode` should be assigned the value of calling `document.getElementById()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\s*\(\s*\(\s*num\s*,\s*i\s*\)\s*=>\s*\{\s*const\s*outputValueNode\s*=\s*document\.getElementById\s*\(/)
|
||||
```
|
||||
|
||||
Use template literal syntax to pass in the `output-value-${i}` string to `.getElementById()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\s*\(\s*\(\s*num\s*,\s*i\s*\)\s*=>\s*\{\s*const\s*outputValueNode\s*=\s*document\.getElementById\s*\(\s*`output-value-\$\{i\}`\s*\)/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
|
||||
})
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+336
@@ -0,0 +1,336 @@
|
||||
---
|
||||
id: 6407c6a2c2159309994779a5
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `innerText` property of `outputValueNode` to `num`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `innerText` to set the text of `outputValueNode`.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\s*\(\s*\(\s*num\s*,\s*i\s*\)\s*=>\s*\{\s*const\s*outputValueNode\s*=\s*document\.getElementById\s*\(\s*`output-value-\$\{i\}`\s*\)\s*;?\s*outputValueNode\.innerText/)
|
||||
```
|
||||
|
||||
You should use `innerText` to set the text of `outputValueNode` to `num`.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\s*\(\s*\(\s*num\s*,\s*i\s*\)\s*=>\s*\{\s*const\s*outputValueNode\s*=\s*document\.getElementById\s*\(\s*`output-value-\$\{i\}`\s*\)\s*;?\s*outputValueNode\.innerText\s*=\s*num;?/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
|
||||
})
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+340
@@ -0,0 +1,340 @@
|
||||
---
|
||||
id: 6407c6d3f19c4e0a7ba320bb
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In your `sortInputArray()` function, call your `updateUI()` function and pass `inputValues` as the argument.
|
||||
|
||||
You should now be able to click the `Sort` button and see the inputted array in the `Output` section.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call `updateUI()` in your `sortInputArray()` function.
|
||||
|
||||
```js
|
||||
assert.match(sortInputArray.toString(), /updateUI\(/);
|
||||
```
|
||||
|
||||
You should pass `inputValues` as an argument to `updateUI()`.
|
||||
|
||||
```js
|
||||
assert.match(sortInputArray.toString(), /updateUI\(\s*inputValues\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+360
@@ -0,0 +1,360 @@
|
||||
---
|
||||
id: 6407c722498bc80b76d29073
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to actually sort the array. The first sorting algorithm you will implement is the bubble sort, which starts at the beginning of the array and 'bubbles up' unsorted values towards the end, iterating through the array until it is completely sorted.
|
||||
|
||||
Begin by declaring a `bubbleSort` variable and assigning it an arrow function that takes an `array` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `bubbleSort` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=/);
|
||||
```
|
||||
|
||||
`bubbleSort` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(bubbleSort);
|
||||
```
|
||||
|
||||
`bubbleSort` should use arrow syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(.*\)\s*=>/);
|
||||
```
|
||||
|
||||
`bubbleSort` should take a single `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(?\s*array\s*\)?\s*=>/);
|
||||
```
|
||||
|
||||
`bubbleSort` should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(?\s*array\s*\)?\s*=>\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
updateUI(inputValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+360
@@ -0,0 +1,360 @@
|
||||
---
|
||||
id: 6410da6df463a606dfade96f
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You'll need to iterate through the array. For simplicity, use a `for` loop to do so.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `for` loop to iterate through the array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(/)
|
||||
```
|
||||
|
||||
Your `for` loop should initialize `i` to `0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;/);
|
||||
```
|
||||
|
||||
Your `for` loop should have a condition that checks the value of `i` is less than the length of the array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;/);
|
||||
```
|
||||
|
||||
Your `for` loop should increment `i` by `1` each time it runs.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)/);
|
||||
```
|
||||
|
||||
Your `for` loop should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*}\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
updateUI(inputValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const bubbleSort = (array) => {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+362
@@ -0,0 +1,362 @@
|
||||
---
|
||||
id: 6410dfb965c72108196ef24a
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Because you need to compare elements, you'll need to use a nested `for` loop. This loop should iterate through every element in the array *except* the last one. Use `j` as your inner loop's iterator variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a nested `for` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(/);
|
||||
```
|
||||
|
||||
Your inner `for` loop should initialize `j` to `0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;/);
|
||||
```
|
||||
|
||||
Your inner `for` loop should iterate through every element in the array *except* the last one.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)/);
|
||||
```
|
||||
|
||||
Your inner `for` loop should increment `j` by `1` each time.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)/);
|
||||
```
|
||||
|
||||
Your inner `for` loop should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*}\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
updateUI(inputValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+358
@@ -0,0 +1,358 @@
|
||||
---
|
||||
id: 6410e1b58efc2c091a13bcd9
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For debugging purposes, add a `console.log()` call in your inner loop. Pass it the arguments `array`, `array[j]`, and `array[j+1]`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `console.log()` call in your inner loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(/);
|
||||
```
|
||||
|
||||
You should pass `array` as the first argument to `console.log()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,/);
|
||||
```
|
||||
|
||||
You should pass `array[j]` as the second argument to `console.log()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,/);
|
||||
```
|
||||
|
||||
You should pass `array[j+1]` as the third argument to `console.log()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
updateUI(inputValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+362
@@ -0,0 +1,362 @@
|
||||
---
|
||||
id: 6410e3c19c21cd09c32dc7c6
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In your `sortInputArray()` function, declare a `sortedValues` variable. Assign it the value of calling `bubbleSort` with your `inputValues` array.
|
||||
|
||||
Then, update your `updateUI` call to take `sortedValues` as the parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `sortedValues` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=/);
|
||||
```
|
||||
|
||||
`sortedValues` should be assigned the value of calling `bubbleSort` with your `inputValues` array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*bubbleSort\s*\(\s*inputValues\s*\)/);
|
||||
```
|
||||
|
||||
`updateUI` should be called with `sortedValues` as the parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /updateUI\s*\(\s*sortedValues\s*\)/);
|
||||
```
|
||||
|
||||
`updateUI` should not be called with `inputValues` as the parameter.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /updateUI\s*\(\s*inputValues\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
updateUI(inputValues);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
console.log(array, array[j], array[j + 1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+364
@@ -0,0 +1,364 @@
|
||||
---
|
||||
id: 6410e70c84bb660b4d2a5ea1
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To achieve the "bubble up" result, you need to check if the current element is larger than the next element. You can do this by accessing the `array` at `j` and `j+1`.
|
||||
|
||||
Create an `if` condition that checks if the current element is larger than the next element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not remove your `console.log` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\);?/);
|
||||
```
|
||||
|
||||
You should use an `if` statement in your nested loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\);?\s*if\s*\(/);
|
||||
```
|
||||
|
||||
Your `if` statement should check if the `array[j]` is larger than the `array[j+1]`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\);?\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*>\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\)/);
|
||||
```
|
||||
|
||||
Your `if` statement should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\);?\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*>\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\)\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = bubbleSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
console.log(array, array[j], array[j + 1]);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+366
@@ -0,0 +1,366 @@
|
||||
---
|
||||
id: 6410edb33eeaf50dd9a22ab4
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When your `if` condition is true, you need to swap the two elements, "bubbling" the larger element up toward the end of the array.
|
||||
|
||||
To do this, declare a `temp` variable and assign it the value of `array[j]`. Then assign `array[j]` the value of `array[j + 1]`. Finally, assign `array[j + 1]` the value of `temp`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Within your `if` statement, you should declare a `temp` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\);?\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*>\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\)\s*{\s*const\s*temp\s*=/);
|
||||
```
|
||||
|
||||
You should assign `temp` the value of `array[j]`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\);?\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*>\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\)\s*{\s*const\s*temp\s*=\s*array\s*\[\s*j\s*\];?\s*array\s*\[\s*j\s*\]\s*=\s*array\s*\[\s*j\s*\+\s*1\s*\];?\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*=\s*temp\s*;?/);
|
||||
```
|
||||
|
||||
You should assign `array[j]` the value of `array[j + 1]`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\);?\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*>\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\)\s*{\s*const\s*temp\s*=\s*array\s*\[\s*j\s*\];?\s*array\s*\[\s*j\s*\]\s*=\s*array\s*\[\s*j\s*\+\s*1\s*\];?/);
|
||||
```
|
||||
|
||||
You should assign `array[j + 1]` the value of `temp`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\);?\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*>\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\)\s*{\s*const\s*temp\s*=\s*array\s*\[\s*j\s*\];?\s*array\s*\[\s*j\s*\]\s*=\s*array\s*\[\s*j\s*\+\s*1\s*\];?\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*=\s*temp\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = bubbleSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
console.log(array, array[j], array[j + 1]);
|
||||
|
||||
--fcc-editable-region--
|
||||
if (array[j] > array[j + 1]) {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+350
@@ -0,0 +1,350 @@
|
||||
---
|
||||
id: 6410efff0ae97c0f06856511
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, after your outer loop has finished executing, return the sorted array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should `return` the `array` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*for\s*\(\s*let\s+j\s*=\s*0\s*;\s*j\s*<\s*array\.length\s*-\s*1\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\s*\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\);?\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*>\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*\)\s*{\s*const\s*temp\s*=\s*array\s*\[\s*j\s*\];?\s*array\s*\[\s*j\s*\]\s*=\s*array\s*\[\s*j\s*\+\s*1\s*\];?\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*=\s*temp\s*;?\s*}\s*}\s*}\s*return\s*array;?\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = bubbleSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
console.log(array, array[j], array[j + 1]);
|
||||
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+376
@@ -0,0 +1,376 @@
|
||||
---
|
||||
id: 6410f149110ec60fd40fcfe1
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Time to implement another sorting algorithm. This time, you'll be implementing a <dfn>selection sort</dfn>. Selection sort works by finding the smallest value in the array, then swapping it with the first value in the array. Then, it finds the next smallest value in the array, and swaps it with the second value in the array. It continues iterating through the array until it is completely sorted.
|
||||
|
||||
Start by declaring a `selectionSort` variable and assigning it an arrow function that takes an `array` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `selectionSort` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=/);
|
||||
```
|
||||
|
||||
`selectionSort` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(selectionSort);
|
||||
```
|
||||
|
||||
`selectionSort` should use arrow syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(?.*\)?\s*=>/);
|
||||
```
|
||||
|
||||
`selectionSort` should take a single `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(?\s*array/);
|
||||
```
|
||||
|
||||
`selectionSort` should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(?\s*array\s*\)?\s*=>\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = bubbleSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+376
@@ -0,0 +1,376 @@
|
||||
---
|
||||
id: 6410f97a721cd1144804b7a8
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Like a bubble sort, a selection sort needs to iterate through the array. Declare a `for` loop to do so.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `for` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(/);
|
||||
```
|
||||
|
||||
Your `for` loop should initialize a variable `i` to `0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*/);
|
||||
```
|
||||
|
||||
Your `for` loop should have a condition that checks if the value of `i` is less than the length of the array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*/);
|
||||
```
|
||||
|
||||
Your `for` loop should increment `i` by `1` each time it runs.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*/);
|
||||
```
|
||||
|
||||
Your `for` loop should have an empty body.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*}\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = selectionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const selectionSort = (array) => {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+353
@@ -0,0 +1,353 @@
|
||||
---
|
||||
id: 6410f9a443d57414ee50fada
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Click your `Sort` button to see your bubble sort algorithm in action! If you open the console, you can watch the steps the algorithm takes.
|
||||
|
||||
Now that you have confirmed it works, remove your `console.log()` call.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove your `console.log()` call.
|
||||
|
||||
```js
|
||||
// Thanks loop-protect
|
||||
assert.notMatch(bubbleSort.toString(), /console\.log\((?!"Potential infinite)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = bubbleSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
console.log(array, array[j], array[j + 1]);
|
||||
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+386
@@ -0,0 +1,386 @@
|
||||
---
|
||||
id: 6410fb3b68429716a810ea4b
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A selection sort relies on tracking the index of the smallest value in the array. Declare a variable `minIndex` and set it to `i` - this ensures that if your current value is the smallest, it will be swapped with itself and not be moved. You will need to be able to reassign the value of `minIndex` as you iterate through the array.
|
||||
|
||||
Then, write another `for` loop, using `j` as the iterator. This loop needs to start at the index after `i` and iterate through the rest of the array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `let` to declare `minIndex`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=/)
|
||||
```
|
||||
|
||||
You should set `minIndex` to `i`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?/)
|
||||
```
|
||||
|
||||
You should have a nested `for` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(/)
|
||||
```
|
||||
|
||||
Your `for` loop should initialize `j` to `i + 1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;/);
|
||||
```
|
||||
|
||||
Your `for` loop should iterate through the rest of the array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;/);
|
||||
```
|
||||
|
||||
Your `for` loop should increment `j`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = selectionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+396
@@ -0,0 +1,396 @@
|
||||
---
|
||||
id: 6410fcd1f731fd17cdb101a7
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your nested `for` loop, add a `console.log()` call to check the values of `array`, `array[j]`, and `array[minIndex]` at each iteration. You can click the `Sort` button to see how your algorithm is traversing the array.
|
||||
|
||||
Then write an `if` statement that checks if the value at `j` is smaller than the value at `minIndex`. If it is, set `minIndex` to `j`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `console.log()` call inside your nested `for` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(/);
|
||||
```
|
||||
|
||||
You should pass `array` as the first argument to `console.log()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,/);
|
||||
```
|
||||
|
||||
You should pass `array[j]` as the second argument to `console.log()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,/);
|
||||
```
|
||||
|
||||
You should pass `array[minIndex]` as the third argument to `console.log()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*minIndex\s*\]\s*\);?/);
|
||||
```
|
||||
|
||||
You should have an `if` statement after your `console.log()` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*minIndex\s*\]\s*\);?\s*if\s*\(?/);
|
||||
```
|
||||
|
||||
You should have a condition in your `if` statement that checks if `array[j]` is less than `array[minIndex]`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*minIndex\s*\]\s*\);?\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*<\s*array\s*\[\s*minIndex\s*\]\s*\)\s*{?/);
|
||||
```
|
||||
|
||||
Your `if` statement should set `minIndex` to `j`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*minIndex\s*\]\s*\);?\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*<\s*array\s*\[\s*minIndex\s*\]\s*\)\s*{\s*minIndex\s*=\s*j\s*;?\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = selectionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+383
@@ -0,0 +1,383 @@
|
||||
---
|
||||
id: 6411024727181d190ef03166
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After your nested `for` loop, you've found the smallest value. You need to swap it with your current value.
|
||||
|
||||
Like you did in your bubble sort, use a `temp` variable to extract the value at `i`, then swap the values at `i` and `minIndex`.
|
||||
|
||||
# --hints--
|
||||
|
||||
After your nested `for` loop, you should declare a `temp` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*minIndex\s*\]\s*\);\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*<\s*array\s*\[\s*minIndex\s*\]\s*\)\s*{\s*minIndex\s*=\s*j\s*;?\s*}\s*}\s*const\s*temp\s*=/);
|
||||
```
|
||||
|
||||
You should assign `array[i]` to `temp`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*minIndex\s*\]\s*\);\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*<\s*array\s*\[\s*minIndex\s*\]\s*\)\s*{\s*minIndex\s*=\s*j\s*;?\s*}\s*}\s*const\s*temp\s*=\s*array\[i\]/)
|
||||
```
|
||||
|
||||
You should assign `array[minIndex]` to `array[i]`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*minIndex\s*\]\s*\);\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*<\s*array\s*\[\s*minIndex\s*\]\s*\)\s*{\s*minIndex\s*=\s*j\s*;?\s*}\s*}\s*const\s*temp\s*=\s*array\[i\]\s*;?\s*array\[i\]\s*=\s*array\[minIndex\]/)
|
||||
```
|
||||
|
||||
You should assign `temp` to `array[minIndex]`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*minIndex\s*\]\s*\);\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*<\s*array\s*\[\s*minIndex\s*\]\s*\)\s*{\s*minIndex\s*=\s*j\s*;?\s*}\s*}\s*const\s*temp\s*=\s*array\[i\]\s*;?\s*array\[i\]\s*=\s*array\[minIndex\]\s*;?\s*array\[minIndex\]\s*=\s*temp\s*;?\s*}/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = selectionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
console.log(array, array[j], array[minIndex]);
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+358
@@ -0,0 +1,358 @@
|
||||
---
|
||||
id: 64110377201e7b1a0de0d558
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Update your `sortedValues` variable to be the result of calling `selectionSort` instead of `bubbleSort`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `sortedValues` variable should be assigned the value of calling `selectionSort` with your `inputValues` array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*selectionSort\s*\(\s*inputValues\s*\)/);
|
||||
```
|
||||
|
||||
You should not call `bubbleSort` in your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /bubbleSort\s*\(/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
--fcc-editable-region--
|
||||
const sortedValues = bubbleSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+367
@@ -0,0 +1,367 @@
|
||||
---
|
||||
id: 64110727cefd3d1d9bdb0128
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, after your outer loop has finished, you need to return the array. Once you've done so, you should be able to see the `Output` change when you click the `Sort` button again.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should `return` the `array` after your outer loop completes.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*minIndex\s*\]\s*\);\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*<\s*array\s*\[\s*minIndex\s*\]\s*\)\s*{\s*minIndex\s*=\s*j\s*;?\s*}\s*}\s*const\s*temp\s*=\s*array\[i\]\s*;?\s*array\[i\]\s*=\s*array\[minIndex\]\s*;?\s*array\[minIndex\]\s*=\s*temp\s*;?\s*}\s*return\s*array;?\s*/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = selectionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
console.log(array, array[j], array[minIndex]);
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+368
@@ -0,0 +1,368 @@
|
||||
---
|
||||
id: 6411083020a3101e9514a0f5
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
With your selection sort now functional, remove your `console.log()` statement.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `console.log()` statement from `selectionSort()`.
|
||||
|
||||
```js
|
||||
// Thanks loop-protect
|
||||
assert.notMatch(selectionSort.toString(), /console\.log\((?!"Potential infinite)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = selectionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
console.log(array, array[j], array[minIndex]);
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+394
@@ -0,0 +1,394 @@
|
||||
---
|
||||
id: 64110998bc00321fd8052ab5
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The last sorting algorithm you will implement is the <dfn>insertion sort</dfn>. This algorithm works by building up a sorted array at the beginning of the list. It begins the sorted array with the first element. Then it inspects the next element and swaps it backward into the sorted array until it is in a sorted position, and so on.
|
||||
|
||||
Start by declaring an `insertionSort` variable and assigning it an arrow function which takes an `array` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare an `insertionSort` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=/);
|
||||
```
|
||||
|
||||
`insertionSort` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(insertionSort);
|
||||
```
|
||||
|
||||
`insertionSort` should use arrow syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(?.*\)?\s*=>/);
|
||||
```
|
||||
|
||||
`insertionSort` should take a single `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(?\s*array/);
|
||||
```
|
||||
|
||||
`insertionSort` should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(?\s*array\s*\)?\s*=>\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = selectionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+376
@@ -0,0 +1,376 @@
|
||||
---
|
||||
id: 64110a03f6a450209b01f45c
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As before, update your `sortedValues` variable to be the result of `insertionSort` instead of `selectionSort`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call `insertionSort` with your `inputValues` array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*insertionSort\s*\(\s*inputValues\s*\)/);
|
||||
```
|
||||
|
||||
You should not call `selectionSort` in your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /selectionSort\s*\(/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
--fcc-editable-region--
|
||||
const sortedValues = selectionSort(inputValues);
|
||||
--fcc-editable-region--
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const insertionSort = (array) => {
|
||||
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+394
@@ -0,0 +1,394 @@
|
||||
---
|
||||
id: 64110b1849454521871243ca
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
An insertion sort algorithm starts the sort at the beginning of the list, meaning the first element is already sorted. With this in mind, create a `for` loop that starts at the second element in the array - it should still iterate through the rest of the array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `for` loop to iterate through the array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(/);
|
||||
```
|
||||
|
||||
Your `for` loop should initialize `i` at `1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*/);
|
||||
```
|
||||
|
||||
Your `for` loop should have a condition that checks the value of `i` is less than the length of the array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*/);
|
||||
```
|
||||
|
||||
Your `for` loop should increment `i` by `1` each time it runs.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*/);
|
||||
```
|
||||
|
||||
Your `for` loop should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*}\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = insertionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const insertionSort = (array) => {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+390
@@ -0,0 +1,390 @@
|
||||
---
|
||||
id: 6411108bc8b9c324f66aab4c
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Declare a `currValue` variable and assign it the value at `i`. Then, declare a `j` variable and assign it `i - 1`. Your `j` variable should be re-assignable.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `currValue` variable with `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=/);
|
||||
```
|
||||
|
||||
You should assign `currValue` the value at `i`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?/);
|
||||
```
|
||||
|
||||
You should declare a `j` variable with `let`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=/);
|
||||
```
|
||||
|
||||
You should assign `j` the value of `i - 1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=\s*i\s*-\s*1\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = insertionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const insertionSort = (array) => {
|
||||
for (let i = 1; i < array.length; i++) {
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+404
@@ -0,0 +1,404 @@
|
||||
---
|
||||
id: 641110e4fb696b259dbf0bcf
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For this algorithm, you'll want to use a `while` loop. This loop needs two conditions:
|
||||
|
||||
- First, it should not run beyond the beginning of the array (accessed with `j`).
|
||||
- Second, the loop should not run after it finds a value smaller than the current value.
|
||||
|
||||
To prevent an infinite loop, decrement `j` inside your loop.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `while` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=\s*i\s*-\s*1\s*;?\s*while\s*\(/);
|
||||
```
|
||||
|
||||
Your `while` loop should have its first condition that checks the value of `j` is greater than or equal to `0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=\s*i\s*-\s*1\s*;?\s*while\s*\(\s*j\s*>=\s*0/);
|
||||
```
|
||||
|
||||
Your `while` loop should use the AND operator.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=\s*i\s*-\s*1\s*;?\s*while\s*\(\s*j\s*>=\s*0\s*&&/);
|
||||
```
|
||||
|
||||
Your `while` loop should have a condition that checks the value of `array[j]` is greater than `currValue`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=\s*i\s*-\s*1\s*;?\s*while\s*\(\s*j\s*>=\s*0\s*&&\s*array\s*\[\s*j\s*\]\s*>\s*currValue\s*\)/);
|
||||
```
|
||||
|
||||
Your `while` loop should decrement `j` inside the loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=\s*i\s*-\s*1\s*;?\s*while\s*\(\s*j\s*>=\s*0\s*&&\s*array\s*\[\s*j\s*\]\s*>\s*currValue\s*\)\s*{\s*j--;?\s*\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = insertionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const insertionSort = (array) => {
|
||||
for (let i = 1; i < array.length; i++) {
|
||||
const currValue = array[i];
|
||||
let j = i - 1;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+380
@@ -0,0 +1,380 @@
|
||||
---
|
||||
id: 6411135e9ee2fa26c882eb02
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
On each iteration of your `while` loop, it is finding an element that is larger than your current value. You need to move that element to the right to make room for your current value.
|
||||
|
||||
Do so by assigning the value at the `j` index to the next index.
|
||||
|
||||
# --hints--
|
||||
|
||||
Before decrementing `j`, assign the value at `j` to the index `j + 1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=\s*i\s*-\s*1\s*;?\s*while\s*\(\s*j\s*>=\s*0\s*&&\s*array\s*\[\s*j\s*\]\s*>\s*currValue\s*\)\s*{\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*=\s*array\s*\[\s*j\s*\];?\s*j--;?\s*\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = insertionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const insertionSort = (array) => {
|
||||
for (let i = 1; i < array.length; i++) {
|
||||
const currValue = array[i];
|
||||
let j = i - 1;
|
||||
|
||||
while (j >= 0 && array[j] > currValue) {
|
||||
|
||||
j--;
|
||||
}
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+381
@@ -0,0 +1,381 @@
|
||||
---
|
||||
id: 64112c9cf53d632910ea2f9b
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After your while loop, you need to insert your current value. Remember that your loop ends when `j` is either out of the array bounds, or when the value at `j` is less than your current value.
|
||||
|
||||
Use the assignment operator to insert your current value into the correct index.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign `currValue` to the index `j + 1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=\s*i\s*-\s*1\s*;?\s*while\s*\(\s*j\s*>=\s*0\s*&&\s*array\s*\[\s*j\s*\]\s*>\s*currValue\s*\)\s*{\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*=\s*array\s*\[\s*j\s*\];?\s*j--;?\s*\}\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*=\s*currValue;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = insertionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const insertionSort = (array) => {
|
||||
for (let i = 1; i < array.length; i++) {
|
||||
const currValue = array[i];
|
||||
let j = i - 1;
|
||||
|
||||
while (j >= 0 && array[j] > currValue) {
|
||||
array[j + 1] = array[j];
|
||||
j--;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+380
@@ -0,0 +1,380 @@
|
||||
---
|
||||
id: 64112cea9e6ac22a314628b0
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After your `for` loop has finished, you need to return the array. You should then be able to see the `Output` change when you click the `Sort` button again.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should `return` the `array`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=\s*i\s*-\s*1\s*;?\s*while\s*\(\s*j\s*>=\s*0\s*&&\s*array\s*\[\s*j\s*\]\s*>\s*currValue\s*\)\s*{\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*=\s*array\s*\[\s*j\s*\];?\s*j--;?\s*\}\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*=\s*currValue;?\s*\}\s*return\s*array;?\s*\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = insertionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const insertionSort = (array) => {
|
||||
for (let i = 1; i < array.length; i++) {
|
||||
const currValue = array[i];
|
||||
let j = i - 1;
|
||||
|
||||
while (j >= 0 && array[j] > currValue) {
|
||||
array[j + 1] = array[j];
|
||||
j--;
|
||||
}
|
||||
array[j + 1] = currValue;
|
||||
}
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+392
@@ -0,0 +1,392 @@
|
||||
---
|
||||
id: 64112d0943e1bb2aef11e2d1
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To sort the elements of an array, you can use the built-in method called `.sort()`. Therefore, you can update the `sortedValues` variable by assigning it the result of calling `.sort()` on the `inputValues` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should update your `sortedValues` variable to be the result of calling the `.sort()` method on your `inputValues` array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*inputValues\s*\.\s*sort\s*\(/);
|
||||
```
|
||||
|
||||
You should not pass anything into the `.sort()` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*inputValues\s*\.\s*sort\s*\(\s*\)/);
|
||||
```
|
||||
|
||||
You should not call `selectionSort` in your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /selectionSort\s*\(/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
--fcc-editable-region--
|
||||
const sortedValues = insertionSort(inputValues);
|
||||
|
||||
updateUI(sortedValues);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const insertionSort = (array) => {
|
||||
for (let i = 1; i < array.length; i++) {
|
||||
const currValue = array[i];
|
||||
let j = i - 1;
|
||||
|
||||
while (j >= 0 && array[j] > currValue) {
|
||||
array[j + 1] = array[j];
|
||||
j--;
|
||||
}
|
||||
array[j + 1] = currValue;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+392
@@ -0,0 +1,392 @@
|
||||
---
|
||||
id: 64112fa63a0f812c66499a54
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `Sort` button may appear to work correctly when clicked, but this is only because all the values in the array are single digits, and the sorting may not work as expected with more complex values.
|
||||
|
||||
Change the `value` and text of the `option` element that is `selected` from `1` to `10`, and click the `Sort` button again.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should update the `value` of the `option` element that is `selected` to `10`.
|
||||
|
||||
```js
|
||||
const values = document.querySelectorAll('.values-dropdown')?.[3];
|
||||
const option = values.querySelector('option[selected]');
|
||||
assert.equal(option?.value, '10');
|
||||
```
|
||||
|
||||
You should update the text of the `option` element that is `selected` to `10`.
|
||||
|
||||
```js
|
||||
const values = document.querySelectorAll('.values-dropdown')?.[3];
|
||||
const option = values.querySelector('option[selected]');
|
||||
assert.equal(option?.textContent, '10');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
--fcc-editable-region--
|
||||
<option value="1" selected>1</option>
|
||||
--fcc-editable-region--
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = inputValues.sort();
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const insertionSort = (array) => {
|
||||
for (let i = 1; i < array.length; i++) {
|
||||
const currValue = array[i];
|
||||
let j = i - 1;
|
||||
|
||||
while (j >= 0 && array[j] > currValue) {
|
||||
array[j + 1] = array[j];
|
||||
j--;
|
||||
}
|
||||
array[j + 1] = currValue;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+394
@@ -0,0 +1,394 @@
|
||||
---
|
||||
id: 641130423e5f512d8972dae1
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice how the `10` value is placed at the beginning of the array. This is because the default behavior of `.sort()` is to convert the values to strings, and sort them alphabetically. And `10` comes before `2` alphabetically.
|
||||
|
||||
To fix this, you can pass a callback function to the `.sort()` method. The callback function takes two arguments - for yours, use `a` and `b`. Leave the function empty for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should pass a callback function to the `.sort()` method. Remember to use arrow syntax.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*inputValues\s*\.\s*sort\s*\(\s*\(?.*\)?\s*=>/);
|
||||
```
|
||||
|
||||
The callback function should take two arguments, `a` and `b`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*inputValues\s*\.\s*sort\s*\(\s*\(\s*a\s*,\s*b\s*\)\s*=>/);
|
||||
```
|
||||
|
||||
The callback function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*inputValues\s*\.\s*sort\s*\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="10" selected>10</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
--fcc-editable-region--
|
||||
const sortedValues = inputValues.sort();
|
||||
--fcc-editable-region--
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const insertionSort = (array) => {
|
||||
for (let i = 1; i < array.length; i++) {
|
||||
const currValue = array[i];
|
||||
let j = i - 1;
|
||||
|
||||
while (j >= 0 && array[j] > currValue) {
|
||||
array[j + 1] = array[j];
|
||||
j--;
|
||||
}
|
||||
array[j + 1] = currValue;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+394
@@ -0,0 +1,394 @@
|
||||
---
|
||||
id: 64113124efd2852edafaf25f
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The callback to `.sort()` should return a number. That number determines how to sort the elements `a` and `b`:
|
||||
|
||||
- If the number is negative, sort `a` before `b`.
|
||||
- If the number is positive, sort `b` before `a`.
|
||||
- If the number is zero, do not change the order of `a` and `b`.
|
||||
|
||||
Keeping in mind that you want the numbers to be sorted in ascending order (smallest to largest), return a single subtraction calculation using `a` and `b` that will correctly sort the numbers with the above logic.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your callback function should use an explicit `return`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*inputValues\s*\.\s*sort\s*\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*{\s*return/);
|
||||
```
|
||||
|
||||
Your callback function should return `a - b`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*inputValues\s*\.\s*sort\s*\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*{\s*return\s*a\s*-\s*b;?\s*}\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="10" selected>10</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
--fcc-editable-region--
|
||||
const sortedValues = inputValues.sort((a, b) => {
|
||||
|
||||
});
|
||||
--fcc-editable-region--
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const insertionSort = (array) => {
|
||||
for (let i = 1; i < array.length; i++) {
|
||||
const currValue = array[i];
|
||||
let j = i - 1;
|
||||
|
||||
while (j >= 0 && array[j] > currValue) {
|
||||
array[j + 1] = array[j];
|
||||
j--;
|
||||
}
|
||||
array[j + 1] = currValue;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+754
@@ -0,0 +1,754 @@
|
||||
---
|
||||
id: 64113249bab9952fb2ce4469
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you press the `Sort` button again, you should see that `10` is now in the correct position of the `Output`.
|
||||
|
||||
To finish this project, change your `option` back to a `value` and text of `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should update the `value` of the `option` element that is `selected` to `1`.
|
||||
|
||||
```js
|
||||
const values = document.querySelectorAll('.values-dropdown')?.[3];
|
||||
const option = values.querySelector('option[selected]');
|
||||
assert.equal(option?.value, '1');
|
||||
```
|
||||
|
||||
You should update the text of the `option` element that is `selected` to `1`.
|
||||
|
||||
```js
|
||||
const values = document.querySelectorAll('.values-dropdown')?.[3];
|
||||
const option = values.querySelector('option[selected]');
|
||||
assert.equal(option?.textContent, '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
--fcc-editable-region--
|
||||
<option value="10" selected>10</option>
|
||||
--fcc-editable-region--
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = inputValues.sort((a, b) => {
|
||||
return a - b;
|
||||
});
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const insertionSort = (array) => {
|
||||
for (let i = 1; i < array.length; i++) {
|
||||
const currValue = array[i];
|
||||
let j = i - 1;
|
||||
|
||||
while (j >= 0 && array[j] > currValue) {
|
||||
array[j + 1] = array[j];
|
||||
j--;
|
||||
}
|
||||
array[j + 1] = currValue;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Number Sorter</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Number Sorter</h1>
|
||||
<form id="form" class="form">
|
||||
<h2>Input:</h2>
|
||||
<fieldset>
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="first number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="second number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="third number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4" selected>4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fourth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
name="values"
|
||||
class="values-dropdown"
|
||||
aria-label="fifth number"
|
||||
>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</fieldset>
|
||||
<button id="sort">Sort</button>
|
||||
</form>
|
||||
<div class="output-container">
|
||||
<h2>Output:</h2>
|
||||
<div class="output-array">
|
||||
<span class="bracket">[</span>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-0">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-1">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-2">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-3">0</span>
|
||||
<span class="comma">,</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="output-value" id="output-value-4">0</span>
|
||||
</div>
|
||||
<span class="bracket">]</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--gray-00: #ffffff;
|
||||
--gray-05: #f5f6f7;
|
||||
--gray-15: #d0d0d5;
|
||||
--gray-75: #3b3b4f;
|
||||
--gray-85: #1b1b32;
|
||||
--gray-90: #0a0a23;
|
||||
--error: #a94442;
|
||||
--danger-color: #850000;
|
||||
--danger-background: #ffadad;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: var(--gray-85);
|
||||
color: var(--gray-05);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 15px auto;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0 none;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
fieldset div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bracket,
|
||||
.comma {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
form .comma {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
min-height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border: 3px solid #feac32;
|
||||
padding: 10px 16px;
|
||||
font-size: 23px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
width: 95%;
|
||||
min-height: 55px;
|
||||
margin-top: 25px;
|
||||
border-radius: 0;
|
||||
padding: 15px;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-background);
|
||||
border: 3px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
form,
|
||||
.output-container {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.output-array {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const sortButton = document.getElementById("sort");
|
||||
|
||||
const sortInputArray = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValues = [
|
||||
...document.getElementsByClassName("values-dropdown")
|
||||
].map((dropdown) => Number(dropdown.value));
|
||||
|
||||
const sortedValues = inputValues.sort((a, b) => {
|
||||
return a - b;
|
||||
});
|
||||
|
||||
updateUI(sortedValues);
|
||||
}
|
||||
|
||||
const updateUI = (array = []) => {
|
||||
array.forEach((num, i) => {
|
||||
const outputValueNode = document.getElementById(`output-value-${i}`);
|
||||
outputValueNode.innerText = num;
|
||||
})
|
||||
}
|
||||
|
||||
const bubbleSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
for (let j = 0; j < array.length - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
const temp = array[j];
|
||||
array[j] = array[j + 1];
|
||||
array[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const selectionSort = (array) => {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let minIndex = i;
|
||||
|
||||
for (let j = i + 1; j < array.length; j++) {
|
||||
if (array[j] < array[minIndex]) {
|
||||
minIndex = j;
|
||||
}
|
||||
}
|
||||
|
||||
const temp = array[i];
|
||||
array[i] = array[minIndex];
|
||||
array[minIndex] = temp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const insertionSort = (array) => {
|
||||
for (let i = 1; i < array.length; i++) {
|
||||
const currValue = array[i];
|
||||
let j = i - 1;
|
||||
|
||||
while (j >= 0 && array[j] > currValue) {
|
||||
array[j + 1] = array[j];
|
||||
j--;
|
||||
}
|
||||
array[j + 1] = currValue;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
Reference in New Issue
Block a user