arch/react-task-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

README updated

Browse Source
This commit is contained in:
QkoSad
2024-09-30 13:48:34 +03:00
parent 3635b2594a
commit b0d8882c3a
18 changed files with 27874 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+9 -1
View File
@@ -1 +1,9 @@
# React_task_tracker This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
A Simple TODO application. Using react in js. It has no persistent memory.
Working with node v22.9.0
To start it:
```bash
npm start
```
package-lock.json
Generated
+27456 -19
View File
File diff suppressed because it is too large Load Diff
package.json
+35 -1
View File
@@ -1,5 +1,39 @@
{ {
"name": "react-task-tracker",
"version": "0.1.0",
"private": true,
"dependencies": { "dependencies": {
"react-icons": "^4.3.1" "@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^5.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
} }
} }
public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

public/index.html
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Task Tracker</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
public/logo192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

public/logo512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

public/manifest.json
+25
View File
@@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
public/robots.txt
+3
View File
@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
src/App.js
+59
View File
@@ -0,0 +1,59 @@
import { useState } from "react";
import AddTask from "./components/AddTask";
import Header from "./components/Header";
import Tasks from "./components/Tasks";
function App() {
const [showAddTask, setShowAddTask] = useState(false)
const [tasks, setTasks] = useState([
{
id: 1,
text: "Doctors Appointment",
day: "Feb 5th at 2:30pm",
reminder: true,
},
{
id: 2,
text: "Meeting at school",
day: "Feb 6th at 1:30pm",
reminder: true,
},
{
id: 3,
text: "Food Shopping",
day: "Feb 5th at 2:30pm",
reminder: false,
},
]);
const addTask = (task) => {
const id = Math.floor(Math.random()* 10000) + 1
const newTask = {id,...task}
setTasks([...tasks,newTask])
}
const deleteTask = (id) => {
setTasks(tasks.filter((task) => task.id !== id));
};
const toggleReminder = (id) => {
setTasks(
tasks.map((task) =>
task.id === id ? { ...task, reminder: !task.reminder } : task
)
);
};
return (
<div className='container'>
<Header onAdd={()=> setShowAddTask(!showAddTask)} showAdd={showAddTask}/>
{showAddTask && <AddTask onAdd={addTask} />}
{tasks.length > 0 ? (
<Tasks tasks={tasks} onToggle={toggleReminder} onDelete={deleteTask} />
) : (
"No Tasks To Show"
)}
</div>
);
}
export default App;
src/components/AddTask.js
+53
View File
@@ -0,0 +1,53 @@
import { useState } from "react";
const AddTask = ({ onAdd }) => {
const [text, setText] = useState("");
const [day, setDay] = useState("");
const [reminder, setReminder] = useState(false);
const onSumbit = (e) => {
e.preventDefault();
if (!text) {
alert("Please add a task");
return;
}
onAdd({ text, day, reminder });
setText("");
setDay("");
setReminder(false);
};
return (
<form className="add-form" onSubmit={onSumbit}>
<div className="form-control">
<label>Task</label>
<input
type="text"
placeholder="Add task"
value={text}
onChange={(e) => setText(e.target.value)}
/>
</div>
<div className="form-control">
<label>Day & Time</label>
<input
type="text"
placeholder="Add Day and Time"
value={day}
onChange={(e) => setDay(e.target.value)}
/>
</div>
<div className="form-control form-control-check">
<label>Set Reminder</label>
<input
type="checkbox"
checked={reminder}
value={reminder}
onChange={(e) => setReminder(e.currentTarget.checked)}
/>
</div>
<input type="submit" value="Save task" className="btn btn-block" />
</form>
);
};
export default AddTask;
src/components/Button.js
+22
View File
@@ -0,0 +1,22 @@
import PropTypes from "prop-types";
const Button = ({ color, text, onClick }) => {
return (
<button
onClick={onClick}
style={{ backgroundColor: color }}
className="btn"
>
{text}
</button>
);
};
Button.defaultProps = {
color: "steelblue",
};
Button.propTypes = {
text: PropTypes.string,
color: PropTypes.string,
onClick: PropTypes.func,
};
export default Button;
src/components/Header.js
+18
View File
@@ -0,0 +1,18 @@
import Button from "./Button";
const Header = ({ title, onAdd, showAdd }) => {
return (
<haeder>
<h1>{title}</h1>
<Button
color={showAdd ? "red" : "green"}
text={showAdd ? "Close" : "Add"}
onClick={onAdd}
/>
</haeder>
);
};
Header.defaultProps = {
title: "Task Tracker",
};
export default Header;
src/components/Task.js
+18
View File
@@ -0,0 +1,18 @@
import { FaTimes } from "react-icons/fa";
const Task = ({ task, onDelete, onToggle }) => {
return (
<div className={`task ${task.reminder ? 'reminder': ''}`} onDoubleClick={() => onToggle(task.id)}>
<h3>
{task.text}
{""}
<FaTimes
style={{ color: "red", cursor: "pointer" }}
onClick={() => onDelete(task.id)}
/>
</h3>
<p>{task.day}</p>
</div>
);
};
export default Task;
src/components/Tasks.js
+16
View File
@@ -0,0 +1,16 @@
import Task from "./Task";
const Tasks = ({ tasks, onDelete, onToggle }) => {
return (
<>
{tasks.map((task) => (
<Task
key={task.id}
task={task}
onToggle={onToggle}
onDelete={onDelete}
/>
))}
</>
);
};
export default Tasks;
src/index.css
+112
View File
@@ -0,0 +1,112 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 500px;
margin: 30px auto;
overflow: auto;
min-height: 300px;
border: 1px solid steelblue;
padding: 30px;
border-radius: 5px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
.btn:focus {
outline: none;
}
.btn:active {
transform: scale(0.98);
}
.btn-block {
display: block;
width: 100%;
}
.task {
background: #f4f4f4;
margin: 5px;
padding: 10px 20px;
cursor: pointer;
}
.task.reminder {
border-left: 5px solid green;
}
.task h3 {
display: flex;
align-items: center;
justify-content: space-between;
}
.add-form {
margin-bottom: 40px;
}
.form-control {
margin: 20px 0;
}
.form-control label {
display: block;
}
.form-control input {
width: 100%;
height: 40px;
margin: 5px;
padding: 3px 7px;
font-size: 17px;
}
.form-control-check {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-control-check label {
flex: 1;
}
.form-control-check input {
flex: 2;
height: 20px;
}
footer {
margin-top: 30px;
text-align: center;
}
src/index.js
+13
View File
@@ -0,0 +1,13 @@
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
reportWebVitals(console.log);
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root"),
);
src/reportWebVitals.js
+13
View File
@@ -0,0 +1,13 @@
const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;