initial commit

ifeoma-imoh · Apr 20, 2020 · 01affea · 01affea
commit 01affea
Show file tree

Hide file tree

Showing 10 changed files with 8,150 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.next
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "my-todo-app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@chakra-ui/core": "^0.7.0",
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
+    "emotion-theming": "^10.0.27",
+    "next": "^9.3.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  }
+}
diff --git a/pages/Todos.js b/pages/Todos.js
@@ -0,0 +1,46 @@
+const Todos = ({ todos, deleteTodo }) => {
+
+    const todoList = todos.length ? (
+        todos.map(todo => {
+            return (
+                <ul key={todo.id}>
+                    <li onClick={() => { deleteTodo(todo.id) }}>
+                        {todo.completed === true ? <Icon /> : <div></div>}
+                        <div style={{ textDecoration: todo.completed === true ? "line-through solid #3d3d3d" : "none" }}>{todo.content}</div>
+                    </li>
+                </ul>
+            )
+        })
+    ) : (
+            <p>Ifeoma you have nothing left todo... yayy!</p>
+        )
+    return (
+        <div>
+            {todoList}
+        </div>
+    )
+}
+function Icon() {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            x="0"
+            y="0"
+            width="18"
+            height="18"
+            enableBackground="new 0 0 512 512"
+            version="1.1"
+            viewBox="0 0 512 512"
+            xmlSpace="preserve"
+        >
+            <ellipse cx="256" cy="256" fill="#32BEA6" rx="256" ry="255.832"></ellipse>
+            <path
+                fill="#FFF"
+                d="M235.472 392.08L114.432 297.784 148.848 253.616 223.176 311.52 345.848 134.504 391.88 166.392z"
+            ></path>
+        </svg>
+    );
+}
+
+
+export default Todos;
diff --git a/pages/_app.js b/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles/reset.css'
+import '../styles/main.css'
+
+// This default export is required in a new `pages/_app.js` file.
+export default function MyApp({ Component, pageProps }) {
+    return <Component {...pageProps} />
+}
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+export default MyDocument;
diff --git a/pages/addForm.js b/pages/addForm.js
@@ -0,0 +1,40 @@
+import { Component } from 'react'
+
+
+class AddTodo extends Component {
+  state = {
+    content: ''
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      content: e.target.value
+    })
+  }
+  handleSubmit = (e) => {
+    e.preventDefault();
+    if (this.state.content) {
+      this.props.addTodo(this.state)
+      this.setState({
+        content: ''
+      })
+    }
+  }
+
+
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit} >
+          <label>Add new todo:</label>
+          <input type="text" id="mouseOver" onChange={this.handleChange} value={this.state.content} />
+          <button type="submit">Submit</button>
+        </form>
+
+      </div >
+    )
+  }
+}
+
+
+export default AddTodo
diff --git a/pages/index.js b/pages/index.js
@@ -0,0 +1,53 @@
+import { Component } from 'react'
+import Todos from './Todos'
+import AddTodo from './addForm'
+
+
+
+class App extends Component {
+    state = {
+        todos: [
+            { id: 1, content: "Learn Next.js", completed: false },
+            { id: 2, content: "Build a TO-DO app with Next.js", completed: false },
+            { id: 3, content: "Learn github actions", completed: false },
+            { id: 4, content: "Drink 56 glases of water this week", completed: false },
+            { id: 5, content: "Cook Stew", completed: false },
+            { id: 6, content: "Cook Jollof rice", completed: false },
+        ]
+    }
+
+    deleteTodo = (id) => {
+        const newTodos = this.state.todos.map(todo => {
+            if (todo.id === id) {
+                return { ...todo, completed: !todo.completed }
+            } else {
+                return todo
+            }
+        });
+        console.table(newTodos)
+        this.setState({
+            todos: newTodos
+        })
+    }
+
+    addTodo = (todo) => {
+        todo.id = Math.random();
+        let todos = [...this.state.todos, todo];
+        this.setState({
+            todos: todos
+        })
+    }
+    render() {
+        return (
+            <div className="App">
+                <div className="Appwrapper">
+                    <h1>To-do this week!</h1>
+                    <AddTodo addTodo={this.addTodo} />
+                    <Todos todos={this.state.todos} deleteTodo={this.deleteTodo} />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default App;
diff --git a/styles/main.css b/styles/main.css
@@ -0,0 +1,91 @@
+.App {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 700px;
+  width: 700px;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 12px;
+  padding: 10px;
+  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
+  background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
+}
+.Appwrapper {
+  height: 100%;
+  width: 100%;
+  background-color: white;
+  border-radius: 12px;
+}
+
+h1 {
+  font-size: 50px;
+  color: rgb(17, 16, 16);
+  text-align: center;
+  margin: auto;
+  margin-top: 50px;
+  padding: 50px 30px;
+  font-family: sans-serif;
+}
+
+li {
+  display: flex;
+  font-size: 18px;
+  color: #3d3d3d;
+  margin-left: 50px;
+  margin-right: 50px;
+  padding: 10px 10px;
+  font-family: 'Indie Flower', cursive;
+}
+
+li div:first-child {
+  width: 18px;
+  height: 18px;
+  border: 1px solid #e1e1e1;
+  margin-right: 10px;
+  border-radius: 50%;
+}
+
+li svg {
+  margin-right: 10px;
+}
+
+ul:nth-child(even) {
+  background-color: #f5f5f5;
+}
+
+input {
+  border: 1px solid rgb(166, 166, 245);
+  width: 270px;
+  height: 30px;
+  font-size: 14px;
+  border-radius: 15px;
+  margin-right: 10px;
+}
+
+form {
+  display: flex;
+  width: 550px;
+  margin: auto;
+  align-items: center;
+  padding-bottom: 40px;
+}
+
+label {
+  font-size: 20px;
+  font-family: sans-serif;
+  margin-right: 10px;
+}
+
+button {
+  width: 70px;
+  height: 30px;
+  border-radius: 6px;
+  border: 1px solid rgb(172, 172, 219);
+  font-size: 16px;
+}
+
+button:hover {
+  background-color: rgb(215, 238, 230);
+}