mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat: adding date formatter project for new JS curriculum (#52088)
Co-authored-by: Kolade Chris <65571316+Ksound22@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:
Jessica Wilkins
@@ -415,6 +415,13 @@
|
||||
"Local storage is a web browser feature that allows web applications to store key-value pairs persistently within a user's browser, enabling data to be saved and retrieved across page sessions.",
|
||||
"In this TODO application, you will learn how to handle form inputs, manage local storage, perform CRUD (Create, Read, Update, Delete) operations on tasks, implementing event listeners, and toggling UI elements."
|
||||
]
|
||||
},
|
||||
"learn-the-date-object-by-building-a-date-formatter": {
|
||||
"title": "Learn the Date Object by Building a Date Formatter",
|
||||
"intro": [
|
||||
"Working with dates in JavaScript can be both powerful and challenging, as you navigate through various methods, formats, and time zones. In this project you will learn how to work with the JavaScript Date object, including its methods and properties, and learn how to format dates effectively.",
|
||||
"This project will cover concepts such as the <code>getDate()</code>, <code>getMonth()</code>, and <code>getFullYear()</code> methods."
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Introduction to the Learn the Date Object by Building a Date Formatter
|
||||
block: learn-the-date-object-by-building-a-date-formatter
|
||||
superBlock: 2022/javascript-algorithms-and-data-structures
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the Learn the Date Object by Building a Date Formatter
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
{
|
||||
"name": "Learn the Date Object by Building a Date Formatter",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-the-date-object-by-building-a-date-formatter",
|
||||
"order": 50,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "2022/javascript-algorithms-and-data-structures",
|
||||
"superOrder": 4,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "65386e889dd615940cb3e042",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "653879d87bc55fa624280c77",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "65387b440b5cb1aa35585820",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "6538830e01ab66ade75b869e",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "653883da4a1fabaeb5f1f5e7",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "65388475abfb4faf8dd5e347",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "653884e09dfb4eb01f1622ed",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "6538855514cb16b10204e712",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "653885c61ede29b1a99554a2",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "65388659a72663b27cde0699",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "653887098bdc39b3684a51c8",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "65388762f61f44b3fd490a4a",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "6538886c61a414b4e34496fe",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "65388ac7154e44b72c74d616",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "65388bbcbf6928b83fc424d1",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "65388d61a57a00b9ad0d0817",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "65388edfdf364fbb04e426f2",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "65389211a8d86bbd876a2a74",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "65389306578c34be5c93bc35",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "6538935e2ab721beedb137c4",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "653898fa7eee37c57b960e35",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "65389a63d3b1d6c764c0e10e",
|
||||
"title": "Step 22"
|
||||
},
|
||||
{
|
||||
"id": "65389de504d0f2ca10e92a57",
|
||||
"title": "Step 23"
|
||||
},
|
||||
{
|
||||
"id": "65389eff4893facbbe6eae67",
|
||||
"title": "Step 24"
|
||||
}
|
||||
],
|
||||
"helpCategory": "JavaScript"
|
||||
}
|
||||
+248
@@ -0,0 +1,248 @@
|
||||
---
|
||||
id: 65386e889dd615940cb3e042
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this project, you will learn about the JavaScript `Date` object by building a date formatter.
|
||||
|
||||
All of the HTML and CSS for this project have been provided for you.
|
||||
|
||||
Start by getting the `#current-date` element using the `.getElementById()` method and assign it to a `const` variable called `currentDateParagraph`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `currentDateParagraph` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+currentDateParagraph\s+=/);
|
||||
```
|
||||
|
||||
You should use `document.getElementById()` to get the `#current-date` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(('|"|`)current-date\1\)/);
|
||||
```
|
||||
|
||||
You should assign the `#current-date` element to your `currentDateParagraph` variable.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+currentDateParagraph\s+=\s+document\.getElementById\(('|"|`)current-date\1\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+246
@@ -0,0 +1,246 @@
|
||||
---
|
||||
id: 653879d87bc55fa624280c77
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use the `.getElementById()` method to get the `#date-options` element and use `const` to assign it to a variable named `dateOptionsSelectElement`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `dateOptionsSelectElement` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+dateOptionsSelectElement\s+=/);
|
||||
```
|
||||
|
||||
You should use `document.getElementById()` to get the `#date-options` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(('|"|`)date-options\1\)/);
|
||||
```
|
||||
|
||||
You should assign the `#date-options` element to your `dateOptionsSelectElement` variable.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+dateOptionsSelectElement\s+=\s+document\.getElementById\(('|"|`)date-options\1\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+253
@@ -0,0 +1,253 @@
|
||||
---
|
||||
id: 65387b440b5cb1aa35585820
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In JavaScript, there are many built-in <dfn>constructors</dfn> that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the `new` operator.
|
||||
|
||||
For example, you can use the `Date()` constructor with the `new` operator to create a new `Date` object that returns a string with the current date and time:
|
||||
|
||||
```js
|
||||
const currentDate = new Date();
|
||||
console.log(currentDate);
|
||||
|
||||
// Output:
|
||||
// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
|
||||
```
|
||||
|
||||
Create a new `const` variable called `date` and assign it a `Date` object with `new Date()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `date` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+date\s+=/);
|
||||
```
|
||||
|
||||
You should assign a `Date` object to your `date` variable with `new Date()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+date\s+=\s+new\s+Date\(\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+253
@@ -0,0 +1,253 @@
|
||||
---
|
||||
id: 6538830e01ab66ade75b869e
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `Date` object has a number of methods that allow you to get the date and time in different formats.
|
||||
|
||||
One of those is the `.getDate()` method, which returns a number between 1-31 that represents the day of the month for that date. For example:
|
||||
|
||||
```js
|
||||
const date = new Date();
|
||||
const dayOfTheMonth = date.getDate();
|
||||
console.log(dayOfTheMonth); // 20
|
||||
```
|
||||
|
||||
Using `const`, create a variable named `day` and assign it the day of the month from `date` with the `.getDate()` method.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `day` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+day\s+=/);
|
||||
```
|
||||
|
||||
You should assign the `date.getDate()` to your `day` variable.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+day\s+=\s+date\.getDate\(\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+248
@@ -0,0 +1,248 @@
|
||||
---
|
||||
id: 653883da4a1fabaeb5f1f5e7
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.getMonth()` method returns a number between `0` and `11`. This represents the month for the date provided, where `0` is January and `11` is December. Because the number this method returns is zero-based, you need to add `1` to it to get the expected month number.
|
||||
|
||||
Using `const`, create a variable named `month` and assign it the month from `date` with the `.getMonth()` method.
|
||||
|
||||
Remember to add `1` to the number returned by `.getMonth()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `month` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+month\s+=/);
|
||||
```
|
||||
|
||||
You should assign the `date.getMonth() + 1` to your `month` variable.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+month\s+=\s+date\.getMonth\(\)\s*\+\s*1/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+247
@@ -0,0 +1,247 @@
|
||||
---
|
||||
id: 65388475abfb4faf8dd5e347
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.getFullYear()` method returns a number which represents the year for the provided date.
|
||||
|
||||
Using `const`, create a variable named `year` and assign it the year from `date` with the `.getFullYear()` method.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `year` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+year\s+=/);
|
||||
```
|
||||
|
||||
You should assign the `date.getFullYear()` to your `year` variable.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+year\s+=\s+date\.getFullYear\(\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+248
@@ -0,0 +1,248 @@
|
||||
---
|
||||
id: 653884e09dfb4eb01f1622ed
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.getHours()` method returns a number between `0` and `23`. This represents the hour for the provided date, where `0` is midnight and `23` is 11 p.m.
|
||||
|
||||
Create a `const` variable named `hours` and assign it the hour from `date` with the `.getHours()` method.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `hours` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+hours\s+=/);
|
||||
```
|
||||
|
||||
You should assign the `date.getHours()` to your `hours` variable.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+hours\s+=\s+date\.getHours\(\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+249
@@ -0,0 +1,249 @@
|
||||
---
|
||||
id: 6538855514cb16b10204e712
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.
|
||||
|
||||
Create a `const` variable named `minutes` and assign it the minutes from `date` with the `.getMinutes()` method.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `minutes` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+minutes\s+=/);
|
||||
```
|
||||
|
||||
You should assign the `date.getMinutes()` to your `minutes` variable.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+minutes\s+=\s+date\.getMinutes\(\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+248
@@ -0,0 +1,248 @@
|
||||
---
|
||||
id: 653885c61ede29b1a99554a2
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, create a `const` variable named `formattedDate` and assign it empty template literals.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `formattedDate` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+formattedDate\s*=/);
|
||||
```
|
||||
|
||||
You should assign the empty template literals to your `formattedDate` variable.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+formattedDate\s*=\s*``/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+244
@@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 65388659a72663b27cde0699
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the template literal, add an embedded expression that contains the `day` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `day` constant inside the template literal.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+formattedDate\s+=\s+`\${day}`/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const formattedDate = ``;
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+244
@@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 653887098bdc39b3684a51c8
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After the `day` variable, add a dash (`-`) followed by another embedded expression that contains the `month` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
You will need to use the `month` constant inside the template literal after a dash.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}`/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const formattedDate = `${day}`;
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+244
@@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 65388762f61f44b3fd490a4a
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After the `month` variable, add a dash followed by another embedded expression that contains the `year` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
You will need to use the `year` constant inside the template literal after a dash.
|
||||
|
||||
```js
|
||||
assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}\s*-\s*\${year}`/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const formattedDate = `${day}-${month}`;
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+246
@@ -0,0 +1,246 @@
|
||||
---
|
||||
id: 6538886c61a414b4e34496fe
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To see the results of the `formattedDate` variable, add a `console.log()` statement and pass in the `formattedDate` variable as an argument.
|
||||
|
||||
Open up the console and you should see the date printed out.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `console.log(formattedDate)` line in your code.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(formattedDate\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+268
@@ -0,0 +1,268 @@
|
||||
---
|
||||
id: 65388ac7154e44b72c74d616
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In JavaScript, the `textContent` property is used to both get and set the text of a node.
|
||||
|
||||
For example, here's how you can get the text content from a paragraph element with the id `example-paragraph`, and set its text content to a new value:
|
||||
|
||||
```html
|
||||
<p id="example-paragraph">Example Text</p>
|
||||
```
|
||||
|
||||
```js
|
||||
const exampleParagraph = document.getElementById("example-paragraph");
|
||||
console.log(exampleParagraph.textContent); // "Example Text"
|
||||
exampleParagraph.textContent = "New Text";
|
||||
console.log(exampleParagraph.textContent); // "New Text"
|
||||
```
|
||||
|
||||
Use the `textContent` property on `currentDateParagraph` to set its text content to the value of the `formattedDate` variable.
|
||||
|
||||
Also, make sure to remove your `console.log(formattedDate);` line.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `textContent` property to set the text content of `currentDateParagraph` to the value of the constant `formattedDate`.
|
||||
|
||||
```js
|
||||
assert(code.match(/currentDateParagraph.textContent\s*=\s*formattedDate/g));
|
||||
```
|
||||
|
||||
You should not have a `console.log(formattedDate);` line in your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /console\.log\(formattedDate\);/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
console.log(formattedDate);
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+259
@@ -0,0 +1,259 @@
|
||||
---
|
||||
id: 65388bbcbf6928b83fc424d1
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.
|
||||
|
||||
```js
|
||||
element.addEventListener("change", () => {
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
Chain the `addEventListener` method to `dateOptionsSelectElement` where the first argument is `change` and the second argument is an empty arrow function.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `addEventListener` method to add a `change` event listener to `dateOptionsSelectElement`.
|
||||
|
||||
```js
|
||||
assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*['"]change/g));
|
||||
```
|
||||
|
||||
You should add an empty arrow function as the second argument to the `addEventListener` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*(['"])change\1\s*,\s*\(\s*\)\s*=>\s*{\s*}/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+268
@@ -0,0 +1,268 @@
|
||||
---
|
||||
id: 65388d61a57a00b9ad0d0817
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When a user makes a selection from the dropdown menu, the function should get the user's value and display the date in their chosen date format. To do this, you can use the `switch` statement.
|
||||
|
||||
A `switch` statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.
|
||||
|
||||
For example, here's how to compare the expression `dayOfWeek` against possible values:
|
||||
|
||||
```js
|
||||
switch (dayOfWeek) {
|
||||
case 1:
|
||||
console.log("It's Monday!");
|
||||
break;
|
||||
case 2:
|
||||
console.log("It's Tuesday!");
|
||||
break;
|
||||
// ...cases for other workdays
|
||||
default:
|
||||
console.log("It's the weekend!");
|
||||
}
|
||||
```
|
||||
|
||||
Create a `switch` statement and use `dateOptionsSelectElement.value` as the expression.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `switch` statement where `dateOptionsSelectElement.value` is the expression.
|
||||
|
||||
```js
|
||||
assert(code.match(/switch\s*\(\s*dateOptionsSelectElement.value\s*\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
|
||||
dateOptionsSelectElement.addEventListener("change", () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
+262
@@ -0,0 +1,262 @@
|
||||
---
|
||||
id: 65388edfdf364fbb04e426f2
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When the user chooses the `Year, Month, Day` option from the dropdown, the date format should reflect this choice.
|
||||
|
||||
To do this, you can add a `case` in the `switch` statement, followed by your logic.
|
||||
|
||||
```js
|
||||
switch (expression) {
|
||||
case 'case123':
|
||||
// Write your logic here
|
||||
}
|
||||
```
|
||||
|
||||
Add a `case` where the value is `yyyy-mm-dd`. Inside the `case`, set the text content of `currentDateParagraph` to the value of `formattedDate`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `case` where the condition is `yyyy-mm-dd`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
|
||||
|
||||
```js
|
||||
assert(code.match(/case\s*(['"])yyyy-mm-dd\1\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
|
||||
dateOptionsSelectElement.addEventListener("change", () => {
|
||||
--fcc-editable-region--
|
||||
switch (dateOptionsSelectElement.value) {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
+259
@@ -0,0 +1,259 @@
|
||||
---
|
||||
id: 65389211a8d86bbd876a2a74
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In JavaScript, the `.split()` method is used to split up a string into an array of substrings. This method has an optional separator parameter, which indicates where each split should happen.
|
||||
|
||||
```js
|
||||
"coca-cola".split("-"); // [ 'coca', 'cola' ]
|
||||
```
|
||||
|
||||
Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.split()` method with `"-"` as the separator to split `formattedDate` into an array of substrings.
|
||||
|
||||
```js
|
||||
assert(code.match(/formattedDate[\s\S]*?\.split\(\s*(['"`])-\1\s*\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
|
||||
dateOptionsSelectElement.addEventListener("change", () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (dateOptionsSelectElement.value) {
|
||||
case "yyyy-mm-dd":
|
||||
currentDateParagraph.textContent = formattedDate
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
+262
@@ -0,0 +1,262 @@
|
||||
---
|
||||
id: 65389306578c34be5c93bc35
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.reverse()` method is used to reverse an array in place. For example:
|
||||
|
||||
```js
|
||||
const array = [1, 2, 3, 4, 5];
|
||||
array.reverse();
|
||||
console.log(array); // [5, 4, 3, 2, 1]
|
||||
```
|
||||
|
||||
Chain the `.reverse()` method to the end of `.split()` method.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.reverse\(\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
|
||||
dateOptionsSelectElement.addEventListener("change", () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (dateOptionsSelectElement.value) {
|
||||
case "yyyy-mm-dd":
|
||||
currentDateParagraph.textContent = formattedDate
|
||||
.split("-")
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
+257
@@ -0,0 +1,257 @@
|
||||
---
|
||||
id: 6538935e2ab721beedb137c4
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
|
||||
|
||||
Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.join()` method to join the reversed array elements into a string and use a `"-"` as a separator.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.join\((['"])-\1\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
|
||||
dateOptionsSelectElement.addEventListener("change", () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (dateOptionsSelectElement.value) {
|
||||
case "yyyy-mm-dd":
|
||||
currentDateParagraph.textContent = formattedDate
|
||||
.split("-")
|
||||
.reverse()
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
+268
@@ -0,0 +1,268 @@
|
||||
---
|
||||
id: 653898fa7eee37c57b960e35
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If your `switch` statement is going to have multiple cases, it is best practice to include a `break` statement.
|
||||
|
||||
The `break` statement will tell the JavaScript interpreter to stop executing statements. Without adding a `break` statement at the end of each `case` block, the program will execute the code for all matching `cases`.
|
||||
|
||||
```js
|
||||
switch (someVariable) {
|
||||
case 'case123':
|
||||
// Write your logic here
|
||||
break; // Terminates the switch statement
|
||||
}
|
||||
```
|
||||
|
||||
Add a `break` statement to the end of your `case` block.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `break` statement within the `case` after your logic.
|
||||
|
||||
```js
|
||||
assert(code.match(/break/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
|
||||
dateOptionsSelectElement.addEventListener("change", () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (dateOptionsSelectElement.value) {
|
||||
case "yyyy-mm-dd":
|
||||
currentDateParagraph.textContent = formattedDate
|
||||
.split("-")
|
||||
.reverse()
|
||||
.join("-");
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
+265
@@ -0,0 +1,265 @@
|
||||
---
|
||||
id: 65389a63d3b1d6c764c0e10e
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add another `case` with the value `mm-dd-yyyy-h-mm`. Inside that `case`, set the text content of `currentDateParagraph` to empty template literals.
|
||||
|
||||
Also, make sure to include a `break` statement to terminate the `switch` statement.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `case` where the condition is `mm-dd-yyyy-h-mm`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
|
||||
|
||||
```js
|
||||
assert(code.match(/case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph.textContent\s*=\s*``/g));
|
||||
```
|
||||
|
||||
You should include a `break` statement within the `case` after your logic.
|
||||
|
||||
```js
|
||||
assert(code.match(/break/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
|
||||
dateOptionsSelectElement.addEventListener("change", () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (dateOptionsSelectElement.value) {
|
||||
case "yyyy-mm-dd":
|
||||
currentDateParagraph.textContent = formattedDate
|
||||
.split("-")
|
||||
.reverse()
|
||||
.join("-");
|
||||
break;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
+261
@@ -0,0 +1,261 @@
|
||||
---
|
||||
id: 65389de504d0f2ca10e92a57
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.
|
||||
|
||||
```js
|
||||
const pattern = /case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*`(\$\{month}-\$\{day}-\$\{year} \$\{hours} Hours \$\{minutes} Minutes)`/;
|
||||
assert(code.match(pattern));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
|
||||
dateOptionsSelectElement.addEventListener("change", () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (dateOptionsSelectElement.value) {
|
||||
case "yyyy-mm-dd":
|
||||
currentDateParagraph.textContent = formattedDate
|
||||
.split("-")
|
||||
.reverse()
|
||||
.join("-");
|
||||
break;
|
||||
case "mm-dd-yyyy-h-mm":
|
||||
currentDateParagraph.textContent = ``;
|
||||
break;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
+519
@@ -0,0 +1,519 @@
|
||||
---
|
||||
id: 65389eff4893facbbe6eae67
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In a `switch` statement, the `default` case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
|
||||
|
||||
```js
|
||||
const dayOfWeek = 7;
|
||||
|
||||
switch (dayOfWeek) {
|
||||
case 1:
|
||||
console.log("It's Monday!");
|
||||
break;
|
||||
case 2:
|
||||
console.log("It's Tuesday!");
|
||||
break;
|
||||
// ...cases for other workdays
|
||||
default:
|
||||
console.log("It's the weekend!");
|
||||
}
|
||||
```
|
||||
|
||||
For the `default` case, set the text content of `currentDateParagraph` to the value of `formattedDate`.
|
||||
|
||||
And with that, your date formatter is complete! You can now format the current date three different ways.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.
|
||||
|
||||
```js
|
||||
assert(code.match(/default\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
|
||||
dateOptionsSelectElement.addEventListener("change", () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (dateOptionsSelectElement.value) {
|
||||
case "yyyy-mm-dd":
|
||||
currentDateParagraph.textContent = formattedDate
|
||||
.split("-")
|
||||
.reverse()
|
||||
.join("-");
|
||||
break;
|
||||
case "mm-dd-yyyy-h-mm":
|
||||
currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
|
||||
break;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn the Date Object by Building a Date Formatter</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-container">
|
||||
<h1 class="title">Today's Date</h1>
|
||||
|
||||
<svg
|
||||
class="date-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="512.000000pt"
|
||||
height="512.000000pt"
|
||||
viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<g
|
||||
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#fff"
|
||||
stroke="none"
|
||||
>
|
||||
<path
|
||||
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
|
||||
/>
|
||||
<path
|
||||
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
|
||||
/>
|
||||
<path
|
||||
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
|
||||
/>
|
||||
<path
|
||||
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
|
||||
/>
|
||||
<path
|
||||
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
|
||||
/>
|
||||
<path
|
||||
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
|
||||
/>
|
||||
<path
|
||||
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="dropdown-container">
|
||||
<select name="date-options" id="date-options">
|
||||
<option value="dd-mm-yyyy">Day, Month, Year</option>
|
||||
<option value="yyyy-mm-dd">Year, Month, Day</option>
|
||||
<option value="mm-dd-yyyy-h-mm">
|
||||
Month, Day, Year, Hours, Minutes
|
||||
</option>
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x="0" fill="none" width="24" height="24" />
|
||||
|
||||
<g>
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="current-date"></p>
|
||||
</main>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-grey: #0a0a23;
|
||||
--white: #ffffff;
|
||||
--yellow: #f1be32;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--white);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 50%;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
color: var(--dark-grey);
|
||||
appearance: none;
|
||||
padding: 10px;
|
||||
padding-right: 38px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-bottom-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
pointer-events: none;
|
||||
padding-left: 5px;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.select-icon svg.icon {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--dark-grey);
|
||||
}
|
||||
|
||||
#current-date {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.date-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const currentDateParagraph = document.getElementById("current-date");
|
||||
const dateOptionsSelectElement = document.getElementById("date-options");
|
||||
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
|
||||
const formattedDate = `${day}-${month}-${year}`;
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
|
||||
dateOptionsSelectElement.addEventListener("change", () => {
|
||||
switch (dateOptionsSelectElement.value) {
|
||||
case "yyyy-mm-dd":
|
||||
currentDateParagraph.textContent = formattedDate
|
||||
.split("-")
|
||||
.reverse()
|
||||
.join("-");
|
||||
break;
|
||||
case "mm-dd-yyyy-h-mm":
|
||||
currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
|
||||
break;
|
||||
default:
|
||||
currentDateParagraph.textContent = formattedDate;
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user