Source Code For Todo list
App.js
import React, { useState } from "react";
import "./styles.css";
import Todolist from "./Todolist.js";
export default function App() {
const [todolist, settodolist] = useState([]);
const [tvalue, setvalue] = useState("");
function store(event) {
const value = event.target.value;
setvalue(value);
}
function addtext() {
settodolist((prev) => {
return [...prev, tvalue];
});
setvalue("");
}
function checked(id) {
settodolist((prev) => {
return todolist.filter((value, index) => {
return index !== id;
});
});
}
return (
<div className="App">
<h1>To-do list</h1>
<img src="https://picsum.photos/450/300" alt="a" />;
<h2>What tasks are on your mind today?</h2>
<input type="text" name="items" value={tvalue} onChange={store} />
<button class="myButton" onClick={addtext}>
Add
</button>
<div>
<h3>Your checklist for today looks like:</h3>
<ol>
{todolist.map((value, index) => {
return (
<Todolist
id={index}
lochecked={checked}
key={index}
item={value}
/>
);
})}
</ol>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#00cba9"
fill-opacity="1"
d="M0,160L48,181.3C96,203,192,245,288,229.3C384,213,480,139,576,106.7C672,75,768,85,864,106.7C960,128,1056,160,1152,192C1248,224,1344,256,1392,272L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
></path>
</svg>
</div>
);
}
Styles.css
.App {
font-family: sans-serif;
text-align: center;
}
body {
background-color: yellow;
}
h1 {
color: red;
font-size: 12vh;
}
li {
color: blue;
font-size: 6vh;
text-align: center;
}
.myButton {
box-shadow: inset 0px 0px 15px 3px #23395e;
background: linear-gradient(to bottom, #2e466e 5%, #415989 100%);
background-color: #2e466e;
border-radius: 17px;
border: 1px solid #1f2f47;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 22px;
padding: 6px 13px;
text-decoration: none;
text-shadow: 0px 1px 0px #263666;
&:hover {
background: linear-gradient(to bottom, #415989 5%, #2e466e 100%);
background-color: #415989;
}
&:active {
position: relative;
top: 1px;
}
}
input {
font-size: 5vh;
border-radius: 22px;
}
Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
Todolist.js
import React from "react";
function Todolist(props) {
return (
<li
onClick={() => {
props.lochecked(props.id);
}}
>
{props.item}
</li>
);
}
export default Todolist;
Package.json
{
"name": "to-do-list",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
"dependencies": {
"react": "17.0.0",
"react-dom": "17.0.0",
"react-scripts": "3.4.3"
},
"devDependencies": {
"typescript": "3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}