Name – Lohade Om Manoj

Roll No- Seda IT C - 3

App.js File :
// import logo from './logo.svg';
import './App.css';
import Header from "./MyComponents/Header";
import Todo from "./MyComponents/Todo";
import Footer from './MyComponents/Footer';
import AddTasks from './MyComponents/AddTasks';
import React, {useState} from 'react';

function App() {

const onDelete = (td)=>{

console.log("I am on delete!",td.sno);
setTodos(todoslist.filter((e)=>{
return e!==td;
}))
}

const AddTodo = (title, desc) => {

console.log(title,desc)
let sno;
if (todoslist.length==0) {
sno = 0
}
else{
sno = todoslist[todoslist.length-1].sno+1;
}
const mytodo = {
sno:sno,
title:title,
desc:desc
}
setTodos([...todoslist,mytodo])
console.log(mytodo)
}

const [todoslist, setTodos] = useState([

]);

return (
<>
 <Header title="Todo's List" search={false} />
<AddTasks AddTodo={AddTodo}/>
<Todo todoss={todoslist} onDelete={onDelete}/>
<Footer />
</>
);
}

export default App;

Header.js File

//There are two types of components - function and class components

//This is a react function component
//Type rfc and click enter, extension is installed, u will get snippit.

import React from 'react'

import PropTypes from 'prop-types'

export default function Header(props) {

return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<a className="navbar-brand" href="/">{props.title}</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>

<div className="collapse navbar-collapse" id="navbarSupportedContent">

<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-
only">(current)</span></a>
</li>

<li className="nav-item">
<a className="nav-link" href="#">About</a>
</li>

</ul>
{props.search ? <form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-
label="Search"/>
<button className="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
 </form> : ""}
</div>
</nav>
)
}

Header.defaultProps = {
title:"Your Title",
search:true,
}

Header.propTypes = {
title:PropTypes.string,
search:PropTypes.bool.isRequired,
}

AddTasks.js File

import React, {useState} from 'react';

const AddTasks = ({AddTodo}) => {

const [title, setTitle] = useState("");
const [desc, setDesc] = useState("");

const submit=(e)=>{
e.preventDefault();
if(!title || !desc){
alert("Title or description cannot be blank!")
}
AddTodo(title,desc);
}
return (
<div className='container'>
<h3 className='text-center my-2'>- Add a Task -</h3>
<form onSubmit={submit}>
<div class="form-group">
<label for="title">Todo Title :</label>
<input type="text" value={title}
onChange={(e)=>{setTitle(e.target.value)}} class="form-control" id="title" aria-
describedby="emailHelp" placeholder="Enter Todo Title"/>

</div>
<div class="form-group">
<label for="desc">Description :</label>
<input type="text" value={desc}
onChange={(e)=>{setDesc(e.target.value)}} class="form-control" id="desc"
placeholder="Description"/>
</div>
 <button type="submit" class="btn btn-sm btn-primary">Add Todo</button>
</form>
</div>
)
}

export default AddTasks

Todo.js File

import React from 'react';

import TodoItems from './TodoItems'

const Todo = (props) => {

let mystyle={
minHeight:"70vh"
}
return (
<div className='container' style={mystyle}>
<h3 className='text-center my-3'>- Todo's List -</h3>
{props.todoss.length===0?<h5>No Todo's to Display</h5>:
props.todoss.map((todo)=>{
return(
<>
<TodoItems td={todo} onDelete={props.onDelete}/> <hr/>
</>
)
})
}
</div>
)
}

export default Todo

TodoItems.js File

import React from 'react'

const TodoItems = ({td,onDelete}) => {

return (
<div className='my-4'>
<h4>{td.title}</h4>
<p>{td.desc}</p>
 <button className="btn btn-sm btn-danger"
onClick={()=>{onDelete(td)}}>Delete</button>
</div>
)
}

export default TodoItems

Footer.js File

//This is a rafc component...

//react arrow function component

import React from 'react'

const Footer = () => {

return (
<div className='bg-dark text-light mb-0 mt-2' >
<p className="text-center py-3">
Copyright &copy; MyTodosList.com
</p>

</div>
)
}

export default Footer

OUTPUT :

1) Initial page After Entry.

2) Writing the Todo

3) First Todo Created

4) Deleting the Todo

5) Creating another Todo