Zum Hauptinhalt springen

solutions

HTML​

index.html
<body>
    <img src="./src/img/spitzbuben.jpg" alt="Frisch gebackene Spitzbuben" />

    <h1>Spitzbuben mit Johannisbeergelee</h1>
    <div id="zutaten">
      <h2>Zutaten für 50 - 60 Stück</h2>

      <ul>
        <li>Backpapier für das Blech</li>
        <li>250 g Butter, weich</li>
        <li>125 g Puderzucker</li>
        <li>2 TL Vanillezucker</li>
        <li>1 Prise Salz</li>
        <li>1 Eiweiss, leicht verquirlt</li>
        <li>350 g Mehl</li>
        <li>200 g Johannisbeergelee, erwärmt</li>
        <li>Puderzucker zum Bestäuben</li>
      </ul>
    </div>
    <div id="zubereitung">
      <h2>Zubereitung</h2>

      <p>Butter rühren, bis sich Spitzchen bilden. Puderzucker, Vanillezucker, Salz und Eiweiss zugeben, rühren, bis die Masse hell ist. Mehl dazusieben, kurz verrühren, zu einem Teig zusammenfügen. In Folie gewickelt 1 Stunde kühl stellen.</p>
      <p>Teig auf wenig Mehl 2-3 mm dick auswallen. Rondellen von 4-5 cm Ø ausstechen, auf das mit Backpapier belegte Blech legen. Für die Deckeli in der Hälfte der Rondellen ein Loch ausstechen, alles 20 Minuten kühl stellen.</p>
      <p>In der Mitte des auf 200 °C vorgeheizten Ofens 6-8 Minuten backen.</p>
      <p>Johannisbeergelee auf den ausgekühlten, gewendeten Bödeli verteilen, Deckeli aufsetzen, trocknen lassen. Mit Puderzucker bestäuben.</p>
    </div>
  </body>

CSS​

style.css
/* 
Stylesheet fuer Spitzbuben-Rezept 
*/


body {
    font-family: Georgia, «Times New Roman», Times, serif;
    background-image: url(../img/bg-tischdecke-rotkarriert.gif);
}

img {
    display: block;
}

h1 {
    font-style: italic;
    font-weight: normal;
    font-size: 30px;
    border-bottom: 3px solid #fff;
    margin: 5px 0 15px 0;
}

ul {
    font-size: 15px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

p {
    font-size: 15px;
    line-height: 18px;
    margin: 0 0 9px 0;
}

/* Rezept */
#rezept {
    width: 750px;
    padding: 10px;
    margin: 10px;
    border: 5px solid #fff;
    background-image: url(../img/bg-paper.gif);
    color: #333333;
}

#rezept img {
    width: 100%;
    border: 1px solid #fff;
}

/* Zutaten */

#zutaten {
    width: 300px;
    font-family: Lucida Sans Unicode, Lucida Grande, Verdana, sans-serif;
    float: left;
}

#zutaten h2 {
    font-size: 20px;
    margin: 3px 0 5px 0;

}

/* Zubereitung */

#zubereitung h2 {
    font-style: italic;
    font-weight: normal;
    font-size: 24px;
    margin: 9px 0 9px 0;
}

#zubereitung ul {
    border-bottom: 1px dotted #fff;
}

#zutaten li {
    padding: 5px 0 4px 0;
    border-top: 1px dotted #fff;
}

Javascript​

script.js
// skillbar
$(document).ready(function () {
  $(".skillbar").each(function () {
    $(this)
      .find(".skillbar-bar")
      .animate(
        {
          width: $(this).attr("data-percent"),
        },
        10000
      );
  });

  document.getElementById("input-amount").value = amount;
  countUp();
});

var amount = 1;

var butter = 250;
var puder = 125;
var vanille = 2;
var salz = 1;
var eiweiss = 1;
var mehl = 250;
var johannis = 200;

function countUp() {
  amount += 1;
  document.getElementById("input-amount").value = amount;

  butteramount = butter * amount;
  puderamount = puder * amount;
  vanilleamount = vanille * amount;
  salzamount = salz * amount;
  eiweissamount = eiweiss * amount;
  mehlamount = mehl * amount;
  johannisamount = johannis * amount;

  document.getElementById("butter").value = butteramount;
  document.getElementById("puder").value = puderamount;
  document.getElementById("vanille").value = vanilleamount;
  document.getElementById("salz").value = salzamount;
  document.getElementById("eiweiss").value = eiweissamount;
  document.getElementById("mehl").value = mehlamount;
  document.getElementById("johannis").value = johannisamount;
}

function countDown() {
  amount -= 1;
  document.getElementById("input-amount").value = amount;

  butteramount = butter * amount;
  puderamount = puder * amount;
  vanilleamount = vanille * amount;
  salzamount = salz * amount;
  eiweissamount = eiweiss * amount;
  mehlamount = mehl * amount;
  johannisamount = johannis * amount;

  document.getElementById("butter").value = butteramount;
  document.getElementById("puder").value = puderamount;
  document.getElementById("vanille").value = vanilleamount;
  document.getElementById("salz").value = salzamount;
  document.getElementById("eiweiss").value = eiweissamount;
  document.getElementById("mehl").value = mehlamount;
  document.getElementById("johannis").value = johannisamount;
}