This was originally Poem Jumbler. But I want to build something simpler first. Poem Pick allows the user to pick the poems. Poem Jumbler would be the same as Poem Pick but with the added functionality of being able to jumble poems by lines, and possibly also by words and chunks of words. And maybe also we’d add the ability for the user to rearrange lines with drag and drop. Poem Builder would be Poem Jumbler, but the user would first build the poem by selecting lines from poems in the data base. That collage of poem lines would then be the poem displayed (which the user could then jumble, or move around with drop and drag, as per their wont).
Description:
Initial display is a the title Poem Pick; then a message (telling user to start by choosing an author, and that they can have us randomly choose one with the “wild card” button); then a row with a search bar and a “wild card” button; and then a list of author names (in four columns at larger screen sizes).
User searches for a specific author name and clicks on the name.
Then the message changes to say the user should select the title of the poem they’d like displayed. And the list of author names is replaced by a list of poem titles. And a new button is added to the row with the search bar: “Start Over”.
User searches for a specific poem title and clicks on the title.
Then the list of poem titles is replaced by a poem. The message at top says the name of the poem and the author. The row where the search bar used to be now has a “Start Over” button and a “Download” button. If the user selects Start Over, first a warning pops up confirming that’s what they want to do — if they click OK, then they go back to the initial author search. If the user selects Download, the poem is downloaded onto their computer.
DOM variables:
Initial Screen:
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 the title of the poem, the author name, the author’s dates, and the poem’s date)
filter – connects to the search bar
wild – connects to the Wild Card button
startOver – connects to the Start Over button
list – connects to a list of either author names or title names
Final Screen:
displayedPoem – connects to the poem div in the display-poem section
startOver – connects to the Start Over button
download – connects to the Download button
Functions & App flow
getAuthorNames – fetch a list of author names from the api. Send the list as a JSON file via the authorNames variable to the displayAuthorNames function.
changeMessage(currentDisplay) – called by displayPoemTitles or displayPoemTitles. Changes the message at the top of the screen. First message says pick an author; second says pick a title; third message is on the final screen and it has the poem title, author name, author dates and nationality, poem date, and the book the poem first appeared in.
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 poem titles by that author and stores as a JSON file in the poemTitles variable, which is sent to the displayPoemTitles function. Also sends authorName to changeMessage. Also unhides the Start Over button inside the top row.
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 and Start Over button (hides that whole row) and unhides the section with the Start Over button and the Download Button and the poem paragraph.
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:
Friday 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.
Saturday 7/23: Studied the git-hub-repo gallery and borrowed it’s css for my basic format (since the Poem Pick app also has a search bar and a clickable list. Copied this post from the Poem Jumbler post and revised it to fit the needs of the simpler Poem Pick app.
Sunday 7/24: Ran into trouble accessing needed variables. Am creating a post on this problem now.
[Monday 7/25 and the first part of Tuesday 7/26 are copied from the post about the difficulty of getting variables in the right places]
On Monday 7/25:
working on the displayPoem function. Trying to figure out how to get only the exact requested poem to print. The issue is that I search by title and many poems have the same title. Planning on looping through each poem and confirming that the author name matches selectedAuthor. Using indexOf, slice, split, the word “author” and the new line character (\n) to isolate the author’s name. Have not yet figured out how to avoid accidentally choosing the text after the word ‘author’ in a poem title. Unfortunately, I cannot seem to make the author section appear before the title section in the output. I also had to change the format from json to text because things like poem.lines (to get at the lines in the api) were coming back undefined even though the json file is structured like lines: [line are here].
On Tuesday 7/26:
Completed the poemDisplay section. Used split and the index numbers to select the author name and title; used the author name in an if-then to confirm we have the correct author (for when different authors have written poems with the same title); used splice and join with the break tags to print the poem in the correct format. I also added the wild card functionality. I made two buttons — an authorWild and a titleWild; with the former appearing only on the screen with the author names and the latter only on the screen with the titles. In each button, I set up a random indexing function and applied the random index to either the authorNames array or the titles array, and added .trim() to tidy up the strings. I was able to access the authorNames and titles arrays because I made them global variables. I learned that if you add “let”, “const” or “var” to the global variable inside a function, that particular instance of the variable is now local to that function.
On Thursday 7/28:
Added functionality to the Forget this. Return to Start button (on the page displaying the titles) and also to the Start Over button (on the page displaying the poem.
Had some trouble removing the titles from the list: the titles that had been displaying on the titles page remained at the top of the list on the page displaying the author names. To remove the title elements from the list, I used this code in the backHome.addEventListener function:
//delete all the titles from the list
const titles = document.querySelectorAll(".title-item");
console.log(titles);
for (title of titles) {
title.remove();
}
I had to create a list of all the title list items with document.querySelectorAll.
Then I could loop through that list and remove every list item.
I had a similar problem removing the poem from the displayPoem page (when it was time to start over and search for a new poem). The poem would disappear since its class was hidden, but then the old poem showed up on top of the new poem when the displayPoem page reappeared. I thought I could use document.getElementsByClassName(“poem-div”). Since that’s the class name I’d given to the div holding the poem. And I could capture the old poem that way and even change the innerHTML to an empty string (I checked with console.log and that worked), but yet the old poem was note deleted. In the end, I had to use the exact same formulation as above, treating the div like an array and looping over all the values and removing them one by one. I still don’t understand why changing the poemDiv.innterHTML to an empty string did not carry over to the display.
Recent Comments