Giter Club home page Giter Club logo

a2-alexroxy17-rosana-pochat's Introduction

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://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.

a2-alexroxy17-rosana-pochat's People

Contributors

charlieroberts avatar alexroxy17 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.