diff --git a/public/index.html b/public/index.html index ac4b6aa8..09a9fff3 100644 --- a/public/index.html +++ b/public/index.html @@ -27,6 +27,8 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + React App diff --git a/src/AddToDo.js b/src/AddToDo.js new file mode 100644 index 00000000..8eb1e286 --- /dev/null +++ b/src/AddToDo.js @@ -0,0 +1,31 @@ +import React, { Component } from "react" + +class AddToDo extends Component { + state = { + content: '' + } + handleChange = (e) => { + this.setState({ + content: e.target.value + }) + } + handleSubmit = (e) => { + e.preventDefault(); + this.props.addToDo(this.state); + this.setState({ + content: '' + }) + } + render(){ + return ( +
+
+ + +
+
+ ) + } +} + +export default AddToDo \ No newline at end of file diff --git a/src/App.js b/src/App.js index 02a265bf..fd19e387 100644 --- a/src/App.js +++ b/src/App.js @@ -1,20 +1,42 @@ -import logo from './logo.svg'; -import './App.css'; -import Banner from './components/Banner/Banner'; -import { Switch, Route } from "react-router-dom" -import TodoPage from './pages/TodoPage/TodoPage'; -import FollowersPage from './pages/FollowersPage/FollowersPage'; +import React, { Component } from "react"; +import ToDos from "./ToDos"; +import "./App.css"; +import AddToDo from "./AddToDo"; -function App() { - return ( -
- - - - - -
- ); +class App extends Component { + state = { + todos: [ + { id: 1, content: "learn react" }, + { id: 2, content: "learn react again" }, + ], + }; + + deleteToDo = (id) => { + const todos = this.state.todos.filter(todo => { + return todo.id !== id; + }); + this.setState({ + todos, + }) + } + + addToDo = (todo) => { + todo.id = Math.random(); + let todos = [...this.state.todos, todo]; + this.setState({ + todos + }) + } + + render() { + return ( +
+

ToDo's

+ + +
+ ); + } } export default App; diff --git a/src/ToDos.js b/src/ToDos.js new file mode 100644 index 00000000..5ce3bc2c --- /dev/null +++ b/src/ToDos.js @@ -0,0 +1,24 @@ +import React from "react"; + +const ToDos = ({ todos, deleteToDo }) => { + const todoList = todos.length ? ( + todos.map((todo) => { + return ( +
+ { + deleteToDo(todo.id); + }} + > + {todo.content} + +
+ ); + }) + ) : ( +

You have nothing To Do!

+ ); + return
{todoList}
; +}; + +export default ToDos; diff --git a/src/components/AddInput/AddInput.css b/src/components/AddInput/AddInput.css deleted file mode 100644 index 1603e459..00000000 --- a/src/components/AddInput/AddInput.css +++ /dev/null @@ -1,27 +0,0 @@ -.input-container { - background-color: white; - margin-top: 2rem; - border-radius: 0.25rem; - padding: 1rem; - box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.329); - display: flex; - justify-content: space-between; -} - -.input { - border: none; - width: 90% -} - -.input:focus { - outline: none; -} - -.add-btn { - border: none; - padding: 0.3rem 2rem; - border-radius: 0.2rem; - background-color: rgb(53, 201, 157); - color: white; - font-weight: 900; -} \ No newline at end of file diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css deleted file mode 100644 index d127a8ad..00000000 --- a/src/components/Banner/Banner.css +++ /dev/null @@ -1,10 +0,0 @@ -.banner { - height: 35vh; - background-image: linear-gradient(to right, rgba(54, 214, 62, 0.794), rgba(53, 201, 157, 0.794), rgba(32, 155, 212, 0.794)),url("../../assets/images/mountain.jpg"); - background-position: center; -} - -.banner-img { - height: 100%; - width: 100%; -} \ No newline at end of file diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js deleted file mode 100644 index c3b44ea4..00000000 --- a/src/components/Banner/Banner.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' -import "./Banner.css" -import mountain from "../../assets/images/mountain.jpg" - -export default function Banner() { - return ( -
- ) -} diff --git a/src/components/Followers/Followers.css b/src/components/Followers/Followers.css deleted file mode 100644 index ac71a62f..00000000 --- a/src/components/Followers/Followers.css +++ /dev/null @@ -1,3 +0,0 @@ -.followers { - margin-top: -22.5vh; -} \ No newline at end of file diff --git a/src/components/Followers/Followers.js b/src/components/Followers/Followers.js deleted file mode 100644 index 9d4dec56..00000000 --- a/src/components/Followers/Followers.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' -import FollowersList from '../FollowersList/FollowersList' -import Header from '../Header/Header' -import "./Followers.css" - -export default function Followers() { - return ( -
-
- -
- ) -} diff --git a/src/components/FollowersList/FollowersList.css b/src/components/FollowersList/FollowersList.css deleted file mode 100644 index 387c65c8..00000000 --- a/src/components/FollowersList/FollowersList.css +++ /dev/null @@ -1,35 +0,0 @@ -.followerslist-container { - background-color: white; - margin-top: 2rem; - border-radius: 0.25rem; - padding: 1rem; - box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.329); - height: 50vh; - overflow: auto; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.follower-item { - display: flex; - padding: 1rem 0; - border-bottom: .05rem solid rgba(0, 0, 0, 0.082); - padding: 1rem 0; -} -.followers-details { - margin-left: 1.25rem; -} - -.follower-item-name { - display: flex; -} - -.follower-item-name h4 { - margin-right: 0.5rem; -} - -.follower-item img { - border-radius: 50%; - width: 4rem -} \ No newline at end of file diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css deleted file mode 100644 index 542054ef..00000000 --- a/src/components/Header/Header.css +++ /dev/null @@ -1,7 +0,0 @@ -.header { - color: white; - letter-spacing: 1rem; - text-transform: uppercase; - font-size: 5rem; - text-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.342); -} \ No newline at end of file diff --git a/src/components/Todo/Todo.css b/src/components/Todo/Todo.css deleted file mode 100644 index a353a5f2..00000000 --- a/src/components/Todo/Todo.css +++ /dev/null @@ -1,3 +0,0 @@ -.todo { - margin-top: -22.5vh; -} \ No newline at end of file diff --git a/src/components/Todo/Todo.js b/src/components/Todo/Todo.js deleted file mode 100644 index d77fbb8f..00000000 --- a/src/components/Todo/Todo.js +++ /dev/null @@ -1,26 +0,0 @@ -import React, { useState } from 'react' -import AddInput from '../AddInput/AddInput' -import Header from '../Header/Header' -import TodoList from '../TodoList/TodoList' -import "./Todo.css" - -function Todo() { - - const [todos, setTodos] = useState([]) - - return ( -
-
- - -
- ) -} - -export default Todo diff --git a/src/components/TodoFooter/TodoFooter.css b/src/components/TodoFooter/TodoFooter.css deleted file mode 100644 index 78a60ee7..00000000 --- a/src/components/TodoFooter/TodoFooter.css +++ /dev/null @@ -1,15 +0,0 @@ -.todo-footer { - display: flex; - justify-content: space-between; -} - -.todo-footer p { - font-weight: 600; - color: grey -} - -.todo-footer a { - font-weight: 600; - color: grey; - text-decoration: none; -} \ No newline at end of file diff --git a/src/components/TodoFooter/TodoFooter.js b/src/components/TodoFooter/TodoFooter.js deleted file mode 100644 index 29dde828..00000000 --- a/src/components/TodoFooter/TodoFooter.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import "./TodoFooter.css" -import { Link } from "react-router-dom" - -function TodoFooter({ - numberOfIncompleteTasks -}) { - return ( -
-

{numberOfIncompleteTasks} {numberOfIncompleteTasks === 1 ? "task" : "tasks"} left

- Followers -
- ) -} - -export default TodoFooter diff --git a/src/components/TodoList/TodoList.css b/src/components/TodoList/TodoList.css deleted file mode 100644 index 6c7a3082..00000000 --- a/src/components/TodoList/TodoList.css +++ /dev/null @@ -1,27 +0,0 @@ -.todolist-container { - background-color: white; - margin-top: 2rem; - border-radius: 0.25rem; - padding: 1rem; - box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.329); - height: 50vh; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.todos-container { - overflow: auto; - height: 90%; -} - -.todo-item { - border-bottom: .05rem solid rgba(0, 0, 0, 0.082); - padding: 1rem 0; - cursor: pointer; -} - -.todo-item-active { - text-decoration: line-through; - color: grey -} \ No newline at end of file diff --git a/src/components/TodoList/TodoList.js b/src/components/TodoList/TodoList.js deleted file mode 100644 index 492c925e..00000000 --- a/src/components/TodoList/TodoList.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react' -import TodoFooter from '../TodoFooter/TodoFooter' -import "./TodoList.css" - -function TodoList({ - todos, setTodos -}) { - - const updateTask = (id) => { - let updatedTasks = todos.map((todo) => { - if(todo.id === id) { - todo.completed = !todo.completed; - return todo - } else { - return todo - } - }); - setTodos(updatedTasks) - } - - const calcNumberOfIncompletedTasks = () => { - let count = 0; - todos.forEach(todo => { - if(!todo.completed) count++ - }) - return count - } - - return ( -
-
-
- { - todos.map((todo, index) => ( -
updateTask(todo.id)} - > - {todo.task} -
- )) - } -
-
-
- -
-
- ) -} - -export default TodoList diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c05..00000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/pages/FollowersPage/FollowersPage.js b/src/pages/FollowersPage/FollowersPage.js deleted file mode 100644 index c9a794d9..00000000 --- a/src/pages/FollowersPage/FollowersPage.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' -import { Container } from "react-bootstrap" -import Followers from '../../components/Followers/Followers' - -export default function FollowersPage() { - return ( -
- - - -
- ) -} diff --git a/src/pages/TodoPage/TodoPage.js b/src/pages/TodoPage/TodoPage.js deleted file mode 100644 index 46e2233d..00000000 --- a/src/pages/TodoPage/TodoPage.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import Header from '../../components/Header/Header' -import { Container } from "react-bootstrap" -import Todo from "../../components/Todo/Todo" - -export default function TodoPage() { - return ( -
- - - -
- ) -}