1

Populate the General Recordings List. For this TODO, you must assemble a new <section> and <ul> for Billy's general recordings data. Unlike TODO 4, there is not a section or unordered list in the DOM for the recordings, so you must use jQuery to create those elements, too.

  1. Create a recordings <section id="section-recordings"> and add it below the section for top rated recordings in the sidebar. How can you achieve this with jQuery?

  2. Create a <ul id="list-recordings" class="list-recordings">, style it, and add it to the <section id="section-recordings">.

  3. Add a styled <li class="recording"> for every recording in the recordings Array. What lodash methods can help you here?

  4. Add a separate <div> for the title, artist, release, and year of each recording. Give them a class based on their key in the object.

  5. Add CSS styling rules to the css/site.css file to style the list items. Can these style rules apply to list items in both the top rated and recordings lists? How can you achieve this with CSS selectors/rules and jQuery?

The resulting HTML should look something like this:

<section id="section-recordings">
  <ul id="list-recordings" class="list-recordings">
    <li class="recording">
      <div class="title">Title: Eastern Rebellion</div>
      <div class="artist">Artist: Cedar Walton</div>
      <div class="release">Release: Timeless</div>
      <div class="year">Year: 1976</div>
    </li>
    <!-- more list items here -->
  </ul>
</section>

However, my HTML file looks like this:

<div id="sidebar" class="sidebar">
  <div id="image-container-billy" class="image-container">
    <img
      id="image-billy"
      src="images/billy/billy-0.jpg"
      i="0"
      width="25%"
      class="image"
    />
  </div>
  <section id="section-top-rated" class="recordings">
    <header id="header-top-rated" class="header-recordings">
      Top Rated
    </header>
    <ul id="list-top-rated" class="list-recordings"></ul>
    <li>Voice in the Night</li>
    <li>The Shape of Jazz to Come</li>
    <li>Like Sonny</li>
    <li>Go</li>
    <li>The Water Is Wide</li>

    <section id="section-recordings">
      <ul id="list-recordings" class="list-recordings"></ul>
      <div class="title">Eastern Rebellion</div>
      <div class="artist">Cedar Walton</div>
      <div class="release">Timeless</div>
      <div class="year">1976</div>
      <div class="title">Soul Food</div>
      <div class="artist">Bobby Timmons</div>
      <div class="release">Prestige</div>
      <div class="year">1966</div>
      <div class="title">A Swingin' Affair</div>
      <div class="artist">Dexter Gordon</div>
      <div class="release">Blue Note</div>
      <div class="year">1962</div>
      <div class="title">Rejoice</div>
      <div class="artist">Pharoah Sanders</div>
      <div class="release">Theresa</div>
      <div class="year">1981</div>
    </section>
  </section>
</div>

This is where my code in the JS file begins:

const onReady = data => {
  // YOUR CODE BELOW HERE //

  $('#section-bio').css('color', 'brown');
  $('#section-quotes').css('color', 'blue');
  /* eslint-enable */
  // TO DO 4 ////

  const topRated = data.discography.topRated;

  let newSection = document.createElement('section');
  topRated.forEach(recording => {
    $('#section-top-rated').append(`<li>${recording.title}</li>`);
    //let topR = $('#section-top-rated').append(`<li>${recording.title}</li>` );
  });
  const recordings = data.discography.recordings;

  $(`<section id="section-recordings"></section>`).appendTo(
    '#section-top-rated'
  );
  //$(`<ul id="list-recordings" class="list-recordings"></ul>`).appendTo('#section-recordings')
  //$(`<li class="recording></li>`).appendTo('#list-recordings').appendTo('#list-recordings')
  $('#list-recordings').append(`<li class="recording></li>`);
  $(`#section-recordings`).append(
    `<ul id="list-recordings" class="list-recordings"></ul>`
  );
  //$('#list-recordings').append(`<li class="recording></li>`)

  recordings.forEach(element => {
    $(`<li class="recording"></li>`);
    $('#section-recordings').append(
      `<div class="title">${element.title}</div>`
    );
    $('#section-recordings').append(
      `<div class="artist">${element.artist}</div>`
    );
    $('#section-recordings').append(
      `<div class="release">${element.release}</div>`
    );
    $('#section-recordings').append(
      `<div class="year">${element.year}</div>`
    );
  });

  const uL = document.createElement(
    'ul id="list-recordings" class="list-recordings"'
  );

  uL.appendTo(`#section-recordings`);

  //let newSection = document.createElement('section');
  //$(<section id="section-recordings"></section>)
  // const recordings = data.discography.recordings;
  //recordings.forEach(songs){

  // }
  // YOUR CODE ABOVE HERE //
};

