Event Card creator - this project takes the user through steps to create their event card. The user enters information about their event details on a form, selects their chosen food and music and all their information is then rendered on an event card template that they can print.
The created events are saved in local storage and the user can consult and edit them by going on the "My Saved Events" page.
- Links to the project
- Team members
- Technologies
- User Story
- Detailed User Journey
- Wireframes
- Screenshots of the project
- Future developments
- Contact me
AS A user I WANT to create an event card by gathering the details of the event, creating a menu and a music playlist and see my bespoke event card SO THAT I can print it to share/email it with my guest list.
GIVEN I am a user who wants to create an event card
WHEN I land on the webpage
THEN I see a start page with a start button
WHEN I click on the start button
THEN I am presented with a form where I can enter my event details
WHEN I click on the form's save button
THEN my details are saved and I am presented with the page for food selection
WHEN I choose from the dropdown menu and click on the food submit button
THEN I am presented with a variety of recipe cards matching my chosen criteria
WHEN I click on the add button a recipe card
THEN I can see it being added to my selection list
IF I want to discard any or all of cards on my menu
THEN I can delete them by clicking on the x sign
WHEN I click on Save and Continue
THEN my food selection is saved and I am presented with the page for music selection
WHEN I input my chosen genre, track or artist and I click on the music submit button
THEN I am presented with a variety of playlist cards matching my chosen criteria
WHEN I click the add button on a playlist card
THEN I can see it being added to my selection list
IF I want to discard any or all of cards on my playlist
THEN I can delete them by clicking on the x sign
WHEN I click on Save and Continue
THEN my music selection is saved and I am presented with the bespoke event card
WHEN I click on the print button
THEN I can print my bespoke event card
WHEN I click on the button "Go to my saved events"
THEN I am taken to the "My saved events" page where I can see cards of my saved events
WHEN I click on "My saved events" link in the menu
THEN I am taken to the "My saved events" page where I can see cards of my saved events
WHEN I click on the button "Delete"
THEN I am presented with a confirm message to make sure I actually want to delete this event (if answered yes, the event is deleted from the saved events)
WHEN I click on the button "See full event card"
THEN I am presented with the bespoke event card
WHEN I click on the button "Edit Food/Music"
THEN I am presented with the page for food selection, and then music selection
WHEN I complete the editing
THEN I am presented with the bespoke card again, which I can print, edit again or go to my saved events page
-
Core files: HTML, CSS and Javascript
-
Libraries: jQuery, Bulma, Google fonts, FontAwesome, Ionicon, Moment.js, UUID
-
API: Edamam, Spotify
Wireframe - Start page
Wireframe - Form page
Wireframe - Food/Selection page
Wireframe - Event Card page
Wireframe - Saved Events page
Desktop viewport:
Desktop - Start page
Desktop - Event details form
Desktop - Food selection - Empty page before first search
Desktop - Food selection - Search and Selection ongoing
Desktop - Music selection - Empty page before first search
Desktop - Music selection - Search and Selection ongoing
Desktop - Event card
Desktop - Saved events page
Mobile viewport:
Mobile - Start page
Mobile - Event details form
Mobile - Food/Music selection
Mobile - Event card
Mobile - Saved events page
Mobile - Burger menu open
Future improvement:
- refactor for a cleaner code
- trigger search on select change and remove submit button
- increase the limit of items received from API
- add more options for the user to further personalise their event cards, such as being able to choose from a selection of fonts and uploading their own pictures on to their cards.
If you have any questions about this project or my work, please do get in touch by contacting me via email or find me on LinkedIn