Intermediate Todo List with React.js

Developer
Ajala Comfort
Size
6,191 Kb
Views
4,048
  1. Intermediate Todo List with React.js Previews
  2. Intermediate Todo List with React.js HTML Codes
  3. Intermediate Todo List with React.js CSS Codes
  4. Intermediate Todo List with React.js JS Codes

How do I make an intermediate todo list with react.js?

What is a intermediate todo list with react.js? How do you make a intermediate todo list with react.js? This script and codes were developed by Ajala Comfort on 11 January 2023, Wednesday.

Intermediate Todo List with React.js Previews
IQ Test

Intermediate Todo List with React.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Intermediate Todo List with React.js </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Intermediate Todo List with React.js - Script Codes CSS Codes

@import "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css";
@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,700';
body{width:100%;height:720px;font-family: 'Roboto', sans-serif;padding:0;margin:0;}
#alllist{width:50%;margin-left:25%;height:100%;}
#slider{ width:400px;height:720px;background:white; position:fixed;left:0;top:0;z-index:2;
}
.card{margin:0;}
button{height:50px;border:none;color:#34495e;font-weight:700;padding:10px;}
#slider > button{width:100%;}
.todo_lists{width:100%;min-height:100px;float:left;padding:10px;}
.todolist{width:100%;}
.collection{border:none;}
.userinput div > input{width:100%;}
.userinput div p{width:20%;display:inline-block;}
.userinput div button{display:inline-block;}
ul{list-style:none;}
ul li span{margin:5px;}
.actived{color:white;background-color:rgba(22, 160, 133,0.6) !important;}
.actived label{color:white;}
.todotitles{width:50%;margin-left:25%;margin-top:5%;cursor:pointer;}
.todotitles:hover{border-bottom:2px solid #f1c40f;}
#all{background:#34495e;color:#bdc3c7;}

Intermediate Todo List with React.js - Script Codes JS Codes

"use strict";
//add jquery
$(document).ready(function () { //listen to slider function getNum(n) { return parseInt(n); } $("#slider").on("click", function () { if (getNum($(this).css("width")) > 50) { $(this).animate({ width: "50px" }, function () { $(this).find("button,ul").css({ display: "none" }); }); } else { $(this).animate({ width: "400px" }, function () { $(this).find("button,ul").css({ display: "block" }); }); } });
});
var Todo = function Todo(text, priority) { //used to create new todos this.text = text;this.priority = priority; this.update = function (update) { this.text = update.text;this.priority = update.priority; };
};
var TodoList = function TodoList(i) { //this is a constructor used to create babies called object this.todos = [];this.listSize = function () { return this.todos.length; }; this.name = "Todo-List..." + i; this.add = function (todo) { //adds if the text is not the the list already; update if it is return todo.index !== undefined ? this.updateTodo(todo.index, todo) : this.todos.push(new Todo(todo.text, todo.priority)); //pushes a new todo object (we will get there lol!) }; this.clear = function () { //clears the entire todo list delete this.todos;return this.todos = []; }; this.updateTodo = function (index, update) { //updates a particular todo using the provided index and updated values as object return this.todos[index].update(update); }; this.findTodo = function (searchTodo) { //finds the todo based on the content var pos = -1;this.todos.forEach(function (todo, i) { if (searchTodo == todo.text) { pos = i; } }); return pos; }; this.deleteTodo = function (todo) { //deletes the todo provided if (this.findTodo(todo) < 0) { return false; }this.todos.splice(this.findTodo(todo), 1); return true; };
};
//We are done with functionality; time to style
var Alllist = React.createClass({ displayName: "Alllist", getInitialState: function getInitialState() { return { alltodos: [] }; }, create: function create() { var all = this.state.alltodos; all.push(new TodoList(this.state.alltodos.length + 1)); return this.setState({ alltodos: all }); }, deleteList: function deleteList(i) { this.state.alltodos.splice(i, 1); return this.setState(this.state.alltodos); }, render: function render() { return React.createElement( "div", { id: "alllist" }, React.createElement( "div", { id: "slider", className: "card" }, React.createElement( "button", { onClick: this.create }, "Create New Todo" ) ), this.state.alltodos.map(function (todolist, index) { return React.createElement( "div", { className: "todo_lists" }, React.createElement( "button", { onClick: this.deleteList.bind(null, index) }, "Delete A List " ), React.createElement(Todos, { todolist: todolist, pos: index }) ); }.bind(this)) ); }
});
//let us display in the react domain!
var Todos = React.createClass({ displayName: "Todos", getInitialState: function getInitialState() { return { todolist: this.props.todolist }; }, displayList: function displayList() { var todolist = this.state.todolist.todos; return todolist.map(function (todo, i) { var props = { todo: todo, index: i, add: this.addATodo, delete: this.deleteATodo }; return React.createElement(EachTodo, props); }.bind(this)); }, addATodo: function addATodo(todo) { var todolist = this.state.todolist;todo.priority = todo.priority.length === 0 ? "Low" : todo.priority; todolist.add(todo);return this.setState(todolist); }, clearList: function clearList() { var todolist = this.state.todolist; todolist.clear();return this.setState(todolist); }, deleteATodo: function deleteATodo(index) { var todolist = this.state.todolist; todolist.deleteTodo(todolist.todos[index].text); return this.setState(todolist); }, render: function render() { return React.createElement( "div", { className: "todolist" }, React.createElement(UserInput, { add: this.addATodo, pos: this.props.pos }), React.createElement( "button", { onClick: this.clearList }, "Clear" ), React.createElement( "ul", { className: "collection" }, this.displayList() ) ); }
});
var EachTodo = React.createClass({ displayName: "EachTodo", getInitialState: function getInitialState() { return { update: false }; }, setupdate: function setupdate() { var u = !this.state.update; return this.setState({ update: u }); }, displayUpdate: function displayUpdate() { return this.state.update ? React.createElement( "div", null, React.createElement(HelperInputs, { add: this.add, option: "eachtodo" + this.props.index }) ) : null; }, add: function add(todo) { todo.index = this.props.index; return this.props.add(todo); }, delete: function _delete() { return this.props.delete(this.props.index); }, render: function render() { return React.createElement( "li", { className: this.state.update ? "collection-item actived" : "collection-item" }, React.createElement( "span", null, this.props.index + 1 + ". " + this.props.todo.text + " : " + this.props.todo.priority ), React.createElement( "button", { onClick: this.setupdate }, "Update" ), React.createElement( "button", { onClick: this.delete }, "Delete" ), this.displayUpdate() ); }
});
var UserInput = React.createClass({ displayName: "UserInput", render: function render() { return React.createElement( "form", { className: "userinput" }, React.createElement(HelperInputs, { add: this.props.add, option: "userinput" + this.props.pos }) ); }
});
var HelperInputs = React.createClass({ displayName: "HelperInputs", getInitialState: function getInitialState() { return { text: "", priority: "" }; }, updateInput: function updateInput(key, e) { var state = this.state; state[key] = e.target.value; return this.setState(state); }, clearInput: function clearInput() { $("input").val(""); $("input").prop("checked", false); }, sendTodo: function sendTodo(e) { e.preventDefault(); this.clearInput(); return this.props.add(this.state); }, render: function render() { return React.createElement( "div", null, React.createElement("input", { type: "text", onChange: this.updateInput.bind(this, "text") }), React.createElement( "p", null, React.createElement("input", { type: "radio", value: "high", onChange: this.updateInput.bind(this, "priority"), name: "priority", id: "high1" + this.props.option }), React.createElement( "label", { htmlFor: "high1" + this.props.option }, "High" ) ), React.createElement( "p", null, React.createElement("input", { type: "radio", value: "low", onChange: this.updateInput.bind(this, "priority"), name: "priority", id: "low1" + this.props.option }), React.createElement( "label", { htmlFor: "low1" + this.props.option }, "Low" ) ), React.createElement( "button", { onClick: this.sendTodo }, "Submit" ) ); }
});
ReactDOM.render(React.createElement(Alllist, null), document.body);
Intermediate Todo List with React.js - Script Codes
Intermediate Todo List with React.js - Script Codes
Home Page Home
Developer Ajala Comfort
Username AJALACOMFORT
Uploaded January 11, 2023
Rating 3
Size 6,191 Kb
Views 4,048
Do you need developer help for Intermediate Todo List with React.js?

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!

Ajala Comfort (AJALACOMFORT) Script Codes
Name
Tic-Tac-Toe Free Code Camp Challenge
COLOR PICKER
Bill Splitting App
Calender with ReactJS
Material Chat app Interface with ReactJS
Recipe Book
Hashtables
Basic ReactJs Form
Calculator with ReactJs
Calender Update
Create amazing captions 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!