Dom fundamendtals

dev-tim · dev-tim · commit 61579c063397 · 2018-10-02T21:16:02.000+02:00
diff --git a/chapter4/app.css b/chapter4/app.css
@@ -0,0 +1,16 @@
+body {
+    background: black;
+}
+
+.soft-body {
+    background: rgb(228, 238, 196)
+}
+
+.bolder{
+    color: #ababab;
+    font-weight: bold;
+}
+
+.hidden {
+    display: none;
+}
diff --git a/chapter4/app.js b/chapter4/app.js
@@ -0,0 +1,63 @@
+
+
+(function(){
+    function changeBodyColor(){
+        return new Promise(function(resolve, reject){
+            var bodyElement = document.getElementsByTagName('body')[0];
+            bodyElement.className = 'soft-body';
+            resolve(bodyElement);
+        })
+    }
+
+    function addSubmitButtonToBody(bodyElement){
+        return new Promise(function(resolve, reject){
+            if (bodyElement){
+                var createdButton = document.createElement('button')
+                createdButton.innerText = 'Submit';
+                createdButton.id = 'submit-button'
+                bodyElement.appendChild(createdButton);
+                resolve(bodyElement);
+            } else {
+                reject('No body available')
+            }
+        })
+    }
+
+
+    function waitUntillButtonIsClicked(){
+        return new Promise(function(resolve, reject){
+            var button = document.getElementById('submit-button');
+            button.addEventListener('click', function(e){
+                var helloWorldTitle = document.querySelector('h1');
+                var successTitle = document.querySelector('h2');
+        
+                helloWorldTitle.className = 'hidden';
+                successTitle.className = 'bolder';
+                resolve('Success!')
+            });
+        })
+    }
+
+    function showDelayedMessage(message){
+        return new Promise(function(resolve, reject){
+            setTimeout(function(){
+                alert('Hey hey! ' + message)
+                resolve();
+            }, 5000);
+        });
+    }
+
+    changeBodyColor()
+    .then(function(bodyElement){
+        return addSubmitButtonToBody(bodyElement);
+    }).then((res) => {
+        return waitUntillButtonIsClicked();
+    })
+    .then((message) => {
+        showDelayedMessage(message);
+    })
+    .catch(e => {
+        alert('AAAA' + e)
+    })
+
+})()
diff --git a/chapter4/index.html b/chapter4/index.html
@@ -0,0 +1,23 @@
+<html>
+    <head>
+       <link rel="stylesheet" type="text/css" href="./app.css"/>
+    </head>
+    <body>
+        <h1>Hello world!</h1>
+        <h2 class="hidden">Success</h2>
+
+        <div class="multiple-click">
+            <div>Test1</div>
+            <div>Test2</div>
+            <div>Test3</div>
+            <div>Test4</div>
+            <div>Test5</div>
+            <div>Test6</div>
+            <div>Test7</div>
+            <div>Test8</div>
+            <div>Test9</div>
+        </div>
+
+        <script src="./app.js"></script>
+    </body>
+</html>
