├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.js
├── Content.js
├── Footer.js
├── Header.js
├── index.css
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # "React JS - React Lists and Keys"
2 |
3 | ✅ [Check out my YouTube Channel with all of my tutorials](https://www.youtube.com/DaveGrayTeachesCode).
4 |
5 | **Description:**
6 |
7 | This repository shares the styles applied during the Youtube tutorial. The tutorial is part of a [Learn React Playlist](https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp) on my channel.
8 |
9 | [YouTube Tutorial](https://youtu.be/Fcj6DQT3nVA) for this repository.
10 |
11 | I suggest completing my [8 hour JavaScript course tutorial video](https://youtu.be/EfAl9bwzVZk) if you are new to Javascript.
12 |
13 | ### Academic Honesty
14 |
15 | **DO NOT COPY FOR AN ASSIGNMENT** - Avoid plagiargism and adhere to the spirit of this [Academic Honesty Policy](https://www.freecodecamp.org/news/academic-honesty-policy/).
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "07tut",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.14.1",
7 | "@testing-library/react": "^11.2.7",
8 | "@testing-library/user-event": "^12.8.3",
9 | "react": "^17.0.2",
10 | "react-dom": "^17.0.2",
11 | "react-icons": "^4.2.0",
12 | "react-scripts": "4.0.3",
13 | "web-vitals": "^1.1.2"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": [
23 | "react-app",
24 | "react-app/jest"
25 | ]
26 | },
27 | "browserslist": {
28 | "production": [
29 | ">0.2%",
30 | "not dead",
31 | "not op_mini all"
32 | ],
33 | "development": [
34 | "last 1 chrome version",
35 | "last 1 firefox version",
36 | "last 1 safari version"
37 | ]
38 | },
39 | "devDependencies": {}
40 | }
41 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitdagray/react_lists_keys/1d358d5024937f2f7bde4025442869055857d8f4/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitdagray/react_lists_keys/1d358d5024937f2f7bde4025442869055857d8f4/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitdagray/react_lists_keys/1d358d5024937f2f7bde4025442869055857d8f4/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import Header from './Header';
2 | import Content from './Content';
3 | import Footer from './Footer';
4 |
5 | function App() {
6 |
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/Content.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { FaTrashAlt } from 'react-icons/fa';
3 |
4 | const Content = () => {
5 | const [items, setItems] = useState([
6 | {
7 | id: 1,
8 | checked: true,
9 | item: "One half pound bag of Cocoa Covered Almonds Unsalted"
10 | },
11 | {
12 | id: 2,
13 | checked: false,
14 | item: "Item 2"
15 | },
16 | {
17 | id: 3,
18 | checked: false,
19 | item: "Item 3"
20 | }
21 | ]);
22 |
23 | const handleCheck = (id) => {
24 | const listItems = items.map((item) => item.id === id ? { ...item, checked: !item.checked } : item);
25 | setItems(listItems);
26 | localStorage.setItem('shoppinglist', JSON.stringify(listItems));
27 | }
28 |
29 | const handleDelete = (id) => {
30 | const listItems = items.filter((item) => item.id !== id);
31 | setItems(listItems);
32 | localStorage.setItem('shoppinglist', JSON.stringify(listItems));
33 | }
34 |
35 | return (
36 |
37 | {items.length ? (
38 |
58 | ) : (
59 | Your list is empty.
60 | )}
61 |
62 | )
63 | }
64 |
65 | export default Content
66 |
--------------------------------------------------------------------------------
/src/Footer.js:
--------------------------------------------------------------------------------
1 | const Footer = () => {
2 | const today = new Date();
3 |
4 | return (
5 |
8 | )
9 | }
10 |
11 | export default Footer
12 |
--------------------------------------------------------------------------------
/src/Header.js:
--------------------------------------------------------------------------------
1 | const Header = () => {
2 |
3 | return (
4 |
7 | )
8 | }
9 |
10 | export default Header;
11 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | html {
8 | font-size: 22px;
9 | }
10 |
11 | body {
12 | min-height: 100vh;
13 | font-family: 'Roboto', 'Oxygen',
14 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
15 | sans-serif;
16 | -webkit-font-smoothing: antialiased;
17 | -moz-osx-font-smoothing: grayscale;
18 | }
19 |
20 | .App {
21 | display: flex;
22 | flex-direction: column;
23 | justify-content: center;
24 | align-items: center;
25 | height: 100vh;
26 | width: 100%;
27 | max-width: 500px;
28 | border: 1px solid mediumblue;
29 | margin: auto;
30 | }
31 |
32 | header {
33 | width: 100%;
34 | padding: 0 0.25em;
35 | background-color: mediumblue;
36 | color: aliceblue;
37 | display: flex;
38 | justify-content: space-between;
39 | align-items: center;
40 | }
41 |
42 | main {
43 | width: 100%;
44 | display: flex;
45 | flex-direction: column;
46 | flex-grow: 1;
47 | justify-content: center;
48 | align-items: center;
49 | overflow-y: auto;
50 | }
51 |
52 | footer {
53 | width: 100%;
54 | padding: 0.25em;
55 | background-color: mediumblue;
56 | color: aliceblue;
57 | display: grid;
58 | place-content: center;
59 | }
60 |
61 | ul {
62 | width: 100%;
63 | list-style: none;
64 | padding: 0 0.25rem 0.25rem;
65 | }
66 |
67 | ul li::before {
68 | content: "\200B";
69 | }
70 |
71 | .item {
72 | display: flex;
73 | justify-content: flex-start;
74 | align-items: center;
75 | padding: 0.5rem 0 0.5rem 0.5rem;
76 | margin: 0.25rem 0;
77 | background-color: #eee;
78 | }
79 |
80 | .item:first-child {
81 | margin: 0;
82 | }
83 |
84 | .item input[type="checkbox"] {
85 | text-align: center;
86 | width: 2.5rem;
87 | width: 48px;
88 | min-width: 48px;
89 | height: 2.5rem;
90 | height: 48px;
91 | min-height: 48px;
92 | cursor: pointer;
93 | margin-right: 0.5rem;
94 | }
95 |
96 | .item input[type="checkbox"]:focus + label {
97 | text-decoration: underline;
98 | }
99 |
100 | .item > label {
101 | font-size: 0.75rem;
102 | flex-grow: 1;
103 | }
104 |
105 | .item svg {
106 | width: 48px;
107 | min-width: 48px;
108 | height: 36px;
109 | font-size: 1rem;
110 | color: steelblue;
111 | cursor: pointer;
112 | }
113 |
114 | .item svg:focus,
115 | .item svg:hover {
116 | color: red;
117 | outline: none;
118 | }
119 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById('root')
11 | );
12 |
13 |
--------------------------------------------------------------------------------