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

Solutions

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

Next > < Previous

Question

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

Solutions

Expert Solution

Related Solutions

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

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

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

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

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

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