Description:
Initial display is a the title Poem Jumbler and then a search bar and then a list of author names in four columns.
User searches for a specific author name and clicks on the name.
Then the list of author names is replaced by a list of poem titles.
User searches for a specific poem title and clicks on the title.
Then the list of poem titles is replaced by a poem. Above the poem there is a message telling the user they can drag and drop the poem to reorganize, or they can click the Jumble button (which has also now appeared) to jumble the poem, or they can return the poem to it’s original form with the Return to Original button, or they can download the current version of the poem with the Download button, or they can return to the search with the Go Pick Another Poem button. If they select that last button, first a warning pops up confirming that’s what they want to do — if they click OK, then they go back to the search.
DOM variables:
search – connects to the search bar
message – connects to the top message (tells user to pick an author or let us randomly pick one; then changes to say pick a poem or let us randomly pick one; then changes to nothing)
list – connects to a list of either author names or title names
displayedPoem
jumble – connects to the jumble button
original – connects to the Return Poem to Original Form button
download – connects to the Download button
return – returns to the initial search screen
Functions & App flow
getAuthorNames – fetch a list of author names from the api. Send the list as a file in the authorNames variable to the displayAuthorNames function
changeMessage(currentDisplay) – called by displayPoemTitles or displayPoemTitles
displayAuthorNames – loop over every author name from the authorNames list and for each one create a list item in an h4 tag and append it to the unordered “list” DOM variable.
selectAuthor.AddEventListener – listens for if someone clicks an h4-tagged item in the unordered “list” DOM variable. When one is clicked, that author’s name is stored in the authorName variable, which is sent to the getPoemTitles function.
getPoemTitles(authorName) – takes the authorName variable from the selectAuthor.AddEventListener function. Fetches a list of poems by that author and stores the file in the poemTitles variable, which is sent to the displayPoemTitles function. Also sends authorName to changeMessage.
displayPoemTitles(poemTitles) – loops over the poemTitles variable and for every poem title, it creates a list element in an h5 tag and appends that list item to the “list” DOM variable.
selectPoem.AddEventListener – if someone clicks on an h5-tagged item in the unordered “list” DOM variable, that poem title is sent to the displayPoem function.
displayPoem(poemTitle) – loop over the poem and grab each line (by looking out for line breaks) and put them in the paragraph with <br> after each one. Also should look out for a space in the poem (not sure what to look out for), and when found create another paragraph. Each paragraph should be appended to the displayedPoem DOM element. Also sends poemTitle to changeMessage. Also hides the wild card button and the search bar.
Eventually I want to add the ability to jumble the poem lines, words, or chunks of words randomly; and also the ability to drag and drop lines, words, and chunks of words. But let’s try to do this relatively easy code first
Plan/Code Diary:
Fri 7/22 – outlined the code; coded the index; made the folders and started the css. Next I should code the css and see how the repo works. The trickiest part of the latter will be seeing how the poems differentiate between breaks and spaces. Tomorrow I want to do the css, figure out the api, and start coding the js. Tomorrow I should do the first commit.
Recent Comments