v.1

assets/css/style.css

@@ -0,0 +1,62 @@
+h1{
+    border: 2px dotted;
+    width: 40%;
+}
+
+#emoji{
+    color: red;
+    font-size:  150px;
+}
+
+main{
+    position: relative;
+    left:160px;  /* Same as the width of the sidenav */
+    width:80%;
+    margin-left: 20px;
+    font-size: 28px; /* Increased text to enable scrolling */
+    padding: 0px 10px;
+}
+
+.sidenav {
+    height: 100%;
+    width: 160px;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+        overflow-x: hidden;
+        padding-top: 20px;
+    }
+
+.sidenav a {
+    padding: 6px 8px 6px 16px;
+    text-decoration: none;
+    font-size: 25px;
+    color: #818181;
+    display: block;
+}
+
+.sidenav a:hover {
+    color: #f1f1f1;
+}
+
+
+
+@media screen and (max-height: 450px) {
+    .sidenav {padding-top: 15px;}
+    .sidenav a {font-size: 18px;}
+}
+
+#circle{   /* AUFGABE C */
+    width:          100px;
+    height:         80px;
+    background:     rgb(237, 183, 20);
+    border-radius:  45%;
+}
+
+#hotspot{  /* AUFGABE E */
+    width: 160px;
+    height: 120px;
+    background-color: blue;
+}

assets/java/dom.js

@@ -0,0 +1,26 @@
+
+/*  Override id("app") mit neuem Text*/
+/* 
+    document.getElementById("app").style.color  = "blue";
+    document.getElementById("app").innerHTML    = "Hello Dude!";
+    document.getElementById("app").textContent  = "Hello  All!";
+    document.getElementById("app").innerText    = "HELL-O Monday!!";
+
+    document.getElementById("app2").style.color  = "green";
+    document.getElementById("app2").innerHTML    = "Hello Dude!";
+    document.getElementById("app2").textContent  = "Hello  All!";
+    document.getElementById("app2").innerText    = "HELL-O Monday!!"; */
+
+
+
+/*Sollte emoji verändern je nach Aktion*/
+/*     function mOver(){
+        let emojiObject = document.getElementById("emoji");
+        emojiObject.style.color     = 'blue';
+        emojiObject.style.fontSize  = '200px';
+    }
+
+    function mOut(element){
+        element.style.color         = 'red';
+        element.style.fontSize      = '100px';
+    } */

assets/java/dom2.js

@@ -0,0 +1,24 @@
+// Hello Coders - hier noch die Aufgaben, welche wir zusammen erarbeiten:
+/*
+    a)  Vorbereitung: Lege zwei Buttons jeweils mit Identifikator (id) 
+        und Beschriftung an.
+        Aufgabe: Auf Mausklick gib id und Beschriftung des gewählten Buttons 
+        in der Konsole des Browsers aus.
+
+    b) Vorbereitung: Lege einen "JA" Button an.
+       Aufgabe: Auf Mausklick wechsle die Beschriftung des Buttons auf "NEIN",
+       wenn vorher "JA" sichtbar war - und umgekehrt (toggle).
+
+    c) Vorbereitung: Lege einen eingefärbten Kreis (CSS Circle) und den Button
+       "Löschen" daneben an.
+       Aufgabe: Auf Mausklick lösche den Kreis.
+
+    d) Vorbereitung: Lege einen Paragraphen mit 
+       "<p><span>Anzahl Clicks:</span> <span>0</span></p>" 
+       und daneben einen Button mit "increment" beschriftet an.
+       Aufgabe: Auf Mausklick erhöhe die Zahl jeweils mit 1.
+
+    e) Vorbereitung: Lege ein blaues <div> an (120px, 160px). 
+       Aufgabe: Wechsle die Farbe des <div> sobald der Mauszeiger darüber fährt
+       und wechsle zurück, sobald der Mauszeiger das <div> wieder verlässt. 
+*/