Added initial logic, styling of settings.

flashcards.html

@@ -28,6 +28,7 @@ body {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  opacity: 0;
 }
 
 #settings label {
@@ -45,11 +46,11 @@ body {
   flex-grow: 1;
 }
 
-.adv-settings label {
+#adv-settings label {
   display: flex;
 }
 
-.adv-settings label span {
+#adv-settings label span {
   flex-grow: 1;
 }
 
@@ -74,7 +75,7 @@ button {
   transition: all linear 0.2s;
 }
 
-#settings .adv-settings {
+#settings #adv-settings {
   max-height: 0;
   overflow: hidden;
   transition: max-height linear 0.3s;
@@ -84,14 +85,36 @@ button {
   transform: rotate(90deg);
 }
 
-#settings.adv-settings-visible .adv-settings {
-  max-height: 8em;
-}
-
 .toggle-adv-settings {
   cursor: pointer;
 }
 
+
+
+/* Settings Visible */
+#settings {
+  transition: opacity 0.2s linear;
+  z-index: -1;
+}
+
+.settings-visible #settings {
+  opacity: 1;
+  z-index: 1;
+}
+
+/* Card View Visible */
+#cards {
+  opacity: 1;
+  transition: opacity 0.2s linear;
+  transition-delay: 0.2s;
+  z-index: 1;
+}
+
+.settings-visible #cards {
+  opacity: 0;
+  z-index: -1;
+}
+
 /* Mobile View */
 @media ( max-width: 600px ) {
   body {
@@ -110,10 +133,30 @@ button {
     margin: 1em auto;
     padding: 0.5em 3em;
   }
+
+  #settings.adv-settings-visible #adv-settings {
+    max-height: 12em;
+  }
 }
 
 /* Tablet View */
-@media (max-width: 1279px and min-width: 601px) {
+@media (max-width: 1279px) and (min-width: 601px) {
+  body {
+    font-size: 125%;
+    margin: 1em;
+    height: calc(100vh - 2em);
+    width: calc(100vw - 2em);
+  }
+  
+  #settings > button {
+    font-size: 125%;
+    margin: 1em auto;
+    padding: 0.5em 3em;
+  }
+
+  #settings.adv-settings-visible #adv-settings {
+    max-height: 10em;
+  }
 }
 
 /* Desktop View */
@@ -128,49 +171,138 @@ button {
   #settings button {
     align-self: flex-end;
   }
+
+  #settings.adv-settings-visible #adv-settings {
+    max-height: 8em;
+  }
 }
 
 </style>
 
 <script>
-  var FC = {};
+  const FC = {
-  function toggleAdvSettings(e) {
+    items: [],
-    FC.settings.classList.toggle('adv-settings-visible');
+    slidePeriod: 3,
+    nextCardIdx: 0,
+    cardOrder: []
+  };
+
+  // http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
+  // modified to be a pure function, not mutating it's input
+  FC.shuffle = function(inArray) {
+    var currentIndex = inArray.length
+      , temporaryValue
+      , randomIndex
+      ;
+
+    var outArray = inArray.slice(0);
+
+    // While there remain elements to shuffle...
+    while (0 !== currentIndex) {
+
+      // Pick a remaining element...
+      randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex -= 1;
+
+      // And swap it with the current element.
+      temporaryValue = outArray[currentIndex];
+      outArray[currentIndex] = outArray[randomIndex];
+      outArray[randomIndex] = temporaryValue;
+    }
+
+    return outArray;
+  }
+
+  FC.isRunning = function() {
+    return !FC.bodyEl.classList.contains('settings-visible');
+  }
+
+  FC.toggleAdvSettings = function() {
+    FC.settingsEl.classList.toggle('adv-settings-visible');
+  }
+
+  FC.startCards = function() {
+    FC.items = FC.itemsEl.value.split('\n');
+    FC.slidePeriod =
+      parseInt(FC.settingsEl.querySelector('input[name=slidePeriod]').value);
+
+    FC.nextCardIdx = 0;
+
+    const orderedIndices = [...Array(FC.items.length).keys()];
+    switch (document.querySelector('select[name=cardOrder]').value) {
+      default:
+      case 'in-order':
+        FC.cardOrder = orderedIndices;
+        break;
+      case 'reverse':
+        FC.cardOrder = orderedIndices.reverse();
+        break;
+      case 'random':
+        FC.cardOrder = FC.shuffle(orderedIndices);
+    }
+
+    FC.showNextCard();
+    FC.runningInterval = setInterval(FC.showNextCard, FC.slidePeriod * 1000);
+    FC.bodyEl.classList.remove('settings-visible');
+  }
+
+  FC.stopCards = function() {
+    clearInterval(FC.runningInterval);
+    FC.bodyEl.classList.add('settings-visible');
+  }
+
+  FC.showNextCard = function() {
+    const curItem = FC.items[FC.cardOrder[FC.nextCardIdx]]; 
+    FC.cardContentEl.innerHTML = curItem;
+    FC.nextCardIdx = (FC.nextCardIdx + 1) % FC.items.length;
   }
 
   window.onload = function() {
-    FC.settings = document.querySelector('#settings');
+    FC.settingsEl = document.querySelector('#settings');
+    FC.itemsEl = document.querySelector('#items-input');
+    FC.bodyEl = document.querySelector('body');
+    FC.cardsEl = document.querySelector('#cards');
+    FC.cardContentEl = document.querySelector('#card-content');
   }
 </script>
 
   </head>
-  <body>
+  <body class=settings-visible>
     <h1 class=title>Simple Flashcards</h1>
-    <form id=settings>
+    <form id=settings action=#>
       <label>Items</label>
-      <textarea></textarea>
+      <textarea id=items-input></textarea>
-      <label class=toggle-adv-settings onclick=toggleAdvSettings()>Advanced Settings <span class=visibility-indicator>➤</span></label>
+      <label class=toggle-adv-settings onclick=FC.toggleAdvSettings()>Advanced Settings <span class=visibility-indicator>➤</span></label>
-      <div class=adv-settings>
+      <div id=adv-settings>
         <label>
           <span>Seconds per slide:</span>
           <input type=number name=slidePeriod value=3>
         </label>
+        <label>
+          <span>Show cards </span>
+          <select name=cardOrder>
+            <option value=in-order>in order.</option>
+            <option value=reverse>in reverse order.</option>
+            <option value=random>in random order.</option>
+          </select>
         <label>
           <span>Saved sets:</span>
-          <select>
+          <select name=loadSetName disabled>
             <option>choose a set to load</option>
           </select>
-          <button>Load</button>
+          <button disabled>Load</button>
         </label>
         <label>
           <span>Save this set as:</span>
-          <input type=text name=setName>
+          <input type=text name=saveSetname disabled>
-          <button>Save</button>
+          <button disabled>Save</button>
         </label>
       </div>
-      <button class=btn-primary>Go!</button>
+      <button class=btn-primary onclick=FC.startCards()>Go!</button>
     </form>
-    <div class=cards>
+    <div id=cards>
+      <div id=card-content>
+      </div>
     </div>
   </body>
 </html>