freecodecamp專案—twitch API

NO IMAGE

該專案在codepen中的連結:https://codepen.io/lightforme/pen/XgRrxG

由於安全策略的影響,在codepen的iframe中頁面中頻道的連結點選之後不會跳轉,在本地專案中可以,這裡有stackoverflow上的相關解釋:https://stackoverflow.com/questions/34426959/loading-the-facebook-api-in-jsfiddle

一:說明

  • 該專案是我freecodecamp教程上做的一個小專案,具體內容是呼叫twitch api,可以檢視我新增的三個頻道的開播資訊,並且能夠點選連結跳轉到twitch上相應的頻道,在專案實現過程中,因為是英文文件,半天搞不明白api中相關功能的實現,還好一直沒放棄,最後看明白以後真的有一種成就感,很舒服~~~

二:知識點

  • 要使多餘的文字顯示省略號,必須加上overflow:hidden;white-space:nowrap;最後再加上text-overflow:ellipsis;
  • 不同的非同步請求共用同一個變數容易發生混亂,達不到相應效果
  • text-size-adjust(css3樣式):auto | none | percentage
    • auto:文字大小根據裝置尺寸進行調整
    • none:文字大小不會根據裝置尺寸進行調整
    • percentage:用百分比來指定文字大小在裝置尺寸不同的情況下如何調整
    • 說明:檢索或設定移動端頁面中物件文字的大小調整;
      該屬性只在移動裝置上生效;
      如果你的頁面沒有定義meta viewport,此屬性定義將無效;
      對應的指令碼特性為textSizeAdjust;
  • text-transform:none | capitalize(首字母大寫) | uppercase(大寫) | lowercase(小寫) | inherit
  • 偽類的效果可以通過新增一個實際的類來達到,而偽元素的效果則需要通過新增一個實際的元素才能達到,這也是為什麼他們一個稱為偽類,一個稱為偽元素的原因

三:程式碼

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>twitch shows</title>
<link rel="stylesheet" href="css/twicth.css" />
</head>
<body>
<div class="container">
<ul>
<li id="header">
<div id="tit" class="left">TWITCH STREAMERS</div>
<div class="choose right">
<ul>
<li>ALL</li>
<li>ONLINE</li>
<li>OFFLIINE</li>
</ul>
</div>
</li>
<li id="display"></li>
<li></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="js/twicth.js"></script>
</body>
</html>

css:

/*//公共樣式*/
body,div,ul,li,p,img{
margin:0px;
padding:0px;
}
li,ul{
list-style: none;
}
body{
font-family: 'Droid Serif';
}
.left{
float:left;
}
.right{
float:right;
}
/*除display區域外的樣式*/
.container{
margin:0 auto;
}
.container>ul>li,.container{
width:600px;
}
.container>ul>li{
margin-bottom: 5px;
}
.container>ul>li#header{
height:100px;
background:#7197a9;
}
.container>ul>li#header #tit{
color:#cec8c8;
font-size:30px;
font-weight: bold;
line-height: 100px;
margin-left:20px;
}
.container>ul>li#header .choose{
font-size:12px;
}
.container>ul>li#header .choose ul{
margin-top:10px;
}
.container>ul>li#header .choose li{
text-align: center;
width:62px;
height:20px;
line-height: 20px;
margin-bottom: 3px;
border-radius:3px;
background:#cec8c8;
font-weight:bold;
font-size:12px;
}
body > div > ul > li:nth-child(3){
height:10px;
background:#7197a9;
}
/*display區域*/
#display > div.online{
background:#bed2c6;
margin-bottom:5px;
}
#display > div.online a{
color:#e2a980; 
}
#display > div.offline{
background:#e2a980; 
margin-bottom:5px;
}
#display > div.offline a{
color:#bed2c6;
}
#header > div.choose.right > ul > li{
cursor:pointer;
}
#display .all:after{
content: '';
display: block;
clear:both;
}
#display .all div{
float:left;
margin-right:30px;
}
#display > div .imgBox{
margin:7px;
}
#display img{
width:60px;
height:60px;
border-radius:50%;
border:3px solid white;
}
#display a{
line-height:84px;
text-decoration: none;
}
#display a:hover{
text-decoration:underline;
}
#display > div .link{
margin-left:20px;
width:110px;
text-align:center;
}
#display .des{
width:300px;
height:80px;
overflow: hidden;
line-height:80px;
text-overflow: ellipsis;
white-space:nowrap;
}

js

var urlId = ["45877376","79776140","30816637"];//分別是三個頻道的頻道號
function getChannels(){
//make不同url,分別用於查詢頻道狀態和查詢頻道相關資訊
function makeUrl(type,id){
return 'https://api.twitch.tv/kraken/'   type   '/'   id;
};
for(let i in urlId){//這裡如果不使用let,下面的ajax請求都是非同步執行的,使用的i值有可能都為2
//檢視頻道狀態-是否開播
$.ajax({
type:"get",
url:makeUrl('streams',urlId[i]),
datatype:'JSONP',
headers:{
'Accept': 'application/vnd.twitchtv.v5 json',
'Client-ID': 'zqe68al1fduevoswjw5slnayxxxqo9'
},
success:function(data){
if(data.stream == null){
var status = false;
}else{
var status = true;
};
//查詢頻道相關資訊
$.ajax({
type:"get",
url:makeUrl('channels',urlId[i]),
headers:{
'Accept': 'application/vnd.twitchtv.v5 json',
'Client-ID': 'zqe68al1fduevoswjw5slnayxxxqo9'
},
datatype:'JSONP',
success:function(data){
var statusStr = (status)?'online':'offline';
var html = '<div class="all '  statusStr  '"><div class="imgBox"><img src="'  data.logo  '" /></div><div class="link"><a target="_blank" href="'  data.url  '">'  data.name  '</a></div><div><p class="des">'  data.description  '</p></div></div>';
statusStr == 'online' ? $("#display").prepend(html) : $("#display").append(html);
}
});
}
});
};
};
//設定三個按鈕的點選事件
$(function(){
getChannels();
$('#header > div.choose.right > ul > li:nth-child(1)').click(function(){
$('#display > div.all').show();
});
$('#header > div.choose.right > ul > li:nth-child(2)').click(function(){
$('#display > div.all').hide();
$('#display > div.online').show();
});
$('#header > div.choose.right > ul > li:nth-child(3)').click(function(){
$('#display > div.all').hide();
$('#display > div.offline').show();
});
});

如果發現錯誤或者有更好的建議可以在評論中告訴我~~