Twitch project - JS and CSS problems

1

Hi everyone, . Here is my pen https://codepen.io/bencarp/pen/WpbEoj

  1. Why is their no margin in the top of the main element, even though I defined margin:2em ?
  2. Take a look at the search Div (#search). It should be hidden with display: none, and then show when the search button (#searchButton) is clicked with display:block. However it is with display:block from the beginning.
  3. also, the image element is out of the div, event though I define in css: image{width:100%}
    Any suggestions?
2

1 What do you expect this code to do:

main {
  margin-top:0px !important;
}

2 Change your event listener to this:

$('#searchButton').click(function(){
  $('#search').css('display', 'block')
});

Otherwise the code gets run immediately

3

Thanks Ben,
So the button problem was solved. Surprisingly the margin above the main element was not solved with your insight.
I wonder if you have any solution for the the width of the image, so it is confined to the column space.

4

That’s because you made a typo that I didn’t notice:

main {
  color:white; 
  margin: 2em 0;   /* there should be no comma in between */
}

For the image: add missing " and add img-responsive class to the image: :

let htmlh= `<div class="row ${channelsData[i].stream}">
    <div class="col-md-1"><image class="img-responsive" src=${channelsData[i].logoUrl}></div>
    <div class="col-md-3">${channelsData[i].displayName}</div>
    <div class="col-md-8">${channelsData[i].bio}</div> 
    </div>`;
6

Thanks Ben! I really appreciate your help.
I wonder if you can help me with this one. As u can see by default the Online button is focused. I would like there to be an option to change and select the Offline button or search button, but that in any case one of the three buttons will be selected. At the moment when you click anywhere on the page the 3 buttons are not selected anymore. Any suggestions?
Also, I wanted to link the whole row for each channel. I decided to do that by using this code:

    var aOpen = `<a href="${basicUrl}${channelsData[i].name}">`
    var aClose ='</a>'
    let htmlh= `<div class="row ${channelsData[i].stream}">
    <div class="col-md-2 displayName">${aOpen}${channelsData[i].displayName}${aClose}</div>
    <div class="col-md-2">${aOpen}<img class="img-responsive" src=${channelsData[i].logoUrl}>${aClose}</div>
    <div class="col-md-8 bio">${aOpen}${channelsData[i].bio}${aClose}</div> 
    </div>`

Legitimate?