Skip to content

Commit 59d40db

Browse files
cheatsheet1999cheatsheet1999
authored
Add files via upload
1 parent 93b98a6 commit 59d40db

File tree

7 files changed

+194
-0
lines changed

7 files changed

+194
-0
lines changed

‎React-Day/Intermediate/03. Display a to-do list with togglable subtasks/package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "display-a-to-do-list-with-togglable-subtasks",
3+
"version": "1.0.0",
4+
"description": "",
5+
"keywords": [],
6+
"main": "src/index.js",
7+
"dependencies": {
8+
"react": "18.2.0",
9+
"react-dom": "18.2.0",
10+
"react-scripts": "4.0.0"
11+
},
12+
"devDependencies": {
13+
"@babel/runtime": "7.13.8",
14+
"typescript": "4.1.3"
15+
},
16+
"scripts": {
17+
"start": "react-scripts start",
18+
"build": "react-scripts build",
19+
"test": "react-scripts test --env=jsdom",
20+
"eject": "react-scripts eject"
21+
},
22+
"browserslist": [
23+
">0.2%",
24+
"not dead",
25+
"not ie <= 11",
26+
"not op_mini all"
27+
]
28+
}

‎React-Day/Intermediate/03. Display a to-do list with togglable subtasks/public/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
15+
Notice the use of %PUBLIC_URL% in the tags above.
16+
It will be replaced with the URL of the `public` folder during the build.
17+
Only files inside the `public` folder can be referenced from the HTML.
18+
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
23+
<title>React App</title>
24+
</head>
25+
26+
<body>
27+
<noscript>
28+
You need to enable JavaScript to run this app.
29+
</noscript>
30+
<div id="root"></div>
31+
<!--
32+
This HTML file is a template.
33+
If you open it directly in the browser, you will see an empty page.
34+
35+
You can add webfonts, meta tags, or analytics to this file.
36+
The build step will place the bundled scripts into the <body> tag.
37+
38+
To begin the development, run `npm start` or `yarn start`.
39+
To create a production bundle, use `npm run build` or `yarn build`.
40+
-->
41+
</body>
42+
43+
</html>

‎React-Day/Intermediate/03. Display a to-do list with togglable subtasks/src/App.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import CheckList from "./components/CheckList";
2+
3+
export default function App() {
4+
const INITIAL_LIST = {
5+
"Organize closet": [
6+
{ "Donate old clothes and shoes": false },
7+
{ "Buy new shelf": false },
8+
{ "Put in shelf by color": false }
9+
],
10+
"Finish homework": [
11+
{ "Finish math homework": false },
12+
{ "Finish science homework": false },
13+
{ "Finish Reactjs homework": false }
14+
],
15+
"Achieve nirvana": [
16+
{ "Meditate a little": false },
17+
{ "Gain some wisdom": false }
18+
]
19+
};
20+
21+
return (
22+
<div className="App">
23+
<CheckList INITIAL_LIST={INITIAL_LIST} />
24+
</div>
25+
);
26+
}

‎React-Day/Intermediate/03. Display a to-do list with togglable subtasks/src/components/CheckList.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { useState } from "react";
2+
import DisplaySubTasks from "./DisplaySubtasks";
3+
4+
const CheckList = ({ INITIAL_LIST }) => {
5+
const [list, setList] = useState(INITIAL_LIST);
6+
7+
const handleOnClickComplete = (topTask, taskText, index) => {
8+
let new_list = { ...list };
9+
new_list[topTask][index][taskText] = !new_list[topTask][index][taskText];
10+
setList(new_list);
11+
};
12+
13+
return (
14+
<div>
15+
{Object.entries(list).map(([topTask, subTasks]) => {
16+
return (
17+
<div>
18+
<h2>{topTask}</h2>
19+
<div style={{ display: "flex" }}>
20+
<DisplaySubTasks
21+
topTask={topTask}
22+
subTasks={subTasks}
23+
handleOnClickComplete={handleOnClickComplete}
24+
/>
25+
</div>
26+
</div>
27+
);
28+
})}
29+
</div>
30+
);
31+
};
32+
33+
export default CheckList;

‎React-Day/Intermediate/03. Display a to-do list with togglable subtasks/src/components/DisplaySubtasks.jsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const DisplaySubTasks = ({ topTask, subTasks, handleOnClickComplete }) => {
2+
return (
3+
<>
4+
<div
5+
style={{
6+
paddingRight: 50,
7+
width: 250
8+
}}
9+
>
10+
<h3>Not Completed</h3>
11+
{subTasks.map((subTask, index) => {
12+
let taskText = Object.keys(subTask)[0];
13+
if (subTask[taskText] === false)
14+
return (
15+
<div>
16+
<p
17+
onClick={() =>
18+
handleOnClickComplete(topTask, taskText, index)
19+
}
20+
>
21+
{taskText}
22+
</p>
23+
</div>
24+
);
25+
})}
26+
</div>
27+
28+
<div>
29+
<h3>Completed</h3>
30+
{subTasks.map((subTask, index) => {
31+
let taskText = Object.keys(subTask)[0];
32+
if (subTask[taskText] === true) {
33+
return (
34+
<p
35+
onClick={() => handleOnClickComplete(topTask, taskText, index)}
36+
>
37+
{taskText}
38+
</p>
39+
);
40+
}
41+
})}
42+
</div>
43+
</>
44+
);
45+
};
46+
47+
export default DisplaySubTasks;

‎React-Day/Intermediate/03. Display a to-do list with togglable subtasks/src/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
4+
import App from "./App";
5+
6+
const rootElement = document.getElementById("root");
7+
const root = createRoot(rootElement);
8+
9+
root.render(
10+
<StrictMode>
11+
<App />
12+
</StrictMode>
13+
);

‎React-Day/Intermediate/03. Display a to-do list with togglable subtasks/src/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.App {
2+
font-family: sans-serif;
3+
text-align: center;
4+
}

0 commit comments

Comments
 (0)