Description
Top part of the screen has the poem that is being built. Beneath that is a message and a search bar and a small box that says “Input line # here to choose a poem line”. Beneath that is (initially) a list (in four columns) of all the poets. In the message it says: “Search for and select a poet for line 1”. When user clicks on the name of a poet, that message says, “OK, great. Now search for and choose a poem for line 1”. The poem appears. Each line has a number next to it. The message now reads, “Input the number of the line from this poem that you want to use for line 1 in your poem. OR, if you’re feeling wild, type “wild card” in the box, and we’ll randomly select one of the lines for you.” After they’ve selected the first line, that line is displayed on the far right of the top part of the screen under the title, “My Borrowed-Parts Poem”. Then the user is prompted to choose an author for the next line, and so on. They should be told they can add as many lines as they want, but when they are satisfied with the lines they’ve chosen, they can click, “Edit the poem” to rearrange the lines. Then you just see the poem and you can click a button to show the authors, poem titles, and which line in the original poem the line is — all under each line; or to not display that info. There is a button willing to take them back to the start page. There is a button asking if they want to download the poem as it is. If they choose the return to start page button, they first are asked if they want to do that before downloading the poem and losing it. If they click OK to that warning, they are taken back to the start page. At some point I want to add a feature that allows the users to manipulate by words or clusters of words. And also a feature that randomly scrambles the lines, or the words, or the clusters of words.
We’ll need a dropdown menu, an async await fetch, conversion to JSON, and some if thens.
DOM variables
Initial Screen
search – connects to the search bar
chooseLineNumber – connects to the button that confirms that the highlighted line number is the one the user wants to select
wildCard – connects to the wild card button
topMessage – connects to the top message
poemAssembler – connects to the poem as it is built on the initial page
allChoices – connects to all the choices (be it author or poem)
choice – connects to each choice (be it author or poem)
famousPoem – connects to the famous poem displayed on the lower part of the screen (when it is selected)
Poem Editing Screen
wildCard connects to the wild card button
returnToStart – connects to the button to go back to the initial screen
download – connects to the button that allows user to download the text
poemEditor connects to the poem on the second page
App Flow & Functions
css class is initially selectionPage.
css class editPage is initially hidden.
chooseLineNumber, search, and wild card all initially unhidden
poemConstructor initially unhidden.
The returnToStart button is initially hidden.
The search bar is initially unhidden.
The dropdown menu and both the quote buttons are initially unhidden.
famousPoem is initially hidden
famousLine is initially hidden
download button initially hidden
PoemEditor originally hidden
search – allows user to search through the listed items (either a list of author names or a list of poem titles)
getAuthorNames – queries the api for all the author names and returns that as a json file called authorNames, which is sent to listAuthors
listAuthors – uses listAuthors from getAuthorNames to create an unordered list of all the author names. The list is organized in five columns. The author names are all contained in h4 tags.
choice.AddEventListener – if user clicks on an author name (in an h4), that name is stored in authorName is sent to getPoemNames(authorName). If user clicks on a poem title (in an h5), that title is stored in titleName and is sent to getPoem(titleName)
getPoemNames(authorName) – uses authorName from choice.AddEventListener to get a list of poems from that author called and sends the file as a variable poemsList to the listPoems function.
listPoems(poemsList) – takes the list of poems by a given author from getPoemNames and returns a list with the poem titles (each in an h5). The list is unordered and is in four columns.
getPoem(titleName) – uses titleName from choice.AddEventListener to retrieve the requested poem. The poem is sent as a file via the famousPoem variable to the displayFamousPoem function.
displayFamousPoem – uses the poem from getPoem to display the selected famous poem in the famousPoem area (which is where the lists of author names and then the list of titles was).
Project Plan / Diary
Friday – July 22: I am going to build a draggable sonnet (where the lines can be reorganized by dragging) today [done. It is very easy]. And also continue outlining this project. This is getting complicated. Let’s just build an app to search for and display poems first. First search for author’s name, then search for poem, then display poem, then drag and drop or jumble poem
Recent Comments