I have made a CSS code amd HTML code for this piano but i dont know JS In this assignment, you will develop a piano web application based on the design created in assignment The assignment can be roughly divided into three parts: 1. Make the piano play sounds when pressing the buttons or pushing the corresponding keyboard buttons 2. Receive existing tunes from an existing server-side application (the backend) and play them, and 3. Record tunes played by the user and save them on the server-side application. In the following sections, the different parts of the application are outlined. Note: If you are new to HTML, CSS and JavaScript, this task is quite challenging and might seem daunting for you. To get started, try to break the problem down into pieces and look into each problem separately. Specifically, we recommend to follow these steps, not necessarily in the same order: 1. Make tones play when you push the piano buttons using the mouse. 2. Make tones play when you push the keyboard buttons. 3. Contact the backend to receive existing tunes, and make them appear in the dropdown menu. 4. Play existing tunes when the play button is pressed. 5. Record tunes and play them locally. 6. Save recorded tunes on the backend. he focus in this assignment should be on the logic. Since we are not studying design, the look of the application is secondary and does not give any extra points. However, the application needs to have a basic usability. For instance, the dropdown items need to be clearly visible. A sample solution for assignment 1 is available in the supplementary material, which you are allowed and encouraged to use. The following seven cases shall be supported by the application: 1. When the page is loaded, all existing tunes are received from the backend. The dropdown menu will be populated so that all the tunes (and no others) are selectable. 2. When the user presses and releases a button on the piano, the corresponding tone is played. The same tone is played when the respective key on the keyboard is pressed and released. For example, pressing a on the keyboard results in a C4 being played. The length of the played tone is always an 8th, no matter how long the button/key is held. 3. When the user selects a tune from the dropdown menu and presses the play button, the tune is played back. The durations and timing of the notes has to be followed. Additionally, notes are also played if they are outside the range of the displayed piano (e.g., a C3 should also be played). To simplify this use case, we do not specify what happens when the user presses a piano button during the playback. 4. Initially, the recording button is enabled and the stop button is disabled. When the user presses the recording button, the button is disabled and the stop button is enabled. While recording is running, any tone played through the piano is recorded with tone and timestamp. When stop is pressed, the recording stops and the recorded tune is uploaded to the backend, using the name that has been entered in the corresponding input text field. If this upload is successful, the tune becomes available through the dropdown menu in addition to all existing tunes. If the input text field is empty, No-name Tune should be used. If no tone has been played during the recording, no request is made. In addition to the use cases, the following requirements shall be closely followed: 1. The application uses only one HTML file named tunes.html. 2. The application shall never cause the page to reload. Individual elements can be re-drawn. 3. The HTML document shall validate as an HTML 5 document without errors in the W3C validator (https://validator.w3.org), using automatic detection for the document type. 4. All CSS code shall be placed in its own CSS file, all JavaScript code in its own JS file. No inline CSS or JavaScript is allowed (with the exception of JavaScript function calls from HTML events). 5. External CSS files (e.g., Bootstrap) are allowed. 6. External JS libraries/frameworks (e.g., jQuery) are only allowed in two cases. First, Axios is allowed (to perform AJAX HTTP requests). Second, Tune.jsis allowed (to play tunes). 7. Use constand let, respectively. When a variable should not be mutated, use const. If a variable must be mutated, use let. You should not be using varin this assignment. 8. When defining functions, use arrow functions unless you have a good reason not to. 9. When dealing with asynchronous functions you should opt for the async/await syntax in favor of promises for better readability. 10. You should be using forEach loops and other inbuilt array functions such as map instead of a traditional for-loops. 11. There are no restrictions on the ECMAScript (JavaScript) version. You are free to design the application in any way you like, as long as it supports the named use cases, and closely follows the requirements