Skip to content

S
simple-todo-app
Commit 62e6bdde by Ajmal.S
Options

add and delete json server added

parent 5ada6585
Showing with 221 additions and 180 deletions
db.json 0 → 100644
{
"students": [
{
"id": 2623,
"mark": "34",
"text": "hjhjhj"
},
{
"id": 5545,
"mark": "65",
"text": "saas"
},
{
"id": 8802,
"mark": "89",
"text": "sss"
},
{
"id": 406,
"mark": "11",
"text": "arun"
},
{
"id": 8028,
"mark": "13",
"text": "aju"
},
{
"id": 2585,
"mark": "89",
"text": "prem"
},
{
"text": "Banu",
"mark": "100",
"id": 8499
},
{
"id": 2483,
"mark": "5",
"text": "dfdfdf"
},
{
"id": 4342,
"mark": "3",
"text": "dsdsd"
},
{
"id": 3832,
"mark": "909",
"text": "cath"
}
]
}
\ No newline at end of file
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
"@testing-library/jest-dom": "^5.16.2", "@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3", "@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"json-server": "^0.17.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^2.1.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
...@@ -16,7 +19,8 @@ ...@@ -16,7 +19,8 @@
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject",
"server": "json-server --watch db.json --port 5000"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
......
public/index.html
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Simple Todo App</title> <title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
......
src/App.js
import { useState } from 'react'; import { useState, useEffect } from 'react';
import AddTodo from './components/AddTodo'; import Students from './components/Students';
import Header from './components/Header'; import Header from './components/Header'
import Todos from './components/Todos'; import AddStudent from './components/AddStudent';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() { function App() {
const [showAddTask, setShowAddTask] = useState(false) const [studentsData, setStudentsData] = useState([]);
const [todos, setTodos] = useState([
{
id: 1,
text: 'Todo 1',
day: '28th Feb at 1.05pm',
reminder: true
},
{
id: 2,
text: 'Todo 2',
day: '27th Jan at 1.06pm',
reminder: false
},
{
id: 3,
text: 'Todo 3',
day: '13th Mar at 1.07pm',
reminder: true
},
])
// Delete Todos const fetchStudents = async () => {
const deleteTodo = (id) => { const response = await fetch('http://localhost:5000/students');
console.log('delete', id) const data = await response.json();
setTodos(todos.filter((todo) => todo.id != id)) return data;
} }
// Toggle Reminder useEffect(() => {
const toggleReminder = (id) => { const setStudents = async () => {
setTodos( const data = await fetchStudents()
todos.map((todo) => setStudentsData(data);
todo.id === id ? { ...todo, reminder: !todo.reminder } : todo }
) setStudents();
) })
}
const addStudent = async (data) => {
if (!data.text) {
alert('Please Enter Student Name');
return;
} else if (!data.mark) {
alert('Please Enter Mark')
return;
}
const response = await fetch('http://localhost:5000/students', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(data) });
const datas = await response.json();
setStudentsData([...studentsData, datas]);
// Add Todo };
const addTodo = (todo) => {
const id = Math.floor(Math.random() * 10000) + 1 const deleteStudent = async (id) => {
const newTodo = { id, ...todo } await fetch(`http://localhost:5000/students/${id}`, { method: 'DELETE' })
setTodos([...todos, newTodo]) setStudentsData(studentsData.filter((data) => data.id !== id))
} }
return ( return (
<div className="container"> <div className="c-container">
<Header onShow={() => setShowAddTask(!showAddTask)} onChangeText={showAddTask}/> <Header />
{showAddTask && <AddTodo onAdd={addTodo} />} <AddStudent addStudent={addStudent} />
{ {studentsData.map((data, index) => (
todos.length > 0 ? <Students key={data.id} index={index} id={data.id} mark={data.mark} grade={data.grade} onAddStudent={addStudent} onDeleteStudent={deleteStudent}>{data.text}</Students>
(<Todos todos={todos} onDelete={deleteTodo} onToggle={toggleReminder} />) ))}
: 'No Todos To Show'
}
</div> </div>
); );
} }
......
src/components/AddStudent.js 0 → 100644
import React, { useState } from 'react';
const AddStudent = ({ addStudent }) => {
const [name, setName] = useState('');
const [mark, setMark] = useState('');
const onAddStudent = (e) => {
e.preventDefault()
addStudent({
id: Math.floor(Math.random() * 10000),
mark: mark,
text: name,
});
setName('');
setMark('');
}
return (
<form className='add-form' onSubmit={onAddStudent}>
<div className='form-ctrl'>
<label>Student Name</label>
<input type='text' placeholder='Name' value={name} onChange={(e) => setName(e.target.value)} />
</div>
<div className='form-ctrl'>
<label>Mark</label>
<input type='number' placeholder='Mark' value={mark} onChange={(e) => setMark(e.target.value)} />
</div>
<input type='submit' value='Save' className='button button-block' />
</form>
)
}
export default AddStudent
src/components/AddTodo.js deleted 100644 → 0
import React from 'react'
import { useState } from 'react'
const AddTodo = ({onAdd}) => {
const [text, setText] = useState('')
const [day, setDay] = useState('')
const [reminder, setReminder] = useState(false)
const onSubmit = (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={onSubmit}>
<div className='form-control'>
<label>Todo</label>
<input
type='text'
placeholder='Add Todo'
value={text}
onChange={(e) => setText(e.target.value)}
/>
</div>
<div className='form-control'>
<label>Day & Time</label>
<input
type='text'
placeholder='Add Day & 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 Todo' className='btn btn-block' />
</form>
)
}
export default AddTodo
src/components/Header.js
import React from 'react' import React from 'react'
const Header = ({ onShow, onChangeText }) => { const Header = () => {
return ( return (
<header className='header'> <div className='header'>
<h4>Todo Tracker</h4> <h3>Students Mark List</h3>
<button className='btn' onClick={onShow}>{onChangeText ? 'Close' : 'Add'}</button> </div>
</header>
) )
} }
......
src/components/Students.js 0 → 100644
import { useState } from 'react'
import { ImBin } from 'react-icons/im'
import { MdOutlineModeEditOutline } from 'react-icons/md'
import { Modal, Button } from 'react-bootstrap';
const Students = ({ mark, children, onDeleteStudent, id, index, editStudent }) => {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<div className='student'>
<div>{index + 1}</div>
<div>{children}</div>
<div>{mark}</div>
<div><small className={`${mark >= 35 ? 'pass' : 'fail'}`}>({mark >= 35 ? 'P' : 'F'})</small></div>
<div style={{ display: 'flex' }}>
<div><MdOutlineModeEditOutline onClick={handleShow} /></div>
<div style={{ marginLeft: '10px' }}><ImBin onClick={() => onDeleteStudent(id)} /></div>
</div>
</div>
<form className='add-form'>
<Modal show={show} onHide={handleClose} centered>
<Modal.Header closeButton>
<Modal.Title>Edit Student Data</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className='form-ctrl'>
<input type='text' value={children} />
<input type='text' value={mark} />
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" type='submit' onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</form>
</>
)
}
export default Students
src/components/Todo.js deleted 100644 → 0
import React from 'react'
import { FaTimes } from 'react-icons/fa'
const Todo = ({ todo, onDelete, onToggle }) => {
return (
<div className={`task ${todo.reminder ? 'reminder' : ''}`} onDoubleClick={() => onToggle(todo.id)}>
<h3>{todo.text} <FaTimes onClick={() => onDelete(todo.id)} style={{ color: 'red', cursor: 'pointer' }} /></h3>
<p>{todo.day}</p>
</div >
)
}
export default Todo
src/components/Todos.js deleted 100644 → 0
import React from 'react'
import Todo from './Todo'
const Todos = ({ todos, onDelete, onToggle }) => {
return (
<>
{todos.map((todo) => (
<Todo key={todo.id} todo={todo} onDelete={onDelete} onToggle={onToggle} />
))}
</>
)
}
export default Todos
src/index.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { .c-container {
font-family: 'Poppins', sans-serif; max-width: 600px;
}
.container {
max-width: 500px;
margin: 30px auto; margin: 30px auto;
overflow: auto; overflow: auto;
min-height: 300px; min-height: 300px;
border: 1px solid steelblue;
padding: 30px; padding: 30px;
box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px;
border-radius: 5px; border-radius: 5px;
border-top: 5px solid #136bb7;
} }
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.btn { .button {
display: inline-block; display: inline-block;
background: #000; background: #136bb7;
color: #fff; color: #fff;
border: none; border: none;
padding: 10px 20px; padding: 6px 12px;
margin: 5px; margin: 5px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
...@@ -41,72 +36,69 @@ body { ...@@ -41,72 +36,69 @@ body {
font-family: inherit; font-family: inherit;
} }
.btn:focus { .button:focus {
outline: none; outline: none;
} }
.btn:active { .button:active {
transform: scale(0.98); transform: scale(0.98);
} }
.btn-block { .button-block {
display: block; display: block;
width: 100%; width: 100%;
} }
.task { .student {
background: #f4f4f4; background: #f4f4f4;
margin: 5px; margin: 5px;
padding: 10px 20px; padding: 10px 20px;
cursor: pointer; cursor: pointer;
display: flex;
justify-content: space-between;
} }
.task.reminder { .student .pass {
border-left: 5px solid green; color: green;
} }
.task h3 { .student .fail {
display: flex; color: red;
align-items: center;
justify-content: space-between;
} }
.add-form { .add-form {
margin-bottom: 40px; margin-bottom: 20px;
} }
.form-control { .form-ctrl {
margin: 20px 0; margin: 20px 0;
} }
.form-control label { .form-ctrl label {
display: block; display: block;
} }
.form-control input { .form-ctrl input {
width: 100%; width: 100%;
height: 40px; height: 40px;
margin: 5px; margin: 5px;
padding: 3px 7px; padding: 3px 7px;
font-size: 17px; font-size: 17px;
border-radius: 6px;
border: 1px solid #136bb7;
} }
.form-control-check { .form-ctrl-check {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.form-control-check label { .form-ctrl-check label {
flex: 1; flex: 1;
} }
.form-control-check input { .form-ctrl-check input {
flex: 2; flex: 2;
height: 20px; height: 20px;
} }
\ No newline at end of file
footer {
margin-top: 30px;
text-align: center;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment