gingus55/sound-art-smart

Sound art smart

Sound Art Smart

About the Application

A quick visual questionnaire to discover artworks based on your interests.

Sound Art Smart guides the user through a short series of image-based selections in order to present a random assortment of up to 6 artworks matching their specified interests. The user can then learn more by viewing the artwork information pages which include the work's title, artist, date, medium and much more. Should the user want to come back later, they can save their favourite artworks. As an added bonus, users can view their favourites in a styled gallery page--a one-of-a-kind exhibit all their own!

Contributors

Chris: https://github.com/gingus55
Jonny: https://github.com/jj77847
Elizabeth: https://github.com/EllieK2
Dahir: https://github.com/DMO17
Kayle: https://github.com/kayleriegerpatton

User Flow & Features

From the home page a user can view the quote of the day, read a brief introduction to the application's features, and click "Get Started" to begin the questionnaire. The user is guided through a series of image-based questions to narrow down their art preferences, for example paintings vs. sculptures.

Once the user has made their choices, they are presented a random selection of up to 6 artworks aligned with those interests. From there, the user can view more information about each artwork including artist, date, medium, and much more, and also save it to their favourites.

Finally, from any page the user can access an About Us page, the questionnaire, their favourites, and their personal gallery from the navigation bar.

Built With

Technologies

• CSS & Bulma CSS framework
• HTML
• Javascript & jQuery
• Google Fonts

Web APIs

• The Metropolitan Museum of Art Collection API
• They Said So Quotes API

Deployed Application

Deployed URL

Screenshots

Desktop Viewport

Index page

Questionnaire sample page

Results page

Favourites page

Gallery page

Mobile Viewport

Index page

Questionnaire sample page

Results page

Favourites page

sound-art-smart's Issues

Build landing page

• create responsive navbar
• Description of web-application's purpose
• add a get started button
• design the page

Click event from results page to object view page

• Add click event, targeting each button
• Save object info to LS
• Pull from LS to render object view page

Final CSS review

• set object card (on results page) min-height
• add space between "view more info" and "save" buttons on object cards
• consider icons for the buttons on object cards
• move buttons side by side on object cards
• consolidate css files into styles.css
• figure out background issue!

Final JS review

• Remove console.logs
• replace expressions with arrow functions?
• consolidate share functions in the shared js file?
• review and leave good comments
• Add alt tags to question image cards

Update README file

• Logo image
• description
• contributors github links
• user story/flow
• repo link
• "built with" list
• APIs list
• screenshots- desktop & mobile

convert object result view page to JS

(GET STARTED PAGE) render next question on click

• Create an array of question and options for painting and sculptures
• Construct the cards and question title for each question page dynamically
• Save user choices globally in an array

Populate view results page

Create About Us page

• Add images
• Add personal blurb space
• Add social links
• insert cards
• work on layout

Use Jambot to do mock up of designs by chris?

• Landing Page

• Question Pages

• Data Collection

• Unnecessary page

• You'll love

• Sound Art Smart

• My favourites

• About Us

Render object info page

• HTML layout & style object info page
• Set click event listener for "view more info" buttons on the rendered results page
• Redirect to object information page on click

object result view page

Gallery Page

• Create and style the grid frames
• Investigate Drag and drop functionality
• https://jqueryui.com/draggable/
• Working functionality but no images rendering empty boxes.
• work on rendering images

Update question html page

• Re-link the appropriate css file (after renaming the css files, the link is broken)
• Change page title from Hello Bulma!
• Confirm appropriate js file is linked as well
• Refactor with semantic HTML
• Link proper html files in navbar

(GET STARTED PAGE) Get multi-choice images

• Get images for each of the questions (25 img)
• Crop the images to squares
• Name each img appropriately when saving
• Separate the images to a painting and sculpture folders
• Used css to highlight img used and basic nav bar

Quote API on Index page

• make They Said So Quotes API call for art quote of the day, within onReady, on index page
• render quote to index page

Results Page

• Create & style Html page for template string (6 object cards w/ view btns)

• Loop through API data to render cards after calls

• Issues: some card title text not centered, API results not a great match

Final HTML Review

• remove commented out html
• make page titles cohesive
• make About Us page open in new tab

Favourites page

• Assign save buttons to rendered cards
• Save into local storage
• Get favourites to render with same card style on a favourites page
• Add ls reset button to page

Tidy tasks

• Get array into LS
• Align search buttons
• set height for cards
• show error when no results found