An Object-Oriented ToDo-List

Developer
Kevin Gimbel
Size
5,275 Kb
Views
38,456
  1. An Object-Oriented ToDo-List Previews
  2. An Object-Oriented ToDo-List HTML Codes
  3. An Object-Oriented ToDo-List CSS Codes
  4. An Object-Oriented ToDo-List JS Codes

How do I make an an object-oriented todo-list?

This is an Object Oriented To Do List. New Lists can be created with var xy = new ToDoList('xy').init(); to get a list with all standard functions. . What is a an object-oriented todo-list? How do you make a an object-oriented todo-list? This script and codes were developed by Kevin Gimbel on 11 August 2022, Thursday.

An Object-Oriented ToDo-List Previews
IQ Test

An Object-Oriented ToDo-List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>An Object-Oriented ToDo-List</title> <link rel='stylesheet prefetch' href='http://cdn.kevingimbel.me/css/bullgrid.beta.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">
<div class="info"> <h1>To-Do Lists!</h1> <p>Don't we all love them? This is a first attempt to create a Object Oriented To-Do List in JavaScript. Try add a new entry by typing in the input field and hitting enter. <del>Remove always removed the first item. Needs to be fixed.</del></p> <p>Remove, Undo and adding new Entries works now. New Lists are created with a <code>init()</code> function.</p> <p>Thanks to <a href="http://www.reddit.com/r/javascript/comments/1yph81/request_feedback_for_an_objectoriented_todo_list/cfmlopp">ZyklusDieWelt's comment on Reddit</a> there's now better history handling, in other words: Undo ALL the things! Also thanks to <a href="http://www.reddit.com/r/javascript/comments/1yph81/request_feedback_for_an_objectoriented_todo_list/cfmlmv0">XiSExecute's</a> for pointing out unused stuff.</p> <h3>The conversation on Reddit is growing!</h3> <p>Meanwhile it really got interesting so if you're a JavaScript beginner like me <a href="http://www.reddit.com/r/javascript/comments/1yph81/request_feedback_for_an_objectoriented_todo_list/">take a look at it</a>.</p>
</div> <div class="gw"> <div class="g one-half small-one-whole"> <article class="list list--work"> <hgroup class="gw list__header"> <div class="g three-quarters"> <h3>Work</h3> </div> <div class="g one-quarter"> <a class="btn" href="#" data-undo="work">Undo</a> </div> </hgroup> <ul data-list="work"> <li>Do stuff</li> <li>Make Front-End magic</li> <li>COFFEE!!11!</li> </ul> <input type="text" data-input="work" class="input input--work" /> </article> </div> <!-- list container --> <div class="g one-half small-one-whole"> <article class="list list--private"> <hgroup class="gw list__header"> <div class="g three-quarters"> <h3>ToDoList Script</h3> </div> <div class="g one-quarter"> <a class="btn" href="#" data-undo="private">Undo</a> </div> </hgroup> <ul data-list="private"> <li>Auto-Generate Markup</li> <li>LocalStorage or MongoDB</li> <li>New colors</li> <li>Mark as done before delete</li> <li class="todo--is-done">DRYer Code (adding Events "dynamically"?)</li> <li class="todo--is-done">Undo Function</li> <li class="todo--is-done">Delete Function</li> </ul> <input type="text" data-input="private" class="input input--private" /> </article> </div> <!-- list container --> </div> <!-- gw -->
</div> <!-- wrapper --> <script src="js/index.js"></script>
</body>
</html>

