Task App

A task list app written in the javascript framework React.Js with a retro look.

Tools: React.Js, SASS

Language: Javascript, HTML5/CSS3


Live App

Git Repo

app.js

import React, { Component } from 'react'; import './App.css'; const Title = ({theTitle}) => { return ( <div> <h1 class="centerit">{theTitle}</h1> </div> ); }; class TaskGather extends React.Component { constructor(props) { super(props); this.state={ newTask: { key:'', text:'' } , TaskList:[] } this.updateItem = this.updateItem.bind(this); this.AddTask = this.AddTask.bind(this); this.DeleteTask = this.DeleteTask.bind(this); } AddTask = (event) => { event.preventDefault(); const AddThis = this.state.newTask; if (AddThis.text !== "") { let newTask = this.state.TaskList; newTask.push(AddThis); this.setState({TaskList: newTask, newTask: { text:'', key:''}}) } } updateItem(event) { this.setState({newTask: { text: event.target.value, key:Date.now() } }); } RenderTask = (e) => { return ( <div> <p class="centerit">{e}</p> </div> ); }; RenderList = (e) => { return <li class="centerit tasks" key={e.key}> {e.text} <button class="tasksbtn" onClick={() => this.MoveUpTask(e)}>/\</button><button class="tasksbtn" onClick={() => this.MoveDownTask(e)}>\/</button><button class="tasksbtn" onClick={() => this.DeleteTask(e)}>✖</button></li>; } MoveUpTask = (task) => { if (this.state.TaskList.indexOf(task) === 0) { return; } let index = this.state.TaskList.indexOf(task); let Filtered = this.state.TaskList; [Filtered[index], Filtered[index - 1]] = [Filtered[index - 1], Filtered[index]]; this.setState({TaskList: Filtered}); } MoveDownTask = (task) => { if (this.state.TaskList.indexOf(task) === this.state.TaskList.length - 1) { return; } let index = this.state.TaskList.indexOf(task); let Filtered = this.state.TaskList; [Filtered[index], Filtered[index + 1]] = [Filtered[index + 1], Filtered[index]]; this.setState({TaskList: Filtered}); } DeleteTask = (task) => { const Filtered = []; for (let i = 0; i !== this.state.TaskList.length; i++) { if (this.state.TaskList[i].key !== task.key) Filtered.push(this.state.TaskList[i]); } this.setState({TaskList: Filtered}); } ClearTaskList = () => { this.setState({TaskList: []}); } UpdateList = () => { return ( this.state.TaskList.map(this.RenderList) ); } render() { return ( <div> <form class="centerit" onSubmit={this.AddTask}> <input type="text" class="tasksbtn" value={this.state.newTask.text} placeholder=" What is the Task?" onChange={this.updateItem}/> <input type="submit" class="tasksbtn" value="Submit" /> </form> <br/> <p class="centerit"><i>Current Task:</i></p> <br/> <li> <p>{this.RenderTask(this.state.newTask.text)}</p> </li> <br/> <p class="centerit"><i>||| Tasks |||</i><br/><br/> <button class="centerit tasksbtn" onClick={() => this.ClearTaskList()}>Clear</button></p> <br/> <div class="taskslist"> {this.UpdateList()} </div> </div> ); } } class App extends React.Component { render() { const title = "- Task List -"; return ( <div> <Title theTitle = {title} /> <TaskGather /> </div> ); } } export default App;

index.scss

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); $bg-color: rgb(22, 22, 22); $main-color: rgb(102,255,102); $main-font: 'Open Sans', sans-serif; body { margin: 0; padding: 0; font-family: sans-serif; font: 100% $main-font; background-color: $bg-color; font-size: 14pt; } .centerit { text-align: center; color: $main-color; } .tasks { margin-top: 5px; margin-bottom: 5px; list-style-type: none; font-size: 18pt; } .tasksbtn { border: 1px solid $main-color; background-color: $bg-color; color: $main-color; margin-left: 2.5px; margin-right: 2.5px; font-style: bold; border-radius: 3.5px; padding-top: 2px; padding-bottom: 2px; font-size: 8pt; } .tasksbtn:hover { background-color: $main-color; color: $bg-color; } .taskslist { background-color: $bg-color; border: 1px solid $main-color; padding-top: 15px; padding-bottom: 15px; width: 45%; max-width: 650px; min-height: 150px; margin: auto; border-radius: 5px; }