├── .devcontainer
└── devcontainer.json
├── .eslintrc.js
├── .github
├── CODEOWNERS
├── ISSUE_TEMPLATE.md
├── PULL_REQUEST_TEMPLATE.md
└── workflows
│ └── main.yml
├── .gitignore
├── .vscode
└── settings.json
├── 01_01b
├── data.js
├── index.html
├── script.js
└── style.css
├── 01_01e
├── data.js
├── index.html
├── script.js
└── style.css
├── 01_02b
├── data.js
├── index.html
├── script.js
└── style.css
├── 01_02e
├── data.js
├── index.html
├── script.js
└── style.css
├── 01_03b
├── components
│ ├── Card.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
└── style.css
├── 01_03e
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
└── style.css
├── 01_04b
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
└── style.css
├── 01_04e
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
└── style.css
├── 01_05b
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
└── style.css
├── 01_05e
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
└── style.css
├── 02_02b
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
├── style.css
└── toggle.css
├── 02_02e
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
├── style.css
└── toggle.css
├── 02_03b
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
├── style.css
└── toggle.css
├── 02_03e
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
├── style.css
└── toggle.css
├── 02_04b
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
├── style.css
└── toggle.css
├── 02_04e
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── script.js
├── style.css
└── toggle.css
├── 02_05b
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── loader.css
├── script.js
├── style.css
└── toggle.css
├── 02_05e
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── loader.css
├── script.js
├── style.css
└── toggle.css
├── 02_06b
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── loader.css
├── script.js
├── style.css
└── toggle.css
├── 02_06e
├── components
│ ├── Card.js
│ ├── Cardlist.js
│ └── cardlist.css
├── data.js
├── index.html
├── loader.css
├── script.js
├── style.css
└── toggle.css
├── 03_02b
├── index.html
└── script.js
├── 03_02e
├── index.html
└── script.js
├── 03_03b
├── components
│ └── weathercard.js
├── index.html
├── loader.css
├── script.js
└── style.css
├── 03_03e
├── components
│ └── weathercard.js
├── index.html
├── loader.css
├── script.js
└── style.css
├── 03_04b
├── components
│ └── weathercard.js
├── index.html
├── loader.css
├── script.js
└── style.css
├── 03_04e
├── components
│ └── weathercard.js
├── index.html
├── loader.css
├── script.js
└── style.css
├── 03_05b
├── components
│ └── weathercard.js
├── index.html
├── loader.css
├── script.js
└── style.css
├── 03_05e
├── components
│ └── weathercard.js
├── index.html
├── loader.css
├── script.js
└── style.css
├── CONTRIBUTING.md
├── LICENSE
├── NOTICE
├── README.md
├── favicon.ico
├── package-lock.json
├── package.json
└── settings.js
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensions": [
3 | "GitHub.github-vscode-theme",
4 | "esbenp.prettier-vscode",
5 | "dbaeumer.vscode-eslint",
6 | "ritwickdey.LiveServer",
7 | "stylelint.vscode-stylelint",
8 | "rangav.vscode-thunder-client"
9 | // Additional Extensions Here
10 | ],
11 | "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc" //Set Terminal Prompt to $
12 | }
13 |
14 | // DevContainer Reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference
15 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true,
4 | es2021: true,
5 | },
6 | extends: ["standard", "prettier"],
7 | parserOptions: {
8 | ecmaVersion: "latest",
9 | sourceType: "module",
10 | },
11 | rules: {},
12 | };
13 |
--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # Codeowners for these exercise files:
2 | # * (asterisk) denotes "all files and folders"
3 | # Example: * @producer @instructor
4 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
7 |
8 | ## Issue Overview
9 |
10 |
11 | ## Describe your environment
12 |
13 |
14 | ## Steps to Reproduce
15 |
16 | 1.
17 | 2.
18 | 3.
19 | 4.
20 |
21 | ## Expected Behavior
22 |
23 |
24 | ## Current Behavior
25 |
26 |
27 | ## Possible Solution
28 |
29 |
30 | ## Screenshots / Video
31 |
32 |
33 | ## Related Issues
34 |
35 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
1 | name: Copy To Branches
2 | on:
3 | workflow_dispatch:
4 | jobs:
5 | copy-to-branches:
6 | runs-on: ubuntu-latest
7 | steps:
8 | - uses: actions/checkout@v2
9 | with:
10 | fetch-depth: 0
11 | - name: Copy To Branches Action
12 | uses: planetoftheweb/copy-to-branches@v1
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | .tmp
4 | npm-debug.log
5 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.bracketPairColorization.enabled": true,
3 | "editor.cursorBlinking": "solid",
4 | "editor.fontFamily": "ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace",
5 | "editor.fontLigatures": false,
6 | "editor.fontSize": 22,
7 | "editor.formatOnPaste": true,
8 | "editor.formatOnSave": true,
9 | "editor.lineNumbers": "on",
10 | "editor.matchBrackets": "always",
11 | "editor.minimap.enabled": false,
12 | "editor.smoothScrolling": true,
13 | "editor.tabSize": 2,
14 | "editor.useTabStops": true,
15 | "emmet.triggerExpansionOnTab": true,
16 | "explorer.openEditors.visible": 0,
17 | "files.autoSave": "afterDelay",
18 | "screencastMode.onlyKeyboardShortcuts": true,
19 | "terminal.integrated.fontSize": 18,
20 | "workbench.activityBar.visible": true,
21 | "workbench.colorTheme": "Visual Studio Dark",
22 | "workbench.fontAliasing": "antialiased",
23 | "workbench.statusBar.visible": true,
24 | "liveServer.settings.root": "/docs",
25 | "prettier.enable": true,
26 | "eslint.alwaysShowStatus": false,
27 | "liveServer.settings.donotVerifyTags": true,
28 | "editor.defaultFormatter": "esbenp.prettier-vscode"
29 | }
30 |
--------------------------------------------------------------------------------
/01_01b/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Data-driven image card
10 |
11 |
12 |
13 |
Data-driven image card
14 |
15 |
17 |
31 | ${imgData.description}
32 |
43 |
44 |
45 | `;
46 |
47 | mainContent.innerHTML = markup;
48 | };
49 |
50 | Card(data);
51 |
--------------------------------------------------------------------------------
/01_01b/style.css:
--------------------------------------------------------------------------------
1 | img {
2 | display: block;
3 | width: 100%;
4 | height: auto;
5 | }
6 |
7 | .container {
8 | display: flex;
9 | align-items: center;
10 | flex-direction: column;
11 | }
12 |
13 | .image {
14 | border: 3px solid black;
15 | }
16 |
17 | .image__caption {
18 | padding: 1rem 2rem;
19 | }
20 |
21 | .main-content {
22 | width: min(90vw, 80ch);
23 | }
24 |
--------------------------------------------------------------------------------
/01_01e/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Data-driven image card
10 |
11 |
12 |
13 |
Data-driven image card
14 |
15 |
18 |
32 | ${imgData.description}
33 |
54 |
55 |
56 | `;
57 |
58 | mainContent.innerHTML = markup;
59 | };
60 |
61 | Card(data);
62 |
--------------------------------------------------------------------------------
/01_01e/style.css:
--------------------------------------------------------------------------------
1 | img {
2 | display: block;
3 | width: 100%;
4 | height: auto;
5 | }
6 |
7 | .container {
8 | display: flex;
9 | align-items: center;
10 | flex-direction: column;
11 | }
12 |
13 | .image {
14 | border: 3px solid black;
15 | }
16 |
17 | .image__caption {
18 | padding: 1rem 2rem;
19 | }
20 |
21 | .main-content {
22 | width: min(90vw, 80ch);
23 | }
24 |
--------------------------------------------------------------------------------
/01_02b/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Break down a complex function
10 |
11 |
12 |
13 |
Break down a complex function
14 |
15 |
17 |
31 | ${imgData.description}
32 |
53 |
54 |
55 | `;
56 |
57 | mainContent.innerHTML = markup;
58 | };
59 |
60 | Card(data);
61 |
--------------------------------------------------------------------------------
/01_02b/style.css:
--------------------------------------------------------------------------------
1 | img {
2 | display: block;
3 | width: 100%;
4 | height: auto;
5 | }
6 |
7 | .container {
8 | display: flex;
9 | align-items: center;
10 | flex-direction: column;
11 | }
12 |
13 | .image {
14 | border: 3px solid black;
15 | }
16 |
17 | .image__caption {
18 | padding: 1rem 2rem;
19 | }
20 |
21 | .main-content {
22 | width: min(90vw, 80ch);
23 | }
24 |
--------------------------------------------------------------------------------
/01_02e/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Break down a complex function
10 |
11 |
12 |
13 |
Break down a complex function
14 |
15 |
49 | ${buildImage(imgData)}
50 |
51 | ${imgData.description}
52 |
68 |
69 |
70 | `;
71 |
72 | mainContent.innerHTML = markup;
73 | };
74 |
75 | Card(data);
76 |
--------------------------------------------------------------------------------
/01_02e/style.css:
--------------------------------------------------------------------------------
1 | img {
2 | display: block;
3 | width: 100%;
4 | height: auto;
5 | }
6 |
7 | .container {
8 | display: flex;
9 | align-items: center;
10 | flex-direction: column;
11 | }
12 |
13 | .image {
14 | border: 3px solid black;
15 | }
16 |
17 | .image__caption {
18 | padding: 1rem 2rem;
19 | }
20 |
21 | .main-content {
22 | width: min(90vw, 80ch);
23 | }
24 |
--------------------------------------------------------------------------------
/01_03b/components/Card.js:
--------------------------------------------------------------------------------
1 | const buildImage = (imgData) => {
2 | let srcset = `${imgData.urls.full} ${imgData.width}w`;
3 | if (imgData.urls.regular) {
4 | srcset = srcset + `, ${imgData.urls.regular} 1080w`;
5 | }
6 | if (imgData.urls.small) {
7 | srcset = srcset + `, ${imgData.urls.small} 400w`;
8 | }
9 |
10 | const img = `
11 |
39 | ${buildImage(imgData)}
40 |
41 | ${imgData.description}
42 |
58 |
59 |
60 | `;
61 | };
62 |
63 | export default Card;
64 |
--------------------------------------------------------------------------------
/01_03b/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid black;
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid black;
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/01_03b/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Nesting components
10 |
11 |
12 |
13 |
Nesting components
14 |
15 |
37 | ${buildImage(imgData)}
38 |
39 | ${imgData.description}
40 |
56 |
57 |
58 | `;
59 | };
60 |
61 | export default Card;
62 |
--------------------------------------------------------------------------------
/01_03e/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/01_03e/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid black;
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid black;
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/01_03e/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Nesting components
10 |
11 |
12 |
13 |
Nesting components
14 |
15 |
43 | ${buildImage(imgData)}
44 |
45 | ${imgData.description}
46 |
62 |
63 |
64 | `;
65 | };
66 |
67 | export default Card;
68 |
--------------------------------------------------------------------------------
/01_04b/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/01_04b/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid black;
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid black;
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/01_04b/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Pull only the data you need from an object
10 |
11 |
12 |
13 |
Pull only the data you need from an object
14 |
15 |
54 | ${buildImage(imgData)}
55 |
56 | ${description}
57 |
73 |
74 |
75 | `;
76 | };
77 |
78 | export default Card;
79 |
--------------------------------------------------------------------------------
/01_04e/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/01_04e/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid black;
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid black;
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/01_04e/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Pull only the data you need from an object
10 |
11 |
12 |
13 |
Pull only the data you need from an object
14 |
15 |
48 | ${buildImage(imgData)}
49 |
50 | ${description}
51 |
67 |
68 |
69 | `;
70 | };
71 |
72 | export default Card;
73 |
--------------------------------------------------------------------------------
/01_05b/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/01_05b/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid black;
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid black;
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/01_05b/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Add new data to a data object
10 |
11 |
12 |
13 |
Add new data to a data object
14 |
15 |
50 | ${buildImage(imgData)}
51 |
52 | ${description}
53 |
70 |
71 |
72 | `;
73 | };
74 |
75 | export default Card;
76 |
--------------------------------------------------------------------------------
/01_05e/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/01_05e/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid black;
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid black;
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/01_05e/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Add new data to a data object
10 |
11 |
12 |
13 |
Add new data to a data object
14 |
15 |
50 | ${buildImage(imgData)}
51 |
52 | ${description}
53 |
70 |
71 |
72 | `;
73 | };
74 |
75 | export default Card;
76 |
--------------------------------------------------------------------------------
/02_02b/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/02_02b/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid var(--contrast-color, black);
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid var(--contrast-color, black);
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/02_02b/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Dark Mode Toggle
10 |
11 |
12 |
13 |
Dark Mode Toggle
14 |
15 |
16 |
17 |
18 | View mode:
19 |
20 |
28 |
39 |
40 |
51 |
59 |
61 |
66 |
69 |
71 |
76 |
82 |
84 |
85 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
50 | ${buildImage(imgData)}
51 |
52 | ${description}
53 |
70 |
71 |
72 | `;
73 | };
74 |
75 | export default Card;
76 |
--------------------------------------------------------------------------------
/02_02e/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/02_02e/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid var(--contrast-color, black);
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid var(--contrast-color, black);
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/02_02e/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Create a light/dark mode switch.
3 | * References:
4 | * - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
5 | * - https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
6 | */
7 |
8 | import data from "./data.js";
9 | import Cardlist from "./components/Cardlist.js";
10 |
11 | // Add license info to each data object.
12 | const license = {
13 | license: "Unsplash License",
14 | license_uri: "https://unsplash.com/license",
15 | };
16 | const newData = data.map((imgData) => {
17 | const newImgData = { ...imgData, ...license };
18 | return newImgData;
19 | });
20 |
21 | const mainContent = document.querySelector(".main-content");
22 |
23 | mainContent.innerHTML = Cardlist(newData);
24 |
25 | /**
26 | * Light/dark mode feature.
27 | */
28 | const toggle = document.querySelector(".toggle");
29 | const docElement = document.documentElement;
30 |
31 | // Trigger mode change with toggle.
32 | const toggleDisplayMode = () => {
33 | if (toggle.getAttribute("aria-pressed") === "true") {
34 | toggle.removeAttribute("aria-pressed");
35 | } else {
36 | toggle.setAttribute("aria-pressed", "true");
37 | }
38 |
39 | docElement.classList.toggle("dark");
40 | docElement.classList.toggle("light");
41 | };
42 | toggle.addEventListener("click", () => toggleDisplayMode());
43 |
--------------------------------------------------------------------------------
/02_02e/style.css:
--------------------------------------------------------------------------------
1 | /* Default to light color scheme. Respond to manual light setting. */
2 | :root,
3 | :root.light {
4 | --background-color: white;
5 | --color: black;
6 | --link-color: inherit;
7 | --contrast-color: black;
8 | }
9 |
10 | /* Respond to user settings. */
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --background-color: hsl(0, 0%, 11%);
14 | --color: hsl(0, 0%, 80%);
15 | --link-color: hsl(219, 100%, 77%);
16 | --contrast-color: hsl(0, 0%, 80%);
17 | }
18 | }
19 |
20 | /* Respond to manual dark setting. */
21 | :root.dark {
22 | --background-color: hsl(0, 0%, 11%);
23 | --color: hsl(0, 0%, 80%);
24 | --link-color: hsl(219, 100%, 77%);
25 | --contrast-color: hsl(0, 0%, 80%);
26 | }
27 |
28 | body {
29 | background-color: var(--background-color);
30 | color: var(--color);
31 | }
32 |
33 | figure {
34 | margin: 0;
35 | }
36 |
37 | a {
38 | color: var(--link-color);
39 | }
40 |
41 | img {
42 | display: block;
43 | width: 100%;
44 | height: auto;
45 | }
46 |
47 | .container {
48 | display: flex;
49 | align-items: center;
50 | flex-direction: column;
51 | }
52 |
53 | .main-content {
54 | width: min(90vw, 120ch);
55 | }
56 |
--------------------------------------------------------------------------------
/02_02e/toggle.css:
--------------------------------------------------------------------------------
1 | /* Accessible toggle. Source: https://kittygiraudel.com/2021/04/05/an-accessible-toggle/ */
2 |
3 | .toggle {
4 | display: flex;
5 | flex-wrap: wrap;
6 | align-items: center;
7 | position: relative;
8 | margin-bottom: 1em;
9 | cursor: pointer;
10 | gap: 1ch;
11 | }
12 |
13 | .toggle__text {
14 | color: var(--color);
15 | }
16 | button.toggle {
17 | border: 0;
18 | padding: 0;
19 | background-color: transparent;
20 | font: inherit;
21 | }
22 |
23 | .toggle__input {
24 | position: absolute;
25 | opacity: 0;
26 | width: 100%;
27 | height: 100%;
28 | }
29 |
30 | .toggle__display {
31 | --offset: 0.25em;
32 | --diameter: 1.8em;
33 |
34 | display: inline-flex;
35 | align-items: center;
36 | justify-content: space-around;
37 | box-sizing: content-box;
38 | width: calc(var(--diameter) * 2 + var(--offset) * 2);
39 | height: calc(var(--diameter) + var(--offset) * 2);
40 | border: 0.1em solid rgb(0 0 0 / 0.2);
41 | position: relative;
42 | border-radius: 100vw;
43 | background-color: hsl(0, 0%, 100%);
44 | transition: 250ms;
45 | }
46 |
47 | .toggle__display::before {
48 | content: "";
49 | z-index: 2;
50 | position: absolute;
51 | top: 50%;
52 | left: var(--offset);
53 | box-sizing: border-box;
54 | width: var(--diameter);
55 | height: var(--diameter);
56 | border: 0.1em solid rgb(0 0 0 / 0.2);
57 | border-radius: 50%;
58 | background-color: rgb(201, 201, 201);
59 | transform: translate(0, -50%);
60 | will-change: transform;
61 | transition: inherit;
62 | }
63 |
64 | .toggle:focus .toggle__display,
65 | .toggle__input:focus + .toggle__display {
66 | outline: 1px dotted #212121;
67 | outline: 1px auto -webkit-focus-ring-color;
68 | outline-offset: 2px;
69 | }
70 |
71 | .toggle:focus,
72 | .toggle:focus:not(:focus-visible) .toggle__display,
73 | .toggle__input:focus:not(:focus-visible) + .toggle__display {
74 | outline: 0;
75 | }
76 |
77 | .toggle[aria-pressed="true"] .toggle__display,
78 | .toggle__input:checked + .toggle__display {
79 | background-color: var(--background-color);
80 | border-color: var(--contrast-color);
81 | }
82 |
83 | .toggle[aria-pressed="true"] .toggle__display::before,
84 | .toggle__input:checked + .toggle__display::before {
85 | transform: translate(100%, -50%);
86 | }
87 |
88 | .toggle[disabled] .toggle__display,
89 | .toggle__input:disabled + .toggle__display {
90 | opacity: 0.6;
91 | filter: grayscale(40%);
92 | cursor: not-allowed;
93 | }
94 |
95 | [dir="rtl"] .toggle__display::before {
96 | left: auto;
97 | right: var(--offset);
98 | }
99 |
100 | [dir="rtl"] .toggle[aria-pressed="true"] + .toggle__display::before,
101 | [dir="rtl"] .toggle__input:checked + .toggle__display::before {
102 | transform: translate(-100%, -50%);
103 | }
104 |
105 | .toggle__icon {
106 | display: inline-block;
107 | width: 1.2em;
108 | height: 1.2em;
109 | color: inherit;
110 | fill: currentcolor;
111 | vertical-align: middle;
112 | overflow: hidden;
113 | }
114 |
115 | .toggle__icon--cross {
116 | color: hsl(48, 97%, 51%);
117 | }
118 |
119 | .toggle__icon--checkmark {
120 | color: hsl(62, 100%, 93%);
121 | }
122 |
--------------------------------------------------------------------------------
/02_03b/components/Card.js:
--------------------------------------------------------------------------------
1 | const buildImage = ({
2 | urls: { full, regular, small },
3 | width,
4 | height,
5 | description,
6 | }) => {
7 | let srcset = `${full} ${width}w`;
8 | if (regular) {
9 | srcset = srcset + `, ${regular} 1080w`;
10 | }
11 | if (small) {
12 | srcset = srcset + `, ${small} 400w`;
13 | }
14 |
15 | const img = `
16 |
50 | ${buildImage(imgData)}
51 |
52 | ${description}
53 |
70 |
71 |
72 | `;
73 | };
74 |
75 | export default Card;
76 |
--------------------------------------------------------------------------------
/02_03b/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/02_03b/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid var(--contrast-color, black);
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid var(--contrast-color, black);
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/02_03b/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Dark Mode Toggle
10 |
11 |
12 |
13 |
Dark Mode Toggle
14 |
15 |
16 |
17 |
18 | View mode:
19 |
20 |
28 |
39 |
40 |
51 |
59 |
61 |
66 |
69 |
71 |
76 |
82 |
84 |
85 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
50 | ${buildImage(imgData)}
51 |
52 | ${description}
53 |
70 |
71 |
72 | `;
73 | };
74 |
75 | export default Card;
76 |
--------------------------------------------------------------------------------
/02_03e/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/02_03e/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid var(--contrast-color, black);
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid var(--contrast-color, black);
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/02_03e/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Create a light/dark mode switch.
3 | * References:
4 | * - https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
5 | * - https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
6 | */
7 |
8 | import data from "./data.js";
9 | import Cardlist from "./components/Cardlist.js";
10 |
11 | // Add license info to each data object.
12 | const license = {
13 | license: "Unsplash License",
14 | license_uri: "https://unsplash.com/license",
15 | };
16 | const newData = data.map((imgData) => {
17 | const newImgData = { ...imgData, ...license };
18 | return newImgData;
19 | });
20 |
21 | const mainContent = document.querySelector(".main-content");
22 |
23 | mainContent.innerHTML = Cardlist(newData);
24 |
25 | /**
26 | * Light/dark mode feature.
27 | */
28 | const docElement = document.documentElement;
29 | const toggle = document.querySelector(".toggle");
30 |
31 | // Detect mode on load and set toggle state accordingly.
32 | const displayModeOnLoad = () => {
33 | if (
34 | window.matchMedia &&
35 | window.matchMedia("(prefers-color-scheme: dark)").matches
36 | ) {
37 | docElement.classList.add("dark");
38 | toggle.setAttribute("aria-pressed", "true");
39 | } else {
40 | docElement.classList.add("light");
41 | toggle.removeAttribute("aria-pressed");
42 | }
43 | };
44 | displayModeOnLoad();
45 |
46 | // Trigger mode change with toggle.
47 | const toggleDisplayMode = () => {
48 | if (toggle.getAttribute("aria-pressed") === "true") {
49 | toggle.removeAttribute("aria-pressed");
50 | } else {
51 | toggle.setAttribute("aria-pressed", "true");
52 | }
53 |
54 | docElement.classList.toggle("dark");
55 | docElement.classList.toggle("light");
56 | };
57 | toggle.addEventListener("click", () => toggleDisplayMode());
58 |
--------------------------------------------------------------------------------
/02_03e/style.css:
--------------------------------------------------------------------------------
1 | /* Default to light color scheme. Respond to manual light setting. */
2 | :root,
3 | :root.light {
4 | --background-color: white;
5 | --color: black;
6 | --link-color: inherit;
7 | --contrast-color: black;
8 | }
9 |
10 | /* Respond to user settings. */
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --background-color: hsl(0, 0%, 11%);
14 | --color: hsl(0, 0%, 80%);
15 | --link-color: hsl(219, 100%, 77%);
16 | --contrast-color: hsl(0, 0%, 80%);
17 | }
18 | }
19 |
20 | /* Respond to manual dark setting. */
21 | :root.dark {
22 | --background-color: hsl(0, 0%, 11%);
23 | --color: hsl(0, 0%, 80%);
24 | --link-color: hsl(219, 100%, 77%);
25 | --contrast-color: hsl(0, 0%, 80%);
26 | }
27 |
28 | body {
29 | background-color: var(--background-color);
30 | color: var(--color);
31 | }
32 |
33 | figure {
34 | margin: 0;
35 | }
36 |
37 | a {
38 | color: var(--link-color);
39 | }
40 |
41 | img {
42 | display: block;
43 | width: 100%;
44 | height: auto;
45 | }
46 |
47 | .container {
48 | display: flex;
49 | align-items: center;
50 | flex-direction: column;
51 | }
52 |
53 | .main-content {
54 | width: min(90vw, 120ch);
55 | }
56 |
--------------------------------------------------------------------------------
/02_03e/toggle.css:
--------------------------------------------------------------------------------
1 | /* Accessible toggle. Source: https://kittygiraudel.com/2021/04/05/an-accessible-toggle/ */
2 |
3 | .toggle {
4 | display: flex;
5 | flex-wrap: wrap;
6 | align-items: center;
7 | position: relative;
8 | margin-bottom: 1em;
9 | cursor: pointer;
10 | gap: 1ch;
11 | }
12 |
13 | .toggle__text {
14 | color: var(--color);
15 | }
16 | button.toggle {
17 | border: 0;
18 | padding: 0;
19 | background-color: transparent;
20 | font: inherit;
21 | }
22 |
23 | .toggle__input {
24 | position: absolute;
25 | opacity: 0;
26 | width: 100%;
27 | height: 100%;
28 | }
29 |
30 | .toggle__display {
31 | --offset: 0.25em;
32 | --diameter: 1.8em;
33 |
34 | display: inline-flex;
35 | align-items: center;
36 | justify-content: space-around;
37 | box-sizing: content-box;
38 | width: calc(var(--diameter) * 2 + var(--offset) * 2);
39 | height: calc(var(--diameter) + var(--offset) * 2);
40 | border: 0.1em solid rgb(0 0 0 / 0.2);
41 | position: relative;
42 | border-radius: 100vw;
43 | background-color: hsl(0, 0%, 100%);
44 | transition: 250ms;
45 | }
46 |
47 | .toggle__display::before {
48 | content: "";
49 | z-index: 2;
50 | position: absolute;
51 | top: 50%;
52 | left: var(--offset);
53 | box-sizing: border-box;
54 | width: var(--diameter);
55 | height: var(--diameter);
56 | border: 0.1em solid rgb(0 0 0 / 0.2);
57 | border-radius: 50%;
58 | background-color: rgb(201, 201, 201);
59 | transform: translate(0, -50%);
60 | will-change: transform;
61 | transition: inherit;
62 | }
63 |
64 | .toggle:focus .toggle__display,
65 | .toggle__input:focus + .toggle__display {
66 | outline: 1px dotted #212121;
67 | outline: 1px auto -webkit-focus-ring-color;
68 | outline-offset: 2px;
69 | }
70 |
71 | .toggle:focus,
72 | .toggle:focus:not(:focus-visible) .toggle__display,
73 | .toggle__input:focus:not(:focus-visible) + .toggle__display {
74 | outline: 0;
75 | }
76 |
77 | .toggle[aria-pressed="true"] .toggle__display,
78 | .toggle__input:checked + .toggle__display {
79 | background-color: var(--background-color);
80 | border-color: var(--contrast-color);
81 | }
82 |
83 | .toggle[aria-pressed="true"] .toggle__display::before,
84 | .toggle__input:checked + .toggle__display::before {
85 | transform: translate(100%, -50%);
86 | }
87 |
88 | .toggle[disabled] .toggle__display,
89 | .toggle__input:disabled + .toggle__display {
90 | opacity: 0.6;
91 | filter: grayscale(40%);
92 | cursor: not-allowed;
93 | }
94 |
95 | [dir="rtl"] .toggle__display::before {
96 | left: auto;
97 | right: var(--offset);
98 | }
99 |
100 | [dir="rtl"] .toggle[aria-pressed="true"] + .toggle__display::before,
101 | [dir="rtl"] .toggle__input:checked + .toggle__display::before {
102 | transform: translate(-100%, -50%);
103 | }
104 |
105 | .toggle__icon {
106 | display: inline-block;
107 | width: 1.2em;
108 | height: 1.2em;
109 | color: inherit;
110 | fill: currentcolor;
111 | vertical-align: middle;
112 | overflow: hidden;
113 | }
114 |
115 | .toggle__icon--cross {
116 | color: hsl(48, 97%, 51%);
117 | }
118 |
119 | .toggle__icon--checkmark {
120 | color: hsl(62, 100%, 93%);
121 | }
122 |
--------------------------------------------------------------------------------
/02_04b/components/Card.js:
--------------------------------------------------------------------------------
1 | const buildImage = ({
2 | urls: { full, regular, small },
3 | width,
4 | height,
5 | description,
6 | }) => {
7 | let srcset = `${full} ${width}w`;
8 | if (regular) {
9 | srcset = srcset + `, ${regular} 1080w`;
10 | }
11 | if (small) {
12 | srcset = srcset + `, ${small} 400w`;
13 | }
14 |
15 | const img = `
16 |
50 | ${buildImage(imgData)}
51 |
52 | ${description}
53 |
70 |
71 |
72 | `;
73 | };
74 |
75 | export default Card;
76 |
--------------------------------------------------------------------------------
/02_04b/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/02_04b/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid var(--contrast-color, black);
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid var(--contrast-color, black);
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/02_04b/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Store dark mode user preference in localstorage.
3 | * References:
4 | * - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
5 | */
6 |
7 | import data from "./data.js";
8 | import Cardlist from "./components/Cardlist.js";
9 |
10 | // Add license info to each data object.
11 | const license = {
12 | license: "Unsplash License",
13 | license_uri: "https://unsplash.com/license",
14 | };
15 | const newData = data.map((imgData) => {
16 | const newImgData = { ...imgData, ...license };
17 | return newImgData;
18 | });
19 |
20 | const mainContent = document.querySelector(".main-content");
21 |
22 | mainContent.innerHTML = Cardlist(newData);
23 |
24 | /**
25 | * Light/dark mode feature.
26 | */
27 | const docElement = document.documentElement;
28 | const toggle = document.querySelector(".toggle");
29 |
30 | // Detect mode on load and set toggle state accordingly.
31 | const displayModeOnLoad = () => {
32 | if (
33 | window.matchMedia &&
34 | window.matchMedia("(prefers-color-scheme: dark)").matches
35 | ) {
36 | docElement.classList.add("dark");
37 | toggle.setAttribute("aria-pressed", "true");
38 | } else {
39 | docElement.classList.add("light");
40 | toggle.removeAttribute("aria-pressed");
41 | }
42 | };
43 | displayModeOnLoad();
44 |
45 | // Trigger mode change with toggle.
46 | const toggleDisplayMode = () => {
47 | if (toggle.getAttribute("aria-pressed") === "true") {
48 | toggle.removeAttribute("aria-pressed");
49 | } else {
50 | toggle.setAttribute("aria-pressed", "true");
51 | }
52 |
53 | docElement.classList.toggle("dark");
54 | docElement.classList.toggle("light");
55 | };
56 | toggle.addEventListener("click", () => toggleDisplayMode());
57 |
--------------------------------------------------------------------------------
/02_04b/style.css:
--------------------------------------------------------------------------------
1 | /* Default to light color scheme. Respond to manual light setting. */
2 | :root,
3 | :root.light {
4 | --background-color: white;
5 | --color: black;
6 | --link-color: inherit;
7 | --contrast-color: black;
8 | }
9 |
10 | /* Respond to user settings. */
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --background-color: hsl(0, 0%, 11%);
14 | --color: hsl(0, 0%, 80%);
15 | --link-color: hsl(219, 100%, 77%);
16 | --contrast-color: hsl(0, 0%, 80%);
17 | }
18 | }
19 |
20 | /* Respond to manual dark setting. */
21 | :root.dark {
22 | --background-color: hsl(0, 0%, 11%);
23 | --color: hsl(0, 0%, 80%);
24 | --link-color: hsl(219, 100%, 77%);
25 | --contrast-color: hsl(0, 0%, 80%);
26 | }
27 |
28 | body {
29 | background-color: var(--background-color);
30 | color: var(--color);
31 | }
32 |
33 | figure {
34 | margin: 0;
35 | }
36 |
37 | a {
38 | color: var(--link-color);
39 | }
40 |
41 | img {
42 | display: block;
43 | width: 100%;
44 | height: auto;
45 | }
46 |
47 | .container {
48 | display: flex;
49 | align-items: center;
50 | flex-direction: column;
51 | }
52 |
53 | .main-content {
54 | width: min(90vw, 120ch);
55 | }
56 |
--------------------------------------------------------------------------------
/02_04b/toggle.css:
--------------------------------------------------------------------------------
1 | /* Accessible toggle. Source: https://kittygiraudel.com/2021/04/05/an-accessible-toggle/ */
2 |
3 | .toggle {
4 | display: flex;
5 | flex-wrap: wrap;
6 | align-items: center;
7 | position: relative;
8 | margin-bottom: 1em;
9 | cursor: pointer;
10 | gap: 1ch;
11 | }
12 |
13 | .toggle__text {
14 | color: var(--color);
15 | }
16 | button.toggle {
17 | border: 0;
18 | padding: 0;
19 | background-color: transparent;
20 | font: inherit;
21 | }
22 |
23 | .toggle__input {
24 | position: absolute;
25 | opacity: 0;
26 | width: 100%;
27 | height: 100%;
28 | }
29 |
30 | .toggle__display {
31 | --offset: 0.25em;
32 | --diameter: 1.8em;
33 |
34 | display: inline-flex;
35 | align-items: center;
36 | justify-content: space-around;
37 | box-sizing: content-box;
38 | width: calc(var(--diameter) * 2 + var(--offset) * 2);
39 | height: calc(var(--diameter) + var(--offset) * 2);
40 | border: 0.1em solid rgb(0 0 0 / 0.2);
41 | position: relative;
42 | border-radius: 100vw;
43 | background-color: hsl(0, 0%, 100%);
44 | transition: 250ms;
45 | }
46 |
47 | .toggle__display::before {
48 | content: "";
49 | z-index: 2;
50 | position: absolute;
51 | top: 50%;
52 | left: var(--offset);
53 | box-sizing: border-box;
54 | width: var(--diameter);
55 | height: var(--diameter);
56 | border: 0.1em solid rgb(0 0 0 / 0.2);
57 | border-radius: 50%;
58 | background-color: rgb(201, 201, 201);
59 | transform: translate(0, -50%);
60 | will-change: transform;
61 | transition: inherit;
62 | }
63 |
64 | .toggle:focus .toggle__display,
65 | .toggle__input:focus + .toggle__display {
66 | outline: 1px dotted #212121;
67 | outline: 1px auto -webkit-focus-ring-color;
68 | outline-offset: 2px;
69 | }
70 |
71 | .toggle:focus,
72 | .toggle:focus:not(:focus-visible) .toggle__display,
73 | .toggle__input:focus:not(:focus-visible) + .toggle__display {
74 | outline: 0;
75 | }
76 |
77 | .toggle[aria-pressed="true"] .toggle__display,
78 | .toggle__input:checked + .toggle__display {
79 | background-color: var(--background-color);
80 | border-color: var(--contrast-color);
81 | }
82 |
83 | .toggle[aria-pressed="true"] .toggle__display::before,
84 | .toggle__input:checked + .toggle__display::before {
85 | transform: translate(100%, -50%);
86 | }
87 |
88 | .toggle[disabled] .toggle__display,
89 | .toggle__input:disabled + .toggle__display {
90 | opacity: 0.6;
91 | filter: grayscale(40%);
92 | cursor: not-allowed;
93 | }
94 |
95 | [dir="rtl"] .toggle__display::before {
96 | left: auto;
97 | right: var(--offset);
98 | }
99 |
100 | [dir="rtl"] .toggle[aria-pressed="true"] + .toggle__display::before,
101 | [dir="rtl"] .toggle__input:checked + .toggle__display::before {
102 | transform: translate(-100%, -50%);
103 | }
104 |
105 | .toggle__icon {
106 | display: inline-block;
107 | width: 1.2em;
108 | height: 1.2em;
109 | color: inherit;
110 | fill: currentcolor;
111 | vertical-align: middle;
112 | overflow: hidden;
113 | }
114 |
115 | .toggle__icon--cross {
116 | color: hsl(48, 97%, 51%);
117 | }
118 |
119 | .toggle__icon--checkmark {
120 | color: hsl(62, 100%, 93%);
121 | }
122 |
--------------------------------------------------------------------------------
/02_04e/components/Card.js:
--------------------------------------------------------------------------------
1 | const buildImage = ({
2 | urls: { full, regular, small },
3 | width,
4 | height,
5 | description,
6 | }) => {
7 | let srcset = `${full} ${width}w`;
8 | if (regular) {
9 | srcset = srcset + `, ${regular} 1080w`;
10 | }
11 | if (small) {
12 | srcset = srcset + `, ${small} 400w`;
13 | }
14 |
15 | const img = `
16 |
50 | ${buildImage(imgData)}
51 |
52 | ${description}
53 |
70 |
71 |
72 | `;
73 | };
74 |
75 | export default Card;
76 |
--------------------------------------------------------------------------------
/02_04e/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/02_04e/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid var(--contrast-color, black);
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid var(--contrast-color, black);
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/02_04e/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Store dark mode user preference in localstorage.
3 | * References:
4 | * - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
5 | */
6 |
7 | import data from "./data.js";
8 | import Cardlist from "./components/Cardlist.js";
9 |
10 | // Add license info to each data object.
11 | const license = {
12 | license: "Unsplash License",
13 | license_uri: "https://unsplash.com/license",
14 | };
15 | const newData = data.map((imgData) => {
16 | const newImgData = { ...imgData, ...license };
17 | return newImgData;
18 | });
19 |
20 | const mainContent = document.querySelector(".main-content");
21 |
22 | mainContent.innerHTML = Cardlist(newData);
23 |
24 | /**
25 | * Light/dark mode feature.
26 | */
27 | const docElement = document.documentElement;
28 | const toggle = document.querySelector(".toggle");
29 |
30 | // Detect mode on load and set toggle state accordingly.
31 | const displayModeOnLoad = () => {
32 | console.log(localStorage.getItem("darkMode"));
33 | let dark = false;
34 | // Set dark to true if prefers-color-scheme is set to dark.
35 | dark = !!(
36 | window.matchMedia &&
37 | window.matchMedia("(prefers-color-scheme: dark)").matches
38 | );
39 | console.log(dark);
40 | // Set dark to true of localStorage "darkMode" is set to enabled.
41 | dark = localStorage.getItem("darkMode") === "enabled";
42 | console.log(dark);
43 |
44 | if (dark) {
45 | docElement.classList.add("dark");
46 | toggle.setAttribute("aria-pressed", "true");
47 | localStorage.setItem("darkMode", "enabled");
48 | } else {
49 | docElement.classList.add("light");
50 | toggle.removeAttribute("aria-pressed");
51 | localStorage.setItem("darkMode", "disabled");
52 | }
53 | };
54 | displayModeOnLoad();
55 |
56 | // Trigger mode change with toggle.
57 | const toggleDisplayMode = () => {
58 | if (toggle.getAttribute("aria-pressed") === "true") {
59 | toggle.removeAttribute("aria-pressed");
60 | localStorage.setItem("darkMode", "disabled");
61 | } else {
62 | toggle.setAttribute("aria-pressed", "true");
63 | localStorage.setItem("darkMode", "enabled");
64 | }
65 |
66 | docElement.classList.toggle("dark");
67 | docElement.classList.toggle("light");
68 | };
69 | toggle.addEventListener("click", () => toggleDisplayMode());
70 |
--------------------------------------------------------------------------------
/02_04e/style.css:
--------------------------------------------------------------------------------
1 | /* Default to light color scheme. Respond to manual light setting. */
2 | :root,
3 | :root.light {
4 | --background-color: white;
5 | --color: black;
6 | --link-color: inherit;
7 | --contrast-color: black;
8 | }
9 |
10 | /* Respond to user settings. */
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --background-color: hsl(0, 0%, 11%);
14 | --color: hsl(0, 0%, 80%);
15 | --link-color: hsl(219, 100%, 77%);
16 | --contrast-color: hsl(0, 0%, 80%);
17 | }
18 | }
19 |
20 | /* Respond to manual dark setting. */
21 | :root.dark {
22 | --background-color: hsl(0, 0%, 11%);
23 | --color: hsl(0, 0%, 80%);
24 | --link-color: hsl(219, 100%, 77%);
25 | --contrast-color: hsl(0, 0%, 80%);
26 | }
27 |
28 | body {
29 | background-color: var(--background-color);
30 | color: var(--color);
31 | }
32 |
33 | figure {
34 | margin: 0;
35 | }
36 |
37 | a {
38 | color: var(--link-color);
39 | }
40 |
41 | img {
42 | display: block;
43 | width: 100%;
44 | height: auto;
45 | }
46 |
47 | .container {
48 | display: flex;
49 | align-items: center;
50 | flex-direction: column;
51 | }
52 |
53 | .main-content {
54 | width: min(90vw, 120ch);
55 | }
56 |
--------------------------------------------------------------------------------
/02_04e/toggle.css:
--------------------------------------------------------------------------------
1 | /* Accessible toggle. Source: https://kittygiraudel.com/2021/04/05/an-accessible-toggle/ */
2 |
3 | .toggle {
4 | display: flex;
5 | flex-wrap: wrap;
6 | align-items: center;
7 | position: relative;
8 | margin-bottom: 1em;
9 | cursor: pointer;
10 | gap: 1ch;
11 | }
12 |
13 | .toggle__text {
14 | color: var(--color);
15 | }
16 | button.toggle {
17 | border: 0;
18 | padding: 0;
19 | background-color: transparent;
20 | font: inherit;
21 | }
22 |
23 | .toggle__input {
24 | position: absolute;
25 | opacity: 0;
26 | width: 100%;
27 | height: 100%;
28 | }
29 |
30 | .toggle__display {
31 | --offset: 0.25em;
32 | --diameter: 1.8em;
33 |
34 | display: inline-flex;
35 | align-items: center;
36 | justify-content: space-around;
37 | box-sizing: content-box;
38 | width: calc(var(--diameter) * 2 + var(--offset) * 2);
39 | height: calc(var(--diameter) + var(--offset) * 2);
40 | border: 0.1em solid rgb(0 0 0 / 0.2);
41 | position: relative;
42 | border-radius: 100vw;
43 | background-color: hsl(0, 0%, 100%);
44 | transition: 250ms;
45 | }
46 |
47 | .toggle__display::before {
48 | content: "";
49 | z-index: 2;
50 | position: absolute;
51 | top: 50%;
52 | left: var(--offset);
53 | box-sizing: border-box;
54 | width: var(--diameter);
55 | height: var(--diameter);
56 | border: 0.1em solid rgb(0 0 0 / 0.2);
57 | border-radius: 50%;
58 | background-color: rgb(201, 201, 201);
59 | transform: translate(0, -50%);
60 | will-change: transform;
61 | transition: inherit;
62 | }
63 |
64 | .toggle:focus .toggle__display,
65 | .toggle__input:focus + .toggle__display {
66 | outline: 1px dotted #212121;
67 | outline: 1px auto -webkit-focus-ring-color;
68 | outline-offset: 2px;
69 | }
70 |
71 | .toggle:focus,
72 | .toggle:focus:not(:focus-visible) .toggle__display,
73 | .toggle__input:focus:not(:focus-visible) + .toggle__display {
74 | outline: 0;
75 | }
76 |
77 | .toggle[aria-pressed="true"] .toggle__display,
78 | .toggle__input:checked + .toggle__display {
79 | background-color: var(--background-color);
80 | border-color: var(--contrast-color);
81 | }
82 |
83 | .toggle[aria-pressed="true"] .toggle__display::before,
84 | .toggle__input:checked + .toggle__display::before {
85 | transform: translate(100%, -50%);
86 | }
87 |
88 | .toggle[disabled] .toggle__display,
89 | .toggle__input:disabled + .toggle__display {
90 | opacity: 0.6;
91 | filter: grayscale(40%);
92 | cursor: not-allowed;
93 | }
94 |
95 | [dir="rtl"] .toggle__display::before {
96 | left: auto;
97 | right: var(--offset);
98 | }
99 |
100 | [dir="rtl"] .toggle[aria-pressed="true"] + .toggle__display::before,
101 | [dir="rtl"] .toggle__input:checked + .toggle__display::before {
102 | transform: translate(-100%, -50%);
103 | }
104 |
105 | .toggle__icon {
106 | display: inline-block;
107 | width: 1.2em;
108 | height: 1.2em;
109 | color: inherit;
110 | fill: currentcolor;
111 | vertical-align: middle;
112 | overflow: hidden;
113 | }
114 |
115 | .toggle__icon--cross {
116 | color: hsl(48, 97%, 51%);
117 | }
118 |
119 | .toggle__icon--checkmark {
120 | color: hsl(62, 100%, 93%);
121 | }
122 |
--------------------------------------------------------------------------------
/02_05b/components/Card.js:
--------------------------------------------------------------------------------
1 | const buildImage = ({
2 | urls: { full, regular, small },
3 | width,
4 | height,
5 | description,
6 | }) => {
7 | let srcset = `${full} ${width}w`;
8 | if (regular) {
9 | srcset = srcset + `, ${regular} 1080w`;
10 | }
11 | if (small) {
12 | srcset = srcset + `, ${small} 400w`;
13 | }
14 |
15 | const img = `
16 |
50 | ${buildImage(imgData)}
51 |
52 | ${description}
53 |
70 |
71 |
72 | `;
73 | };
74 |
75 | export default Card;
76 |
--------------------------------------------------------------------------------
/02_05b/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/02_05b/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid var(--contrast-color, black);
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid var(--contrast-color, black);
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/02_05b/loader.css:
--------------------------------------------------------------------------------
1 | /* Source: https://cssloaders.github.io/ */
2 | .loader {
3 | width: 48px;
4 | height: 48px;
5 | border-radius: 50%;
6 | position: relative;
7 | animation: rotate 1s linear infinite;
8 | }
9 | .loader::before {
10 | content: "";
11 | box-sizing: border-box;
12 | position: absolute;
13 | inset: 0px;
14 | border-radius: 50%;
15 | border: 5px solid hsl(0, 0%, 0%);
16 | animation: prixClipFix 2s linear infinite;
17 | }
18 |
19 | @keyframes rotate {
20 | 100% {
21 | transform: rotate(360deg);
22 | }
23 | }
24 |
25 | @keyframes prixClipFix {
26 | 0% {
27 | clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
28 | }
29 | 25% {
30 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
31 | }
32 | 50% {
33 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
34 | }
35 | 75% {
36 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
37 | }
38 | 100% {
39 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/02_05b/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Create a "loading" indicator triggered on button click.
3 | * - Use CSS to hide/show the loader.
4 | * - Create artificial delay of loading using setTimeout()
5 | * References:
6 | * - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
7 | * - https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
8 | * - https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
9 | */
10 |
11 | import data from "./data.js";
12 | import Cardlist from "./components/Cardlist.js";
13 |
14 | // Add license info to each data object.
15 | const license = {
16 | license: "Unsplash License",
17 | license_uri: "https://unsplash.com/license",
18 | };
19 | const newData = data.map((imgData) => {
20 | const newImgData = { ...imgData, ...license };
21 | return newImgData;
22 | });
23 |
24 | const mainContent = document.querySelector(".main-content");
25 |
26 | mainContent.innerHTML = Cardlist(newData);
27 |
28 | /**
29 | * Light/dark mode feature.
30 | */
31 | const docElement = document.documentElement;
32 | const toggle = document.querySelector(".toggle");
33 |
34 | // Detect mode on load and set toggle state accordingly.
35 | const displayModeOnLoad = () => {
36 | console.log(localStorage.getItem("darkMode"));
37 | let dark = false;
38 | // Set dark to true if prefers-color-scheme is set to dark.
39 | dark = !!(
40 | window.matchMedia &&
41 | window.matchMedia("(prefers-color-scheme: dark)").matches
42 | );
43 | console.log(dark);
44 | // Set dark to true of localStorage "darkMode" is set to enabled.
45 | dark = localStorage.getItem("darkMode") === "enabled";
46 | console.log(dark);
47 |
48 | if (dark) {
49 | docElement.classList.add("dark");
50 | toggle.setAttribute("aria-pressed", "true");
51 | localStorage.setItem("darkMode", "enabled");
52 | } else {
53 | docElement.classList.add("light");
54 | toggle.removeAttribute("aria-pressed");
55 | localStorage.setItem("darkMode", "disabled");
56 | }
57 | };
58 | displayModeOnLoad();
59 |
60 | // Trigger mode change with toggle.
61 | const toggleDisplayMode = () => {
62 | if (toggle.getAttribute("aria-pressed") === "true") {
63 | toggle.removeAttribute("aria-pressed");
64 | localStorage.setItem("darkMode", "disabled");
65 | } else {
66 | toggle.setAttribute("aria-pressed", "true");
67 | localStorage.setItem("darkMode", "enabled");
68 | }
69 |
70 | docElement.classList.toggle("dark");
71 | docElement.classList.toggle("light");
72 | };
73 | toggle.addEventListener("click", () => toggleDisplayMode());
74 |
--------------------------------------------------------------------------------
/02_05b/style.css:
--------------------------------------------------------------------------------
1 | /* Default to light color scheme. Respond to manual light setting. */
2 | :root,
3 | :root.light {
4 | --background-color: white;
5 | --color: black;
6 | --link-color: inherit;
7 | --contrast-color: black;
8 | }
9 |
10 | /* Respond to user settings. */
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --background-color: hsl(0, 0%, 11%);
14 | --color: hsl(0, 0%, 80%);
15 | --link-color: hsl(219, 100%, 77%);
16 | --contrast-color: hsl(0, 0%, 80%);
17 | }
18 | }
19 |
20 | /* Respond to manual dark setting. */
21 | :root.dark {
22 | --background-color: hsl(0, 0%, 11%);
23 | --color: hsl(0, 0%, 80%);
24 | --link-color: hsl(219, 100%, 77%);
25 | --contrast-color: hsl(0, 0%, 80%);
26 | }
27 |
28 | body {
29 | background-color: var(--background-color);
30 | color: var(--color);
31 | }
32 |
33 | figure {
34 | margin: 0;
35 | }
36 |
37 | a {
38 | color: var(--link-color);
39 | }
40 |
41 | img {
42 | display: block;
43 | width: 100%;
44 | height: auto;
45 | }
46 |
47 | .container {
48 | display: flex;
49 | align-items: center;
50 | flex-direction: column;
51 | }
52 |
53 | .main-content {
54 | width: min(90vw, 120ch);
55 | }
56 |
57 | /* Card styles */
58 | .cardlist {
59 | border: 3px solid var(--contrast-color, black);
60 | padding: 1rem;
61 | }
62 |
63 | .cardlist__list {
64 | display: flex;
65 | gap: 1rem;
66 | margin: 0;
67 | padding: 0;
68 | list-style-type: none;
69 | }
70 |
71 | .image {
72 | border: 3px solid var(--contrast-color, black);
73 | }
74 |
75 | .image__caption {
76 | padding: 0.5rem 1rem;
77 | }
78 |
79 | /* Skeleton styles */
80 | .skeleton {
81 | --skeleton-color: hsl(0, 0%, 75%);
82 | display: grid;
83 | }
84 |
85 | .skeleton .loader,
86 | .skeleton #load,
87 | .skeleton .cardlist__list {
88 | grid-column: 1/1;
89 | grid-row: 1/1;
90 | }
91 |
92 | .skeleton .loader,
93 | .skeleton #load {
94 | z-index: 1;
95 | justify-self: center;
96 | align-self: center;
97 | }
98 |
99 | .skeleton .cardlist__list {
100 | justify-content: space-between;
101 | opacity: 50%;
102 | }
103 |
104 | .skeleton .cardlist__item {
105 | flex-grow: 1;
106 | }
107 |
108 | .skeleton .image {
109 | border-color: var(--skeleton-color);
110 | }
111 | .skeleton .image > div {
112 | width: 100%;
113 | aspect-ratio: 4/5;
114 | background: var(--skeleton-color);
115 | }
116 |
117 | .skeleton h3,
118 | .skeleton p {
119 | content: "";
120 | width: 100%;
121 | height: 1rem;
122 | background: var(--skeleton-color);
123 | }
124 |
125 | .hidden {
126 | display: none;
127 | }
128 |
--------------------------------------------------------------------------------
/02_05b/toggle.css:
--------------------------------------------------------------------------------
1 | /* Accessible toggle. Source: https://kittygiraudel.com/2021/04/05/an-accessible-toggle/ */
2 |
3 | .toggle {
4 | display: flex;
5 | flex-wrap: wrap;
6 | align-items: center;
7 | position: relative;
8 | margin-bottom: 1em;
9 | cursor: pointer;
10 | gap: 1ch;
11 | }
12 |
13 | .toggle__text {
14 | color: var(--color);
15 | }
16 | button.toggle {
17 | border: 0;
18 | padding: 0;
19 | background-color: transparent;
20 | font: inherit;
21 | }
22 |
23 | .toggle__input {
24 | position: absolute;
25 | opacity: 0;
26 | width: 100%;
27 | height: 100%;
28 | }
29 |
30 | .toggle__display {
31 | --offset: 0.25em;
32 | --diameter: 1.8em;
33 |
34 | display: inline-flex;
35 | align-items: center;
36 | justify-content: space-around;
37 | box-sizing: content-box;
38 | width: calc(var(--diameter) * 2 + var(--offset) * 2);
39 | height: calc(var(--diameter) + var(--offset) * 2);
40 | border: 0.1em solid rgb(0 0 0 / 0.2);
41 | position: relative;
42 | border-radius: 100vw;
43 | background-color: hsl(0, 0%, 100%);
44 | transition: 250ms;
45 | }
46 |
47 | .toggle__display::before {
48 | content: "";
49 | z-index: 2;
50 | position: absolute;
51 | top: 50%;
52 | left: var(--offset);
53 | box-sizing: border-box;
54 | width: var(--diameter);
55 | height: var(--diameter);
56 | border: 0.1em solid rgb(0 0 0 / 0.2);
57 | border-radius: 50%;
58 | background-color: rgb(201, 201, 201);
59 | transform: translate(0, -50%);
60 | will-change: transform;
61 | transition: inherit;
62 | }
63 |
64 | .toggle:focus .toggle__display,
65 | .toggle__input:focus + .toggle__display {
66 | outline: 1px dotted #212121;
67 | outline: 1px auto -webkit-focus-ring-color;
68 | outline-offset: 2px;
69 | }
70 |
71 | .toggle:focus,
72 | .toggle:focus:not(:focus-visible) .toggle__display,
73 | .toggle__input:focus:not(:focus-visible) + .toggle__display {
74 | outline: 0;
75 | }
76 |
77 | .toggle[aria-pressed="true"] .toggle__display,
78 | .toggle__input:checked + .toggle__display {
79 | background-color: var(--background-color);
80 | border-color: var(--contrast-color);
81 | }
82 |
83 | .toggle[aria-pressed="true"] .toggle__display::before,
84 | .toggle__input:checked + .toggle__display::before {
85 | transform: translate(100%, -50%);
86 | }
87 |
88 | .toggle[disabled] .toggle__display,
89 | .toggle__input:disabled + .toggle__display {
90 | opacity: 0.6;
91 | filter: grayscale(40%);
92 | cursor: not-allowed;
93 | }
94 |
95 | [dir="rtl"] .toggle__display::before {
96 | left: auto;
97 | right: var(--offset);
98 | }
99 |
100 | [dir="rtl"] .toggle[aria-pressed="true"] + .toggle__display::before,
101 | [dir="rtl"] .toggle__input:checked + .toggle__display::before {
102 | transform: translate(-100%, -50%);
103 | }
104 |
105 | .toggle__icon {
106 | display: inline-block;
107 | width: 1.2em;
108 | height: 1.2em;
109 | color: inherit;
110 | fill: currentcolor;
111 | vertical-align: middle;
112 | overflow: hidden;
113 | }
114 |
115 | .toggle__icon--cross {
116 | color: hsl(48, 97%, 51%);
117 | }
118 |
119 | .toggle__icon--checkmark {
120 | color: hsl(62, 100%, 93%);
121 | }
122 |
--------------------------------------------------------------------------------
/02_05e/components/Card.js:
--------------------------------------------------------------------------------
1 | const buildImage = ({
2 | urls: { full, regular, small },
3 | width,
4 | height,
5 | description,
6 | }) => {
7 | let srcset = `${full} ${width}w`;
8 | if (regular) {
9 | srcset = srcset + `, ${regular} 1080w`;
10 | }
11 | if (small) {
12 | srcset = srcset + `, ${small} 400w`;
13 | }
14 |
15 | const img = `
16 |
50 | ${buildImage(imgData)}
51 |
52 | ${description}
53 |
70 |
71 |
72 | `;
73 | };
74 |
75 | export default Card;
76 |
--------------------------------------------------------------------------------
/02_05e/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/02_05e/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid var(--contrast-color, black);
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid var(--contrast-color, black);
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/02_05e/loader.css:
--------------------------------------------------------------------------------
1 | /* Source: https://cssloaders.github.io/ */
2 | .loader {
3 | width: 48px;
4 | height: 48px;
5 | border-radius: 50%;
6 | position: relative;
7 | animation: rotate 1s linear infinite;
8 | }
9 | .loader::before {
10 | content: "";
11 | box-sizing: border-box;
12 | position: absolute;
13 | inset: 0px;
14 | border-radius: 50%;
15 | border: 5px solid hsl(0, 0%, 0%);
16 | animation: prixClipFix 2s linear infinite;
17 | }
18 |
19 | @keyframes rotate {
20 | 100% {
21 | transform: rotate(360deg);
22 | }
23 | }
24 |
25 | @keyframes prixClipFix {
26 | 0% {
27 | clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
28 | }
29 | 25% {
30 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
31 | }
32 | 50% {
33 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
34 | }
35 | 75% {
36 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
37 | }
38 | 100% {
39 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/02_05e/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Create a "loading" indicator triggered on button click.
3 | * - Use CSS to hide/show the loader.
4 | * - Create artificial delay of loading using setTimeout()
5 | * References:
6 | * - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
7 | * - https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
8 | * - https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
9 | */
10 |
11 | import data from "./data.js";
12 | import Cardlist from "./components/Cardlist.js";
13 |
14 | // Add license info to each data object.
15 | const license = {
16 | license: "Unsplash License",
17 | license_uri: "https://unsplash.com/license",
18 | };
19 | const newData = data.map((imgData) => {
20 | const newImgData = { ...imgData, ...license };
21 | return newImgData;
22 | });
23 |
24 | const mainContent = document.querySelector(".main-content");
25 | const loadButton = document.querySelector("#load");
26 | const loader = document.querySelector(".loader");
27 |
28 | loadButton.addEventListener("click", () => {
29 | loader.classList.toggle("hidden");
30 | loadButton.classList.toggle("hidden");
31 | setTimeout(() => {
32 | mainContent.innerHTML = Cardlist(newData);
33 | }, 3000);
34 | });
35 |
36 | /**
37 | * Light/dark mode feature.
38 | */
39 | const docElement = document.documentElement;
40 | const toggle = document.querySelector(".toggle");
41 |
42 | // Detect mode on load and set toggle state accordingly.
43 | const displayModeOnLoad = () => {
44 | console.log(localStorage.getItem("darkMode"));
45 | let dark = false;
46 | // Set dark to true if prefers-color-scheme is set to dark.
47 | dark = !!(
48 | window.matchMedia &&
49 | window.matchMedia("(prefers-color-scheme: dark)").matches
50 | );
51 | console.log(dark);
52 | // Set dark to true of localStorage "darkMode" is set to enabled.
53 | dark = localStorage.getItem("darkMode") === "enabled";
54 | console.log(dark);
55 |
56 | if (dark) {
57 | docElement.classList.add("dark");
58 | toggle.setAttribute("aria-pressed", "true");
59 | localStorage.setItem("darkMode", "enabled");
60 | } else {
61 | docElement.classList.add("light");
62 | toggle.removeAttribute("aria-pressed");
63 | localStorage.setItem("darkMode", "disabled");
64 | }
65 | };
66 | displayModeOnLoad();
67 |
68 | // Trigger mode change with toggle.
69 | const toggleDisplayMode = () => {
70 | if (toggle.getAttribute("aria-pressed") === "true") {
71 | toggle.removeAttribute("aria-pressed");
72 | localStorage.setItem("darkMode", "disabled");
73 | } else {
74 | toggle.setAttribute("aria-pressed", "true");
75 | localStorage.setItem("darkMode", "enabled");
76 | }
77 |
78 | docElement.classList.toggle("dark");
79 | docElement.classList.toggle("light");
80 | };
81 | toggle.addEventListener("click", () => toggleDisplayMode());
82 |
--------------------------------------------------------------------------------
/02_05e/style.css:
--------------------------------------------------------------------------------
1 | /* Default to light color scheme. Respond to manual light setting. */
2 | :root,
3 | :root.light {
4 | --background-color: white;
5 | --color: black;
6 | --link-color: inherit;
7 | --contrast-color: black;
8 | }
9 |
10 | /* Respond to user settings. */
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --background-color: hsl(0, 0%, 11%);
14 | --color: hsl(0, 0%, 80%);
15 | --link-color: hsl(219, 100%, 77%);
16 | --contrast-color: hsl(0, 0%, 80%);
17 | }
18 | }
19 |
20 | /* Respond to manual dark setting. */
21 | :root.dark {
22 | --background-color: hsl(0, 0%, 11%);
23 | --color: hsl(0, 0%, 80%);
24 | --link-color: hsl(219, 100%, 77%);
25 | --contrast-color: hsl(0, 0%, 80%);
26 | }
27 |
28 | body {
29 | background-color: var(--background-color);
30 | color: var(--color);
31 | }
32 |
33 | figure {
34 | margin: 0;
35 | }
36 |
37 | a {
38 | color: var(--link-color);
39 | }
40 |
41 | img {
42 | display: block;
43 | width: 100%;
44 | height: auto;
45 | }
46 |
47 | .container {
48 | display: flex;
49 | align-items: center;
50 | flex-direction: column;
51 | }
52 |
53 | .main-content {
54 | width: min(90vw, 120ch);
55 | }
56 |
57 | /* Card styles */
58 | .cardlist {
59 | border: 3px solid var(--contrast-color, black);
60 | padding: 1rem;
61 | }
62 |
63 | .cardlist__list {
64 | display: flex;
65 | gap: 1rem;
66 | margin: 0;
67 | padding: 0;
68 | list-style-type: none;
69 | }
70 |
71 | .image {
72 | border: 3px solid var(--contrast-color, black);
73 | }
74 |
75 | .image__caption {
76 | padding: 0.5rem 1rem;
77 | }
78 |
79 | /* Skeleton styles */
80 | .skeleton {
81 | --skeleton-color: hsl(0, 0%, 75%);
82 | display: grid;
83 | }
84 |
85 | .skeleton .loader,
86 | .skeleton #load,
87 | .skeleton .cardlist__list {
88 | grid-column: 1/1;
89 | grid-row: 1/1;
90 | }
91 |
92 | .skeleton .loader,
93 | .skeleton #load {
94 | z-index: 1;
95 | justify-self: center;
96 | align-self: center;
97 | }
98 |
99 | .skeleton .cardlist__list {
100 | justify-content: space-between;
101 | opacity: 50%;
102 | }
103 |
104 | .skeleton .cardlist__item {
105 | flex-grow: 1;
106 | }
107 |
108 | .skeleton .image {
109 | border-color: var(--skeleton-color);
110 | }
111 | .skeleton .image > div {
112 | width: 100%;
113 | aspect-ratio: 4/5;
114 | background: var(--skeleton-color);
115 | }
116 |
117 | .skeleton h3,
118 | .skeleton p {
119 | content: "";
120 | width: 100%;
121 | height: 1rem;
122 | background: var(--skeleton-color);
123 | }
124 |
125 | .hidden {
126 | display: none;
127 | }
128 |
--------------------------------------------------------------------------------
/02_05e/toggle.css:
--------------------------------------------------------------------------------
1 | /* Accessible toggle. Source: https://kittygiraudel.com/2021/04/05/an-accessible-toggle/ */
2 |
3 | .toggle {
4 | display: flex;
5 | flex-wrap: wrap;
6 | align-items: center;
7 | position: relative;
8 | margin-bottom: 1em;
9 | cursor: pointer;
10 | gap: 1ch;
11 | }
12 |
13 | .toggle__text {
14 | color: var(--color);
15 | }
16 | button.toggle {
17 | border: 0;
18 | padding: 0;
19 | background-color: transparent;
20 | font: inherit;
21 | }
22 |
23 | .toggle__input {
24 | position: absolute;
25 | opacity: 0;
26 | width: 100%;
27 | height: 100%;
28 | }
29 |
30 | .toggle__display {
31 | --offset: 0.25em;
32 | --diameter: 1.8em;
33 |
34 | display: inline-flex;
35 | align-items: center;
36 | justify-content: space-around;
37 | box-sizing: content-box;
38 | width: calc(var(--diameter) * 2 + var(--offset) * 2);
39 | height: calc(var(--diameter) + var(--offset) * 2);
40 | border: 0.1em solid rgb(0 0 0 / 0.2);
41 | position: relative;
42 | border-radius: 100vw;
43 | background-color: hsl(0, 0%, 100%);
44 | transition: 250ms;
45 | }
46 |
47 | .toggle__display::before {
48 | content: "";
49 | z-index: 2;
50 | position: absolute;
51 | top: 50%;
52 | left: var(--offset);
53 | box-sizing: border-box;
54 | width: var(--diameter);
55 | height: var(--diameter);
56 | border: 0.1em solid rgb(0 0 0 / 0.2);
57 | border-radius: 50%;
58 | background-color: rgb(201, 201, 201);
59 | transform: translate(0, -50%);
60 | will-change: transform;
61 | transition: inherit;
62 | }
63 |
64 | .toggle:focus .toggle__display,
65 | .toggle__input:focus + .toggle__display {
66 | outline: 1px dotted #212121;
67 | outline: 1px auto -webkit-focus-ring-color;
68 | outline-offset: 2px;
69 | }
70 |
71 | .toggle:focus,
72 | .toggle:focus:not(:focus-visible) .toggle__display,
73 | .toggle__input:focus:not(:focus-visible) + .toggle__display {
74 | outline: 0;
75 | }
76 |
77 | .toggle[aria-pressed="true"] .toggle__display,
78 | .toggle__input:checked + .toggle__display {
79 | background-color: var(--background-color);
80 | border-color: var(--contrast-color);
81 | }
82 |
83 | .toggle[aria-pressed="true"] .toggle__display::before,
84 | .toggle__input:checked + .toggle__display::before {
85 | transform: translate(100%, -50%);
86 | }
87 |
88 | .toggle[disabled] .toggle__display,
89 | .toggle__input:disabled + .toggle__display {
90 | opacity: 0.6;
91 | filter: grayscale(40%);
92 | cursor: not-allowed;
93 | }
94 |
95 | [dir="rtl"] .toggle__display::before {
96 | left: auto;
97 | right: var(--offset);
98 | }
99 |
100 | [dir="rtl"] .toggle[aria-pressed="true"] + .toggle__display::before,
101 | [dir="rtl"] .toggle__input:checked + .toggle__display::before {
102 | transform: translate(-100%, -50%);
103 | }
104 |
105 | .toggle__icon {
106 | display: inline-block;
107 | width: 1.2em;
108 | height: 1.2em;
109 | color: inherit;
110 | fill: currentcolor;
111 | vertical-align: middle;
112 | overflow: hidden;
113 | }
114 |
115 | .toggle__icon--cross {
116 | color: hsl(48, 97%, 51%);
117 | }
118 |
119 | .toggle__icon--checkmark {
120 | color: hsl(62, 100%, 93%);
121 | }
122 |
--------------------------------------------------------------------------------
/02_06b/components/Card.js:
--------------------------------------------------------------------------------
1 | const buildImage = ({
2 | urls: { full, regular, small },
3 | width,
4 | height,
5 | description,
6 | }) => {
7 | let srcset = `${full} ${width}w`;
8 | if (regular) {
9 | srcset = srcset + `, ${regular} 1080w`;
10 | }
11 | if (small) {
12 | srcset = srcset + `, ${small} 400w`;
13 | }
14 |
15 | const img = `
16 |
50 | ${buildImage(imgData)}
51 |
52 | ${description}
53 |
70 |
71 |
72 | `;
73 | };
74 |
75 | export default Card;
76 |
--------------------------------------------------------------------------------
/02_06b/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/02_06b/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid var(--contrast-color, black);
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid var(--contrast-color, black);
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/02_06b/loader.css:
--------------------------------------------------------------------------------
1 | /* Source: https://cssloaders.github.io/ */
2 | .loader {
3 | width: 48px;
4 | height: 48px;
5 | border-radius: 50%;
6 | position: relative;
7 | animation: rotate 1s linear infinite;
8 | }
9 | .loader::before {
10 | content: "";
11 | box-sizing: border-box;
12 | position: absolute;
13 | inset: 0px;
14 | border-radius: 50%;
15 | border: 5px solid hsl(0, 0%, 0%);
16 | animation: prixClipFix 2s linear infinite;
17 | }
18 |
19 | @keyframes rotate {
20 | 100% {
21 | transform: rotate(360deg);
22 | }
23 | }
24 |
25 | @keyframes prixClipFix {
26 | 0% {
27 | clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
28 | }
29 | 25% {
30 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
31 | }
32 | 50% {
33 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
34 | }
35 | 75% {
36 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
37 | }
38 | 100% {
39 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/02_06b/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Laxy-Load content on scroll.
3 | * References:
4 | * - https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
5 | */
6 |
7 | import data from "./data.js";
8 | import Cardlist from "./components/Cardlist.js";
9 |
10 | // Add license info to each data object.
11 | const license = {
12 | license: "Unsplash License",
13 | license_uri: "https://unsplash.com/license",
14 | };
15 | const newData = data.map((imgData) => {
16 | const newImgData = { ...imgData, ...license };
17 | return newImgData;
18 | });
19 |
20 | const mainContent = document.querySelector(".main-content");
21 | const loadButton = document.querySelector("#load");
22 | const loader = document.querySelector(".loader");
23 |
24 | loadButton.addEventListener("click", () => {
25 | loader.classList.toggle("hidden");
26 | loadButton.classList.toggle("hidden");
27 | setTimeout(() => {
28 | mainContent.innerHTML = Cardlist(newData);
29 | }, 3000);
30 | });
31 |
32 | /**
33 | * Light/dark mode feature.
34 | */
35 | const docElement = document.documentElement;
36 | const toggle = document.querySelector(".toggle");
37 |
38 | // Detect mode on load and set toggle state accordingly.
39 | const displayModeOnLoad = () => {
40 | console.log(localStorage.getItem("darkMode"));
41 | let dark = false;
42 | // Set dark to true if prefers-color-scheme is set to dark.
43 | dark = !!(
44 | window.matchMedia &&
45 | window.matchMedia("(prefers-color-scheme: dark)").matches
46 | );
47 | console.log(dark);
48 | // Set dark to true of localStorage "darkMode" is set to enabled.
49 | dark = localStorage.getItem("darkMode") === "enabled";
50 | console.log(dark);
51 |
52 | if (dark) {
53 | docElement.classList.add("dark");
54 | toggle.setAttribute("aria-pressed", "true");
55 | localStorage.setItem("darkMode", "enabled");
56 | } else {
57 | docElement.classList.add("light");
58 | toggle.removeAttribute("aria-pressed");
59 | localStorage.setItem("darkMode", "disabled");
60 | }
61 | };
62 | displayModeOnLoad();
63 |
64 | // Trigger mode change with toggle.
65 | const toggleDisplayMode = () => {
66 | if (toggle.getAttribute("aria-pressed") === "true") {
67 | toggle.removeAttribute("aria-pressed");
68 | localStorage.setItem("darkMode", "disabled");
69 | } else {
70 | toggle.setAttribute("aria-pressed", "true");
71 | localStorage.setItem("darkMode", "enabled");
72 | }
73 |
74 | docElement.classList.toggle("dark");
75 | docElement.classList.toggle("light");
76 | };
77 | toggle.addEventListener("click", () => toggleDisplayMode());
78 |
--------------------------------------------------------------------------------
/02_06b/style.css:
--------------------------------------------------------------------------------
1 | /* Default to light color scheme. Respond to manual light setting. */
2 | :root,
3 | :root.light {
4 | --background-color: white;
5 | --color: black;
6 | --link-color: inherit;
7 | --contrast-color: black;
8 | }
9 |
10 | /* Respond to user settings. */
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --background-color: hsl(0, 0%, 11%);
14 | --color: hsl(0, 0%, 80%);
15 | --link-color: hsl(219, 100%, 77%);
16 | --contrast-color: hsl(0, 0%, 80%);
17 | }
18 | }
19 |
20 | /* Respond to manual dark setting. */
21 | :root.dark {
22 | --background-color: hsl(0, 0%, 11%);
23 | --color: hsl(0, 0%, 80%);
24 | --link-color: hsl(219, 100%, 77%);
25 | --contrast-color: hsl(0, 0%, 80%);
26 | }
27 |
28 | body {
29 | background-color: var(--background-color);
30 | color: var(--color);
31 | }
32 |
33 | figure {
34 | margin: 0;
35 | }
36 |
37 | a {
38 | color: var(--link-color);
39 | }
40 |
41 | img {
42 | display: block;
43 | width: 100%;
44 | height: auto;
45 | }
46 |
47 | .container {
48 | display: flex;
49 | align-items: center;
50 | flex-direction: column;
51 | }
52 |
53 | .main-content {
54 | width: min(90vw, 120ch);
55 | margin-block-end: 5rem;
56 | }
57 |
58 | .filler {
59 | display: flex;
60 | flex-direction: column;
61 | justify-content: center;
62 | align-items: center;
63 | height: 100vh;
64 | font-size: 5rem;
65 | }
66 |
67 | /* Card styles */
68 | .cardlist {
69 | border: 3px solid var(--contrast-color, black);
70 | padding: 1rem;
71 | }
72 |
73 | .cardlist__list {
74 | display: flex;
75 | gap: 1rem;
76 | margin: 0;
77 | padding: 0;
78 | list-style-type: none;
79 | }
80 |
81 | .image {
82 | border: 3px solid var(--contrast-color, black);
83 | }
84 |
85 | .image__caption {
86 | padding: 0.5rem 1rem;
87 | }
88 |
89 | /* Skeleton styles */
90 | .skeleton {
91 | --skeleton-color: hsl(0, 0%, 75%);
92 | display: grid;
93 | }
94 |
95 | .skeleton .loader,
96 | .skeleton #load,
97 | .skeleton .cardlist__list {
98 | grid-column: 1/1;
99 | grid-row: 1/1;
100 | }
101 |
102 | .skeleton .loader,
103 | .skeleton #load {
104 | z-index: 1;
105 | justify-self: center;
106 | align-self: center;
107 | }
108 |
109 | .skeleton .cardlist__list {
110 | justify-content: space-between;
111 | opacity: 50%;
112 | }
113 |
114 | .skeleton .cardlist__item {
115 | flex-grow: 1;
116 | }
117 |
118 | .skeleton .image {
119 | border-color: var(--skeleton-color);
120 | }
121 | .skeleton .image > div {
122 | width: 100%;
123 | aspect-ratio: 4/5;
124 | background: var(--skeleton-color);
125 | }
126 |
127 | .skeleton h3,
128 | .skeleton p {
129 | content: "";
130 | width: 100%;
131 | height: 1rem;
132 | background: var(--skeleton-color);
133 | }
134 |
135 | .hidden {
136 | display: none;
137 | }
138 |
--------------------------------------------------------------------------------
/02_06b/toggle.css:
--------------------------------------------------------------------------------
1 | /* Accessible toggle. Source: https://kittygiraudel.com/2021/04/05/an-accessible-toggle/ */
2 |
3 | .toggle {
4 | display: flex;
5 | flex-wrap: wrap;
6 | align-items: center;
7 | position: relative;
8 | margin-bottom: 1em;
9 | cursor: pointer;
10 | gap: 1ch;
11 | }
12 |
13 | .toggle__text {
14 | color: var(--color);
15 | }
16 | button.toggle {
17 | border: 0;
18 | padding: 0;
19 | background-color: transparent;
20 | font: inherit;
21 | }
22 |
23 | .toggle__input {
24 | position: absolute;
25 | opacity: 0;
26 | width: 100%;
27 | height: 100%;
28 | }
29 |
30 | .toggle__display {
31 | --offset: 0.25em;
32 | --diameter: 1.8em;
33 |
34 | display: inline-flex;
35 | align-items: center;
36 | justify-content: space-around;
37 | box-sizing: content-box;
38 | width: calc(var(--diameter) * 2 + var(--offset) * 2);
39 | height: calc(var(--diameter) + var(--offset) * 2);
40 | border: 0.1em solid rgb(0 0 0 / 0.2);
41 | position: relative;
42 | border-radius: 100vw;
43 | background-color: hsl(0, 0%, 100%);
44 | transition: 250ms;
45 | }
46 |
47 | .toggle__display::before {
48 | content: "";
49 | z-index: 2;
50 | position: absolute;
51 | top: 50%;
52 | left: var(--offset);
53 | box-sizing: border-box;
54 | width: var(--diameter);
55 | height: var(--diameter);
56 | border: 0.1em solid rgb(0 0 0 / 0.2);
57 | border-radius: 50%;
58 | background-color: rgb(201, 201, 201);
59 | transform: translate(0, -50%);
60 | will-change: transform;
61 | transition: inherit;
62 | }
63 |
64 | .toggle:focus .toggle__display,
65 | .toggle__input:focus + .toggle__display {
66 | outline: 1px dotted #212121;
67 | outline: 1px auto -webkit-focus-ring-color;
68 | outline-offset: 2px;
69 | }
70 |
71 | .toggle:focus,
72 | .toggle:focus:not(:focus-visible) .toggle__display,
73 | .toggle__input:focus:not(:focus-visible) + .toggle__display {
74 | outline: 0;
75 | }
76 |
77 | .toggle[aria-pressed="true"] .toggle__display,
78 | .toggle__input:checked + .toggle__display {
79 | background-color: var(--background-color);
80 | border-color: var(--contrast-color);
81 | }
82 |
83 | .toggle[aria-pressed="true"] .toggle__display::before,
84 | .toggle__input:checked + .toggle__display::before {
85 | transform: translate(100%, -50%);
86 | }
87 |
88 | .toggle[disabled] .toggle__display,
89 | .toggle__input:disabled + .toggle__display {
90 | opacity: 0.6;
91 | filter: grayscale(40%);
92 | cursor: not-allowed;
93 | }
94 |
95 | [dir="rtl"] .toggle__display::before {
96 | left: auto;
97 | right: var(--offset);
98 | }
99 |
100 | [dir="rtl"] .toggle[aria-pressed="true"] + .toggle__display::before,
101 | [dir="rtl"] .toggle__input:checked + .toggle__display::before {
102 | transform: translate(-100%, -50%);
103 | }
104 |
105 | .toggle__icon {
106 | display: inline-block;
107 | width: 1.2em;
108 | height: 1.2em;
109 | color: inherit;
110 | fill: currentcolor;
111 | vertical-align: middle;
112 | overflow: hidden;
113 | }
114 |
115 | .toggle__icon--cross {
116 | color: hsl(48, 97%, 51%);
117 | }
118 |
119 | .toggle__icon--checkmark {
120 | color: hsl(62, 100%, 93%);
121 | }
122 |
--------------------------------------------------------------------------------
/02_06e/components/Card.js:
--------------------------------------------------------------------------------
1 | const buildImage = ({
2 | urls: { full, regular, small },
3 | width,
4 | height,
5 | description,
6 | }) => {
7 | let srcset = `${full} ${width}w`;
8 | if (regular) {
9 | srcset = srcset + `, ${regular} 1080w`;
10 | }
11 | if (small) {
12 | srcset = srcset + `, ${small} 400w`;
13 | }
14 |
15 | const img = `
16 |
50 | ${buildImage(imgData)}
51 |
52 | ${description}
53 |
70 |
71 |
72 | `;
73 | };
74 |
75 | export default Card;
76 |
--------------------------------------------------------------------------------
/02_06e/components/Cardlist.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 |
3 | const cardListItem = (imgData) => {
4 | return `
5 | ${Card(imgData)}
6 | `;
7 | };
8 |
9 | const Cardlist = (data) => {
10 | return `
11 |
13 |
14 | ${data.map((imgData) => cardListItem(imgData)).join("")}
15 |
16 |
17 | `;
18 | };
19 |
20 | export default Cardlist;
21 |
--------------------------------------------------------------------------------
/02_06e/components/cardlist.css:
--------------------------------------------------------------------------------
1 | .cardlist {
2 | border: 3px solid var(--contrast-color, black);
3 | padding: 1rem;
4 | }
5 |
6 | .cardlist__list {
7 | display: flex;
8 | gap: 1rem;
9 | margin: 0;
10 | padding: 0;
11 | list-style-type: none;
12 | }
13 |
14 | .image {
15 | border: 3px solid var(--contrast-color, black);
16 | }
17 |
18 | .image__caption {
19 | padding: 0.5rem 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/02_06e/loader.css:
--------------------------------------------------------------------------------
1 | /* Source: https://cssloaders.github.io/ */
2 | .loader {
3 | width: 48px;
4 | height: 48px;
5 | border-radius: 50%;
6 | position: relative;
7 | animation: rotate 1s linear infinite;
8 | }
9 | .loader::before {
10 | content: "";
11 | box-sizing: border-box;
12 | position: absolute;
13 | inset: 0px;
14 | border-radius: 50%;
15 | border: 5px solid hsl(0, 0%, 0%);
16 | animation: prixClipFix 2s linear infinite;
17 | }
18 |
19 | @keyframes rotate {
20 | 100% {
21 | transform: rotate(360deg);
22 | }
23 | }
24 |
25 | @keyframes prixClipFix {
26 | 0% {
27 | clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
28 | }
29 | 25% {
30 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
31 | }
32 | 50% {
33 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
34 | }
35 | 75% {
36 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
37 | }
38 | 100% {
39 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/02_06e/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Laxy-Load content on scroll.
3 | * References:
4 | * - https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
5 | */
6 |
7 | import data from "./data.js";
8 | import Cardlist from "./components/Cardlist.js";
9 |
10 | // Add license info to each data object.
11 | const license = {
12 | license: "Unsplash License",
13 | license_uri: "https://unsplash.com/license",
14 | };
15 | const newData = data.map((imgData) => {
16 | const newImgData = { ...imgData, ...license };
17 | return newImgData;
18 | });
19 |
20 | const mainContent = document.querySelector(".main-content");
21 | const loadButton = document.querySelector("#load");
22 | const loader = document.querySelector(".loader");
23 | const target = document.querySelector(".cardlist");
24 |
25 | const loadCards = (entries) => {
26 | console.log(entries);
27 | console.log("intersection");
28 | entries.forEach(function (entry) {
29 | if (entry.isIntersecting) {
30 | loader.classList.toggle("hidden");
31 | loadButton.classList.toggle("hidden");
32 | setTimeout(() => {
33 | mainContent.innerHTML = Cardlist(newData);
34 | }, 3000);
35 | }
36 | });
37 | };
38 |
39 | // Intersection observer
40 |
41 | const observer = new IntersectionObserver(loadCards);
42 |
43 | observer.observe(target);
44 |
45 | /**
46 | * Light/dark mode feature.
47 | */
48 | const docElement = document.documentElement;
49 | const toggle = document.querySelector(".toggle");
50 |
51 | // Detect mode on load and set toggle state accordingly.
52 | const displayModeOnLoad = () => {
53 | console.log(localStorage.getItem("darkMode"));
54 | let dark = false;
55 | // Set dark to true if prefers-color-scheme is set to dark.
56 | dark = !!(
57 | window.matchMedia &&
58 | window.matchMedia("(prefers-color-scheme: dark)").matches
59 | );
60 | console.log(dark);
61 | // Set dark to true of localStorage "darkMode" is set to enabled.
62 | dark = localStorage.getItem("darkMode") === "enabled";
63 | console.log(dark);
64 |
65 | if (dark) {
66 | docElement.classList.add("dark");
67 | toggle.setAttribute("aria-pressed", "true");
68 | localStorage.setItem("darkMode", "enabled");
69 | } else {
70 | docElement.classList.add("light");
71 | toggle.removeAttribute("aria-pressed");
72 | localStorage.setItem("darkMode", "disabled");
73 | }
74 | };
75 | displayModeOnLoad();
76 |
77 | // Trigger mode change with toggle.
78 | const toggleDisplayMode = () => {
79 | if (toggle.getAttribute("aria-pressed") === "true") {
80 | toggle.removeAttribute("aria-pressed");
81 | localStorage.setItem("darkMode", "disabled");
82 | } else {
83 | toggle.setAttribute("aria-pressed", "true");
84 | localStorage.setItem("darkMode", "enabled");
85 | }
86 |
87 | docElement.classList.toggle("dark");
88 | docElement.classList.toggle("light");
89 | };
90 | toggle.addEventListener("click", () => toggleDisplayMode());
91 |
--------------------------------------------------------------------------------
/02_06e/style.css:
--------------------------------------------------------------------------------
1 | /* Default to light color scheme. Respond to manual light setting. */
2 | :root,
3 | :root.light {
4 | --background-color: white;
5 | --color: black;
6 | --link-color: inherit;
7 | --contrast-color: black;
8 | }
9 |
10 | /* Respond to user settings. */
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --background-color: hsl(0, 0%, 11%);
14 | --color: hsl(0, 0%, 80%);
15 | --link-color: hsl(219, 100%, 77%);
16 | --contrast-color: hsl(0, 0%, 80%);
17 | }
18 | }
19 |
20 | /* Respond to manual dark setting. */
21 | :root.dark {
22 | --background-color: hsl(0, 0%, 11%);
23 | --color: hsl(0, 0%, 80%);
24 | --link-color: hsl(219, 100%, 77%);
25 | --contrast-color: hsl(0, 0%, 80%);
26 | }
27 |
28 | body {
29 | background-color: var(--background-color);
30 | color: var(--color);
31 | }
32 |
33 | figure {
34 | margin: 0;
35 | }
36 |
37 | a {
38 | color: var(--link-color);
39 | }
40 |
41 | img {
42 | display: block;
43 | width: 100%;
44 | height: auto;
45 | }
46 |
47 | .container {
48 | display: flex;
49 | align-items: center;
50 | flex-direction: column;
51 | }
52 |
53 | .main-content {
54 | width: min(90vw, 120ch);
55 | margin-block-end: 5rem;
56 | }
57 |
58 | .filler {
59 | display: flex;
60 | flex-direction: column;
61 | justify-content: center;
62 | align-items: center;
63 | height: 100vh;
64 | font-size: 5rem;
65 | }
66 |
67 | /* Card styles */
68 | .cardlist {
69 | border: 3px solid var(--contrast-color, black);
70 | padding: 1rem;
71 | }
72 |
73 | .cardlist__list {
74 | display: flex;
75 | gap: 1rem;
76 | margin: 0;
77 | padding: 0;
78 | list-style-type: none;
79 | }
80 |
81 | .image {
82 | border: 3px solid var(--contrast-color, black);
83 | }
84 |
85 | .image__caption {
86 | padding: 0.5rem 1rem;
87 | }
88 |
89 | /* Skeleton styles */
90 | .skeleton {
91 | --skeleton-color: hsl(0, 0%, 75%);
92 | display: grid;
93 | }
94 |
95 | .skeleton .loader,
96 | .skeleton #load,
97 | .skeleton .cardlist__list {
98 | grid-column: 1/1;
99 | grid-row: 1/1;
100 | }
101 |
102 | .skeleton .loader,
103 | .skeleton #load {
104 | z-index: 1;
105 | justify-self: center;
106 | align-self: center;
107 | }
108 |
109 | .skeleton .cardlist__list {
110 | justify-content: space-between;
111 | opacity: 50%;
112 | }
113 |
114 | .skeleton .cardlist__item {
115 | flex-grow: 1;
116 | }
117 |
118 | .skeleton .image {
119 | border-color: var(--skeleton-color);
120 | }
121 | .skeleton .image > div {
122 | width: 100%;
123 | aspect-ratio: 4/5;
124 | background: var(--skeleton-color);
125 | }
126 |
127 | .skeleton h3,
128 | .skeleton p {
129 | content: "";
130 | width: 100%;
131 | height: 1rem;
132 | background: var(--skeleton-color);
133 | }
134 |
135 | .hidden {
136 | display: none;
137 | }
138 |
--------------------------------------------------------------------------------
/02_06e/toggle.css:
--------------------------------------------------------------------------------
1 | /* Accessible toggle. Source: https://kittygiraudel.com/2021/04/05/an-accessible-toggle/ */
2 |
3 | .toggle {
4 | display: flex;
5 | flex-wrap: wrap;
6 | align-items: center;
7 | position: relative;
8 | margin-bottom: 1em;
9 | cursor: pointer;
10 | gap: 1ch;
11 | }
12 |
13 | .toggle__text {
14 | color: var(--color);
15 | }
16 | button.toggle {
17 | border: 0;
18 | padding: 0;
19 | background-color: transparent;
20 | font: inherit;
21 | }
22 |
23 | .toggle__input {
24 | position: absolute;
25 | opacity: 0;
26 | width: 100%;
27 | height: 100%;
28 | }
29 |
30 | .toggle__display {
31 | --offset: 0.25em;
32 | --diameter: 1.8em;
33 |
34 | display: inline-flex;
35 | align-items: center;
36 | justify-content: space-around;
37 | box-sizing: content-box;
38 | width: calc(var(--diameter) * 2 + var(--offset) * 2);
39 | height: calc(var(--diameter) + var(--offset) * 2);
40 | border: 0.1em solid rgb(0 0 0 / 0.2);
41 | position: relative;
42 | border-radius: 100vw;
43 | background-color: hsl(0, 0%, 100%);
44 | transition: 250ms;
45 | }
46 |
47 | .toggle__display::before {
48 | content: "";
49 | z-index: 2;
50 | position: absolute;
51 | top: 50%;
52 | left: var(--offset);
53 | box-sizing: border-box;
54 | width: var(--diameter);
55 | height: var(--diameter);
56 | border: 0.1em solid rgb(0 0 0 / 0.2);
57 | border-radius: 50%;
58 | background-color: rgb(201, 201, 201);
59 | transform: translate(0, -50%);
60 | will-change: transform;
61 | transition: inherit;
62 | }
63 |
64 | .toggle:focus .toggle__display,
65 | .toggle__input:focus + .toggle__display {
66 | outline: 1px dotted #212121;
67 | outline: 1px auto -webkit-focus-ring-color;
68 | outline-offset: 2px;
69 | }
70 |
71 | .toggle:focus,
72 | .toggle:focus:not(:focus-visible) .toggle__display,
73 | .toggle__input:focus:not(:focus-visible) + .toggle__display {
74 | outline: 0;
75 | }
76 |
77 | .toggle[aria-pressed="true"] .toggle__display,
78 | .toggle__input:checked + .toggle__display {
79 | background-color: var(--background-color);
80 | border-color: var(--contrast-color);
81 | }
82 |
83 | .toggle[aria-pressed="true"] .toggle__display::before,
84 | .toggle__input:checked + .toggle__display::before {
85 | transform: translate(100%, -50%);
86 | }
87 |
88 | .toggle[disabled] .toggle__display,
89 | .toggle__input:disabled + .toggle__display {
90 | opacity: 0.6;
91 | filter: grayscale(40%);
92 | cursor: not-allowed;
93 | }
94 |
95 | [dir="rtl"] .toggle__display::before {
96 | left: auto;
97 | right: var(--offset);
98 | }
99 |
100 | [dir="rtl"] .toggle[aria-pressed="true"] + .toggle__display::before,
101 | [dir="rtl"] .toggle__input:checked + .toggle__display::before {
102 | transform: translate(-100%, -50%);
103 | }
104 |
105 | .toggle__icon {
106 | display: inline-block;
107 | width: 1.2em;
108 | height: 1.2em;
109 | color: inherit;
110 | fill: currentcolor;
111 | vertical-align: middle;
112 | overflow: hidden;
113 | }
114 |
115 | .toggle__icon--cross {
116 | color: hsl(48, 97%, 51%);
117 | }
118 |
119 | .toggle__icon--checkmark {
120 | color: hsl(62, 100%, 93%);
121 | }
122 |
--------------------------------------------------------------------------------
/03_02b/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Current Weather
9 |
10 |
11 |
12 |
13 | Temperature: N/A K
14 | Wind speed: N/A m/s
15 | Wind direction: N/A degrees
16 |
17 |
Current Weather
9 |
10 |
11 |
12 |
13 | Temperature: N/A K
14 | Wind speed: N/A m/s
15 | Wind direction: N/A degrees
16 |
17 |
4 |
9 |
10 | ${
11 | data.main.temp
12 | } °C
13 |
14 |
15 |
16 | ${
17 | data.wind.speed
18 | } m/s
19 |
20 |
23 | ${data.wind.deg}
24 |
25 |
27 | `;
28 | };
29 |
30 | export default weatherCard;
31 |
--------------------------------------------------------------------------------
/03_03b/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Current Weather
10 |
11 |
12 |
13 |
Current Weather
14 |
15 |
16 |
18 |
21 |
22 | -- °C
23 |
24 |
25 |
26 | -- m/s
27 |
28 |
30 |
31 |
14 |
19 |
20 | ${tempTranslator(data.main.temp).c.toFixed(
21 | 1
22 | )} °C
23 |
24 |
25 |
26 | ${
27 | data.wind.speed
28 | } m/s
29 |
30 |
33 | ${data.wind.deg}
34 |
35 |
37 | `;
38 | };
39 |
40 | export default weatherCard;
41 |
--------------------------------------------------------------------------------
/03_03e/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Current Weather
10 |
11 |
12 |
13 |
Current Weather
14 |
15 |
16 |
18 |
21 |
22 | -- °C
23 |
24 |
25 |
26 | -- m/s
27 |
28 |
30 |
31 |
29 |
34 |
35 | ${
36 | tempTranslator(data.main.temp).c.toFixed(1)
37 | } °C
38 |
39 |
40 |
41 | ${
42 | data.wind.speed
43 | } m/s
44 |
45 |
48 | ${data.wind.deg}
49 |
50 |
52 | `;
53 | };
54 |
55 | export default weatherCard;
56 |
--------------------------------------------------------------------------------
/03_04b/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Current Weather
10 |
11 |
12 |
13 |
Current Weather
14 |
15 |
16 |
18 |
21 |
22 | -- °C
23 |
24 |
25 |
26 | -- m/s
27 |
28 |
Change units
30 |
31 |
32 |
49 |
54 |
55 | ${tempTranslator(
56 | data.main.temp,
57 | units
58 | ).value.toFixed(1)} ${
59 | tempTranslator(data.main.temp, units).unit
60 | }
61 |
62 |
63 |
64 | ${speedTranslator(
65 | data.wind.speed,
66 | units
67 | ).value.toFixed(1)} ${
68 | speedTranslator(data.wind.speed, units).unit
69 | }
70 |
71 |
74 | ${data.wind.deg}
75 |
76 |
Change units
78 |
79 | `;
80 | };
81 |
82 | export default weatherCard;
83 |
--------------------------------------------------------------------------------
/03_04e/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Current Weather
10 |
11 |
12 |
13 |
Current Weather
14 |
15 |
16 |
18 |
21 |
22 | -- °C
23 |
24 |
25 |
26 | -- m/s
27 |
28 |
Change units
30 |
31 |
32 |
49 |
54 |
55 | ${tempTranslator(
56 | data.main.temp,
57 | units
58 | ).value.toFixed(1)} ${
59 | tempTranslator(data.main.temp, units).unit
60 | }
61 |
62 |
63 |
64 | ${speedTranslator(
65 | data.wind.speed,
66 | units
67 | ).value.toFixed(1)} ${
68 | speedTranslator(data.wind.speed, units).unit
69 | }
70 |
71 |
74 | ${data.wind.deg}
75 |
76 |
Change units
78 |
79 | `;
80 | };
81 |
82 | export default weatherCard;
83 |
--------------------------------------------------------------------------------
/03_05b/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Current Weather
10 |
11 |
12 |
13 |
Current Weather
14 |
15 |
38 |
39 |
40 |
41 |
43 |
46 |
47 | -- °C
48 |
49 |
50 |
51 | -- m/s
52 |
53 |
Change units
55 |
56 |
57 |
49 |
54 |
55 | ${tempTranslator(
56 | data.main.temp,
57 | units
58 | ).value.toFixed(1)} ${
59 | tempTranslator(data.main.temp, units).unit
60 | }
61 |
62 |
63 |
64 | ${speedTranslator(
65 | data.wind.speed,
66 | units
67 | ).value.toFixed(1)} ${
68 | speedTranslator(data.wind.speed, units).unit
69 | }
70 |
71 |
74 | ${data.wind.deg}
75 |
76 |
Change units
78 |
79 | `;
80 | };
81 |
82 | export default weatherCard;
83 |
--------------------------------------------------------------------------------
/03_05e/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Current Weather
10 |
11 |
12 |
13 |
Current Weather
14 |
15 |
38 |
39 |
40 |
41 |
43 |
46 |
47 | -- °C
48 |
49 |
50 |
51 | -- m/s
52 |
53 |
Change units
55 |
56 |
57 |