senäh

17senäh und so…

Artikelbild: Einfache To-Do-Liste im Notizbuch-Design

HTML/CSS/JS
22. Mrz 2012
Kommentare: 7

Einfache To-Do-Liste im Notizbuch-Design

Kategorien: HTML/CSS/JS | 22. Mrz 2012 | Kommentare: 7

Durch einen bei css-tricks veröffentlichten Artikel wurde ich dazu inspiriert, mich kurz in viererlei Sachen zu üben:

  • CSS mit Transitions und Pseudo-Elementen
  • möglichst wenig HTML-Markup
  • keine Bilder verwenden
  • einfaches JavaScript ohne jQuery & Co

Herausgekommen ist einer sehr einfache To-Do-Liste im Notizbuch-Stil. Kleine Spielerei, aber ein bisschen was habe ich gelernt. Vor allem, dass man JavaScript völlig neu lernen muss, wenn man sonst nur den Umgang mit jQuery gewohnt ist.

Es folgt ein kleiner Walkthrough.

Ziel…

… sieht so aus:

So sieht die fertige Liste aus

So sieht die fertige Liste aus

Wie gesagt, eine To-Do-Liste im Notizbuch-Stil. Hellgrauer Hintergrund, erledigte Aufgaben werden markiert und ein paar Hover- und Klick-Effekte.

HTML

Eine einfache Liste. Da man das Ganze eventuell um eine weitere Liste für gelöschte Aufgaben o.ä. erweitern möchte, verwenden wir eine Klasse statt einer ID.

<ul class="list">
	<li>Frühstück</li>
	<li>Facebook checken</li>
	<li>Rasieren</li>
	<li>Müll runterbringen</li>
	<li>Mama anrufen</li>
	<li>Twittern, dass ich Mama angerufen habe</li>
	<li>über Kontostand wundern</li>
	<li>Fernsehprogramm durchstöbern</li>
	<li>einen sehr langen Aufgabentext ausdenken, um die Einzeiligkeit zu demonstrieren</li>
	<li>Gute Nacht Geschichte anhören</li>
	<li>Schäfchen zählen und zZz</li>
</ul>

That’s it.

JavaScript

Ich komme erst zum JavaScript, weil wir hier lediglich Klassen wechseln. Um das Styling kümmern wir uns im Anschluss.

Eine Aufgabe hat 2 mögliche Zustände: erledigt oder unerledigt. Im ersteren Fall soll das entsprechende Listen-Element die Klasse done erhalten. Falls es doch wieder als unerledigt markiert werden soll, muss die Klasse gelöscht werden.

In jQuery würde man wohl sowas in der Art schreiben:

$('.list li').click(function(){
	$(this).toggleClass('done');
});

Da ich aber für so eine popelige To-Do-Liste keine extra Bibliothek einbinden möchte, soll das Ganze doch bitte über natives JavaScript realisiert werden. Hier der Code dafür, Erklärung ist drunter.

function addLinkEvt() {
	// getElementsByClassName returns nodeList we have to walk through!
	var lists = document.getElementsByClassName('list');
	for (var i = 0; i < lists.length; i++) {
		var listElements = lists[i].getElementsByTagName('li');
		for (var j = 0; j < listElements.length; j++) {
			listElements[j].addEventListener('click', toggleDoneClass, false);
		}
	}
}

function toggleDoneClass(e) {
	var elem = e.target;
	var doneClass = 'done';
	elem.className = (elem.className == '') ? doneClass : '';
}

window.onload = addLinkEvt;

Im Nachhinein nur logisch. Wenn man aber wie bereits erwähnt sonst nur mit jQuery unterwegs ist, stößt man auf ein paar Stolpersteine. Zuerst holen wir uns mit getElementsByClassName('list') alle Listen. Danach schauen wir mit einer for-Schleife auf alle Listen-Elemente und fügen ein Klick-Event hinzu. Die dabei aufgerufene Funktion toggleDoneClass() imitiert dann das Verhalten von jQuery’s toggleClass().

Zu guter Letzt müssen wir mit onload noch sicherstellen, dass das Event-Binding auch durchgeführt wird.

CSS

Jetzt zum lustigen Teil 😉 Interessant sind dabei die Transitions, wenn man über eine Aufgabe fährt, das Zusammenspiel von Häkchen und X beim Markieren der Aufgaben sowie der roten Doppelrand ohne zusätzliches Markup.

Ich zeige euch jetzt einfach mal das CSS komplett. Die Kommentare sollten alles verständlich machen. Hoffentlich stört ihr euch nicht an dem Englisch. Habe ich mir so angewöhnt 🙂

body {
	background-color:#f5f5f5;
	width:600px;
	margin:0 auto;
	padding:0;
}
.list {
	position:relative; /* so our red line will be positioned correctly */
	color:#555;
	font-size:22px;
	padding:0;
	width:500px;
	font-family:courier, monospace;
	border:1px solid #dedede;
}
/* red border on the left side */
.list:before {
	content:"";
	position:absolute;
	z-index:99;
	top:-1px;
	left:40px;
	height:100%;
	width:2px; /* important for doubled border to work */
	border-left:1px solid #ffaa9f;
	border-right:1px solid #ffaa9f;
}
.list li {
	position:relative; /* so ✔/✖ will be positioned correctly */
	list-style:none;
	height:auto;
	padding:10px 10px 10px 80px;
	border-bottom:1px dotted #ccc;
	cursor:pointer;
	/* following 3 lines will prevent our list elements from being multiline */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* green background for tasks marked "done" */
.list li.done {
	background-color:#dfd;
}
/* get rid of the last line's bottom-border */
.list li:last-child {
	border-bottom:none;
}
/* fancy new css transitions */
.list li:hover {
	background-color:#f0f0f0;
	-webkit-transition:all 0.2s;
	-moz-transition:all 0.2s;
	-ms-transition:all 0.2s;
	-o-transition:all 0.2s;
}
/* show ✔ on hover */
.list li:hover:before {
	content:"✔";
	color:#090;
	position:absolute;
	top:10px;
	left:12px;
}
/* keep green background for done tasks on hover */
.list li.done:hover {
	background-color:#dfd;
}
/* permanently show ✔ for tasks marked "done" */
.list li.done:before {
	content:"✔";
	color:#090;
	position:absolute;
	top:10px;
	left:12px;
}
/* show red ✖ on hover if task is marked "done" */
.list li.done:hover:before {
	content:"✖";
	color:#c00;
}

Die Symbole für Haken und Kreuz (einzeln, nicht in Kombination) gibt’s hier. Übrigens einer meiner Lieblings One-Page-Apps.

Demo…

gibt’s hier 😉

Wie man also sieht: eine simple To-Do-Liste ohne Grafiken und ohne externe Dateien. Für mich eine schöne Übung. Ließe sich – wie eingangs erwähnt – auch noch ein wenig erweitern. Das überlasse ich aber euch 😉

Seht euch auch bei Interesse die Kommentare zum Original-Artikel an. Der Artikel selbst war btw ein Gastbeitrag eines – wait for it – 14-Jährigen! Das Einzige, was ich in dem Alter am Rechner gemacht hab, war das verzweifelte Sammeln von S-K-A-T-E bei Tony Hawk’s Pro Skater 2 😀

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)