initial commit

src/App.css

 .App {
+  max-width:400px;
+  display:flex;
+  flex-direction: column; 
+  justify-content: center;
+  align-items: center;
   text-align: center;
+ margin:auto;
+ 
 }
 
+h1{
+  
+  color : #007ACE; 
+  font-size: 45px;
+}
 .App-logo {
   height: 40vmin;
   pointer-events: none;
@@ -36,3 +48,56 @@
     transform: rotate(360deg);
   }
 }
+
+.btn {
+  cursor: pointer;
+  font-size: 1.2rem;
+  height: 2.3rem;
+  border-radius: 0.5em;
+  border: none;
+  color: #fff;
+  background: #8a2387;
+  background: -webkit-linear-gradient(
+    to right,
+    #f27121,
+    #e94057,
+    #8a2387
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to right,
+    #f27121,
+    #e94057,
+    #8a2387
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  outline: none;
+  padding: 0.3rem 1.8rem 0.3rem 1.8rem;
+}
+
+.btn:hover {
+  filter: brightness(110%);
+  border: none;
+  outline: 0;
+}
+
+.btn:focus {
+  filter: brightness(110%);
+  border: none;
+  outline: 0;
+}
+
+.btn:active {
+  border: none;  
+}
+
+.input {
+  background-color: whitesmoke;
+  color: black;
+  padding: 1em 2em;
+  border-radius: 0.5em;
+  border: none;
+  outline: none;
+  position: relative;
+  margin: 5px;
+  height:0.7rem;
+
+}

src/App.js

-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from "react";
+import "./App.css";
+import Item from "./components/Item";
+import { v4 as uuidv4 } from "uuid";
+
+const arr = () => {
+  let data = localStorage.getItem("data");
+  if (data) return JSON.parse(localStorage.getItem("data"));
+  else return [];
+};
 
 function App() {
+  const [item, setItem] = useState("");
+  const [edit, setEdit] = useState(false);
+  const [editId, setEditId] = useState();
+  const [list, setList] = useState(arr);
+  const [error, setError] = useState("");
+
+  const handleSubmit = (e) => {
+    const newItem = {
+      id: uuidv4(),
+      item: item,
+      complete: false,
+    };
+    e.preventDefault();
+    if (item && item.length <= 25 && !edit) {
+      setList([...list, newItem]);
+      setItem("");
+      setError("");
+    } else if (item && item.length <= 25 && edit && editId) {
+      setList(
+        list.map((el) => {
+          if (el.id === editId) {
+            return { ...el, item: item };
+          }
+          return el;
+        })
+      );
+      setItem("");
+      setEditId(null);
+      setEdit(false);
+      setError("");
+    } else if (!item) setError("Item cannot be blank.");
+    else if (item.length > 25) setError("Character limit is 25.");
+  };
+
+  React.useEffect(() => {
+    localStorage.setItem("data", JSON.stringify(list));
+  }, [list]);
+
+  const handleChange = (e) => {
+    setItem(e.target.value);
+  };
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <h1>Grocery List</h1>
+      <form onSubmit={handleSubmit}>
+        <input
+          className="input"
+          type="text"
+          value={item}
+          placeholder="Enter the items"
+          onChange={handleChange}
+        />
+        <button className="btn" type="submit">
+          Add Items
+        </button>
+        {error && <p style={{ color: "red" }}>{error}</p>}
+      </form>
+      <div>
+        {list.map((c, id) => (
+          <Item
+            key={id}
+            id={c.id}
+            item={c.item}
+            list={list}
+            setList={setList}
+            complete={c.complete}
+            setItem={setItem}
+            setEdit={setEdit}
+            setEditId={setEditId}
+          />
+        ))}
+      </div>
     </div>
   );
 }

src/components/Item.css

+.complete{
+    text-decoration: line-through;
+    text-decoration-color: navy;
+  
+}
+.item{
+      display:flex;
+      justify-content: center;
+      align-items: center;
+      color:white;
+   
+}  
+p{
+    font-family: cursive;
+}

src/components/Item.js

+import React from "react";
+import "./Item.css";
+
+const Item = ({
+  id,
+  item,
+  list,
+  setEdit,
+  setEditId,
+  setItem,
+  setList,
+  complete,
+}) => {
+  const remove = (id) => {
+    setList(list.filter((el) => el.id !== id));
+  };
+
+  const handleComplete = (id) => {
+    setList(
+      list.map((item) => {
+        if (item.id === id) {
+          return {
+            ...item,
+            complete: !item.complete,
+          };
+        }
+        return item;
+      })
+    );
+  };
+
+  //Edit Todo
+  const handleItem = (id) => {
+    const editItem = list.find((el) => el.id === id);
+    setItem(editItem.item);
+    setEdit(true);
+    setEditId(id);
+  };
+
+  return (
+    <div className="item">
+      <input
+        type="text"
+        value={item}
+        style={{
+          border: "none",
+          outline: "none",
+          backgroundColor: "transparent",
+          color: "black",
+          fontSize: "20px",
+        }}
+        className={complete ? "complete" : ""}
+      />
+      <img
+        style={{ cursor: "pointer" }}
+        src="https://img.icons8.com/emoji/36/000000/pencil-emoji.png"
+        onClick={() => handleItem(id)}
+        alt="edit item"
+      />
+      <img
+        style={{ cursor: "pointer" }}
+        onClick={() => handleComplete(id)}
+        src="https://img.icons8.com/offices/40/000000/checked-2--v2.png"
+        alt="mark item complete"
+      />
+
+      <img
+        style={{ cursor: "pointer" }}
+        onClick={() => remove(id)}
+        src="https://img.icons8.com/color/48/000000/trash.png"
+        alt="delete item"
+      />
+    </div>
+  );
+};
+export default Item;

src/index.css

@@ -5,6 +5,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: ##000000;
+
 }
 
 code {