From f007eebea6e9a17d8f5ed07d81785664dd0d01b1 Mon Sep 17 00:00:00 2001
From: sumit <sumit_pandey@outlook.com>
Date: Fri, 12 Jun 2020 15:38:40 +0530
Subject: [PATCH 1/3] added addtion game

---
 src/App.js   | 63 ++++++++++++++++++++++++++++++++++++++++------------
 src/Greet.js | 16 -------------
 2 files changed, 49 insertions(+), 30 deletions(-)
 delete mode 100644 src/Greet.js

diff --git a/src/App.js b/src/App.js
index 3017066..d389908 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,54 @@
-import React from "react";
-import Greet from "./Greet";
-const App = () => {
+import React, { useState } from "react";
+import "./App.css";
+
+function App() {
+  const [num1, setNum1] = useState(1);
+  const [num2, setNum2] = useState(1);
+  const [score, setScore] = useState(0);
+  const [response, setResponse] = useState("");
+  const [error, setError] = useState(false);
+
+  const onKeypress = (e) => {
+    const answer = parseInt(response);
+    if (e.key == "Enter") {
+      if (answer === num1 + num2) {
+        setScore(score + 1);
+        setNum1(Math.ceil(Math.random() * 10));
+        setNum2(Math.ceil(Math.random() * 10));
+        setResponse("");
+        setError(false);
+      } else {
+        setError(true);
+      }
+    }
+  };
+
+  if (score >= 5) {
+    return (
+      <div className="container">
+        <h1 style={{ color: "white" }}>Yoohoo! You won!!</h1>
+      </div>
+    );
+  }
+
   return (
-    <div>
-      <Greet name="Sam" age="20" gender="male">
-        <p>This is a para</p>
-      </Greet>
-      <Greet name="Luna" age="15" gender="female">
-        <button>Click me</button>
-      </Greet>
-      <Greet name="John" age="18" gender="male" />
-      <Greet name="Amy" age="20" gender="female" />
-      <Greet name="xyz" age="25" gender="male" />
+    <div className="container">
+      <div className="child">
+        <h1>
+          {num1} + {num2}
+        </h1>
+        <input
+          type="text"
+          value={response}
+          placeholder="answer"
+          onChange={(e) => setResponse(e.target.value)}
+          onKeyDown={onKeypress}
+        />
+        {error ? <p style={{ color: "red" }}>opps you are wrong</p> : ""}
+        <h5>Score: {score}</h5>
+      </div>
     </div>
   );
-};
+}
 
 export default App;
diff --git a/src/Greet.js b/src/Greet.js
deleted file mode 100644
index bf19bd8..0000000
--- a/src/Greet.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import "./App.css";
-
-const Greet = (props) => {
-  const { name, age, gender } = props;
-  console.log(props);
-  return (
-    <>
-      <h1 className="container">Hello {name}</h1>
-      <p>My age is {age}</p>
-      <p>My gender is {gender}</p>
-      {props.children}
-    </>
-  );
-};
-export default Greet;

From 55f32332050c1f9bab91aad99ee50d678cd03d2a Mon Sep 17 00:00:00 2001
From: sumit <sumit_pandey@outlook.com>
Date: Fri, 12 Jun 2020 15:42:21 +0530
Subject: [PATCH 2/3] todo app

---
 src/App.js | 66 +++++++++++++++++++++---------------------------------
 1 file changed, 26 insertions(+), 40 deletions(-)

diff --git a/src/App.js b/src/App.js
index d389908..0a76811 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,51 +2,37 @@ import React, { useState } from "react";
 import "./App.css";
 
 function App() {
-  const [num1, setNum1] = useState(1);
-  const [num2, setNum2] = useState(1);
-  const [score, setScore] = useState(0);
-  const [response, setResponse] = useState("");
-  const [error, setError] = useState(false);
+  const [tasks, setTasks] = useState([]);
+  const [input, setInput] = useState("");
 
-  const onKeypress = (e) => {
-    const answer = parseInt(response);
-    if (e.key == "Enter") {
-      if (answer === num1 + num2) {
-        setScore(score + 1);
-        setNum1(Math.ceil(Math.random() * 10));
-        setNum2(Math.ceil(Math.random() * 10));
-        setResponse("");
-        setError(false);
-      } else {
-        setError(true);
-      }
-    }
+  const addTask = () => {
+    setTasks([...tasks, input]);
+    setInput("");
   };
 
-  if (score >= 5) {
-    return (
-      <div className="container">
-        <h1 style={{ color: "white" }}>Yoohoo! You won!!</h1>
-      </div>
-    );
-  }
+  const deleteTask = (index) => {
+    tasks.splice(index, 1);
+    setTasks([...tasks]);
+  };
 
   return (
-    <div className="container">
-      <div className="child">
-        <h1>
-          {num1} + {num2}
-        </h1>
-        <input
-          type="text"
-          value={response}
-          placeholder="answer"
-          onChange={(e) => setResponse(e.target.value)}
-          onKeyDown={onKeypress}
-        />
-        {error ? <p style={{ color: "red" }}>opps you are wrong</p> : ""}
-        <h5>Score: {score}</h5>
-      </div>
+    <div>
+      <ul>
+        {tasks.map((task, index) => (
+          <li>
+            {task}
+            <button onClick={() => deleteTask(index)}>X</button>
+          </li>
+        ))}
+      </ul>
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+      />
+      <button onClick={addTask}>Add task</button>
+      <button onClick={() => setTasks([])}>Reset All</button>
+      <p>No of tasks to be done : {tasks.length}</p>
     </div>
   );
 }

From 618e71abadbad715079ef0bde99e4b18117b958c Mon Sep 17 00:00:00 2001
From: sumit <sumit_pandey@outlook.com>
Date: Sat, 13 Jun 2020 17:01:06 +0530
Subject: [PATCH 3/3] added context code

---
 src/App.js | 56 +++++++++++++++++++++++++-----------------------------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0a76811..dbb854a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,40 +1,36 @@
-import React, { useState } from "react";
+import React, { useState, createContext } from "react";
 import "./App.css";
 
-function App() {
-  const [tasks, setTasks] = useState([]);
-  const [input, setInput] = useState("");
+const info = {
+  name: "John",
+  age: 20,
+  gender: "male"
+};
 
-  const addTask = () => {
-    setTasks([...tasks, input]);
-    setInput("");
-  };
-
-  const deleteTask = (index) => {
-    tasks.splice(index, 1);
-    setTasks([...tasks]);
-  };
+const ThemeContext = createContext(info);
 
+const Person = () => {
+  const info = React.useContext(ThemeContext);
+  console.log(info);
   return (
     <div>
-      <ul>
-        {tasks.map((task, index) => (
-          <li>
-            {task}
-            <button onClick={() => deleteTask(index)}>X</button>
-          </li>
-        ))}
-      </ul>
-      <input
-        type="text"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-      />
-      <button onClick={addTask}>Add task</button>
-      <button onClick={() => setTasks([])}>Reset All</button>
-      <p>No of tasks to be done : {tasks.length}</p>
+      <p>
+        {info.name}, {info.age}, {info.gender}
+      </p>
     </div>
   );
-}
+};
+
+const Family = () => {
+  return <Person />;
+};
+
+const App = () => {
+  return (
+    <ThemeContext.Provider value={info}>
+      <Family />
+    </ThemeContext.Provider>
+  );
+};
 
 export default App;