-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 66edaf9
Showing
4 changed files
with
313 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| /.vscode |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>How to Train Your Librarian</title> | ||
| <link rel="stylesheet" href="https://use.typekit.net/gaf7jha.css"> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <header class="hero"> | ||
| <div class="content"> | ||
| <h1>How to Train Your Librarian</h1> | ||
| <p>A small tool created by @stevensoyuz to help us become faster sorters.</p> | ||
| </div> | ||
| </header> | ||
| <section> | ||
| <div class="content"> | ||
| <div id="game-container"> | ||
| <div id="game"> | ||
| <div id="config-container"> | ||
| <select name="type" id="select-type"> | ||
| <option value="dewey">Dewey Decimal</option> | ||
| <option value="book">Book Titles</option> | ||
| <option value="authors">Authors</option> | ||
| <option value="letters">Single Letters</option> | ||
| </select> | ||
| </div> | ||
| <div id="terms-container"> | ||
| <div class="term term-top">Word</div> | ||
| <div class="term term-bot">Word</div> | ||
| <div id="is"><p>is <span id="span-before">before</span> or <span id="span-after">after</span> ..</p></div> | ||
| </div> | ||
| <div id="choices-container"> | ||
| <p id="result">...</p> | ||
| <button type="button" class="choice" id="before-button">Before</button> | ||
| <button type="button" class="choice" id="after-button">After</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <h3>Margin</h3> | ||
| <p>Padding is the space between the content and the border of an element. Padding is valuable in making additional space inside an element, keeping it at a set distance from other aspects of a website. Using padding is extremely beneficial when you need to separate text boxes and images while also keeping them aligned.</p> | ||
| </div> | ||
| </section> | ||
| </main> | ||
| <script src="scripts.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const container = document.querySelector("#game"); | ||
|
|
||
| const authors = ["Austen", "Bronte", "Carroll", "Dickens", "Eliot", "Faulkner", "Gaskell", "Hemingway", "Ishiguro", "Joyce"]; | ||
|
|
||
| let lastTerm = ""; | ||
| function getRandomAuthor() { | ||
| let newAuthor; | ||
| while ((newAuthor = authors[Math.floor(Math.random() * authors.length)]) === lastTerm); | ||
| lastTerm = newAuthor; | ||
| return newAuthor; | ||
| } | ||
|
|
||
| function createGame() { | ||
| let termElementTop = document.querySelector(".term-top"); | ||
| let termElementBot = document.querySelector(".term-bot"); | ||
|
|
||
| let termCompare = getRandomAuthor(); | ||
| let termReference = getRandomAuthor(); | ||
|
|
||
| termElementTop.textContent = termCompare; | ||
| termElementBot.textContent = termReference; | ||
|
|
||
| const result = document.getElementById("result"); | ||
|
|
||
| function handleChoice(choice) { | ||
| const correct = choice | ||
| ? termElementBot.textContent.localeCompare(termElementTop.textContent) < 0 | ||
| : termElementBot.textContent.localeCompare(termElementTop.textContent) > 0; | ||
| console.log(correct); | ||
| if (correct) { | ||
| result.textContent = "Correct!"; | ||
| termElementTop.className = "term term-bot" | ||
| termElementBot.className = "term term-top" | ||
| // termReference = termCompare; | ||
| // termCompare = getRandomAuthor(); | ||
| refresh(); | ||
| } else { | ||
| result.textContent = "Incorrect."; | ||
| } | ||
| result.style.transition = "none" | ||
| result.style.opacity = "1"; | ||
| setTimeout(() => { | ||
| result.style.transition = "opacity 2s ease" | ||
| result.style.opacity = "0"; | ||
| }, 500); | ||
| } | ||
|
|
||
| function refresh() { | ||
| termReference = termCompare; | ||
| termCompare = getRandomAuthor(); | ||
| termElementTop = document.querySelector(".term-top"); | ||
| termElementBot = document.querySelector(".term-bot"); | ||
| termElementTop.textContent = termCompare; | ||
| termElementBot.textContent = termReference; | ||
|
|
||
| termElementBot.style.transition = "0.5s ease" // DEFAULT | ||
| termElementBot.style.transform = "translate(0em) scale(2,2)" | ||
|
|
||
| setTimeout(() => { | ||
| termElementBot.style.transform = "translate(0em) scale(1,1)" | ||
| }, 100); | ||
|
|
||
| // termElementBot.style.transition = "all 0s linear" | ||
| // termElementBot.style.opacity = "0.1"; | ||
| // setTimeout(() => { | ||
| // termElementBot.style.transition = "0.5s ease" | ||
| // termElementBot.style.opacity = "1"; | ||
| // }, 100); | ||
|
|
||
| termElementTop.style.transition = "all 0s linear" | ||
| termElementTop.style.transform = "translateY(-6em)" | ||
| termElementTop.style.opacity = "0"; | ||
| setTimeout(() => { | ||
| termElementTop.style.transition = "0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s" // DEFAULT | ||
| termElementTop.style.transform = "translate(0em)" | ||
| termElementTop.style.opacity = "1"; | ||
| }, 0); | ||
| } | ||
|
|
||
| const beforeButton = document.getElementById("before-button") | ||
| const afterButton = document.getElementById("after-button") | ||
|
|
||
| beforeButton.addEventListener("mouseover", () => { | ||
| console.log(termCompare + " " + termReference) | ||
| termElementTop.style.transform = "translate(-1em) rotate(-10deg)" | ||
| termElementBot.style.transform = "translate(0.5em) rotate(2deg)" | ||
| document.getElementById("span-before").style.textDecoration = "underline"; | ||
| }); | ||
| beforeButton.addEventListener("mouseout", () => { | ||
| termElementTop.style.transform = "translate(0em)" | ||
| termElementBot.style.transform = "translate(0em)" | ||
| document.getElementById("span-before").style.textDecoration = ""; | ||
| }); | ||
| afterButton.addEventListener("mouseover", () => { | ||
| termElementTop.style.transform = "translate(1em) rotate(10deg)" | ||
| termElementBot.style.transform = "translate(-0.5em) rotate(-2deg)" | ||
| document.getElementById("span-after").style.textDecoration = "underline"; | ||
| }); | ||
| afterButton.addEventListener("mouseout", () => { | ||
| termElementTop.style.transform = "translate(0em)" | ||
| termElementBot.style.transform = "translate(0em)" | ||
| document.getElementById("span-after").style.textDecoration = ""; | ||
| }); | ||
|
|
||
| beforeButton.addEventListener("click", () => handleChoice(false)); | ||
| afterButton.addEventListener("click", () => handleChoice(true)); | ||
| } | ||
|
|
||
| // const beforeButton = createButton("Before"); | ||
| // const afterButton = createButton("After"); | ||
| // container.appendChild(beforeButton); | ||
| // container.appendChild(afterButton); | ||
|
|
||
| // const result = Object.assign(document.createElement("p"),{id:"result"}); | ||
| // container.appendChild(result); | ||
|
|
||
|
|
||
| // beforeButton.addEventListener("click", () => handleGuess(true)); | ||
| // afterButton.addEventListener("click", () => handleGuess(false)); | ||
|
|
||
| // document.addEventListener("keydown", (event) => { | ||
| // if (event.key === "ArrowLeft") handleGuess(true); | ||
| // if (event.key === "ArrowRight") handleGuess(false); | ||
| // }); | ||
| // } | ||
|
|
||
| createGame(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| body { | ||
| background-color: #faf7f3; | ||
| margin: 0; | ||
| overflow: hidden; | ||
| font-size: 1em; | ||
| } | ||
| h1 { | ||
| font-family: "tiffin-latin-variable", sans-serif; | ||
| font-variation-settings: "wght" 400; | ||
| font-style: normal; | ||
| font-size: 2em; | ||
| } | ||
| h3 { | ||
| font-family: "tiffin-latin-variable", sans-serif; | ||
| font-variation-settings: "wght" 300; | ||
| font-style: normal; | ||
| margin-top: 2.5rem | ||
| } | ||
| p { | ||
| font-family: halyard-text, sans-serif; | ||
| font-weight: 200; | ||
| font-style: normal; | ||
| font-size: 14px; | ||
| } | ||
| .hero { | ||
| padding-top: 4rem; | ||
| } | ||
| .content { | ||
| max-width: 30em; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| padding-left: 2rem; | ||
| padding-right: 2rem; | ||
| } | ||
| #game-container { | ||
| margin-top: 3rem; | ||
| height: 25rem; | ||
| width: 20rem; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| outline: 2px dotted; | ||
| position: relative; | ||
| } | ||
| #game { | ||
| padding: 2em; | ||
| text-align: center; | ||
| } | ||
| select { | ||
| font-family: halyard-text, sans-serif; | ||
| padding: 6px 12px; | ||
| background-color: transparent; | ||
| margin-top: 20px; | ||
| margin-bottom: 20px; | ||
| appearance: auto; | ||
| border: 0px; | ||
| } | ||
| #term-container { | ||
| position: relative; | ||
| } | ||
| .term { | ||
| position: absolute; | ||
| font-family: "tiffin-latin-variable", sans-serif; | ||
| font-variation-settings: "wght" 600; | ||
| font-style: normal; | ||
| font-size: 1.5em; | ||
| } | ||
| #is { | ||
| top: 8.5em; | ||
| left: 0; | ||
| right: 0; | ||
| position: absolute; | ||
| } | ||
| .term-top { | ||
| top: 5em; | ||
| left: 0; | ||
| right: 0; | ||
| transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s; | ||
| } | ||
| .term-bot { | ||
| top: 8em; | ||
| left: 0; | ||
| right: 0; | ||
| transition: 0.5s ease; | ||
| } | ||
| #choices-container { | ||
| left: 0; | ||
| right: 0; | ||
| text-align: center; | ||
|
|
||
| height: 45%; | ||
|
|
||
| position: absolute; | ||
| bottom: 0; | ||
|
|
||
| font-size: 0px; | ||
| } | ||
| #result { | ||
| left: 0; | ||
| right: 0; | ||
| height: 40px; | ||
| /* position: absolute; */ | ||
| } | ||
| .choice { | ||
| display: inline-block; | ||
| font-family: "tiffin-latin-variable", sans-serif; | ||
| font-variation-settings: "wght" 400; | ||
| font-style: normal; | ||
| font-size: 16px; | ||
|
|
||
| background-color: transparent; | ||
| outline: 1px solid black; | ||
| color: black; | ||
| border: none; | ||
|
|
||
| margin: 10px; | ||
| padding: 10px 20px; | ||
|
|
||
| cursor: pointer; | ||
| } | ||
| .choice:hover { | ||
| background-color: white; | ||
| color: #00594f; | ||
| outline: 1px solid #00594f; | ||
| border-bottom: 3px solid #00594f; | ||
|
|
||
| transform: translateY(-3px); | ||
| } | ||
| .choice:active { | ||
| background-color: #F5DFD3; | ||
| color: #777777; | ||
| outline: 1px solid #777777; | ||
| border-bottom: 0px; | ||
|
|
||
| transform: translateY(0px); | ||
| } |