Qooxdoo ToDo

Developer
Oliver Schafeld
Size
2,913 Kb
Views
18,216
  1. Qooxdoo ToDo Previews
  2. Qooxdoo ToDo HTML Codes
  3. Qooxdoo ToDo CSS Codes
  4. Qooxdoo ToDo JS Codes

How do I make an qooxdoo todo?

Qooxdoo framework demo.Originally taken from: http://jsfiddle.net/wittemann/yJ7cu/ Which was inspired/taken from: http://qooxdoo.org/demos. What is a qooxdoo todo? How do you make a qooxdoo todo? This script and codes were developed by Oliver Schafeld on 05 October 2022, Wednesday.

Qooxdoo ToDo Previews
IQ Test

Qooxdoo ToDo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>qooxdoo ToDo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>
<div id="todo"> <h1>Merkzettel</h1> <div class="button" id="add">Neu</div> <div class="button" id="clear">Löschen</div> <div class="button" id="reset">Reset</div> <ul id="tasks">Loading...</ul>
</div>
<script type="template" id="task"> <li> <input id="{{id}}" type="checkbox" {{#done}}checked{{/done}}> <label for="{{id}}">{{name}}</label> </li>
</script> <script src='http://demo.qooxdoo.org/4.0.1/framework/q-4.0.1.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Qooxdoo ToDo - Script Codes CSS Codes

#todo { font-family: 'Gochi Hand', cursive; margin: 20px; border-color: #DEE184; background-color: #F4F39E; padding: 10px 20px; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); box-shadow: 3px 3px 3px rgba(0,0,0,0.2); -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); word-spacing: 0.1em; position: absolute; min-width: 150px; min-height: 200px;
}
#todo h1 { margin: 0; font-size: 200%
}
#todo ul { clear: both; padding-left: 10px; list-style-type: none; padding-top: 3px;
}
#todo li label { cursor: pointer;
}
#todo .button { float: left; margin-right: 10px; cursor: pointer; text-decoration: underline; font-size: 1.1em;
}
#todo .button-disabled { float: left; margin-right: 10px; font-size: 1.1em; color: #666;
}

Qooxdoo ToDo - Script Codes JS Codes

q.define({ construct : function() { this.__data = q.localStorage.getItem("qx-todo"); if (!this.__data) { this.__data = [ {id: Date.now(), done: false, name: "qooxdoo lernen"}, {id: Date.now(), done: true, name: "AngularJS lernen"} ]; } q("#add").on("click", this._onAdd, this); q("#reset").on("click", reset); this.render(); }, members : { render : function() { q("#tasks").empty(); for (var i=0; i < this.__data.length; i++) { var li = q.template.get("task", this.__data[i]); li.find("input[type=checkbox]")[0].model = this.__data[i]; q("#tasks").append(li); q("#tasks").find("input[type=checkbox]").on("click", this._onCheck, this); }; this.updateClearButton(); }, updateClearButton : function() { if (q("#tasks").find("input[type=checkbox][checked]").length > 0) { q("#clear") .on("click", this._onClear, this) .replaceClass("button-disabled", "button"); } else { q("#clear") .off("click", this._onClear, this) .replaceClass("button", "button-disabled"); } }, save : function() { q.localStorage.setItem("qx-todo", this.__data); this.render(); }, _onAdd : function() { var name = prompt("Task name", "") || ""; this.__data.push({id: Date.now(), done: false, name: name}); this.save(); }, _onClear : function() { for (var i = this.__data.length -1; i >= 0; i--) { if (this.__data[i].done) { this.__data.splice(i, 1); } }; this.save(); }, _onCheck : function(e) { var checkbox = e.getTarget(); checkbox.model.done = checkbox.checked; this.save(); } }, defer : function(statics) { q.$attachStatic({ "startTodo" : function() { new statics(); } }); },
/* reset : function() { // not implemented // q.localStorage.clear(); alert("not yet"); }*/
});
var reset = function() { alert("not yet implemented");
}
// start up the application
q.startTodo();
Qooxdoo ToDo - Script Codes
Qooxdoo ToDo - Script Codes
Home Page Home
Developer Oliver Schafeld
Username schafeld
Uploaded October 05, 2022
Rating 3
Size 2,913 Kb
Views 18,216
Do you need developer help for Qooxdoo ToDo?

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!

Oliver Schafeld (schafeld) Script Codes
Name
Wiggle Wobble Button
Markdown Notes
Responsive Image through CSS
Qooxdoo Button Menu
Simulating an Inputfield with Canvas
RWD Boilerplate
JS Raytracer
AngularJS ToDo Demo
Button Download Flyer rtk-russia.de
Sass Cheat Sheet
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!