commit 252ebf570fcfbe5221477ebdcf44c702fdf879c4
parent bb497dcc6ff522d5881e5f8651fd5e9e1895023a
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Fri, 21 Aug 2020 12:36:40 -0700
Merge pull request #16 from AsherMorgan/improve-style
Improve style and appearance.
Diffstat:
10 files changed, 374 insertions(+), 300 deletions(-)
diff --git a/Offline/index.html b/Offline/index.html
@@ -12,35 +12,35 @@
</head>
<body>
- <div id="title">
- <h1 onclick="window.location='../'">Spanish-Quizzer</h1>
- </div>
+ <header onclick="window.location='../'">Spanish-Quizzer</header>
- <h2>How to Study Offline</h2>
+ <main>
+ <h1>How to Study Offline</h1>
- <div id="instructions">
- <h4>Safari (iOS)</h4>
- <ol>
- <li>Go to the <a href="../">Spanish-Quizzer homepage</a>.</li>
- <li>Tap on either Conjugations, Vocab, or the Reference Tables.</li>
- <li>Tap the share icon and select "Add to Reading List".</li>
- <li>Open the Settings app and select "Safari".</li>
- <li>Scroll down to the "Reading List" section and enable "Automatically Save Offline".</li>
- <li>When you are offline, open Safari, go to your Reading List, and tap on Spanish-Quizzer.</li>
- </ol>
- <h4>Firefox</h4>
- <ol>
- <li>Go to the <a href="../">Spanish-Quizzer homepage</a>.</li>
- <li>Click on either Conjugations, Vocab, or the Reference Tables.</li>
- <li>When you are offline, click on the hamburger menu in the top right corner, click on "Web Developer", and enable "Work Offline".</li>
- <li>Return to the page you clicked on to study offline.</li>
- <li>When you get back online, you must disable "Work Offline" in order to browse the internet again.</li>
- </ol>
- <h4>Chrome / Edge</h4>
- <p>Offline studying is not supported on Google Chrome or Microsoft Edge. Spanish-Quizzer will not work if it is saved as an HTML document.</p>
- </div>
+ <div id="instructions">
+ <h2>Safari (iOS)</h2>
+ <ol>
+ <li>Go to the <a href="../">Spanish-Quizzer homepage</a>.</li>
+ <li>Tap on either Conjugations, Vocab, or the Reference Tables.</li>
+ <li>Tap the share icon and select "Add to Reading List".</li>
+ <li>Open the Settings app and select "Safari".</li>
+ <li>Scroll down to the "Reading List" section and enable "Automatically Save Offline".</li>
+ <li>When you are offline, open Safari, go to your Reading List, and tap on Spanish-Quizzer.</li>
+ </ol>
+ <h2>Firefox</h2>
+ <ol>
+ <li>Go to the <a href="../">Spanish-Quizzer homepage</a>.</li>
+ <li>Click on either Conjugations, Vocab, or the Reference Tables.</li>
+ <li>When you are offline, click on the hamburger menu in the top right corner, click on "Web Developer", and enable "Work Offline".</li>
+ <li>Return to the page you clicked on to study offline.</li>
+ <li>When you get back online, you must disable "Work Offline" in order to browse the internet again.</li>
+ </ol>
+ <h2>Chrome / Edge</h2>
+ <p>Offline studying is not supported on Google Chrome or Microsoft Edge. Spanish-Quizzer will not work if it is saved as an HTML document.</p>
+ </div>
+ </main>
- <div class="footer">
+ <footer>
<div id="share" hidden>
<a href="mailto:?Subject=Spanish-Quizzer&Body=https://ashermorgan.github.io/Spanish-Quizzer">Email</a>
<a href="http://www.facebook.com/sharer.php?u=https://ashermorgan.github.io/Spanish-Quizzer" target="_blank">Facebook</a>
@@ -51,6 +51,6 @@
<a href="../">Home</a>
<a href="../reference.html">Reference Tables</a>
<a href="javascript:document.getElementById('share').hidden = false;">Share</a>
- </div>
+ </footer>
</body>
</html>
diff --git a/Scripts/Reference.js b/Scripts/Reference.js
@@ -14,9 +14,6 @@ function Load() {
setTableHeight();
// Add event Listeners
- document.getElementById("title").addEventListener("click", function (e) {
- window.location = "./";
- });
document.addEventListener("click", function (e) {
document.getElementById('share').hidden = true;
});
diff --git a/Styles/Global.css b/Styles/Global.css
@@ -10,14 +10,37 @@
/******** Body styles ********/
+body, html {
+ height: 100%;
+}
+
+* {
+ /* Override default browser padding and margin styles */
+ padding: 0px;
+ margin: 0px;
+}
+
body {
font-family: Arial, Helvetica, sans-serif;
- text-align: center;
color: var(--foreground-color);
background-color: var(--background-color);
- margin-bottom: 50px;
+ margin: 0px;
+
touch-action: manipulation;
- margin-top: 80px;
+
+ display: grid;
+ grid-template-rows: auto auto 1fr auto;
+ grid-template-columns: 1fr auto 1fr;
+}
+
+#jsError {
+ grid-row: 2;
+ grid-column: 2;
+ color: red;
+ font-weight: normal;
+ font-size: 20px;
+ text-align: center;
+ margin-bottom: 10px;
}
@@ -43,22 +66,27 @@ button:disabled {
/******** Other styles ********/
-#title {
- position: fixed;
- top: 0px;
- left: 0px;
+header {
+ grid-row: 1;
+ grid-column: 1 / 4;
+ text-align: center;
width: 100%;
background-color: var(--theme-color);
-}
-
-h1 {
font-size: 25px;
font-weight: bold;
cursor: pointer;
color: inherit;
text-decoration: none;
- margin-top: 15px;
- margin-bottom: 15px;
+ margin: 0px;
+ margin-bottom: 10px;
+ padding-top: 15px;
+ padding-bottom: 15px;
+}
+
+main {
+ grid-row: 2;
+ grid-column: 2;
+ text-align: center;
}
.label {
@@ -73,9 +101,10 @@ h1 {
color: red;
}
-.footer {
- position: fixed;
- bottom: 0px;
+footer {
+ grid-row: 4;
+ grid-column: 1 / 4;
+ text-align: center;
padding-bottom: 5px;
padding-top: 5px;
width: 100%;
diff --git a/Styles/Home.css b/Styles/Home.css
@@ -1,21 +1,21 @@
-#home h3 {
- margin-bottom: 10px;
+/* Header */
+#home h1 {
+ font-size: 20px;
+ font-weight: bold;
+ margin-top: 5px;
+ margin-bottom: 5px;
}
+/* Vocab & Conjugation buttons*/
#home button {
- border: 1px solid var(--border-color);
width: 150px;
height: 50px;
line-height: 50px;
margin: 10px;
- display: inline-block;
font-size: 15px;
}
-#home button:hover {
- background-color: var(--hover-color);
-}
-
-#home #referenceLink {
+/* Link to Reference Tables */
+#home a {
margin-top: 10px;
}
diff --git a/Styles/Offline.css b/Styles/Offline.css
@@ -1,15 +1,16 @@
/******** Instruction styles ********/
-#instructions {
- max-width: 500px;
- text-align: left;
- margin: auto;
+/* Headers */
+h1 {
+ font-size: 24px;
}
-
-h4 {
- text-align: center;
- margin-bottom: 0px;
+h2 {
+ font-size: 18px;
+ margin-top: 15px;
+ margin-bottom: 5px;
}
-ol, p {
- margin-top: 5px;
-}
+/* Instructions */
+#instructions {
+ max-width: 500px;
+ text-align: left;
+}
+\ No newline at end of file
diff --git a/Styles/Quizzer.css b/Styles/Quizzer.css
@@ -1,4 +1,5 @@
/******** Quizzer styles ********/
+/* Container */
#quizzer {
margin: auto;
padding: 10px;
@@ -9,20 +10,47 @@
box-shadow: 0 0 15px var(--border-color);
}
-#quizzer h3 {
- margin-top: 5px;
+/* Progress */
+#quizzerProgress {
+ font-size: 18px;
+ font-weight: bold;
+ margin: 0px;
+ margin-bottom: 5px;
}
-#quizzerPrompt, #quizzerFeedbackTerm {
+/* Prompt */
+#quizzer section {
+ text-align: left;
+ margin-bottom: 15px;
+}
+#quizzerPromptType, #quizzerInputType {
+ font-weight: bold;
+}
+#quizzerPrompt {
cursor: pointer;
+ font-size: 15px;
}
-#quizzerButtons {
- margin-top: 15px;
- margin-bottom: 15px;
+/* Responce*/
+#quizzerInput {
+ margin-top: 5px;
+ height: 30px;
+ padding: 5px;
+ box-sizing: border-box;
+ width: calc(100%); /* forces input onto new line */
}
+/* Buttons */
#quizzerButtons button {
width: 75px;
height: 25px;
-}
-\ No newline at end of file
+}
+
+/* Feedback */
+#quizzerFeedback {
+ margin-top: 15px;
+}
+#quizzerFeedbackTerm {
+ text-decoration-line: underline;
+ cursor: pointer;
+}
diff --git a/Styles/Reference.css b/Styles/Reference.css
@@ -1,29 +1,39 @@
-/******** Reference Table styles ********/
-h3 {
+/******** Reference Table Page styles ********/
+main {
+ overflow-x: hidden;
+}
+
+/* Heading */
+h1 {
margin-top: 0px;
+ margin-bottom: 10px;
+ font-size: 20px;
font-weight: normal;
}
+/* Controls */
#controls {
margin-bottom: 15px;
}
+
+
+/******** Reference Table styles ********/
#referenceTable {
- margin: auto;
text-align: left;
overflow-x: auto;
- max-width: fit-content;
- max-width: -moz-fit-content;
}
+/* Header cells */
#referenceTable th {
+ background-color: var(--hover-color);
border: 1px solid var(--border-color);
position: sticky;
position: -webkit-sticky;
top: 0;
- background-color: var(--hover-color);
}
+/* All cells */
#referenceTable td {
border: 1px solid var(--border-color);
cursor: pointer;
@@ -40,7 +50,7 @@ h3 {
--hover-color: #FFFFFF;
}
- #title, h3, #referenceFilter, #referenceSet, .footer, label, br {
+ header, h1, #referenceFilter, #referenceSet, footer, label, br {
display: none;
}
diff --git a/Styles/Settings.css b/Styles/Settings.css
@@ -5,31 +5,40 @@
max-width: 300px;
}
-h3 {
- margin-bottom: 5px;
-}
-.centered {
+
+/******** Vocab/Verb Settings styles ********/
+/* Instructions */
+#settings h1 {
text-align: center;
+ font-size: 16px;
+ font-weight: normal;
}
-#vocabSets {
- overflow-x: auto;
- white-space: nowrap;
+/* Headings */
+h2 {
+ font-size: 18px;
+ margin-top: 15px;
+ margin-bottom: 5px;
+}
+h2 button {
+ padding: 2px 5px 2px 5px;
}
-.vocabSet {
+/* List item */
+.vocabSet, .verbFilter {
padding-top: 5px;
}
+/* Vocab list item parts */
.vocabSetName {
width: 115px;
}
-
.vocabSetFilter {
width: 160px;
}
+/* List item remove */
.itemRemove {
border: none;
padding: 0px;
@@ -39,7 +48,13 @@ h3 {
background-color: var(--background-color);
}
-#settingsStart, #settingsResume {
+
+
+/******** Settings Button styles ********/
+#settingButtons {
+ text-align: center;
+}
+#settingButtons button {
margin-top: 15px;
margin-bottom: 5px;
width: 75px;
diff --git a/index.html b/index.html
@@ -18,192 +18,186 @@
</head>
<body onload="Load();">
- <div id="title">
- <h1 onclick="TitleClicked();">Spanish-Quizzer</h1>
- </div>
+ <header onclick="window.location='../'">Spanish-Quizzer</header>
+ <main>
+ <noscript>
+ <h1 id="jsError">You must have JavaScript enabled to run Spanish-Quizzer.</h1>
+ </noscript>
- <noscript>
- <h4 class="bad">You must have JavaScript enabled to run Spanish-Quizzer.</h4>
- </noscript>
-
-
- <div id="home">
- <h3>What do you want to study?</h3>
-
- <div>
- <button onclick="Show('verbs');" class="option">Conjugations</button>
- <button onclick="Show('vocab');" class="option">Vocab</button>
- </div>
+ <div id="home">
+ <h1>What do you want to study?</h1>
- <div id="referenceLink">
- <a href="reference.html">Or look something up in the Reference Tables</a>
+ <div>
+ <button onclick="Show('verbs');">Conjugations</button>
+ <button onclick="Show('vocab');">Vocab</button>
+ </div>
+
+ <div>
+ <a href="reference.html">Or look something up in the Reference Tables</a>
+ </div>
</div>
- </div>
-
-
- <div id="settings" hidden>
- <div id="verbSettings" hidden>
- <template id="verbFilterTemplate">
- <div class="verbFilter">
- <select id="verbFilterTense" onchange="VerbTenseChanged(this);">
- <option>All Tenses</option>
- <option>Present Participles</option>
- <option>Present Tense</option>
- <option>Preterite Tense</option>
- <option>Imperfect Tense</option>
- </select>
- <select id="verbFilterType">
- <option>All Types</option>
- <option>Reflexive</option>
- <option>Regular</option>
- <option>Nonregular</option>
- <option>Stem Changing</option>
- <option>Orthographic</option>
- <option>Irregular</option>
- </select>
- <button id="verbFilterRemove" class="itemRemove">╳</button>
+
+
+ <div id="settings" hidden>
+ <div id="verbSettings" hidden>
+ <template id="verbFilterTemplate">
+ <div class="verbFilter">
+ <select id="verbFilterTense" onchange="VerbTenseChanged(this);">
+ <option>All Tenses</option>
+ <option>Present Participles</option>
+ <option>Present Tense</option>
+ <option>Preterite Tense</option>
+ <option>Imperfect Tense</option>
+ </select>
+ <select id="verbFilterType">
+ <option>All Types</option>
+ <option>Reflexive</option>
+ <option>Regular</option>
+ <option>Nonregular</option>
+ <option>Stem Changing</option>
+ <option>Orthographic</option>
+ <option>Irregular</option>
+ </select>
+ <button id="verbFilterRemove" class="itemRemove">╳</button>
+ </div>
+ </template>
+
+ <h1>Choose your settings and then click start.</h1>
+
+ <h2>
+ Verb Filters
+ <button id="verbAddFilter" onclick="AddVerbFilter();">Add Filter</button>
+ </h2>
+
+ <div id="verbFilters">
+ <div id="verbFiltersInner">
+ </div>
</div>
- </template>
-
- <div class="centered">
- Choose your settings and then click start.
</div>
- <h3>
- Verb Filters
- <button id="verbAddFilter" onclick="AddVerbFilter();">Add Filter</button>
- </h3>
- <div id="verbFilters">
- <div id="verbFiltersInner">
+ <div id="vocabSettings" hidden>
+ <template id="vocabSetTemplate">
+ <div class="vocabSet">
+ <select id="vocabSetName" class="vocabSetName" onchange="VocabSetChanged(this);">
+ <optgroup label="Common Words">
+ <option>Verbs</option>
+ <option>Adjectives</option>
+ <option>Adverbs</option>
+ <option>Prepositions</option>
+ <option>Transitions</option>
+ </optgroup>
+ <optgroup label="Spanish 1">
+ <option>Colors</option>
+ <option>Days</option>
+ <option>Months</option>
+ <option>Questions</option>
+ <option>Weather</option>
+ <option>Family</option>
+ <option>Clothes</option>
+ </optgroup>
+ <optgroup label="Spanish 2">
+ <option>Nature</option>
+ <option>House</option>
+ <option>Vacation</option>
+ <option>Childhood</option>
+ <option>Professions</option>
+ <option>Health</option>
+ </optgroup>
+ </select>
+ <select id="vocabSetFilter" class="vocabSetFilter">
+ <!-- Generated by VocabSetChanged() -->
+ </select>
+ <button id="vocabSetRemove" class="itemRemove">╳</button>
+ </div>
+ </template>
+
+ <h1>Choose your settings and then click start.</h1>
+
+ <h2>
+ Vocabulary Sets
+ <button id="vocabAddSet" onclick="AddVocabSet();">Add set</button>
+ </h2>
+
+ <div id="vocabSets">
+ <div id="vocabSetsInner">
+ </div>
</div>
</div>
- </div>
-
-
- <div id="vocabSettings" hidden>
- <template id="vocabSetTemplate">
- <div class="vocabSet">
- <select id="vocabSetName" class="vocabSetName" onchange="VocabSetChanged(this);">
- <optgroup label="Common Words">
- <option>Verbs</option>
- <option>Adjectives</option>
- <option>Adverbs</option>
- <option>Prepositions</option>
- <option>Transitions</option>
- </optgroup>
- <optgroup label="Spanish 1">
- <option>Colors</option>
- <option>Days</option>
- <option>Months</option>
- <option>Questions</option>
- <option>Weather</option>
- <option>Family</option>
- <option>Clothes</option>
- </optgroup>
- <optgroup label="Spanish 2">
- <option>Nature</option>
- <option>House</option>
- <option>Vacation</option>
- <option>Childhood</option>
- <option>Professions</option>
- <option>Health</option>
- </optgroup>
+
+
+ <div id="quizzerSettings">
+ <h2>Quizzer Settings</h2>
+
+ <div>
+ <input type="checkbox" id="settingsDarkMode" onchange="document.body.classList.toggle('dark'); UpdateLocalStorage();">
+ <label for="settingsDarkMode">Dark Mode</label>
+ </div>
+ <div>
+ <label for="settingsPromptType">Prompt type</label>
+ <select id="settingsPromptType" onchange="UpdateLocalStorage();">
+ <option>Text</option>
+ <option>Audio</option>
+ <option>Both</option>
</select>
- <select id="vocabSetFilter" class="vocabSetFilter">
- <!-- Generated by VocabSetChanged() -->
+ </div>
+ <div>
+ <label for="settingsInputType">Input type</label>
+ <select id="settingsInputType" onchange="UpdateLocalStorage();">
+ <option>Text</option>
+ <option>Voice</option>
+ <option>Either</option>
+ </select>
+ </div>
+ <div>
+ <label for="settingsRepeatPrompts">Repeat missed prompts</label>
+ <select id="settingsRepeatPrompts" onchange="UpdateLocalStorage();">
+ <option>Never</option>
+ <option>Immediately</option>
+ <option>5 prompts later</option>
+ <option>At the end</option>
</select>
- <button id="vocabSetRemove" class="itemRemove">╳</button>
</div>
- </template>
-
- <div class="centered">
- Choose your settings and then click start.
- </div>
-
- <h3>
- Vocabulary Sets
- <button id="vocabAddSet" onclick="AddVocabSet();">Add set</button>
- </h3>
- <div id="vocabSets">
- <div id="vocabSetsInner">
+ <div id="settingButtons">
+ <button id="settingsStart" onclick="CreateSession();">Start</button>
+ <button id="settingsResume" onclick="ResumeSession();">Resume</button>
</div>
+
+ <div id="settingsError" class="centered bad"></div>
</div>
</div>
-
-
- <div id="quizzerSettings">
- <h3>Quizzer Settings</h3>
-
- <div>
- <input type="checkbox" id="settingsDarkMode" onchange="document.body.classList.toggle('dark'); UpdateLocalStorage();">
- <label for="settingsDarkMode">Dark Mode</label>
- </div>
- <div>
- <label for="settingsPromptType">Prompt type</label>
- <select id="settingsPromptType" onchange="UpdateLocalStorage();">
- <option>Text</option>
- <option>Audio</option>
- <option>Both</option>
- </select>
- </div>
- <div>
- <label for="settingsInputType">Input type</label>
- <select id="settingsInputType" onchange="UpdateLocalStorage();">
- <option>Text</option>
- <option>Voice</option>
- <option>Either</option>
- </select>
- </div>
- <div>
- <label for="settingsRepeatPrompts">Repeat missed prompts</label>
- <select id="settingsRepeatPrompts" onchange="UpdateLocalStorage();">
- <option>Never</option>
- <option>Immediately</option>
- <option>5 prompts later</option>
- <option>At the end</option>
- </select>
- </div>
-
- <div class="centered">
- <button id="settingsStart" onclick="CreateSession();">Start</button>
- <button id="settingsResume" onclick="ResumeSession();">Resume</button>
+
+
+ <div id="quizzer" hidden>
+ <p id="quizzerProgress"></p>
+
+ <section>
+ <label id="quizzerPromptType" for="quizzerPrompt"></label>
+ <span id="quizzerPrompt" onclick="Read(Terms[Term][1], Terms[Term][0]);"></span>
+ </section>
+
+ <section>
+ <label id="quizzerInputType" for="quizzerInput"></label>
+ <input id="quizzerInput" type="text" autocomplete="off" spellcheck="false" autocorrect="off" placeholder="Type the answer">
+ </section>
+
+ <div id="quizzerButtons">
+ <button id="quizzerEnter">Submit</button>
+ <button id="quizzerSkip" onclick="Reset();">Skip</button>
</div>
- <div id="settingsError" class="centered bad"></div>
- </div>
- </div>
-
-
- <div id="quizzer" hidden>
- <h3 id="quizzerProgress"></h3>
-
- <div>
- <label for="quizzerPrompt" id="quizzerPromptType" class="label"></label>
- <span id="quizzerPrompt" onclick="Read(Terms[Term][1], Terms[Term][0]);"></span>
- </div>
-
- <div>
- <label id="quizzerInputType" for="quizzerInput" class="label"></label>
- <input id="quizzerInput" type="text" autocomplete="off" spellcheck="false" autocorrect="off" placeholder="Type the answer">
- </div>
-
- <div id="quizzerButtons">
- <button id="quizzerEnter">Submit</button>
- <button id="quizzerSkip" onclick="Reset();">Skip</button>
- </div>
-
- <div id="quizzerFeedback" class="bad">
- The correct answer is
- <span id="quizzerFeedbackTerm" onclick="Read(Terms[Term][3], Terms[Term][2]);"></span>.
+ <div id="quizzerFeedback" class="bad">
+ The correct answer is
+ <span id="quizzerFeedbackTerm" onclick="Read(Terms[Term][3], Terms[Term][2]);"></span>.
+ </div>
+ <div id="quizzerCongrats" class="good"></div>
</div>
- <div id="quizzerCongrats" class="good"></div>
- </div>
+ </main>
- <div class="footer">
+ <footer>
<div id="share" hidden>
<a href="mailto:?Subject=Spanish-Quizzer&Body=https://ashermorgan.github.io/Spanish-Quizzer">Email</a>
<a rel="noopener" href="http://www.facebook.com/sharer.php?u=https://ashermorgan.github.io/Spanish-Quizzer" target="_blank">Facebook</a>
@@ -213,6 +207,6 @@
</div>
<a href="Offline">Study Offline</a>
<a href="javascript:document.getElementById('share').hidden = false; void 0;">Share</a>
- </div>
+ </footer>
</body>
</html>
\ No newline at end of file
diff --git a/reference.html b/reference.html
@@ -14,52 +14,52 @@
</head>
<body onload="Load()" onresize="setTableHeight()">
- <div id="title">
- <h1>Spanish-Quizzer</h1>
- </div>
+ <header onclick="window.location='../'">Spanish-Quizzer</header>
- <h3 class="text">Reference Tables</h3>
-
- <noscript>
- <h4 class="bad">You must have JavaScript enabled to run Spanish-Quizzer.</h4>
- </noscript>
-
- <div id="controls">
- <select id="referenceSet" aria-label="Vocab Set" onchange="referenceSetChanged()">
- <option>Choose a vocab set</option>
- <optgroup label="Common Words">
- <option>Verbs</option>
- <option>Adjectives</option>
- <option>Adverbs</option>
- <option>Prepositions</option>
- <option>Transitions</option>
- </optgroup>
- <optgroup label="Spanish 1">
- <option>Colors</option>
- <option>Days</option>
- <option>Months</option>
- <option>Questions</option>
- <option>Weather</option>
- <option>Family</option>
- <option>Clothes</option>
- </optgroup>
- <optgroup label="Spanish 2">
- <option>Nature</option>
- <option>House</option>
- <option>Vacation</option>
- <option>Childhood</option>
- <option>Professions</option>
- <option>Health</option>
- </optgroup>
- </select>
- <input type="text" aria-label="Search" id="referenceFilter" onkeyup="referenceFilterChanged()" placeholder="Search">
- </div>
-
- <div id="referenceTable">
- <table id="referenceTableInner"></table>
- </div>
+ <main>
+ <noscript>
+ <h1 id="jsError">You must have JavaScript enabled to run Spanish-Quizzer.</h1>
+ </noscript>
+
+ <h1>Reference Tables</h1>
+
+ <div id="controls">
+ <select id="referenceSet" aria-label="Vocab Set" onchange="referenceSetChanged()">
+ <option>Choose a vocab set</option>
+ <optgroup label="Common Words">
+ <option>Verbs</option>
+ <option>Adjectives</option>
+ <option>Adverbs</option>
+ <option>Prepositions</option>
+ <option>Transitions</option>
+ </optgroup>
+ <optgroup label="Spanish 1">
+ <option>Colors</option>
+ <option>Days</option>
+ <option>Months</option>
+ <option>Questions</option>
+ <option>Weather</option>
+ <option>Family</option>
+ <option>Clothes</option>
+ </optgroup>
+ <optgroup label="Spanish 2">
+ <option>Nature</option>
+ <option>House</option>
+ <option>Vacation</option>
+ <option>Childhood</option>
+ <option>Professions</option>
+ <option>Health</option>
+ </optgroup>
+ </select>
+ <input type="text" aria-label="Search" id="referenceFilter" onkeyup="referenceFilterChanged()" placeholder="Search">
+ </div>
+
+ <div id="referenceTable">
+ <table id="referenceTableInner"></table>
+ </div>
+ </main>
- <div class="footer">
+ <footer>
<div id="share" hidden>
<a href="mailto:?Subject=Spanish-Quizzer&Body=https://ashermorgan.github.io/Spanish-Quizzer/Reference">Email</a>
<a rel="noopener" href="http://www.facebook.com/sharer.php?u=https://ashermorgan.github.io/Spanish-Quizzer/Reference" target="_blank">Facebook</a>
@@ -70,6 +70,6 @@
<a href="./">Home</a>
<a href="Offline">Study Offline</a>
<a href="javascript:document.getElementById('share').hidden = false; void 0;">Share</a>
- </div>
+ </footer>
</body>
</html>
\ No newline at end of file
