Final Project Blog: Part 4

This weeks installment of the project I created the basic landing page for the app and reworked the structure of my sccss files to better handle responsive design. I also added handling for the connection to the database and the post, put, and delete methods.

As for the landing page, nothing to crazy was done here, just your basic HTML page. For the stylings however i created a composite styles.scss file that takes information from a reset, small, medium, and large scss files and compiles them all together when the scss build command that we added to the project last week is run.

The next part I worked on was connecting to the database and creating the post put and delet methods. First we use the .env file to hold the connection address variable. Then we use that variable in the app.js file

Mongoose.connect(process.env.DB_CONNECT, { useNewUrlParser: true, useUnifiedTopology: true })

This bit of code allows our rFaovirtes.js file in the models folder to link back to this implementation. From there the POST, and PUT methods are pretty straightforward and I have included them in the main.js file.

let postToDB = async (value) =>{
let pushToDatabase = await fetch(`model/rFavorites?name=${value.name}&genre=${value.genre}&category=${value.category}&genreID=${value.genreID}&id=${value.id}`, {
method: 'POST'})
}

For the PUT route, simply replace the method ‘POST’ with ‘PUT’. The delete implementation is only slightly different.

let deleteFromDB = async (value) =>{
let removeFromDatabase = await fetch(`model/rFavorites/${value}`, {
method: 'DELETE'})
return removeFromDatabase}

Next week I plan to finish creating the styling for the page and implement the display of basic data from the API.