creating a basic todo app with create react app

readMe

for full project work 

www.github.com/BigUncleYemi/simple-todo-app.git

App.css

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 20vmin;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

ul{
  padding: 0;
  margin: 0;
}

li{
  list-style: none;
  text-align: left;
  margin: 0px auto 15px;
  font-size: 17px;
}

form{
  display: flex;
  flex-flow: column nowrap;
}


input{
  margin: 5px;
  font-size: 16px;
  padding: 0px 0;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

## Form Component
const Form = ({
  handleAddTask
}) => (
  <form onSubmit={handleAddTask}>
    <input type="text" name="task" id="task" placeholder="Enter Task" />
    <input type="time" name="time" id="time" placeholder="Enter time" />
    <input type="submit" value="Add Task" style={{padding: '7px 20px', color: '#2b2c34', backgroundColor: 'white', border: 'none'}}/>
  </form>
);

class App extends Component {
  constructor(props){
    super(props);
    ## states
    this.state={
      tasks: []
    }
    ## methods
    this.handleAddTask = this.handleAddTask.bind(this);
    this.handleRemoveTask = this.handleRemoveTask.bind(this);
    this.handleUpdateTask = this.handleUpdateTask.bind(this);
  }
  
  ## method to handle add new task
  handleAddTask(e){
    if(document.getElementById('time').value && document.getElementById('task').value ){ //  check if form input are empty or not 
      e.preventDefault();// prevent browser from refreshing
      const task = e.target.task.value;// collect task name from form
      const done = e.target.time.value;// collect task time from form
      const date = new Date();// make new time instances
      const time = date.toLocaleTimeString(); // get current time task was created.
      const newTask = {name: task, created: time, done };// gather the data and make as an object
      
      // update this.state.tasks with the newTask
      this.setState((currState) => {
        return{
          tasks: currState.tasks.concat([newTask]),
        }
      })
      e.target.reset(); // reset form input
    }else{// if form input is not filled run
      alert('Task not Entered')
      e.preventDefault();
    }
  }
  
  ## method to delete task
  handleRemoveTask(item){
    this.setState((currState) => {// the setState has a parameter which is the current state 
      return{
      // here we check for the task settled and remove it 
        tasks: currState.tasks.filter((task) => task !== item)
      }
    })
  }


  ## methods to update task
  handleUpdateTask(item){
    if( !document.getElementById('task').value ){// check if task input is empty
      document.getElementById('task').value = item.name; // set the task input value to that of the selected 
      document.getElementById('time').value = item.done;// set the time input value to that of the selected 
      this.setState((currState) => {// the setState has a parameter which is the current state 
        return{
        // here we check for the task settled and remove it 
          tasks: currState.tasks.filter((task) => task !== item)
        }
      })
    }else{// if form input is not filled run
      alert('input is not empty')
    }
  }

  render() {
    
    const {tasks} = this.state; // deconstuct our tasks from the state
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            React Todo App
          </p>
          <Form handleAddTask={this.handleAddTask} />
          <h3>Tasks</h3>
          <ul>
          {/* here we iterate the tasks into a list item */}
            {tasks.map((item, i) => <li onClick={() => this.handleUpdateTask(item)} key={i}>{item.name}  {item.done} - created {item.time} <button onClick={() => this.handleRemoveTask(item)} style={{padding: '3px 20px', color: 'red', backgroundColor: 'white', border: 'none'}}>del</button></li>)}
          </ul>
        </header>

      </div>
    );
  }
}

export default App;