Everything I tried has been commented out with the // markers. I have been stuck on this problem all day. I don't know why but my <li></li> lists aren't showing up and I feel like that makes this problem much more difficult to solve due to their absence. I can't see where it's at so I don't know how to move it around.

Just a side note, the actual data.discography.recordings references an array of objects.

Any level of assistance would help, even just words of encouragement. Cheers to anyone who attempts to help me with this issue. If I could at least figure out why I can't find <li class="recordings"></li> then that would be a huge step.

Improve this question
1
  • 2
    the first issue is $(`<li class="recording"></li>`) (i.e. the first line in the recordings.forEach((element) => { loop) does nothing at all - at least, nothing useful - it creates an li ... then does nothing with it
    – Jaromanda X
    Commented Sep 30, 2024 at 23:37

1 Answer 1

Reset to default
1

So basically you want to re-structure your data.

You have to use .siblings() to traverse all li next to <ul id="list-top-rated" and then clone and append it to the <ul> and then remove it from DOM.

Now loop over <div> of <section id="section-recordings"> and create a desired final HTML first.

then remove <section id="section-recordings"> first and append the new HTML to DOM.

Note: You are trying to do stuff with id which will not work as id should be unique per element, so use the class concept. (Because when you are creating elements with the same id it always replaces previously created elements having the same id instead of creating new-one)

Here is a working sample:

$(function() {

  $('#list-top-rated').siblings('li').each(function() {
    $('#list-top-rated').append($(this).clone());
    $(this).remove();
  });

  let newHtml = '<section class="section-recordings"><ul class="list-recordings"><li class="recording">';
  $('#section-recordings div').each(function() {
    if ($(this).hasClass('year')) {//check if you are reach to year div then you need to close li and ul
      if($(this).next('div').length ==0){ //check if no more div are present to traverse then only close li and ul
        newHtml += '<div class="' + $(this).attr('class') + ' common-class">' + $(this).attr('class') + ': ' + $(this).html() + '</div></li></ul>';
      }else{//close li and ul and then start a new ul and li
        newHtml += '<div class="' + $(this).attr('class') + ' common-class">' + $(this).attr('class') + ': ' + $(this).html() + '</div></li></ul><ul class="list-recordings"><li class="recording">';
      }
      
    } else { // if div doesn't have year class then add it to newHTML normally with desired modifications
      newHtml += '<div class="' + $(this).attr('class') + ' common-class">' + $(this).attr('class') + ': ' + $(this).html() + '</div>';
    }
  });
  $('#section-top-rated').find('#section-recordings').replaceWith(newHtml);
});
.common-class {
  text-transform: capitalize;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="sidebar" class="sidebar">
  <div id="image-container-billy" class="image-container">
    <img id="image-billy" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2ayP0cg7RlwYEUMGqA8oRXiyQDIXrrridXw&s" i="0" width="25%" class="image">
  </div>
  <section id="section-top-rated" class="recordings">
    <header id="header-top-rated" class="header-recordings">Top Rated</header>
    <ul id="list-top-rated" class="list-recordings"></ul>
    <li>Voice in the Night</li>
    <li>The Shape of Jazz to Come</li>
    <li>Like Sonny</li>
    <li>Go</li>
    <li>The Water Is Wide</li>

    <section id="section-recordings">
      <ul id="list-recordings" class="list-recordings"></ul>
      <div class="title">Eastern Rebellion</div>
      <div class="artist">Cedar Walton</div>
      <div class="release">Timeless</div>
      <div class="year">1976</div>
      <div class="title">Soul Food</div>
      <div class="artist">Bobby Timmons</div>
      <div class="release">Prestige</div>
      <div class="year">1966</div>
      <div class="title">A Swingin' Affair</div>
      <div class="artist">Dexter Gordon</div>
      <div class="release">Blue Note</div>
      <div class="year">1962</div>
      <div class="title">Rejoice</div>
      <div class="artist">Pharoah Sanders</div>
      <div class="release">Theresa</div>
      <div class="year">1981</div>
    </section>
  </section>
</div>

I have used a common-class to make the first letter of each div uppercase.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.