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;
  }
}



27 comments:

  1. Replies
    1. code ko pdf ban lo tab copy krna
      abhi copy nhi hoga kyun screenshot kr ke dal gaya h

      Delete
    2. copy kar sakte ho bas apko dikhayi nahi de raha hain

      Delete
  2. ./src/ToDoListUpdate.jsx
    Line 48:32: Expected an assignment or function call and instead saw an expression no-unused-expressions

    Search for the keywords to learn more about each error.


    ye error show ho rha hai apka code copy krne par

    ReplyDelete
  3. bro return statement dekh vaha kahi issue hoga

    ReplyDelete
  4. vai text selector style change karoge pls.

    ReplyDelete
  5. I like viewing web sites which comprehend the price of delivering the excellent useful resource free of charge. I truly adored reading your posting. Thank you! guide

    ReplyDelete
  6. thanks thapa technical for helping me alot

    ReplyDelete
  7. Replies
    1. index.html dekho usme todolist.js render hua hai so app.js kyun cahiye?

      Delete
  8. Earlier this year, Apple released its list of top iPhone apps at the one billion download Kajabi vs clickfunnels. It's a very interesting list and there are a lot of good lessons to be learned from it and a lot of money to be made, if you can get it right. How to get access to this giant cash cow? Here are some tips, based on our analysis of Apple's twenty top paid apps

    ReplyDelete
  9. where is font awesome link in html???

    ReplyDelete
  10. Nice post. I was checking constantly this blog and I’m impressed! Extremely useful info specially the last part I care for such information a lot. I was seeking this certain info for a long time. Thank you and good luck. best spy apps

    ReplyDelete
  11. bro give me this code i need i cnt copy cause its screenshot

    ReplyDelete
  12. Great job for publishing such a beneficial web site. Your web log isn’t only useful but it is additionally really creative too. پروژه ستین

    ReplyDelete
  13. Very informative post! There is a lot of information here that can help any business get started with a successful social networking campaign. پروژه ستین

    ReplyDelete
  14. I’m going to read this. I’ll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article... baixar happymod apk toca life world

    ReplyDelete
  15. WhatsApp Group Links
    I have read a few of the articles on your website now, and I really like your style.
    WhatsApp Group Links

    ReplyDelete
  16. I am executing all of the programs , whom you are teaching Thapa Sir, buy right now I am stuck
    because I can not copy the source code, kindly guide me to copy this.

    ReplyDelete
  17. Thankyou for this wondrous post, I am glad I observed this website on yahoo. buy google reviews

    ReplyDelete
  18. Dharam is an Indian diamond manufacturing and design brand, noted for its intricate depiction and precise cuts to produce opulent diamond designs. Pear Diamond exporter

    ReplyDelete