Skip to content

Instantly share code, notes, and snippets.

@BigUncleYemi BigUncleYemi/App.css
Last active Nov 10, 2018

Embed
What would you like to do?
creating a basic todo app with create react app
for full project work
www.github.com/BigUncleYemi/simple-todo-app.git
.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);
}
}
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.