THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Create ToDo List App Project in ReactJS using Material UI Free Code in 2020

Create ToDo List App Project in ReactJS using Material UI Free Code in 2020

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
or use a CDN.     Load the default Roboto font.
<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 [itemsetItem] = useState("");
  const [newitemsetNewItem] = useState([]);

  const itemEvent = (event=> {
    setItem(event.target.value);
  };

  const listOfItems = () => {
    setNewItem((prevValue=> {
      return [...prevValueitem];
    });
    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((valindex=> {
              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 [linesetLine] = useState(false);

  const cutIt = () => {
    setLine(true);
  };

  return (
    <div className="todo_style">
      <span onClick={cutIt}>
        <DeleteIcon className="deleteIcon" />
      </span>
      <li style={textDecorationline ? "line-through" : "none" }}>
        {props.text}
      </li>
    </div>
  );
};

export default ListCom;



Now the main Index.css file


* {
  box-sizingborder-box;
  padding0;
  margin0;
  font-family"Josefin Sans""Arial Narrow"Arialsans-serif;
}

.main_div {
  width100%;
  height100vh;
  background#7bed9f;
  displayflex;
  flex-directionrow;
  justify-contentcenter;
  align-itemscenter;
  text-aligncenter;
}

.center_div {
  width25%;
  height70vh;
  background-color#f4f4f4;
  box-shadow5px 5px 25px -5px rgba(0000.5);
  border-radius15px;
}

h1 {
  colorrgba(0000.87);
  font-size50px;
  margin-bottom30px;
  min-width64px;
  box-sizingborder-box;
  font-family"Comfortaa"cursive;
  /* plz subscibe to thapatechnical channel */
  font-weight500;
  border-radius4px;
  letter-spacing0.02857em;
  text-transformuppercase;
  text-shadow5px 5px 5px rgba(0000.3);
}





input {
  text-aligncenter;
  height30px;
  bordernone;
  backgroundtransparent;
  font-size20px;
  font-weight500;
  width60%;
  border-bottom2px solid #8566aa;
  outlinenone;
  margin-right20px;
}

.newBtn {
  width50px;
  height55px;
  background-color#16a085 !important;
  colorwhite !important;
  box-shadow5px 5px 15px -5px rgba(0000.3);
  /* plz subscibe to thapatechnical channel */
  border-radius50% !important;
}




.newBtn:hover {

  color#16a085 !important;
  backgroundwhite !important;
}

/* //the add symbol inside the button in app comp */
.MuiSvgIcon-root {
  width2rem !important;
  height2rem !important;
}

ol {
  margin-top30px;
  /* margin-right: 50px; */
}

ol li {
  padding-left0px;
  text-alignleft;
  font-size20px;
  font-weight500;
  min-height40px;
  displayflex;
  align-itemscenter;
  color#8566aa;
  text-transformcapitalize;
  /* plz subscibe to thapatechnical channel */
  list-stylenone;
}

.todo_style {
  displayflex;
  flex-directionrow;
  justify-contentleft;
  align-itemscenter;
}

.todo_style .deleteIcon {
  width25px;
  height25px;
  displayflex;
  justify-contentcenter;
  align-itemscenter;
  background-color#8566aa;
  border-radius50%;
  margin0 15px 0 35px;
  padding5px;
  coloraliceblue;
  box-shadow5px 5px 15px -5px rgba(0000.3);
}

.todo_style .deleteIcon:hover {
  background-colortransparent;
  colorcrimson;
  box-shadow5px 5px 15px -5px rgba(255000.5);
}

.todo_style .fa-times:hover .list_style {
  colorcrimson;
}

@media (max-width768px) {
  .center_div {
    width55%;
  }

  .todo_style .fa-times {
    margin0 15px 0 15px;
    displayflex;
    justify-contentcenter;
    align-itemscenter;
    /* plz subscibe to thapatechnical channel */
  }

  button {
    margin-left5px;
    min-height40px;
    width40px;
    color#fff;
    font-size30px;
  }
}