Ein Adventskalender mit HTML, CSS, JavaScript und jQuery

Adventskalender

Für einen basalen Adventskalender braucht’s ein wenig Markup, ein paar Stildefinitionen – und ein paar Zeilen Code:

index.htm

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Weihnachtskalender</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>

    <div id="kalender"></div>
    <script src="js/jquery.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

style.css

#kalender {

    width: 1400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    text-align: center;
}

body {

    padding: 0;
    margin: 0;
}

.tuerchen {

    float: left;
    margin: 15px;
    width: 200px;
    height: 200px;
    background-color: lightblue;
    cursor: pointer;

    /* CSS 3 Animation */
    transition: box-shadow 1s ease;
}

.tuerchen:hover {

    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.75);
}

.tuerchen img {

    width: 200px;
    height: 200px;
    display: none;
}

.number {

    font-size: 21px;
    font-weight: bold;
    margin-top: 85px;
    font-family: helvetica;
    color: #555;
}

app.js

/*
 Blaupause für Türchen:
 <div class="tuerchen">
    <img src="img/2.jpg">
 </div>
*/

// ToDo: 24 Türchen dynamisch generieren, d.h.
// an #kalender anfügen

// for-Schleife -> Kontrollstruktur
// Führe etwas so lange aus, wie etwas der Fall ist
/*
    for (Initialisierung; Bedingung; Inkrementierung) {
        Schleifenrumpf -> Was soll gemacht werden?
    }
*/
for (var i = 1; i <= 24; i++) {

    // i++ (Inkrement), ist dasselbe wie i = i + 1
    console.log(i);

    /* Vorlage:
     <div class="tuerchen">
        <img src="img/*.jpg">
     </div>
     */
    $('#kalender').append(
        '<div class="tuerchen">' +
        '<div class="number">' + i + '</div>' +
        '<img src="img/' + i + '.jpg">' +
        '</div>'
    );
}

// Jedes Türchen mit dem Klick-Ereignis ausstatten
$('.tuerchen').bind('click', function() {

    // this -> das angeklickte Seitenelement
    // children() -> gehe eine Ebene tiefer
    $(this).children().show();
    $(this).children('.number').hide();
});

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.