This application was one of my first introductions to Javascript, CSS, and HTML. This application covers allowing a user to cycle throw a series of motivation poster images and slogans. If the user likes the Motivational poster, the user can save the poster. The application then will use local storage to save the poster in the show "Saved Poster" section. The user can also make a new poster in the "Make Your Own Poster" section.
- One teammate: fork this repository
- Go to settings and turn on GitHub Pages for this repository
- All teammates: clone down this repository
cd
into the repository- Run
open index.html
to view it in the browser
- Add
querySelectors
for all classes onindex.html
. - Create a
loadRandom
function that changesinnerText
oftitle
andquote
andsrc
ofimage
. - Create
loadRandom
function to passtitles
,quotes
, andimages
arrays through thegetRandomIndex
function.
- Create an
eventListener
on click for theshowRandom
variable that takes in a second argument ofloadRandom
Saved posters page (once working with extra saved posters):
When a user clicks the "Make Your Own Poster" button, we should see the form, and the main poster should be hidden
- Create a function that shows the the form by removing the
hidden
class fromform
and adding thehidden
class onposter
. - Create an
eventListener
on click for theshowForm
variable that takes in a second argument ofloadForm
.
When a user clicks the "View Saved Posters" button, we should see the saved posters area, and the main poster should be hidden
- Create a function that shows the saved poster page by removing the
hidden
class fromsavedPosters
and adding thehidden
class onposter
. - Create an
eventListener
on click for theshowSaved
variable that takes in a second argument ofloadSaved
.
When a user clicks the "Nevermind, take me back!" or "Back to Main" buttons, we should only see the main poster section
- Create a function that returns back to the main page from the saved page by adding the
hidden
class fromsavedPoster
and removing thehidden
class onposter
. Then Create another function that does the same thing from the form page but this time adding thehidden
class toshowMain
. - Create an
eventListener
on click for thebackToMain
variable that takes in a second argument ofloadMain
- Create an
eventListener
on click for theshowMain
variable that takes in a second argument ofnvmTakeMeBack
.
In summary: Be able to switch between the three views (main poster, form, and saved posters) on the correct button clicks
Gif that shows the toggling between screens
Hint: go check out the HTML and CSS files to see how the form and saved posters sections are being hidden in the first place
Fillout form posters view:
On the new poster form view, users should be able to fill out the three input fields and then hit the save button
-
Add
eventListener
on click tomakePoster
variable with a second argument ofshowPoster
-
Create
querySelectors
targeting the IDs ofposter-image-url
,poster-title
, andposter-quote
. -
Create a function called
inputIndex
that runs a theunshift
method forimages
,titles
andquotes
arrays and adding new input values from the form. -
Create a function for
showMyPoster
that targetsposter-image-url
,poster-title
, andposter-quote
and then creates an object instance of thePoster
class calledmadePoster
that takes in those input values.
- Add the
hidden
class back to theform
variable, remove thehidden
class to theposter
variable, and uses theevent.preventDefault
method to stop the page from refreshing.
- Use
innerText
method ontitle
andquote
variables to show the first element of ourtitles
andquotes
arrays. Use thesrc
method to do the same thing for theimages
array.
When a user clicks the "Save This Poster" button, the current main poster will be added to the savedPosters
array
- Create a new variable called
savePoster
and use aquerySelector
to assign it to thesave-poster
class. - Create an
eventListener
for thesavePoster
variable on click with a second argument of a new function calledsaveCurrentPoster
. - Create the
saveCurrentPoster
tounshift
thecurrentPoster
into thesavedPosters
array.
If a user clicks the "Save This Poster" more than once on a single poster, it will still only be saved once (no duplicates)
- Within the
saveCurrentPoster
function, create anif statement
using the.includes
method to disallow duplicate values from being passed into thesavedPosters
array.
- This should have been accomplished in Iteration 1.
- Create a new variable called
posterGrid
and use aquerySelector
method to assign it to thesaved-posters-grid
class. - Use the
.insertAdjacentHTML
method on theposterGrid
variable to create a newmini-poster
class forindex.html
document.- Within that class create an
article
tag that holdsh2
,h4
, andimg
tag values associated with the properties of oursavedPosters
array.- For example,
currentPoster.title
gets inserted into a newmini-poster
h2
.
- For example,
- Within that class create an
Delete posters view:
- From the saved posters view, if a user double clicks a saved poster, it will be deleted
Hint: How will you update the data model to achieve this?
Here's a list of possible extensions to implement - but ONLY IF your team has completed all the previous iterations AND have cleaned up your code to make it DRYer and more readable.
You are welcome to add your own extensions. Be sure they are thoughtful in terms of UX/UI, and that they do not break any prior functionality.
- Implement data validation and error handling into the form (disable button, provide error messages if data entered is not correct, etc)
- In the main poster view, allow users to click each piece of the poster (image, title, quote) to update just that piece with another random item from the appropriate array
- When a user single clicks a saved poster, create a modal to view it larger
- Allow users to drag and drop saved posters into whatever order they want them to appear
Project spec & rubric can be found here