diff --git a/.eslintcache b/.eslintcache
index 19dd68e..7038f04 100644
--- a/.eslintcache
+++ b/.eslintcache
@@ -1 +1 @@
-[{"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\App.js":"1","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Header.js":"2","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Body.js":"3","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Counter.js":"4","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\ImageSlider.js":"5","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\MyForm.js":"6","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\ValidationForm.js":"7","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\FetchRandomUser.js":"8"},{"size":412,"mtime":1606339219884,"results":"9","hashOfConfig":"10"},{"size":343,"mtime":1606329200435,"results":"11","hashOfConfig":"10"},{"size":196,"mtime":1606329230921,"results":"12","hashOfConfig":"10"},{"size":602,"mtime":1606330098134,"results":"13","hashOfConfig":"10"},{"size":1355,"mtime":1606330842978,"results":"14","hashOfConfig":"10"},{"size":1699,"mtime":1606333976164,"results":"15","hashOfConfig":"10"},{"size":2721,"mtime":1606335582635,"results":"16","hashOfConfig":"10"},{"size":930,"mtime":1606366108691,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"3hla9c",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"32","messages":"33","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\App.js",["34","35"],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Header.js",[],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Body.js",[],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Counter.js",[],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\ImageSlider.js",["36"],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\MyForm.js",[],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\ValidationForm.js",["37"],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\FetchRandomUser.js",["38"],{"ruleId":"39","severity":1,"message":"40","line":3,"column":8,"nodeType":"41","messageId":"42","endLine":3,"endColumn":14},{"ruleId":"39","severity":1,"message":"43","line":4,"column":8,"nodeType":"41","messageId":"42","endLine":4,"endColumn":22},{"ruleId":"44","severity":1,"message":"45","line":23,"column":17,"nodeType":"46","endLine":29,"endColumn":19},{"ruleId":"39","severity":1,"message":"47","line":23,"column":13,"nodeType":"41","messageId":"42","endLine":23,"endColumn":26},{"ruleId":"44","severity":1,"message":"45","line":28,"column":17,"nodeType":"46","endLine":28,"endColumn":61},"no-unused-vars","'MyForm' is defined but never used.","Identifier","unusedVar","'ValidationForm' is defined but never used.","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","'passwordError' is assigned a value but never used."]
\ No newline at end of file
+[{"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\App.js":"1","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Header.js":"2","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Body.js":"3","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Counter.js":"4","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\ImageSlider.js":"5","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\MyForm.js":"6","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\ValidationForm.js":"7","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\FetchRandomUser.js":"8","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\reportWebVitals.js":"9","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\TodoList.js":"10","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Todo.js":"11","C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\TodoForm.js":"12"},{"size":254,"mtime":1606421953799,"results":"13","hashOfConfig":"14"},{"size":343,"mtime":1606329200435,"results":"15","hashOfConfig":"14"},{"size":196,"mtime":1606329230921,"results":"16","hashOfConfig":"14"},{"size":614,"mtime":1606419882641,"results":"17","hashOfConfig":"14"},{"size":1355,"mtime":1606330842978,"results":"18","hashOfConfig":"14"},{"size":1699,"mtime":1606333976164,"results":"19","hashOfConfig":"14"},{"size":2721,"mtime":1606335582635,"results":"20","hashOfConfig":"14"},{"size":1053,"mtime":1606374716385,"results":"21","hashOfConfig":"14"},{"size":362,"mtime":499162500000,"results":"22","hashOfConfig":"14"},{"size":1977,"mtime":1606432179634,"results":"23","hashOfConfig":"14"},{"size":392,"mtime":1606425539735,"results":"24","hashOfConfig":"14"},{"size":809,"mtime":1606423780802,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"3hla9c",{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"40","messages":"41","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\App.js",[],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Header.js",[],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Body.js",[],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Counter.js",[],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\ImageSlider.js",["50"],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\MyForm.js",[],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\ValidationForm.js",["51"],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\FetchRandomUser.js",["52"],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\reportWebVitals.js",[],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\TodoList.js",[],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\Todo.js",["53"],"C:\\Users\\rushi\\Documents\\GitHub\\react-helloworld\\src\\components\\TodoForm.js",[],{"ruleId":"54","severity":1,"message":"55","line":23,"column":17,"nodeType":"56","endLine":29,"endColumn":19},{"ruleId":"57","severity":1,"message":"58","line":23,"column":13,"nodeType":"59","messageId":"60","endLine":23,"endColumn":26},{"ruleId":"54","severity":1,"message":"55","line":30,"column":21,"nodeType":"56","endLine":30,"endColumn":55},{"ruleId":"61","severity":1,"message":"62","line":3,"column":1,"nodeType":"63","endLine":15,"endColumn":3},"jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","no-unused-vars","'passwordError' is assigned a value but never used.","Identifier","unusedVar","import/no-anonymous-default-export","Assign arrow function to a variable before exporting as module default","ExportDefaultDeclaration"]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4b9978f..f15cf8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13436,6 +13436,21 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "optional": true
     },
+    "shortid": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
+      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
+      "requires": {
+        "nanoid": "^2.1.0"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "2.1.11",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+          "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+        }
+      }
+    },
     "side-channel": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.3.tgz",
diff --git a/package.json b/package.json
index 2ef466b..325b6d6 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
+    "shortid": "^2.2.16",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index cba0fe9..12384d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,20 +1,14 @@
-import './App.css';
-import { Component } from 'react';
-import MyForm from './components/MyForm'
-import ValidationForm from './components/ValidationForm';
-import FetchRandomUser from './components/FetchRandomUser';
+import "./App.css";
+import { Component } from "react";
+import TodoList from "./components/TodoList";
 
 class App extends Component {
-  state = {
-    visible: true
-  };
-
-  render () {
+  render() {
     return (
-      <div className = "App">
-        <FetchRandomUser />
+      <div className="App">
+        <TodoList />
       </div>
-    )
+    );
   }
 }
 
diff --git a/src/components/Counter.js b/src/components/Counter.js
index fb2baa4..844e42f 100644
--- a/src/components/Counter.js
+++ b/src/components/Counter.js
@@ -2,7 +2,7 @@ import React from "react";
 
 export class Counter extends React.Component {
     state = {
-        count: 0
+      count: 0
     }
 
     increment = () => {
@@ -17,12 +17,13 @@ export class Counter extends React.Component {
         })
     }
 
+
     render () {
       return (
         <div>
-            <div>count: {this.state.count}</div>
-            <button onClick={this.increment}>increment</button>
-            <button onClick={this.decrement}>decrement</button>
+            <div>count: {this.props.count}</div>
+            <button onClick={this.props.increment}>increment</button>
+            <button onClick={this.props.decrement}>decrement</button>
         </div>
       )
     }
diff --git a/src/components/FetchRandomUser.js b/src/components/FetchRandomUser.js
index d200ec9..e077f6e 100644
--- a/src/components/FetchRandomUser.js
+++ b/src/components/FetchRandomUser.js
@@ -3,29 +3,33 @@ import React, { Component } from 'react';
 class FetchRandomUser extends Component {
     state = {
         loading: true,
-        person: null
+        people: []
     }
 
     async componentDidMount() {
-        const url = "https://api.randomuser.me/";
+        const url = "https://api.randomuser.me/?results=5";
         const response = await fetch(url);
         const data = await response.json();
-        this.setState({ person: data.results[0], loading: false });
+        this.setState({ people: data.results, loading: false });
     }
 
     render() {
         if (this.state.loading) {
             return <div>loading...</div>;
-          }
+        }
       
-          if (!this.state.person) {
+        if (!this.state.people) {
             return <div>didn't get a person</div>;
-          }
-      
-          return (
+        }
+    
+        return (
             <div>
-                <div>{this.state.person.name.title} {this.state.person.name.first} {this.state.person.name.last}</div>
-                <img src={this.state.person.picture.large}/>
+                {this.state.people.map(person => (
+                <div key={person.name.first + person.name.last}>
+                    <div>{person.name.title} {person.name.first} {person.name.last}</div>
+                    <img src={person.picture.large} />
+                </div>
+                ))}
             </div>
         );
     }
diff --git a/src/components/Todo.js b/src/components/Todo.js
new file mode 100644
index 0000000..91b4223
--- /dev/null
+++ b/src/components/Todo.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+export default (props) => {
+  return (
+    <div style={{ display: "flex", justifyContent: "center" }}>
+      <div
+        style={{ textDecoration: props.todo.complete ? "line-through" : "" }}
+        onClick={props.toggleComplete}
+      >
+        {props.todo.text}
+        <button onClick={props.onDelete}>x</button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/TodoForm.js b/src/components/TodoForm.js
new file mode 100644
index 0000000..833b171
--- /dev/null
+++ b/src/components/TodoForm.js
@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import shortid from "shortid";
+
+class TodoForm extends Component {
+  state = {
+    text: "",
+  };
+
+  handleChange = (event) => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+    this.props.onSubmit({
+      id: shortid.generate(),
+      text: this.state.text,
+      complete: false,
+    });
+    this.setState({ text: "" });
+  };
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <input
+          name="text"
+          placeholder="todo..."
+          value={this.state.text}
+          onChange={this.handleChange}
+        />
+        <button type="submit">add</button>
+      </form>
+    );
+  }
+}
+
+export default TodoForm;
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
new file mode 100644
index 0000000..77b083a
--- /dev/null
+++ b/src/components/TodoList.js
@@ -0,0 +1,78 @@
+import React, { Component } from "react";
+import Todo from "./Todo";
+import TodoForm from "./TodoForm";
+
+class TodoList extends Component {
+  state = {
+    list: [],
+    filter: "all",
+  };
+
+  addTodo = (todo) => {
+    const newList = [todo, ...this.state.list];
+    this.setState({ list: newList });
+  };
+
+  toggleComplete = (id) => {
+    this.setState({
+      list: this.state.list.map((todo) => {
+        if (todo.id === id) {
+          return {
+            ...todo,
+            complete: !todo.complete,
+          };
+        } else {
+          return todo;
+        }
+      }),
+    });
+  };
+
+  handleDelete = (id) => {
+    this.setState((state) => ({
+      todos: this.state.list.filter((todo) => todo.id !== id),
+    }));
+  };
+
+  updateFilter = (filter) => {
+    this.setState({ filter: filter });
+  };
+
+  render() {
+    let list = [];
+    if (this.state.filter === "all") {
+      list = this.state.list;
+    } else if (this.state.filter === "complete") {
+      list = this.state.list.filter((todo) => todo.complete);
+    } else if (this.state.filter === "active") {
+      list = this.state.list.filter((todo) => !todo.complete);
+    }
+
+    return (
+      <div>
+        <div>
+          todos left: {this.state.list.filter((todo) => !todo.complete).length}
+        </div>
+        <TodoForm onSubmit={this.addTodo} />
+        {list.map((todo) => (
+          <Todo
+            todo={todo}
+            key={todo.id}
+            onDelete={() => this.handleDelete(todo.id)}
+            toggleComplete={() => this.toggleComplete(todo.id)}
+          />
+        ))}
+
+        <div>
+          <button onClick={() => this.updateFilter("active")}>active</button>
+          <button onClick={() => this.updateFilter("all")}>all</button>
+          <button onClick={() => this.updateFilter("complete")}>
+            complete
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default TodoList;