React To Do Task App

Developer
Katie Inkblotty
Size
5,564 Kb
Views
74,888
  1. React To Do Task App Previews
  2. React To Do Task App HTML Codes
  3. React To Do Task App CSS Codes
  4. React To Do Task App JS Codes

How do I make an react to do task app?

A task list made with React and Sass.. What is a react to do task app? How do you make a react to do task app? This script and codes were developed by Katie Inkblotty on 08 August 2022, Monday.

React To Do Task App Previews
IQ Test

React To Do Task App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React To Do Task App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://fb.me/react-0.14.2.js'></script>
<script src='https://fb.me/react-dom-0.14.2.js'></script> <script src="js/index.js"></script>
</body>
</html>

React To Do Task App - Script Codes CSS Codes

.heading, .task-model h1, .input-area h3 { color: #EFFFE9; font-weight: 300; letter-spacing: 0.1em;
}
.finished, ul li input[type='checkbox']:checked + span { color: #949494; text-decoration: line-through;
}
.btn { background-color: #2EC4B6; border: 2px solid #2EC4B6; border-radius: 0.5em; color: #011627; font-weight: 300; letter-spacing: 0.1em; margin-left: 1%;
}
#app { background-color: #EFFFE9; color: #011627; font-family: Lato; margin: 0 auto; width: 100%;
}
.inside-app { align-content: center; align-items: flex-start; display: flex; justify-content: center; margin: 0 auto; width: 90%;
}
.task-model, .input-area { border-radius: 0.25em; min-height: 25em; margin: 1%; padding: 2% 5%; width: 45%;
}
.task-model { background-color: #E71D36;
}
.task-model .btn { padding: 2%;
}
.input-area { background-color: #2EC4B6;
}
.input-area input { background-color: #EFFFE9; border-radius: 0.3em; padding: 1.5% 2%;
}
.input-area input.btn { background-color: #E71D36; border: 2px solid #E71D36; color: #EFFFE9;
}
ul { background-color: #EFFFE9; border-radius: 0.25em; list-style-type: none; min-width: 15em; max-width: 90%; padding: 5%;
}
ul li { margin-bottom: 0.5em;
}
ul li:last-child { margin-bottom: 0;
}
ul li .todo-span { transition: color 0.75s, text-decoration 0.2s;
}
ul li input[type='checkbox'] { display: inline-block; cursor: poiner; margin-right: 0.5em; opacity: 0;
}
ul li input[type='checkbox'] + .todo-span:before { border: 1px solid #011627; border-radius: 0.75em; content: ''; display: inline-block; height: 1em; padding: 0.5%; margin: 0 0.5em 0 -1.5em; vertical-align: middle; width: 1em;
}
ul li input[type='checkbox']:checked + .todo-span:before { border-color: #949494; content: "\f00c"; font-family: "FontAwesome";
}

React To Do Task App - Script Codes JS Codes

'use strict';
var ToDoInput = React.createClass({ displayName: 'ToDoInput', addTask: function addTask(e) { var newthing = document.getElementById('new-task').value; if (newthing) { this.props.addToDo(newthing); }; document.getElementById('new-task').value = ''; e.preventDefault(); }, render: function render() { return React.createElement( 'form', { onSubmit: this.addTask }, React.createElement('input', { type: 'text', id: 'new-task', placeholder: 'new task' }), React.createElement('input', { type: 'submit', className: 'btn' }) ); }
});
var FinishedList = React.createClass({ displayName: 'FinishedList', render: function render() { var endTasks = this.props.completedTasks.map(function (task, index) { return React.createElement( 'li', { key: index, className: 'finished' }, task ); }); return React.createElement( 'div', null, React.createElement( 'ul', null, endTasks ), React.createElement( 'form', { onSubmit: this.props.clear }, React.createElement('input', { type: 'submit', className: 'btn', value: 'Clear' }) ) ); }
});
var ToDoList = React.createClass({ displayName: 'ToDoList', render: function render() { var newToDos = this.props.todos.map(function (todo, index) { return React.createElement( 'li', { key: index }, React.createElement('input', { className: 'check-done', type: 'checkbox' }), React.createElement( 'span', { className: 'todo-span' }, todo ) ); }); return React.createElement( 'div', null, React.createElement( 'ul', null, newToDos ), React.createElement( 'form', { onSubmit: this.props.moveDone }, React.createElement('input', { className: 'btn', type: 'submit', value: 'Move to Completed →' }) ) ); }
});
var ToDoBox = React.createClass({ displayName: 'ToDoBox', getInitialState: function getInitialState() { return { items: ["Learn React states", "Pick color scheme", "Make custom checkboxes"], done: ["Walk dog"] }; }, addToDo: function addToDo(todo) { this.setState({ items: this.state.items.concat([todo]) }); }, clearFinished: function clearFinished(e) { e.preventDefault(); this.setState({ done: [] }); }, moveToCompleted: function moveToCompleted(e) { var finished = document.getElementsByClassName('check-done'); var newItems = []; var newDone = this.state.done; e.preventDefault(); Array.prototype.forEach.call(finished, function (box) { var isChecked = box.checked; var siblingSpan = box.parentElement.getElementsByClassName('todo-span'); if (isChecked === true) { var todo = siblingSpan[0].innerHTML; newDone.push(todo); } else { var todo = siblingSpan[0].innerHTML; newItems.push(todo); } }); this.setState({ items: newItems, done: newDone }); // make sure all checkboxes left in 'To Do' are unchecked var allChecks = document.getElementsByClassName('check-done'); Array.prototype.forEach.call(finished, function (box) { box.checked = false; }); }, render: function render() { return React.createElement( 'div', { className: 'inside-app' }, React.createElement( 'div', { className: 'task-model' }, React.createElement( 'h1', null, 'To Do' ), React.createElement(ToDoList, { className: 'toDoList', todos: this.state.items, moveDone: this.moveToCompleted }) ), React.createElement( 'div', { className: 'input-area' }, React.createElement( 'h3', null, 'Add New Task' ), React.createElement(ToDoInput, { addToDo: this.addToDo }), React.createElement( 'div', { className: 'completed-tasks' }, React.createElement( 'h3', null, 'Completed Tasks' ), React.createElement(FinishedList, { completedTasks: this.state.done, clear: this.clearFinished }) ) ) ); }
});
ReactDOM.render(React.createElement(ToDoBox, null), document.getElementById('app'));
React To Do Task App - Script Codes
React To Do Task App - Script Codes
Home Page Home
Developer Katie Inkblotty
Username inkblotty
Uploaded August 08, 2022
Rating 3
Size 5,564 Kb
Views 74,888
Do you need developer help for React To Do Task App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Katie Inkblotty (inkblotty) Script Codes
Name
Google Calendar Event Feed
Pomodoro Timer
Portfolio Clone for FreeCodeCamp
Force Directed Graph
US GDP Bar Chart
Star Wars search
GeoLocation
React Redux Task App
Tic Tac Toe
Svg path animation
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!