Dynamic Community Events Calendar

Project Description

This SPA [single page application] is a dynamic public calendar that allows users to view details regarding upcoming community events as well as to create and post their own events for others to view and attend.

The page displays thumbnails of user-generated events which, when clicked, will display a modal box containing pertinent event information such as date, time, location, and a brief description of the event, itself. Users can then confirm their attendance by selecting the appropriate option from a drop-down select menu.

The main page also features a "create event" button that opens a form modal into which users are able to input information regarding a new event they wish to publicize. Users will be prompted to enter the aforementioned specifics of the event such as date, time, and location. Upon submission, a new event thumbnail will be generated and appended to the events calendar homepage. Each new event generates a user key which users will be prompted to save; this key can be used to edit their event when they right-click its thumbnail.

Users may also search available events by keyword in the top search bar.

Installation

1. Fork and clone this Github repository to your local environment.
2. CD into the main folder and ender the command $json-server --watch db.json to start the local server.
3. Open the phaseoneproject folder in your local code editor.
4. Open the index.html file in your browser and begin using the community events calendar.

Usage

1. Click on any thumbnail to view the event details in a popup modal.
2. Select whether you are interested, going, or not interested.
3. Click anywhere outside of the modal box to close it.
4. Click the "create new event" button to open a modal form.
5. Enter the specifics of the new event you wish to publicize.
6. Confirm submission by clicking the "submit new event" button.
7. Don't forget to save your user key! Right click on your event and enter admin key to edit event details.
8. Enter a keyword into the search bar to see what events include that keyword.
9. Clear the search with the "clear search" button at the bottom of the page.

Credits

Code written, tested, and submitted by Kat T and Joseph L.

Github: https://github.com/ktannehill
Github: https://github.com/joeylee08

Images via Unsplash

We do not claim ownership over any of the fictional names or places used in this project. All rights belong to their respective creators. We express our appreciation for their inspiration.