diff options
| author | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-09 22:26:26 -0700 |
|---|---|---|
| committer | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-09 22:26:26 -0700 |
| commit | cbcc733a35f786bc1c238ae5d7cff375baa7e5de (patch) | |
| tree | 5c4b8c7f6449ba157a92835b22561e726be635a4 | |
| parent | 47ab1ea9833cf0b28a9f81b2f2b8b117039453ea (diff) | |
Update demos
| -rw-r--r-- | demos/10-dom-traversal.example.html | 39 | ||||
| -rw-r--r-- | demos/11-pure-js-app.example.html | 69 | ||||
| -rw-r--r-- | demos/8-async-await.example.js | 12 | ||||
| -rw-r--r-- | demos/8-jquery-vs-dom.example.js | 0 | ||||
| -rw-r--r-- | demos/9-dom-manipulation.example.html | 46 | ||||
| -rw-r--r-- | demos/9-dom-manipulation.example.js | 0 |
6 files changed, 166 insertions, 0 deletions
diff --git a/demos/10-dom-traversal.example.html b/demos/10-dom-traversal.example.html new file mode 100644 index 0000000..742a745 --- /dev/null +++ b/demos/10-dom-traversal.example.html @@ -0,0 +1,39 @@ +<html> + <head> + <style> + p { + font-size: 50px; + font-weight: 700; + } + </style> + <script> + // Lifted this from Erik + // https://github.com/uvicwebdev/javascript-intro/blob/master/webdev_logo/js/main.js + function computeRgb(x, y, width, height) { + let r = Math.floor((x / width) * 255) + 5; + let g = Math.floor((y / height) * 255) + 5; + let b = Math.floor((r + g)/2); + return `rgb(${r},${g},${b})` + } + // This will be an array of nodes since we are + // using class name (array may have length 0 or 1) + let attentionNodes = document.getElementsByClassName('attention') + document.onmousemove = function(event) { + // iterate over each node and update its style + let color = + computeRgb(event.pageX, event.pageY, window.innerWidth, window.innerHeight) + for(let node of attentionNodes) { + node.style.color = color + } + } + </script> + </head> + <body> + <!-- Semantic HTML is good for you --> + <main> + <p>Sometimes you <span class="attention">just</span> really + need certain words to <span class="attention">stand</span> out + and grab the reader's <span class="attention">attention</span></p> + </main> + </body> +</html>
\ No newline at end of file diff --git a/demos/11-pure-js-app.example.html b/demos/11-pure-js-app.example.html new file mode 100644 index 0000000..c7cbf24 --- /dev/null +++ b/demos/11-pure-js-app.example.html @@ -0,0 +1,69 @@ +<html> + <head> + <style> + aside { + position: absolute; + width: 200px; + height: 500px; + right: 50px; + bottom: 0; + border: 1px dotted #000000; + display: flex; + flex-direction: column; + justify-content: space-between; + } + </style> + <script> + // TODO It would be nice to scope this a little closer + // (avoid the global scope for the message list). + // It would also be great to not require passing + // the username each time + let messages = [] + let rootNode + + function mountChatWindow(username) { + let chatWindow = makeChatWindow(username) + rootNode.innerHTML = chatWindow.template + } + + function sendMessage(formId, username) { + let formNode = document.getElementById(formId) + messages.push(`me: ${formNode.value}`) + mountChatWindow(username) + return false + } + + function makeChatWindow(username) { + let id = `chat-window-${Date.now()}` + let formId = `form-${Date.now()}` + return { + template: ` + <aside id="${id}"> + <div>${username}</div> + <ul> + ${messages.map(msg => `<li>${msg}</li>`).join('')} + </ul> + <div> + <form> + <input type="text" name="chat" id="${formId}"> + <button + name="data" + type="button" + onclick="sendMessage('${formId}', '${username}')">Send</button> + </form> + </div> + </aside> + `, + node: document.getElementById(id) + } + } + window.onload = function () { + rootNode = document.getElementById('root') + mountChatWindow('Felon Musk') + } + </script> + </head> + <body> + <div id="root"></div> + </body> +</html>
\ No newline at end of file diff --git a/demos/8-async-await.example.js b/demos/8-async-await.example.js new file mode 100644 index 0000000..00194f5 --- /dev/null +++ b/demos/8-async-await.example.js @@ -0,0 +1,12 @@ +async function getAllData() { + try { + let resA = await getDataA('here we go') + let resB = await getDataB(resA) + let resC = await getDataC(resB) + let resD = await getDataD(resC) + let resE = await getDataE(resD) + console.log(resE) + } catch (err) { + console.err(err) + } +} diff --git a/demos/8-jquery-vs-dom.example.js b/demos/8-jquery-vs-dom.example.js deleted file mode 100644 index e69de29..0000000 --- a/demos/8-jquery-vs-dom.example.js +++ /dev/null diff --git a/demos/9-dom-manipulation.example.html b/demos/9-dom-manipulation.example.html new file mode 100644 index 0000000..96ab07c --- /dev/null +++ b/demos/9-dom-manipulation.example.html @@ -0,0 +1,46 @@ +<html> + <head> + <style> + body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + } + main { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + #clock { + font-size: 150px; + font-weight: 700; + font: Helvetica; + } + </style> + <script> + // run this function when the document is loaded + window.onload = function() { + let clockNode = document.getElementById('clock') + // We bind a callback that computes the current time + // and then updates the appropriate DOM node + function updateTime() { + let now = new Date() + let formattedTime = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}` + clockNode.innerHTML = formattedTime + } + // setInterval waits one interval before running the callback + // so we call it once first + updateTime() + setInterval(updateTime, 500) + } + </script> + </head> + <body> + <!-- Semantic HTML is good for you --> + <main> + <div id="clock">Loading...</div> + </main> + </body> +</html>
\ No newline at end of file diff --git a/demos/9-dom-manipulation.example.js b/demos/9-dom-manipulation.example.js deleted file mode 100644 index e69de29..0000000 --- a/demos/9-dom-manipulation.example.js +++ /dev/null |