Twitch vanilla

Developer
Kenny Chen
Size
4,760 Kb
Views
24,288
  1. Twitch vanilla Previews
  2. Twitch vanilla HTML Codes
  3. Twitch vanilla CSS Codes
  4. Twitch vanilla JS Codes

How do I make an twitch vanilla?

What is a twitch vanilla? How do you make a twitch vanilla? This script and codes were developed by Kenny Chen on 31 October 2022, Monday.

Twitch vanilla Previews
IQ Test

Twitch vanilla - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>twitch vanilla</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="menu"> <h1>用中文直播的頻道</h1><a href="">中文</a><a href="">English</a>
</div>
<div class="container"></div> <script src="js/index.js"></script>
</body>
</html>

Twitch vanilla - Script Codes CSS Codes

@charset "UTF-8";
* { font-family: 微軟正黑體; font-weight: bold;
}
.menu { text-align: center;
}
.menu, a { color: white;
}
a { text-decoration: none; padding-left: 10px;
}
a:hover { color: blue;
}
h4 { margin: 0;
}
body, html { background-image: url(http://cdn.leagueoflegends.com/lolkit/1.1.6/resources/images/bg-default.jpg); background-attachment: fixed;
}
.container { width: 1000px; margin: 0 auto; padding-top: 30px; text-align: center; display: flex; flex-wrap: wrap;
}
.box { margin: 10px 10px; width: 300px; border: solid 1px #777; transition-duration: 1s;
}
.box:hover { box-shadow: 10px 10px 10px #222; filter: brightness(1.5); transition-duration: 0.5s; transition-delay: 0.2s; background-color: #ccc;
}
.box:nth-child(3n) { margin-right: 5px;
}
.top { cursor: pointer; position: relative; height: 168px; overflow: hidden;
}
.top:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url("https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg");
}
.top img { position: relative; opacity: 0; transition: all 0.3s ease-in;
}
.bottom { cursor: pointer; display: flex; width: 100%; padding: 10px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.5); justify-content: space-around; align-items: center;
}
.bottom .photo { position: relative; height: 50px;
}
.bottom .photo:before { content: ""; border-radius: 50%; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url("https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg") no-repeat center;
}
.bottom .photo img { position: relative; opacity: 0; width: 50px; height: 50px; background-size: cover; border-radius: 50%;
}
.bottom .textbox { width: 200px; color: #ddd; text-align: left;
}
.bottom .textbox .channel, .bottom .textbox .name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative;
}
@media screen and (max-width: 990px) { .container { width: 650px; margin: 0 auto; } .container .box { width: 300px; margin-left: 10px; }
}
@media screen and (max-width: 670px) { .container { width: 320px; margin: 0 auto; } .container .box { width: 300px; margin-left: 10px; }
}

Twitch vanilla - Script Codes JS Codes

let nowIndex=0;
let isLoading=false;
//https://gist.github.com/joyrexus/7307312 參考
document.addEventListener('DOMContentLoaded',function(){	appendData();	//網頁一載入先載進前20筆	window.addEventListener('scroll',function(){	if(document.body.scrollTop + window.innerHeight > document.body.scrollHeight - 200){	if(isLoading==false){	appendData();	}	}	});
});
function getData(cb){	//http://www.smalljacky.com/programming-language/php/ajax-javascript-jquery-example-for-php/ 參考	isLoading=true;	const request=new XMLHttpRequest();	request.open('GET','https://api.twitch.tv/kraken/streams/?game=League%20of%20Legends&limit=20&offset='+nowIndex+'',true);	request.setRequestHeader('client-id','3nic4qrhou17yeyhgg0zh54tsa9sdv');	request.onreadystatechange=function(){//也可以寫request.onload	if(request.readyState==4 && request.status==200){	const data = JSON.parse(request.responseText);//變成js物件	cb(null,data);	}	}	request.send();
//	const clientID='3nic4qrhou17yeyhgg0zh54tsa9sdv';
//	const limit=20;
//	isLoading=true;
//	$.ajax({
//	url: 'https://api.twitch.tv/kraken/streams/?client_id=' + clientID + '&game=League%20of%20Legends&limit='+limit+'&offset='+nowIndex+'',
//	success: function(response){
//	cb(null,response);
//	}
//	});
}
//以上是第一步，拿資料
function appendData(){	getData((err,data)=>{	if(err){	console.log(err);	}	else{	const streams=data.streams; const container=document.querySelector('.container');	for(var i=0;i<streams.length;i++){ //http://www.cnblogs.com/pigtail/archive/2013/03/11/2953848.html 參考	container.insertAdjacentHTML('beforeend', getColumn(streams[i]))	// const div =document.createElement('div');	// container.appendChild(div);	// div.outerHTML=getColumn(streams[i]);	}	nowIndex=20;	isLoading=false;	}	});
}
//callback function
function getColumn(data){	return `	<div class="box"> <div class="top">	<img src="${data.preview.medium}"onload="this.style.opacity=1"/>	</div> <div class="bottom"> <div class="photo">	<img src="${data.channel.logo}"onload="this.style.opacity=1"/>	</div> <div class="intro">	<div class="textbox">	<div class="channel">${data.channel.status}</div>	<div class="name">${data.channel.display_name}</div>	</div> </div> </div> </div>	`;
}
Twitch vanilla - Script Codes
Twitch vanilla - Script Codes
Home Page Home
Developer Kenny Chen
Username kennyname
Uploaded October 31, 2022
Rating 3
Size 4,760 Kb
Views 24,288
Do you need developer help for Twitch vanilla?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kenny Chen (kennyname) Script Codes
Name
Js-30-5
Img responsive
Twitch complete
Quick-visual
Cake
Piano
Paris
A Pen by kenny chen
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!