nlucuab/destinations-page

destinations-page

destinations-page's Issues

Add children boxes to blue box

Mockup Reference

• Heading box has a title
• Card container box (yellow box) present

Add content to header (green container)

Mockup Reference

• Finish adding the correct content to the red container

Add functionality to all the edit buttons on cards

• When a user clicks the edit button on any card, an event is elicited

Layout the 2 main containers

Mockup Reference

• Create the two 2 main containers: the green box as one container and the red and blue boxes as one container.
• Feel free to add in the content placeholder until the real content is ready

Generate a new bootstrap card for user input data

Bootstrap card documentation

• The card uses destination field data
• The card uses location field data
• The card uses photo field data (when available)
• When no photo field data is available, the card uses another photo as a placeholder
• The card uses the description field data
• The card ignores description data when not available
• The card has an 'edit' button
• The card has a 'remove' button
• Display the card inside of the card container box (blue)

Create form inside the red box

Mockup Reference

• Destination field is required
• Location field is required

Style children boxes of the blue box

• Pink header is above the yellow cards container
• One can tell the header and cards container boxes apart

Add functionality to the form's button

• When the form's button is clicked, the app does something

Add functionality to all the remove buttons on cards

• When any remove button in any card is clicked, a response is elicited

Update card with new info (if any) on "edit" button clicked

• The user's new information is used in the card after all the prompting is done

Style the bottom main containers (red and blue containers)

• Red and blue containers are laid out side by side
• One can tell red and blue containers apart

Grab user inputs from the form upon user clicking on 'add to list' button

• User's inputs are stored when the user clicks the button
• The form inputs are cleared for the next entry

Deploy to github pages

• Deploy to github pages after initial setup

Add bootstrap to document

• bootstrap CSS is linked to a layout document

Remove card from display when 'Remove' button is clicked

• The card on which the remove button is clicked, gets removed from the layout

Style the 2 main containers (optional)

• Put a border/color around the first main container
• Put a border/color around the second main container

Add only box content in the main container (red and blue)

Mockup Reference

• Create a box container for the red box
• Create a box container for the blue box
• Feel free to leave in borders for visualization purposes, we will remove them in further issues

Prompt user for new information to edit old ones with 'edit' button

• Prompt user for new field information
• Store new destination name (if any)
• Store new location name (if any)
• Store new photo link (if any)

Create file structure

• Have files for layout, styles, and scripts for functionality
• Deploy file structure to Github pages