<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="de" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Spätzle</title>
<style type="text/css">
body { background-color: #b0c4de; }
</style>
</head>
<script>
function zurueck(){
parent.location.href="Startseite.html"
}
function anzahlPersonen(e){
var wert = e.options [e.selectedIndex].text;
var l1 = document.getElementById ("label1");
var l2 = document.getElementById ("label2");
var l3 = document.getElementById ("label3");
if (wert == 2) {
l1.replaceChild(document.createTextNode("250g Mehl"), l1.firstChild);
l2.replaceChild(document.createTextNode("3 Eier"), l2.firstChild);
l3.replaceChild(document.createTextNode("100 ml Wasser"), l3.firstChild);
}
}
function aufListe() {
document.getElementById("Label").style.display = "inline";
document.getElementById("Feld").style.display = "inline";
document.getElementById("ok").style.display = "inline";
document.getElementById("Tabelle").style.display = "none";
var i = 1;
var j= 0;
var idstring = "check" + i;
var checkbox;
var elem =document.getElementById("Box");
var liste = "<h2>Einkaufsliste</h2><br><ul>";
while(true) {
checkbox = document.getElementById(idstring);
if(checkbox == null) {
liste += "</ul>";
break;
}
else {
console.log("weiter");
if(checkbox.checked == true) {
liste += "<li>" + checkbox.value + "</li>";
}
}
i++;
idstring = "check" + i;
}
MeinFenster = window.open("", "Einkaufsliste", "width=300,height=400,left=100,top=200, scrollbars=yes");
MeinFenster.document.write(liste);
MeinFenster.document.write("test");
/*var myButton = MeinFenster.createElement("input");
myButton.setAttribute("type", "button");
myButton.setAttribute("value", "Hinzufügen");
myButton.setAttribute("onclick", "javascript:function()");*/
MeinFenster.focus();
}
function aufListe2 () {
MeinFenster
}
</script>
<body>
<table id="Tabelle">
<table style="width:40%">
<tr>
<td><h1>Lieblingsrezepte</h1></td>
<td><img alt="Zettel" height="70" src="Einkaufszettel.jpg" width="80" /></td>
</tr>
</table>
<input id="zurueck" name="Button1" onclick="zurueck()" type="button" value="zurück" height:25px" />
<table class="auto-style2" style="width: 30%">
<tr>
<td colspan="2">
<h2><span id="Spaetzle">Spätzle</span></h2>
</td>
</tr>
<tr>
<td id="Bild" class="auto-style19" style="width: 435px">
<img alt="Spaetzle" height="135" src="spaetzle.jpg" width="200" />
</td>
</tr>
<br/>
<tr>
<td class="auto-style6" style="width: 430px">
<table style="width: 100%; height: 50%;">
<tr>
<td class="auto-style22" style="width: 60px" valign="top">
<strong>Personen</strong>:
</td>
<td class="auto-style10" style="width: 76px" valign="top">
<select name="top5" id="Personen" onchange="anzahlPersonen(this)" style="height: 25px" >
<option>1</option>
<option>2</option>
<option>3</option>
<option selected="selected">4</option>
<option>5</option>
<option>6</option>
</select>
</td>
</tr>
</table>
</td>
<td class="auto-style6" style="width: 435px"> </td>
</tr>
<tr>
<td class="auto-style20" style="width: 430px; height: 26px;">
<table style="width: 100%">
<tr>
<td class="auto-style22" style="width: 100px"><strong>Zutaten:</strong></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="ZutatenBox" style="width: 430px">
<table style="width: 100%">
<tr>
<fieldset style="width: 180px">
<input type="checkbox" name="zutat" value="500 Mehl" id="check1" checked/>
<label id="label1" for="check1">500g Mehl</label>
<br/>
<input type="checkbox" name="zutat" value="6 Eier" id="check2" checked/>
<label id="label2" for="check2">6 Eier </label>
<br/>
<input type="checkbox" name="zutat" value="200ml Wasser" id="check3"/>
<label id="label3" for="check3">200ml Wasser </label>
<br/>
<input type="checkbox" name="zutat" value="Salz" id="check4" checked/>
<label id="label4" for="check4">Salz </label>
<br/>
<input type="checkbox" name="zutat" value="Pfeffer" id="check5" checked/>
<label id="label5" for="check5">Pfeffer </label>
<br/>
</fieldset>
</tr>
<tr>
<td style="width: 100px"> </td>
<td class="auto-style11" style="width: 304px"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="auto-style23" style="width: 430px">
<form method="post">
<input id="auf" name="Button1" onclick="aufListe()" style="width: 184px; height:25px" type="button" value="auf den Einkaufszettel" class="auto-style24" />
</form>
</td>
</tr>
</table>
</table>
<br/>
<label id="Label" style="display:none">Zusätzliche Zutaten hinzufügen: </label>
<input id="Feld" name="Text1" type="text" style="display:none; height:25px" />
<input id="ok" name="Button2" onclick="" type="button" value="ok" style="display:none; height:25px" />
<br />
<br/>
<p> Salzwasser in einem großen Topf zum kochen bringen. <br>
Mehl, Eier, Wasser, Salz und Pfeffer zu einem <br>
dickflüssigen Teig verrühren. <br>
Spätzleteig mit einem Spätzleschaber ins kochende <br>
Wasser schaben. <br>
Wenn die Spätzle an der Oberfläche schwimmen, <br>
mit einem Abschöpflöffel herausnehmen und in einem Sieb <br>
abtropfen lassen.
</p>
</body>
</html>
