Create ToDo List App Project in ReactJS using Material UI Free Code in 2020
Material Design is a design language developed in 2014 by Google and is very popular for web and mobile applications.
or use a CDN. Load the default Roboto font.
Welcome, to the React Project using Material UI. You will learn many new concepts while creating our ToDo List App in Reactjs using Material UI in 2020.
So, What is Material UI? Is It React best UI Framework?
Material Design is a design language developed in 2014 by Google and is very popular for web and mobile applications.
The Material UI React library is designed from the ground up to be fast, small, and developer-friendly. Using the Material UI React library you can add Material UI components to your React apps and switch seamlessly between MUI CSS/JS and MUI React even within the same app.
With the components from the Material-UI library, it’s very easy to make use of Material Design elements in your React web or mobile application. The library’s website can be found at https://material-ui.com
Installation
Install Material-UI's source files via npm. We take care of injecting the CSS needed.
$ npm install @material-ui/core<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />Usage
Material-UI components work without any additional setup and don't pollute the global scope.
import React from 'react';
import { Button } from '@material-ui/core';
function App() {
return <Button color="primary">Hello World</Button>;
}
Now, Here is the actual source code of the TODO List App in React using Material UI, and please subscribe to my channel Here for daily awesome programming videos for free.
index.html file
<!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" />
<link
href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap"
rel="stylesheet"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Index.js file
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import ToDoList from "./ToDoList";
ReactDOM.render(<ToDoList />, document.getElementById("root"));
ToDoList.jsx file
import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import AddIcon from "@material-ui/icons/Add";
import ListCom from "./ListCom";
const ToDoList = () => {
const [item, setItem] = useState("");
const [newitem, setNewItem] = useState([]);
const itemEvent = (event) => {
setItem(event.target.value);
};
const listOfItems = () => {
setNewItem((prevValue) => {
return [...prevValue, item];
});
setItem("");
};
return (
<>
<div className="main_div">
<div className="center_div">
<br />
<h1> ToDo List </h1>
<br />
<input
type="text"
value={item}
placeholder="Add an Items"
onChange={itemEvent}
/>
<Button className="newBtn" onClick={listOfItems}>
<AddIcon />
</Button>
<br />
<ol>
{newitem.map((val, index) => {
return <ListCom key={index} text={val} />;
})}
</ol>
<br />
</div>
</div>
</>
);
};
export default ToDoList;
import React, { useState } from "react";
import DeleteIcon from "@material-ui/icons/Delete";
const ListCom = (props) => {
const [line, setLine] = useState(false);
const cutIt = () => {
setLine(true);
};
return (
<div className="todo_style">
<span onClick={cutIt}>
<DeleteIcon className="deleteIcon" />
</span>
<li style={{ textDecoration: line ? "line-through" : "none" }}>
{props.text}
</li>
</div>
);
};
export default ListCom;
Now the main Index.css file
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Josefin Sans", "Arial Narrow", Arial, sans-serif;
}
.main_div {
width: 100%;
height: 100vh;
background: #7bed9f;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.center_div {
width: 25%;
height: 70vh;
background-color: #f4f4f4;
box-shadow: 5px 5px 25px -5px rgba(0, 0, 0, 0.5);
border-radius: 15px;
}
h1 {
color: rgba(0, 0, 0, 0.87);
font-size: 50px;
margin-bottom: 30px;
min-width: 64px;
box-sizing: border-box;
font-family: "Comfortaa", cursive;
/* plz subscibe to thapatechnical channel */
font-weight: 500;
border-radius: 4px;
letter-spacing: 0.02857em;
text-transform: uppercase;
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
input {
text-align: center;
height: 30px;
border: none;
background: transparent;
font-size: 20px;
font-weight: 500;
width: 60%;
border-bottom: 2px solid #8566aa;
outline: none;
margin-right: 20px;
}
.newBtn {
width: 50px;
height: 55px;
background-color: #16a085 !important;
color: white !important;
box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
/* plz subscibe to thapatechnical channel */
border-radius: 50% !important;
}
.newBtn:hover {
color: #16a085 !important;
background: white !important;
}
/* //the add symbol inside the button in app comp */
.MuiSvgIcon-root {
width: 2rem !important;
height: 2rem !important;
}
ol {
margin-top: 30px;
/* margin-right: 50px; */
}
ol li {
padding-left: 0px;
text-align: left;
font-size: 20px;
font-weight: 500;
min-height: 40px;
display: flex;
align-items: center;
color: #8566aa;
text-transform: capitalize;
/* plz subscibe to thapatechnical channel */
list-style: none;
}
.todo_style {
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
}
.todo_style .deleteIcon {
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
background-color: #8566aa;
border-radius: 50%;
margin: 0 15px 0 35px;
padding: 5px;
color: aliceblue;
box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}
.todo_style .deleteIcon:hover {
background-color: transparent;
color: crimson;
box-shadow: 5px 5px 15px -5px rgba(255, 0, 0, 0.5);
}
.todo_style .fa-times:hover .list_style {
color: crimson;
}
@media (max-width: 768px) {
.center_div {
width: 55%;
}
.todo_style .fa-times {
margin: 0 15px 0 15px;
display: flex;
justify-content: center;
align-items: center;
/* plz subscibe to thapatechnical channel */
}
button {
margin-left: 5px;
min-height: 40px;
width: 40px;
color: #fff;
font-size: 30px;
}
}
