Todo List with react
How do I make an todo list with react?
What is a todo list with react? How do you make a todo list with react? This script and codes were developed by Mohammed Fawzy on 26 January 2023, Thursday.
Todo List with react - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Todo List with react</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app" class="app"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Todo List with react - Script Codes CSS Codes
body{ background-color: #66CCFF; font-family: sans-serif;
}
.app { text-align:center; margin-top:40px
}
.input-style{ width:40%; margin:auto; display:inline-block; margin-right:10px
}
.todoListMain .theList { list-style: none; padding-left: 0; width: 255px; margin: 30px auto;
}
.todoListMain .theList li { color: #333; background-color: rgba(255,255,255,.5); padding: 15px; margin-bottom: 15px; border-radius: 5px;
}
Todo List with react - Script Codes JS Codes
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var TodoItems = React.createClass({ displayName: "TodoItems", render: function render() { var todoEntries = this.props.entries; function createTasks(item) { return React.createElement( "li", { key: item.key }, item.text ); } var listItems = todoEntries.map(createTasks); return React.createElement( "ul", { className: "theList" }, listItems ); }
});
var TodoList = function (_React$Component) { _inherits(TodoList, _React$Component); function TodoList(props) { _classCallCheck(this, TodoList); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { items: [] }; return _this; } TodoList.prototype.addItem = function addItem(e) { //reference to our state object's items var itemArray = this.state.items; itemArray.push({ text: this._inputElement.value, key: Date.now() }); this.setState({ items: itemArray }); this._inputElement.value = ""; e.preventDefault(); }; TodoList.prototype.render = function render() { var _this2 = this; return React.createElement( "div", { className: "todoListMain" }, React.createElement( "h1", null, " Todo List " ), React.createElement( "div", { className: "header" }, React.createElement( "form", { onSubmit: this.addItem.bind(this) }, React.createElement("input", { ref: function ref(a) { return _this2._inputElement = a; }, className: "input-style form-control", placeholder: "Enter task" }), React.createElement( "button", { className: "btn btn-lg btn-success mybutton", type: "submit" }, "add" ) ) ), React.createElement(TodoItems, { entries: this.state.items }) ); }; return TodoList;
}(React.Component);
var app = document.getElementById('app');
ReactDOM.render(React.createElement(TodoList, null), app);
Developer | Mohammed Fawzy |
Username | mohammed-fawzy |
Uploaded | January 26, 2023 |
Rating | 3 |
Size | 3,687 Kb |
Views | 10,120 |
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 |
Update text with react | 2,858 Kb |
A Pen by mohammed fawzy | 3,934 Kb |
Before page loading | 1,802 Kb |
Like button jQuery | 3,469 Kb |
Full width to the odds div | 2,571 Kb |
Slider | 2,634 Kb |
JQuery Collapse | 4,096 Kb |
Like button with react | 4,397 Kb |
Search lable in search input | 1,512 Kb |
React component | 2,444 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 |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
Flip test | Madhes | 1,635 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
Countdown Timer | Massiebn | 3,001 Kb |
RAQuote | Naderk007 | 4,412 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
Board Site | IndianaLuft | 10,542 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!