README updated
This commit is contained in:
QkoSad
@@ -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
|
||||
```
|
||||
|
||||
|
||||
Generated
+27456
-19
File diff suppressed because it is too large
Load Diff
+35
-1
@@ -1,5 +1,39 @@
|
||||
{
|
||||
"name": "react-task-tracker",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
@@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
@@ -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"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
+59
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
+112
@@ -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;
|
||||
}
|
||||
@@ -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"),
|
||||
);
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user