Todo List with ReactJs: Beginner
How do I make an todo list with reactjs: beginner?
Todo List- Material Design . What is a todo list with reactjs: beginner? How do you make a todo list with reactjs: beginner? This script and codes were developed by Ajala Comfort on 11 January 2023, Wednesday.
Todo List with ReactJs: Beginner - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Todo List with ReactJs: Beginner</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div id="space"></div>
</body> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/react.min.js'></script>
<script src='https://fb.me/react-with-addons-15.0.1.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Todo List with ReactJs: Beginner - Script Codes CSS Codes
body{margin:0;padding:0;width:100%;height:720px;}
#space{font-family: 'Roboto', sans-serif;}
#todolist{width:350px;min-height:500px;margin:auto;margin-top:100px;}
#todolist > div{width:100%;}
#addtodo_area{height:150px;background:rgba(52, 152, 219,0.6)}
#todolist button{background:#e91e63;position:absolute;top:220px;margin-left:300px;}
#addtodo_area > input{width:80%;height:30px;background:white;margin-left:10%;margin-top:30px;border-radius:3%;}
#displaytodo_list{min-height:350px;background:white;color:#9e9e9e;}
#displaytodo_list ul{width:100%;min-height:300px;}
#displaytodo_list li{width:80%;margin-left:10%;font-size:15px;cursor:pointer;}
#today{color:#e91e63;font-weight:800;}
/**************TRANSITIONS*****************/
.moveup-enter{height:0px;opacity:0.01;}
.moveup-enter.moveup-enter-active{ opacity:1;height:150px; transition:all 0.5s ease-in;
}
.moveup-leave{height:150px;}
.moveup-leave.moveup-leave-active{ opacity:0.01; height:0px; transition:all 0.5s ease-in;
}
.slideIn-enter{margin-left:-100%;opacity:1;}
.slideIn-enter.slideIn-enter-active{ margin-left:10%;opactiy:0.01; transition:all 0.5s ease-in;
}
.slideIn-leave{margin-left:10%;opacity:0.01;}
.slideIn-leave.slideIn-leave-active{ margin-left:-100%;opactiy:1; transition:all 0.5s ease-in;
}
Todo List with ReactJs: Beginner - Script Codes JS Codes
"use strict";
var Trans = React.addons.CSSTransitionGroup;
var TodoList = React.createClass({ displayName: "TodoList", getInitialState: function getInitialState() { return { list: [], show: false }; }, addTodo: function addTodo() { var todo = $("#addedTodo").val(); //console.log(todo) if (todo && todo.length > 0) { var list = this.state.list.push(todo);this.setState({ list: this.state.list }); } this.dynamicEntry(); return true; }, delete: function _delete(i) { this.state.list.splice(i, 1); return this.setState({ list: this.state.list }); }, dynamicEntry: function dynamicEntry() { $("#addedTodo").val(""); return this.setState({ show: !this.state.show }); }, render: function render() { return React.createElement( "div", { id: "todolist" }, React.createElement( Trans, { transitionName: "moveup", transitionEnterTimeout: 500, transitionLeaveTimeout: 500 }, !this.state.show ? React.createElement( "button", { className: "btn-floating btn-large waves-effect waves-light", onClick: this.dynamicEntry, id: "show", key: "show" }, React.createElement("i", { className: "fa fa-plus", "aria-hidden": "true" }) ) : React.createElement( "div", { id: "addtodo_area", key: "todoarea" }, React.createElement( "button", { className: "btn-floating btn-large waves-effect waves-light", onClick: this.addTodo }, React.createElement("i", { className: "fa fa-plus", "aria-hidden": "true", id: "addbutton" }) ), React.createElement("input", { type: "text", id: "addedTodo" }) ) ), React.createElement( "div", { id: "displaytodo_list" }, React.createElement( "p", { id: "today" }, "TODAY" ), React.createElement( "ul", null, React.createElement( Trans, { transitionName: "slideIn", transitionEnterTimeout: 500, transitionLeaveTimeout: 500 }, this.state.list.map(function (todo, i) { return React.createElement( "li", { key: todo + i, onClick: this.delete.bind(null, i), className: "animated swing bounce" }, todo ); }.bind(this)) ) ) ) ); }
});
ReactDOM.render(React.createElement(TodoList, null), document.getElementById("space"));
Developer | Ajala Comfort |
Username | AJALACOMFORT |
Uploaded | January 11, 2023 |
Rating | 3 |
Size | 3,877 Kb |
Views | 4,048 |
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!
Name | Size |
Slide Show with ReactJs | 3,672 Kb |
COLOR PICKER | 8,468 Kb |
Tic-Tac-Toe Free Code Camp Challenge | 5,214 Kb |
Material Chat app Interface with ReactJS | 5,851 Kb |
Math using Stacks | 5,686 Kb |
Calculator with ReactJs | 4,475 Kb |
SVG Clock Practice | 2,436 Kb |
Calender with ReactJS | 6,983 Kb |
Second Website | 6,234 Kb |
Palindrome Word | 3,421 Kb |
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!
Name | Username | Size |
Testing Portfolio Page | Sideshowli | 3,395 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Image Hover | Johnheiner | 3,409 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Dice | Fraina | 5,026 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
Improve | Gavra | 1,652 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!