Presocratic Fragment Dispenser

Description

Display asks user to select which presocratic they want to hear from. The user can choose if they want a randomly generated quote or a searchable list of all fragments. Then the user goes to one of two screens: 1. A screen with one quote and two buttons also appear: One allows the user to select another fragment from that presocratic, the other allows the user to go back to the main screen and pick another presocratic. OR 2. A screen with all fragments with a search bar at the top and a button to go back to the main screen

We’ll need a dropdown menu, an async await fetch, conversion to JSON, and some if thens.

DOM variables

Initial Screen
choosePresocratic – connects to the drop down menu
randomQuote – connects to the button for the random quote
allQuotes – connects to the button to choose all the quotes
Random Quote Screen
anotherQuote – connects to the button to ask for another random quote
returnToStart – connects to the button to go back to the initial screen
All Quotes Screen
searchQuotes – connects to the search bar
returnToStart – connects to the button to go back to the initial screen

App Flow & Functions

css class is initially selectionPage.
css classes allQuotes and oneQuote are both initially hidden.
The returnToStart button is initially hidden.
The search bar is initially hidden.
The dropdown menu and both the quote buttons are initially unhidden.

randomQuote.addEventListener(“click” … ) – If clicked, it sends the variable randomPlease to the validator.

allQuotes.addEventListener(“click” …) – If clicked, it sends the variable allPlease to the validator.

validator(allOrOne) – When called, it checks to see if a presocratic has been selected from the drop menu. If yes, it captures the variable as presocratic and sends the presocratic variable and allPlease or onePlease to getQuotes(presocratic, allOrOne) 

getQuotes(presocratic, allOrOne) – Downloads all the fragments from the chosen presocratic. And converts it to a JSON as the fragments variable and passes the fragments variable to randomFragment if allOrOne is onePlease, and passes the fragments variable to displayAll if the allOrOne is allPlease.

randomFragment(fragments) – generates a random number between 0 and one less than the number of fragments. Uses this number as an index to randomly select a fragment. The fragment is stored in the selectedFragment variable, which is passed to the displayOne(selectedFragment)

displayOne(selectedFragment) – Creates a div that displays the selectedFragment as an h4. Also hides the selectionPage class and unhides the oneQuote class. Also unhides the returnToStart button and hides the dropdown menu and both quote buttons.

displayAll(fragments) – creates a div and displays all fragments as h4s with wrapping text. The fragments should be four across and keep going to the very end. Also hides the selectionPage class and unhides the allQuotes class. Also unhides the returnToStart button and hides the dropdown menu and both quotes buttons. Also unhides the search bar.

searchBar.eventListener – dynamic search of whatever is typed into the search bar.

returnToStart button – hides both the oneQuote and the allQuotes class. Hides the search bar. Hides the returnToStart button. Unhides the selectionPage class, the dropdown menu, and both quotes buttons

For later: a button that chooses another presocratic quote from the same presocratic. On the oneQuote page

Development process: figure out how the API works. Do HTML and CSS for all parts. Code through and test to the validator function. Code through and test the getQuotes function. Code through and test randomFragment, then display one. Then code through and test displayAll. Then the search bar. Then the returnToStart button.

 [use https://ricardometring.com/getting-the-value-of-a-select-in-javascript ].

Global Variables

? 

[Part of the Speaking Javascript project.]