From 551d830194bec7a777a7964b910e06339ae1e889 Mon Sep 17 00:00:00 2001 From: Dave Lane Date: Thu, 27 Jul 2023 19:57:59 +1200 Subject: [PATCH] added shadow mode --- css/style.css | 50 +++++++++++++++++++++++++++----- index.html | 45 ++++++++++++++++------------- js/script.js | 79 +++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 139 insertions(+), 35 deletions(-) diff --git a/css/style.css b/css/style.css index b502d21..8616e76 100644 --- a/css/style.css +++ b/css/style.css @@ -21,7 +21,7 @@ url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); } -body.style-1 { +body { font-family: "Roboto"; width: 80%; margin: auto; @@ -34,34 +34,70 @@ p { color: #444; } a { text-decoration: none; } button { - margin: 4px 0px; - padding: 8px; + margin: 4px 4px; + padding: 10px; background-color: #3BAD5F; color: #fff; border-radius: 10px; border: 0; font-family: "Roboto"; font-size: 120%; + /* box-shadow: offset x, offset y, blur radius, color */ + box-shadow: 4px 4px 5px #888; } -button:hover { box-shadow: 6px 6px; } +button:hover { color: #000; } +button:active { box-shadow: none; } -.name { +/*.text { position: relative; }*/ + +#sample { font-size: 200%; padding: 12px; - background-color: #eee; + /*background-color: #eee;*/ border: thin #ededed; display: block; clear: both; - margin-bottom: 20px; + margin-bottom: 0px; font-family: "Lobster"; + line-height: 1em; } .blue { color: blue; } .red { color: red; } .green { color: green; } .black { color: black; } +.shadow { + color: white; + text-shadow: 1px 1px 20px #000; +} + .bold { font-weight: bold; } .italic { font-style: italic; } .small-caps { font-variant: small-caps; } + + +.app { + background-color: #eee; + padding: 1em; + border-radius: 20px; + margin-bottom: 10px; +} +.text, .controls { + float: left; +} +.text { + vertical-align: top; + width: 25%; + min-width: 14em; + padding-right: 4px; +} +.contols { + width: auto; + padding-left: 4px; +} + +.switches { + clear: both; +} diff --git a/index.html b/index.html index 1dba1b1..055365c 100644 --- a/index.html +++ b/index.html @@ -9,35 +9,40 @@ - + - +

Digital Empowerment

-

The purpose of these sessions is to show Chch South Karamata learners that they don't - have to be mere riders in their digital journey - they can become drivers.

+

Chch South Karamata learners don't have to be mere riders in their digital journey - they can drive themselves!

Find this code on the web!

-
-

Take charge!

-
- - - - +
+
+

Take charge!

-
- - - -
+
+
+ + + + + +
+
+ + + +
+
+
-
+
-
- -
+
+ +

Questions? Get in touch with Dave.

diff --git a/js/script.js b/js/script.js index 7d8b933..6be5334 100644 --- a/js/script.js +++ b/js/script.js @@ -1,43 +1,106 @@ -const name = document.querySelector(".name"); +const sample = document.querySelector("#sample"); // I commented the following line out by putting '//' at the start of the line. //console.log(document); +console.log('color = ', sample.style.color); +// set default color +if (!sample.style.color) { + var color; + // from https://stackoverflow.com/questions/46336002/how-to-get-computed-background-color-style-inherited-from-parent-element + var div = document.createElement("div"); + document.head.appendChild(div); + var color = window.getComputedStyle(div).color; + document.head.removeChild(div); + sample.style.color = color; +} + // red, green, blue, yellow, black, white, or #ccc or #5ef21d function changeColor(color) { - name.style.color = color; + sample.style.color = color; } function changeWeight() { let weight; - if (name.style.fontWeight == 'bold') { + if (sample.style.fontWeight == 'bold') { weight = 'normal'; } else { weight = 'bold'; } - name.style.fontWeight = weight; + sample.style.fontWeight = weight; } // normal or small-caps function changeVariant() { let variant; - if (name.style.fontVariant == 'small-caps') { + if (sample.style.fontVariant == 'small-caps') { variant = 'normal'; } else { variant = 'small-caps'; } - name.style.fontVariant = variant; + sample.style.fontVariant = variant; } // normal, italic, or oblique function changeStyle() { let style; - if (name.style.fontStyle == 'italic') { + if (sample.style.fontStyle == 'italic') { style = 'normal'; } else { style = 'italic'; } console.log('style = ', style); - name.style.fontStyle = style; + sample.style.fontStyle = style; +} + +// set text shadow +function changeToShadow() { + var color = sample.style.color; + var shadow; + console.log('found color ', sample); + // if we're already in shadow mode, reset color + var str = '0px 0px 5px'; + // is shadow mode already on? If so disable it. + if (sample.getAttribute('text-shadow') && sample.getAttribute('text-shadow').includes(str)) { + shadow = sample.getAttribute('text-shadow'); + console.log('shadow', shadow); + // replace the contents of str with nuthin' to get the color + color = shadow.replace(str,''); + console.log('got color ', color); + // return the color to its previous state + sample.style.color = color; + // remove shadow + sample.removeAttribute('text-shadow'); + // otherwise enable shadow mode... + } else { + sample.style.textShadow = str + ' ' + color; + console.log('set textShadow to ', sample.style.textShadow); + sample.style.color = 'white'; + } +} + + +// turn CSS on and off and change status text +function changeCSS() { + var indicator = document.getElementById('status'); + var linkNode = null; + // do we already have the link in the DOM? + if (linkNode = document.getElementsByTagName('link')[0]) { + linkNode.parentNode.removeChild(linkNode); + // update the indicator + indicator.textContent = 'on'; + } else { + var head = document.getElementsByTagName('HEAD')[0]; + // Create new link Element + var link = document.createElement('link'); + // set the attributes for link element + link.rel = 'stylesheet'; + link.type = 'text/css'; + link.href = 'css/style.css'; + // Append link element to HTML head + head.appendChild(link); + // update the indicator + indicator.textContent = 'off'; + } }