Make an interactive webpage for a radio station.The page should take care of listener’s requests. Start...

Make an interactive webpage for a radio station.The page should take care of listener’s requests. Start off with a page that contains an ordered list containing 3 songs, textbox for the listener to enter the song they want to request, and a button to submit their request. When the button is pressed the song in the textbox should be added to the bottom of the ordered list and cleared from the textbox. In addition, if the webpage gets more than 5 songs on the ordered list, all songs in the list should turn red indicating that the station would rather not have additional requests at this time.The button should also reflect this by having its text now indicate a long wait to hear additional requested songs. However, the user should still be able to enter additional requests if they want to.

The following methods are required
(1) createElement
(2) appendChild
(3) length
(4) querySelect and/or querySelectAll
(5) innerHTML

HTML/JavaScript

Expert Solution

Here is the code:

Note: There are three separate files for HTML, CSS and JavaScript.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">

  <title>Radio Station</title>
</head>
<body>
  <div class="header">
    <h1>? Radio Station</h1>
  </div>
  <div class="container">
    <div class="card">
      <form method="get">
        <input class="input" type="text" name="song" id="addSong" placeholder="Enter song name" required>
        <button type="submit" class="btn">Request Song</button>
      </form>
    </div>
    <div class="card">
      <ol id="songList"></ol>
    </div>
  </div>

  <script src="app.js"></script>
</body>
</html>

Code Screenshot:

CSS Code:


body {
  margin: 0px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.header {
  background-color: cornflowerblue;
  padding: 10px;
  color: aliceblue;
  align-self: center;
  overflow: hidden;
  text-align: center;
}

.container {
  width: 60%;
  margin: auto;
  padding: 20px;
}

.card {
  margin: 10px;
  border: 1px solid cornflowerblue;
  border-radius: 4px;
  padding: 20px 10px;
  text-align: center;
}

.input {
  padding: 8px;
} 

.btn {
  padding: 8px;
  background-color: cornflowerblue;
  color: aliceblue;
  border: 2px solid darkblue;
  border-radius: 4px;
  cursor: pointer;
}

li {
  border: 1px solid gray;
  padding: 10px;
}

JavaScript Code:

// Selecting html elements
const input = document.querySelector('.input');
const requestBtn = document.querySelector('.btn');
const list = document.querySelector('#songList');

const songsArray = ['Hall of Fame - The Script', 'Shape of You - Ed Sheeran', 'Airplanes - BoB, Hayley Williams'];

// On refreshing adding first 3 songs as definded in array
window.addEventListener('DOMContentLoaded', () => {
  songsArray.forEach(element => {
    const li = document.createElement('li');
    li.innerHTML = element;

    list.appendChild(li); // Appending li into list
  });
});

// On button click adding new song
requestBtn.addEventListener('click', (e) => {
  e.preventDefault(); // Stopping form to submit data

  const songName = input.value; // Reading input
  var length = songsArray.push(songName);

  if (length <= 5) { // Checking length
    // Creating a li element
    const li = document.createElement('li');
    li.innerHTML = songName;
  
    list.appendChild(li); // Appending li into list
  } else {
    requestBtn.innerHTML = 'Please wait, Here these songs first.';
    
    // Changing color of list elements
    const listChilds = document.querySelectorAll('li');
    listChilds.forEach(li => li.style.color = 'red');

    alert("Cannot add song! Length Exceeded");
  }
  
  input.value = '';
});

Code Screenshot:

Page Screenshot(Output):

venereology answered 1 year ago

Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and...

Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and JavaScript # Sign in/SignUp page should work # CSS HTML and javaScript should be in separate files # Add images # post a picture of your output and code as well

What is managed care? Answer should be half-page to one page long.

What are the major distinctions between primary care and specialty care? Answer should be half-page to...

What are the major distinctions between primary care and specialty care? Answer should be half-page to one page long.

should government continue to take an aggressive role in reshaping the health care system or should...

should government continue to take an aggressive role in reshaping the health care system or should the economy be allowed to continue exerting market -driven reforms. please take a stand .how are the problems of cost ,access, and quality likely to be addressed in each circumstance?

Should government continue to take an aggressive role in reshaping the health care system or should...

Should government continue to take an aggressive role in reshaping the health care system or should economy be allowed to continue exerting market-driven reforms

What actions should the nurse take when performing oral care for a dependent client?

Health care professionals should take a patient’s religion and spirituality into consideration, but to what extent...

Health care professionals should take a patient’s religion and spirituality into consideration, but to what extent should a health care professional’s beliefs be taken into consideration? In the case of the parents choosing faith over medicine, what is the responsibility of the health care professional and/or health center/hospital? Provide examples to support your response.

Make a modest or simple Web page using Python flask. The basic components of HTML should...

Make a modest or simple Web page using Python flask. The basic components of HTML should be included. The Web page should have at least 3 Headings(<h1>), paragraph (<p>), comments (), ordered list, unordered list, three links to website, and should display time & date. Example: <html> <head> <title>Page Title</title> </head> <body> ..new page content.. </body> </html>

Why should health care managers know how to make proper investment decisions?

The U.S. Constitution says the government should take a census every ten years to make sure...

The U.S. Constitution says the government should take a census every ten years to make sure all people in the United States are counted. What do you think?

Question