net-art-uchicago / cta-file-sharing

a collaborative artware project by Media Art and Design students at the University of Chicago.
GNU General Public License v3.0
2 stars 15 forks source link

JS/Front-End for Second Page #15

Open aureliejr opened 1 year ago

aureliejr commented 1 year ago

I'll be working on the frontend part for the second page (the part that displays the poems), it'll take the JSON formatted poems and display them on a basic HTML page. I'll probably use CTA data/data from the API the backend people are using to format it in a more interesting way soon...

nbriz commented 1 year ago

hey @aurelieschool

here's the last PR i need u to make!

before u create a new branch to work on this, don't forget to git pull upstream main into ur main branch first, i've made some changes. in addition to connecting all the parts we went over in class yesterday, i also renamed ur folder from "page2" to "poems"

use our REST API to get poems

fetch from the actual API now fetch('/api/poems', req) rather than ur temporary file fetch('poems.json', req) (&& don't forget to delete that poems.json file once u're no longer using it). the backend/database.json is going to be empty to start, so u might need to use the app a few times to fill it up w/some data that u can use to test.

use our new HTML/CSS to display the poems

i added the HTML/CSS that Azarias made to ur poems/index.html && also added the addBubble() function i made in class to ur display-poems.js file so u could use it to add poems. the first argument is the text/html u want to display inside the bubble, && the second argument is the CSS class to add (either 'bubble' for left aligned bubbles or 'bubble2' for right aligned bubbles), take a look at js/firstPage.js for examples of how we're using this function there

if i remember correctly, we were thinking that once the user lands on this page they'd see a random poem (from the database) appear... then a couple seconds later another one appears, && then a third one appears a couple seconds after that. (am i remember that correctly?)

after that, we should display some navigation options for where they want to go next, the options should link to: