Add existing widgets

2018-11-23 14:51:20 -05:00 · 2018-11-23 14:51:20 -05:00 · 514de3c803
commit 514de3c803
parent 5827499293
2 changed files with 121 additions and 0 deletions
--- a/colors/index.html
+++ b/colors/index.html
@ -0,0 +1,52 @@
+<html>
+  <head>
+    <style>
+      body {
+        background-color: black;
+      }
+      #word {
+	font-size: 80px;
+	font-family: sans-serif;
+	font-weight: bold;
+	width: 100%;
+	text-align: center;
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="word"></div>
+    <script type="text/javascript">
+      var colorWords = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
+      var hypnoWords = ["sleep", "relax", "fall", "deeper", "trance"];
+      var colors = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
+      var wordEl = document.getElementById("word");
+
+      function randomChoice(a) {
+	  return a[Math.floor(Math.random()*a.length)];
+      }
+
+      var hypnoFrequency = 0;
+      var hypnoIncrements = 10;
+      function changeWord() {
+	  var wordList = (Math.random()*hypnoIncrements < hypnoFrequency) ? hypnoWords : colorWords;
+	  var newWord;
+	  do {
+	      newWord = randomChoice(wordList);
+	  } while (newWord === wordEl.innerText);
+
+	  var newColor;
+	  do {
+	      newColor = randomChoice(colors);
+	  } while (newColor === wordEl.style.color);
+
+	  wordEl.innerText = newWord;
+	  wordEl.style.color = newColor;
+      }
+      setInterval(changeWord, 1000);
+      setInterval(function() { if (hypnoFrequency < hypnoIncrements) { hypnoFrequency++; } }, 5000);
+    </script>
+  </body>
+</html>