added shadow mode

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';
+  }
 }