I refactored the one-page website for the fictional Derby City Drip coffee shop I originally coded during Code Kentucky FEWD Session 1 for my Code Kentucky FEWD Session 2 project.
You can view my original Derby City Drip project here.
The current Derby City Drip website, while it appears visually nearly identical to the original, now uses javascript to update and display the menu items, collect email addresses to a cloud database, and display a map with the location that can be zoomed in or out. The specifics about these features can be found below.
Please make sure that you have NodeJs installed locally before proceeding.
From the terminal
-
npm installto install the needed packages -
node server.jsto start the server
Once you see Server is running on 3000, you can then view my project at http://localhost:3000/
1. Read and parse an external file (such as JSON or CSV) into your application and display some data from that in your app
I created a json file that contains the Derby City Drip Coffee Shop menu items divided into groups: Coffee, Non-Coffee, Tea, and Pastry. I used fetch() to grab the data from the menu.json file and then used map() to display the data as individual menu items in html on the web page.
2. Create a form and save the values (on click of Submit button) to an external file
The email signup form saves the NAME and EMAIL to MongoDB Atlas, the cloud based version of MongoDB.
3. Create an array, dictionary or list, populate it with multiple values, retrieve at least one value, and use or display it in your application
Each group of menu items (Coffee, Non-Cofee, Tea, and Pastry) are setup as an array in the menu.json file. I used fetch() to grab the data from the menu.json file and then used map() to display the data as individual menu items in html on the web page.
Create a web server with at least one route and connect to it from your application using ExpressJS
I connected my signup form to MongoDB Atlas by creating a web server in ExpressJS.
Click the image to watch a YouTube video showing that the form submission is correctly setup through ExpressJS and posting to MongoDB Atlas.
Use Leaflet.js to create an interactive map
I used Leaflet.js to display a map of Louisville that you can zoom in and out of plus created a marker with a pop-up to mark where the fictional Derby City Drip coffee shop resides on the map.