mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-24 23:01:18 +08:00
fix(curriculum):Updated lessons in Number sorter project to better show how `inputValues` works (#54445)
This commit is contained in:
Sanskriti
+48
-36
@@ -42,144 +42,156 @@
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "6407c303b4272606c019f338",
|
||||
"id": "6621c5f02a5c272761db8661",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "6407c4abf5be6d07d8c12ade",
|
||||
"id": "6621d0dd6798b121bd2ed823",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "6407c627ddc93708c8dee796",
|
||||
"id": "662236690376072dc79d9c27",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "6407c6a2c2159309994779a5",
|
||||
"id": "6407c303b4272606c019f338",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "6407c6d3f19c4e0a7ba320bb",
|
||||
"id": "6407c4abf5be6d07d8c12ade",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "6407c722498bc80b76d29073",
|
||||
"id": "6407c627ddc93708c8dee796",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "6410da6df463a606dfade96f",
|
||||
"id": "6407c6a2c2159309994779a5",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "6410dfb965c72108196ef24a",
|
||||
"id": "6407c6d3f19c4e0a7ba320bb",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "6410e1b58efc2c091a13bcd9",
|
||||
"id": "6407c722498bc80b76d29073",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "6410e3c19c21cd09c32dc7c6",
|
||||
"id": "6410da6df463a606dfade96f",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "6410e70c84bb660b4d2a5ea1",
|
||||
"id": "6410dfb965c72108196ef24a",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "6410edb33eeaf50dd9a22ab4",
|
||||
"id": "6410e1b58efc2c091a13bcd9",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "6410efff0ae97c0f06856511",
|
||||
"id": "6410e3c19c21cd09c32dc7c6",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "6410f9a443d57414ee50fada",
|
||||
"id": "6410e70c84bb660b4d2a5ea1",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "6410f149110ec60fd40fcfe1",
|
||||
"id": "6410edb33eeaf50dd9a22ab4",
|
||||
"title": "Step 22"
|
||||
},
|
||||
{
|
||||
"id": "64110377201e7b1a0de0d558",
|
||||
"id": "6410efff0ae97c0f06856511",
|
||||
"title": "Step 23"
|
||||
},
|
||||
{
|
||||
"id": "6410f97a721cd1144804b7a8",
|
||||
"id": "6410f9a443d57414ee50fada",
|
||||
"title": "Step 24"
|
||||
},
|
||||
{
|
||||
"id": "6410fb3b68429716a810ea4b",
|
||||
"id": "6410f149110ec60fd40fcfe1",
|
||||
"title": "Step 25"
|
||||
},
|
||||
{
|
||||
"id": "6410fcd1f731fd17cdb101a7",
|
||||
"id": "64110377201e7b1a0de0d558",
|
||||
"title": "Step 26"
|
||||
},
|
||||
{
|
||||
"id": "6411024727181d190ef03166",
|
||||
"id": "6410f97a721cd1144804b7a8",
|
||||
"title": "Step 27"
|
||||
},
|
||||
{
|
||||
"id": "64110727cefd3d1d9bdb0128",
|
||||
"id": "6410fb3b68429716a810ea4b",
|
||||
"title": "Step 28"
|
||||
},
|
||||
{
|
||||
"id": "6411083020a3101e9514a0f5",
|
||||
"id": "6410fcd1f731fd17cdb101a7",
|
||||
"title": "Step 29"
|
||||
},
|
||||
{
|
||||
"id": "64110998bc00321fd8052ab5",
|
||||
"id": "6411024727181d190ef03166",
|
||||
"title": "Step 30"
|
||||
},
|
||||
{
|
||||
"id": "64110a03f6a450209b01f45c",
|
||||
"id": "64110727cefd3d1d9bdb0128",
|
||||
"title": "Step 31"
|
||||
},
|
||||
{
|
||||
"id": "64110b1849454521871243ca",
|
||||
"id": "6411083020a3101e9514a0f5",
|
||||
"title": "Step 32"
|
||||
},
|
||||
{
|
||||
"id": "6411108bc8b9c324f66aab4c",
|
||||
"id": "64110998bc00321fd8052ab5",
|
||||
"title": "Step 33"
|
||||
},
|
||||
{
|
||||
"id": "641110e4fb696b259dbf0bcf",
|
||||
"id": "64110a03f6a450209b01f45c",
|
||||
"title": "Step 34"
|
||||
},
|
||||
{
|
||||
"id": "6411135e9ee2fa26c882eb02",
|
||||
"id": "64110b1849454521871243ca",
|
||||
"title": "Step 35"
|
||||
},
|
||||
{
|
||||
"id": "64112c9cf53d632910ea2f9b",
|
||||
"id": "6411108bc8b9c324f66aab4c",
|
||||
"title": "Step 36"
|
||||
},
|
||||
{
|
||||
"id": "64112cea9e6ac22a314628b0",
|
||||
"id": "641110e4fb696b259dbf0bcf",
|
||||
"title": "Step 37"
|
||||
},
|
||||
{
|
||||
"id": "64112d0943e1bb2aef11e2d1",
|
||||
"id": "6411135e9ee2fa26c882eb02",
|
||||
"title": "Step 38"
|
||||
},
|
||||
{
|
||||
"id": "64112fa63a0f812c66499a54",
|
||||
"id": "64112c9cf53d632910ea2f9b",
|
||||
"title": "Step 39"
|
||||
},
|
||||
{
|
||||
"id": "641130423e5f512d8972dae1",
|
||||
"id": "64112cea9e6ac22a314628b0",
|
||||
"title": "Step 40"
|
||||
},
|
||||
{
|
||||
"id": "64113124efd2852edafaf25f",
|
||||
"id": "64112d0943e1bb2aef11e2d1",
|
||||
"title": "Step 41"
|
||||
},
|
||||
{
|
||||
"id": "64113249bab9952fb2ce4469",
|
||||
"id": "64112fa63a0f812c66499a54",
|
||||
"title": "Step 42"
|
||||
},
|
||||
{
|
||||
"id": "641130423e5f512d8972dae1",
|
||||
"title": "Step 43"
|
||||
},
|
||||
{
|
||||
"id": "64113124efd2852edafaf25f",
|
||||
"title": "Step 44"
|
||||
},
|
||||
{
|
||||
"id": "64113249bab9952fb2ce4469",
|
||||
"title": "Step 45"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
+4
-4
@@ -7,9 +7,9 @@ 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.
|
||||
You need to get the values from your `select` elements. These values will currently be strings and you will convert them into 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)`.
|
||||
Use the `map` function to iterate over the array. Pass a callback function to `map` that takes a `dropdown` parameter and returns `dropdown.value`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -31,10 +31,10 @@ Your `map` callback function should take a `dropdown` parameter.
|
||||
assert.match(code, /inputValues\s*=\s*\[\s*\.\.\.document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)\s*\]\s*\.map\s*\(\s*(\(\s*dropdown\s*\)|dropdown)\s*=>/);
|
||||
```
|
||||
|
||||
Your `map` callback function should implicitly return `Number(dropdown.value)`.
|
||||
Your `map` callback function should implicitly return `dropdown.value`.
|
||||
|
||||
```js
|
||||
assert.match(code, /inputValues\s*=\s*\[\s*\.\.\.document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)\s*\]\s*\.map\s*\(\s*(\(\s*dropdown\s*\)|dropdown)\s*=>\s*Number\s*\(\s*dropdown\.value\s*\)/);
|
||||
assert.match(code, /inputValues\s*=\s*\[\s*\.\.\.document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)\s*\]\s*\.map\s*\(\s*(\(\s*dropdown\s*\)|dropdown)\s*=>\s*dropdown\.value\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6407c303b4272606c019f338
|
||||
title: Step 8
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6407c4abf5be6d07d8c12ade
|
||||
title: Step 9
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6407c627ddc93708c8dee796
|
||||
title: Step 10
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6407c6a2c2159309994779a5
|
||||
title: Step 11
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6407c6d3f19c4e0a7ba320bb
|
||||
title: Step 12
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6407c722498bc80b76d29073
|
||||
title: Step 13
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410da6df463a606dfade96f
|
||||
title: Step 14
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410dfb965c72108196ef24a
|
||||
title: Step 15
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410e1b58efc2c091a13bcd9
|
||||
title: Step 16
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410e3c19c21cd09c32dc7c6
|
||||
title: Step 17
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410e70c84bb660b4d2a5ea1
|
||||
title: Step 18
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410edb33eeaf50dd9a22ab4
|
||||
title: Step 19
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410efff0ae97c0f06856511
|
||||
title: Step 20
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410f149110ec60fd40fcfe1
|
||||
title: Step 22
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410f97a721cd1144804b7a8
|
||||
title: Step 24
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410f9a443d57414ee50fada
|
||||
title: Step 21
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410fb3b68429716a810ea4b
|
||||
title: Step 25
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6410fcd1f731fd17cdb101a7
|
||||
title: Step 26
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6411024727181d190ef03166
|
||||
title: Step 27
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 64110377201e7b1a0de0d558
|
||||
title: Step 23
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 64110727cefd3d1d9bdb0128
|
||||
title: Step 28
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6411083020a3101e9514a0f5
|
||||
title: Step 29
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 64110998bc00321fd8052ab5
|
||||
title: Step 30
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 64110a03f6a450209b01f45c
|
||||
title: Step 31
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 64110b1849454521871243ca
|
||||
title: Step 32
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6411108bc8b9c324f66aab4c
|
||||
title: Step 33
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 641110e4fb696b259dbf0bcf
|
||||
title: Step 34
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6411135e9ee2fa26c882eb02
|
||||
title: Step 35
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 64112c9cf53d632910ea2f9b
|
||||
title: Step 36
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 64112cea9e6ac22a314628b0
|
||||
title: Step 37
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 64112d0943e1bb2aef11e2d1
|
||||
title: Step 38
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 64112fa63a0f812c66499a54
|
||||
title: Step 39
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 641130423e5f512d8972dae1
|
||||
title: Step 40
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 64113124efd2852edafaf25f
|
||||
title: Step 41
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 64113249bab9952fb2ce4469
|
||||
title: Step 42
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+340
@@ -0,0 +1,340 @@
|
||||
---
|
||||
id: 6621c5f02a5c272761db8661
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You should use `console.log()` to print out the result of `inputValues`. Write the code for this inside the `sortInputArray` function.
|
||||
|
||||
To see the result for the `inputValues` array, log out the `inputValues` array to the console. Then click on the sort button and open up the console. You should see an array of strings like this:
|
||||
|
||||
```js
|
||||
[ '8', '2', '4', '1', '3' ]
|
||||
```
|
||||
|
||||
Before going further, make sure you observe the data type of the printed result in the console.
|
||||
|
||||
In the next step, you will convert those strings into numbers.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call `console.log()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(.*\);?/);
|
||||
```
|
||||
|
||||
You should pass `inputValues` to your `console.log()` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(\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;
|
||||
--blue-50: #198eee;
|
||||
--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 {
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
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;
|
||||
height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
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%;
|
||||
}
|
||||
|
||||
select:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: 3px solid var(--blue-50);
|
||||
}
|
||||
|
||||
.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")].map((dropdown) => dropdown.value);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+333
@@ -0,0 +1,333 @@
|
||||
---
|
||||
id: 6621d0dd6798b121bd2ed823
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Update your `.map()` callback to call the `Number()` function. Pass `dropdown.value` to that function call.
|
||||
|
||||
Open the Console tab to see that your `inputValues` is an array of numbers now.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `Number()` function in your `.map()` callback.
|
||||
|
||||
```js
|
||||
assert.match(code, /inputValues\s*=\s*\[\s*\.\.\.document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)\s*\]\s*\.map\s*\(\s*(\(\s*dropdown\s*\)|dropdown)\s*=>\s*Number\s*\(\s*.*\s*\)/);
|
||||
```
|
||||
|
||||
You should pass `dropdown.value` to your `Number()` call.
|
||||
|
||||
```js
|
||||
assert.match(code, /inputValues\s*=\s*\[\s*\.\.\.document\.getElementsByClassName\(\s*('|"|`)values-dropdown\1\s*\)\s*\]\s*\.map\s*\(\s*(\(\s*dropdown\s*\)|dropdown)\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;
|
||||
--blue-50: #198eee;
|
||||
--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 {
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
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;
|
||||
height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
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%;
|
||||
}
|
||||
|
||||
select:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: 3px solid var(--blue-50);
|
||||
}
|
||||
|
||||
.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")].map((dropdown) => dropdown.value);
|
||||
console.log(inputValues);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
+325
@@ -0,0 +1,325 @@
|
||||
---
|
||||
id: 662236690376072dc79d9c27
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have confirmed the data type of the `inputValues` elements, remove your `console.log()` call.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should no longer log `inputValues` to the console.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /console\.log\(\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;
|
||||
--blue-50: #198eee;
|
||||
--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 {
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
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;
|
||||
height: 38px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
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%;
|
||||
}
|
||||
|
||||
select:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: 3px solid var(--blue-50);
|
||||
}
|
||||
|
||||
.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")].map((dropdown) => Number(dropdown.value));
|
||||
console.log(inputValues);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
sortButton.addEventListener("click", sortInputArray);
|
||||
```
|
||||
Reference in New Issue
Block a user