Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js

Due: September 9th, by 11:59 AM.

My Playlist

This project shows a playlist generated on the users input. The user inputs the title, artist, album, and album year, and all of this information is added to the server's information. This is then displayed in another page, alongside all the other songs that have been added. The page will also display the number of the song (if its the nth added) and when the song was released compared to The Beatles. If it was before 1962, it displays "Before The Beatles", if it's after 1962, "After the Beatles", if its the same year it'll display "Contemporary with The Beatles".

This project was hard to achieve. There was a significant amount of problems regarding how to pass information from the user's input into the table. A big issue with the code was presented because variable names were misspelled, so the page wouldn't even launch. Even after all the issues, the project is finished and functional.

This project helps users be able to, not only keep track of songs they want to add to their personal playlists, but also can help users, especially music students, determine how The Beatles influenced music.

Extra functionality that would be great to include would be to hyperlink the songs added to youtube videos, so that the user can play them. Another functionality that would be good to include in the futurewould be that the page creates a youtube playlist based on the songs added.

Information on how to write and style my code came from many website, including, but not limited to:

• https://www.w3schools.com/
• www.javatpoint.com
• gomakethings.com
• love2dev.com
• teamtreehouse.com
• stackoverflow.com
• developer.mozilla.org

https://a2-rosanapochat.glitch.me/

Technical Achievements

• Tech Achievement 1: Successfully implement the form methods, and use them to pass information from index.html to results.html.
• Tech Achievement 2: Successfully used fetch, GET, and POST to pass the information between files and for each file to have the correct information.
• Tech Achievement 3: Successfully display the information received by the user into an understandable and visually clear table.
• Tech Achievement 4: Successfully programmed buttons to jump between index.html and results.html, and to add the user's input into the table in the results.html page.

Design/Evaluation Achievements

• Design Achievement 1: Shown in style.css, the code, almost all of the used had some sort of styling, that allows the webpage to look as one.