ScannerRadio - Discord - Cacher Snippet

8/26/2019 - 11:45 AM

ScannerRadio - Discord

<div class="wrap">
  <div class="name--header">
    <div class="name"></div>
    
    <body>
      <div class="slideshow">
        
      </div>
    </body>

    <div class="discord">
 
      <a href="https://xenforo.com/" class="discord--link" target='_blank'>Powered By:  </br><img src="https://cdn-images-1.medium.com/max/1600/1*SaiH11mrQkn0HfKlDqPC-Q.png" height="72" alt="" /></a>
    </div>
  </div>
  <div class="channels">
  </div>
  <div class="users">
    <div class="users--header">Online Users</div>
    <div class="users--body"></div>
  </div>
</div>

scannerradio-discord.markdown

Rendered
Source

ScannerRadio - Discord

A Pen by ClearlyElevated on CodePen.

License.

script.js

var wrap = document.querySelector('.wrap');
var nameHeader = document.querySelector('.name--header');
var channelBody = document.querySelector('.channels--body');
var userBody = document.querySelector('.users--body');



function discordAPI(){
  var init = {
    method: 'GET',
    mode: 'cors',
    cache: 'reload'
  }
  fetch('https://discordapp.com/api/guilds/540630552609554453/widget.json', init).then(function(response){
    if(response.status != 200){
      console.log("it didn't work" + response.status);
      return
    }
    response.json().then(function(data){
      //var channels = data.channels;
      var users = data.members;
      var serverName = data.name;

      let liWrap = document.createElement('ul');
      liWrap.classList.add('channels--list--wrap');



      nameHeader.children[0].innerHTML = serverName;


      function channelsFill(){
        for(let i = 0; i<data.channels.length; i++){
          let li = document.createElement('li');
          li.classList.add('channel--name');
          li.innerText = data.channels[i].name;
          liWrap.appendChild(li);
          channelBody.appendChild(liWrap) ;
        }
      }


      function usersFill(){
        for(let n = 0; n < data.members.length; n++){
          
          let userWrap = document.createElement('div');
          let userName = document.createElement('span');
          let userImage = document.createElement('img');
          let userGame = document.createElement('span');
          let userStatus = document.createElement('div');
          let imageWrap = document.createElement('div');
          let botTag = document.createElement('div');
          userWrap.classList.add('user');
          
          userName.classList.add('username');
          
          userStatus.classList.add('user--status');
          
          imageWrap.classList.add('image--wrap');
          
          userGame.classList.add('user--game');
          
          botTag.classList.add('bot--tag');
          
          
          botTag.innerText = 'BOT';
          

          if(users[n].nick === undefined){
            userName.innerText = users[n].username;
          }else{
            userName.innerText = users[n].nick;
          }
          
          if(users[n].status === 'online'){
            userStatus.classList.add('status--online')
          }
          if(users[n].status === 'idle'){
            userStatus.classList.add('status--idle');
          }
          if(users[n].status ==='dnd'){
            userStatus.classList.add('status--dnd');
          }
          
          if(users[n].bot === true){
            
            userWrap.appendChild(botTag);
          }
          
          if(users[n].game !== undefined){
                      
            userGame.innerText = users[n].game.name;
          }
          
          userWrap.appendChild(userGame);
          userImage.classList.add('user--image');
          userImage.setAttribute('src', data.members[n].avatar_url);
          
          imageWrap.appendChild(userStatus);
          imageWrap.appendChild(userImage)
          userWrap.appendChild(imageWrap);
          userWrap.appendChild(userName);
         
          userBody.appendChild(userWrap);

        }
      }      

      channelsFill();
      usersFill();
    })
  })
    .catch(function(err){
    console.log('fetch error: ' + err)
  })


}
discordAPI()

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.less

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
//vars
@blue: hsl(190, 50%, 50%);
@green: hsl(150, 50%, 50%);
@dark-blue: hsl(190, 50%, 45%);
@white: #fff;
@black: #111;
@off-black: #222;
@soft-corners: 0.3rem;
@underline: linear-gradient(
    to bottom,
    transparent 95%,
    @black 95%,
  );
@underline-light: linear-gradient(
  to bottom,
  transparent 95%,
  @white 95%,
);

//mixins
.bs(@d: 5px, @a: 0.3){
  box-shadow: 0 @d @d rgba(0,0,0,@a);
}

.bg-gradient(@col1, @col2){
  background: linear-gradient(
    to top,
    @col1 0%,
    @col2 * 1.5 100%
  );
}


*{
  box-sizing: border-box;
}
html,body{
  height: 100%;width: 100%;margin: 0;
  background:  url();
  font-family: 'Anton', sans-serif;
}

.wrap{
  height: 100%;width: 100%;
  display: flex;
  flex-flow: column;

  color: @white;
}
.name--header{
  height: 10%;
  width: 100%;
  background:   white;
  font-size: 200%;
  text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
  color:  #f00;
  display: flex;
  align-items: center;
  padding: 2rem 1rem ;
  border-bottom: 0.3rem solid @white;
  .bs();
  justify-content: space-between;
  
  & .name{
    font-weight: 500;
  }
  & .discord{
    font-size: 50%;
    & a{
      color:  #f00;
      text-decoration: none;
      outline: none;
    }
  }
}
.channels{
  margin: 1rem;;
  .bs();
  display: block;
  &--header{
    font-size: 150%;
    font-weight: 500;
    color: @white;
    padding: 1rem;
    .bg-gradient(@blue, @blue);
    border-top-left-radius: @soft-corners;
    border-top-right-radius: @soft-corners;
  }
  &--body{
    background: @off-black;
    margin: 0;
    padding: 1rem;
    border-bottom-left-radius: @soft-corners;
    border-bottom-right-radius: @soft-corners;
  } 
}
.channel--name{
  margin: 0.3rem 0;
  padding: 0.2rem 0;
  background: @underline-light;
}
.users{
  margin: 1rem;;
  .bs();
  display: block;
  flex-direction: column;
  
  &--header{
    font-size: 150%;
    font-weight: 500;
    .bg-gradient(@green, @green);
    color:  #f00 ;
    background:  #fff;
    padding: 1rem;
  }
  &--body{
    background:  #fff;
    margin: 0;
    color: #f00;
    padding: 1rem;
    display: flex;
    flex-flow: column;
  } 
}
.user{
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  font-size: 110%;
  margin: 0.5rem 0;
  background: @underline;
  padding: 0.3rem;
  position: relative;
  width: 100%;
  &--image{
     width: 100%;
    border-radius: 100%;
    user-select: none;
  }
  & .username{
    margin: 0 0.5rem;
    position: relative;
  }
  & .bot--tag{
    order: 4; 
    font-size: 50%;
    background: #ff0;
    padding: 0.2rem;
    border-radius: 0.1rem;
    user-select: none;
    cursor: default;
  }
}

.user--status{
  @size: 0.8rem;
  height: @size;
  width: @size;
  border-radius: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  border: 1px solid #fff;
}
.status--online{
  background: #00FF00
}
.status--idle{
  background: #FF4500;
}
.status--dnd{
  background: #FF0000 ;
}
.image--wrap{
  @size: 2.5rem; 
  background: pink;
  position: relative;
  border-radius: 100%;
  height: @size;
  width: @size;
}
.user--game{
  order: 5;
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
  font-size: 75%;
  color: rgba(255,255,255, 0.5);
}
ul, li{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #fff; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #f00; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #f00; 
}

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

ScannerRadio - Discord

ScannerRadio - Discord