An Object-Oriented ToDo-List - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://weloveiconfonts.com/api/?family=fontawesome|zocial);
/* fontawesome */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
/* zocial */
[class*="zocial-"]:before { font-family: 'zocial', sans-serif;
}
* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
a { color: #ff3333; text-decoration: none;
}
a:hover { color: #73be73;
}
a[href*="reddit"]:before { font-family: 'zocial', sans-serif; content: '> ';
}
body { font: 1rem/1.3 'Open Sans', sans-serif; color: black; background: white;
}
h3 { margin: 1em 0 0;
}
.wrapper { width: 100%; max-width: 45em; margin: 0 auto;
}
.info { width: 100%; background: #f1f1f1; border-top: 5px solid #324566; margin: 1.5em auto; padding: 1.5em;
}
.info p { margin: .5em 0;
}
.list { width: 100%; padding: 1em; float: left; background: #ddd;
}
.list li { background: white; padding: .5em; margin: 0 0 .25em; list-style: none; border-radius: 3px; border-bottom: .125em solid #9c9c9c; position: relative;
}
.list li:hover { cursor: pointer; background: #ff4d4d; border-bottom-color: #e60000;
}
.list li:hover:after { font-family: 'FontAwesome', sans-serif; content: "\f057"; position: absolute; color: #cc0000; right: .5em; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.list li.todo--is-done { background: #cacaca; color: #9c9c9c; text-decoration: line-through;
}
.list li.todo--is-done:hover { border-bottom-color: #9c9c9c; background: #e4e4e4;
}
.list li.todo--is-done:hover:after { content: '';
}
.list__header { margin-bottom: .5em;
}
.list__header a { float: right; text-decoration: none;
}
.btn { background: #333; color: white; padding: .25em .5em; display: inline-block; border-radius: 3px;
}
.btn:hover { background: #3d3d3d;
}
.list--work { border-top: 5px solid #ff3333;
}
.list--private { border-top: 5px solid #73be73;
}
.input { display: block; width: 100%; padding: .5em; margin: 1em 0 0 0; border-radius: 3px;
}
.input--work { border: 1px solid #ff3333;
}
.input--private { border: 1px solid #73be73;
}

An Object-Oriented ToDo-List - Script Codes JS Codes

var ToDoList = function(name) { this.el = list = document.querySelector('[data-list="' + name +'"]'); this.childs = this.el.querySelectorAll('li'); this.lastRemoved = []; this.input = document.querySelector('[data-input="' + name +'"]'); this.undoButton = document.querySelector('[data-undo="' + name +'"]'); this.demoList = ["Do stuff", "Make Front-End Magic", "COFFEE!!!!", "Another important point", "Yet another thing to do"]; this.addEntry = function(entry) { this.el.innerHTML += '<li>' + entry + '</li>'; } this.init = function() { this.removeEntry(); this.addByInput(); this.undoRemove(); this.addByArray([]); }
}
ToDoList.prototype.addByArray = function(array) { this.array = array; var list = this; array.forEach(function (item) { console.log(item); list.addEntry(item); });
}
ToDoList.prototype.addByInput = function() { this.input.addEventListener('keyup', function(e) { e.preventDefault(); if(e.keyCode === 13 && e.target.value.length > 0) { this.addEntry(e.target.value); e.target.value = null; } }.bind(this));
}
ToDoList.prototype.removeEntry = function() { this.el.addEventListener('click', function(e) { // make sure it's a <li> that gets removed if(e.target.nodeName === 'LI') { this.lastRemoved.push({action: 'remove', content: e.target}); this.el.removeChild(e.target); } }.bind(this));
}
ToDoList.prototype.undoRemove = function() { this.undoButton.addEventListener('click', function(e) { e.preventDefault(); // array.pop() returns last element of an array & removes it. var lastEntry = this.lastRemoved.pop(); if(lastEntry && lastEntry.action === 'remove') { this.addEntry(lastEntry.content.innerText); } else { console.log("No last entry."); } }.bind(this));
}
/* Make a new List and initialize it with the standard functions. Optional you could use it like var myList = new ToDoList('listName'); myList.addEntry();
*/
var lists = {};
lists.work = lists.work || new ToDoList('work').init();
lists.private = lists.private || new ToDoList('private').init();
An Object-Oriented ToDo-List - Script Codes
An Object-Oriented ToDo-List - Script Codes
Home Page Home
Developer Kevin Gimbel
Username kevingimbel
Uploaded August 11, 2022
Rating 4
Size 5,275 Kb
Views 38,456
Do you need developer help for An Object-Oriented ToDo-List?

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!

Kevin Gimbel (kevingimbel) Script Codes
Name
CSS3 only Vault-Tec Logo
Slide Menu
CSS3 only classic Gameboy
Blurring Content when Dialog triggers
Chat UI - WIP
Custom Rating buttons with Icon Fonts
Pinterest Thumb
Pure CSS3 single element Link from TLOZ
CSS Pre-Block Overflow example
.LANG
Create amazing video scripts 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!