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 @@
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"json-server": "^0.17.0",
"react": "^17.0.2",
"react-bootstrap": "^2.1.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "5.0.0",
......@@ -16,7 +19,8 @@
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"server": "json-server --watch db.json --port 5000"
},
"eslintConfig": {
"extends": [
......
public/index.html
......@@ -24,7 +24,7 @@
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`.
-->
<title>Simple Todo App</title>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
src/App.js
import { useState } from 'react';
import AddTodo from './components/AddTodo';
import Header from './components/Header';
import Todos from './components/Todos';
import { useState, useEffect } from 'react';
import Students from './components/Students';
import Header from './components/Header'
import AddStudent from './components/AddStudent';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
const [showAddTask, setShowAddTask] = useState(false)
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
},
])
const [studentsData, setStudentsData] = useState([]);
// Delete Todos
const deleteTodo = (id) => {
console.log('delete', id)
setTodos(todos.filter((todo) => todo.id != id))
const fetchStudents = async () => {
const response = await fetch('http://localhost:5000/students');
const data = await response.json();
return data;
}
// Toggle Reminder
const toggleReminder = (id) => {
setTodos(
todos.map((todo) =>
todo.id === id ? { ...todo, reminder: !todo.reminder } : todo
)
)
}
useEffect(() => {
const setStudents = async () => {
const data = await fetchStudents()
setStudentsData(data);
}
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 newTodo = { id, ...todo }
setTodos([...todos, newTodo])
};
const deleteStudent = async (id) => {
await fetch(`http://localhost:5000/students/${id}`, { method: 'DELETE' })
setStudentsData(studentsData.filter((data) => data.id !== id))
}
return (
<div className="container">
<Header onShow={() => setShowAddTask(!showAddTask)} onChangeText={showAddTask}/>
{showAddTask && <AddTodo onAdd={addTodo} />}
{
todos.length > 0 ?
(<Todos todos={todos} onDelete={deleteTodo} onToggle={toggleReminder} />)
: 'No Todos To Show'
}
<div className="c-container">
<Header />
<AddStudent addStudent={addStudent} />
{studentsData.map((data, index) => (
<Students key={data.id} index={index} id={data.id} mark={data.mark} grade={data.grade} onAddStudent={addStudent} onDeleteStudent={deleteStudent}>{data.text}</Students>
))}
</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'
const Header = ({ onShow, onChangeText }) => {
const Header = () => {
return (
<header className='header'>
<h4>Todo Tracker</h4>
<button className='btn' onClick={onShow}>{onChangeText ? 'Close' : 'Add'}</button>
</header>
<div className='header'>
<h3>Students Mark List</h3>
</div>
)
}
......
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;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 500px;
.c-container {
max-width: 600px;
margin: 30px auto;
overflow: auto;
min-height: 300px;
border: 1px solid steelblue;
padding: 30px;
box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px;
border-radius: 5px;
border-top: 5px solid #136bb7;
}
.header {
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.btn {
.button {
display: inline-block;
background: #000;
background: #136bb7;
color: #fff;
border: none;
padding: 10px 20px;
padding: 6px 12px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
......@@ -41,72 +36,69 @@ body {
font-family: inherit;
}
.btn:focus {
.button:focus {
outline: none;
}
.btn:active {
.button:active {
transform: scale(0.98);
}
.btn-block {
.button-block {
display: block;
width: 100%;
}
.task {
.student {
background: #f4f4f4;
margin: 5px;
padding: 10px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
}
.task.reminder {
border-left: 5px solid green;
.student .pass {
color: green;
}
.task h3 {
display: flex;
align-items: center;
justify-content: space-between;
.student .fail {
color: red;
}
.add-form {
margin-bottom: 40px;
margin-bottom: 20px;
}
.form-control {
.form-ctrl {
margin: 20px 0;
}
.form-control label {
.form-ctrl label {
display: block;
}
.form-control input {
.form-ctrl input {
width: 100%;
height: 40px;
margin: 5px;
padding: 3px 7px;
font-size: 17px;
border-radius: 6px;
border: 1px solid #136bb7;
}
.form-control-check {
.form-ctrl-check {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-control-check label {
.form-ctrl-check label {
flex: 1;
}
.form-control-check input {
.form-ctrl-check input {
flex: 2;
height: 20px;
}
footer {
margin-top: 30px;
text-align: center;
}
}
\ No newline at end of file
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