Twitch API

Developer
Alex Sperellis
Size
3,163 Kb
Views
8,096
  1. Twitch API Previews
  2. Twitch API HTML Codes
  3. Twitch API CSS Codes
  4. Twitch API JS Codes

How do I make an twitch api?

What is a twitch api? How do you make a twitch api? This script and codes were developed by Alex Sperellis on 20 December 2022, Tuesday.

Twitch API Previews
IQ Test

Twitch API - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>twitch API</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="twitch"> <header> <h1>Twitch Streamers Status</h1> <nav> <button id="btnAll" class="active">ALL</button> <button id="btnOnline">ONLINE</button> <button id="btnOffline">OFFLINE</button> </nav> </header> <main> <div class='all'></div> <div class='online hidden'></div> <div class='offline hidden'></div> </main>
</section> <script src="js/index.js"></script>
</body>
</html>

Twitch API - Script Codes CSS Codes

body { font-family: Helvetica;
}
.twitch-streamer { display: flex; background-color: #b3b5b4; color: #000; align-items: center; opacity: .75;
}
.twitch-streamer + .twitch-streamer { margin-top: 10px;
}
.hidden { display: none;
}
.twitch-streamer-logo { width: 60px; display: block;
}
.twitch-streamer-name { flex: 1; color: #000; font-weight: 700; text-transform: uppercase; text-decoration: none; padding-left: 20px;
}
.twitch-streamer-game { padding-right: 20px; margin-bottom: 0; margin-top: 0;
}
header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
h1 { margin: 0;
}
button { background-color: #000; color: #fff; padding: 10px 25px; border: none; cursor: pointer; font-weight: 700; letter-spacing: 1px; outline: none;
}
.active { background-color: #f1c200; color: #000; opacity: 1;
}

Twitch API - Script Codes JS Codes

const channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "asperellis"];
const btnAll = document.getElementById('btnAll');
const btnOffline = document.getElementById('btnOffline');
const btnOnline = document.getElementById('btnOnline');
// html generator
const template = function (strings, ...interpolatedValues) { return strings.reduce((total, current, index) => { let all = total + current; if(interpolatedValues.hasOwnProperty(index)) { all += String(interpolatedValues[index]).replace(/[™®©]/g, '<sup>$&</sup>'); } return all; }, '');
}; // literal template
const renderStreamers = ({ streamerList }) => template`
${streamerList.map(streamer => ` <div class='twitch-streamer ${streamer.stream ? 'active' : ''}'> <img class="twitch-streamer-logo" src="${streamer.stream ? streamer.stream.channel.logo : 'https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067'}" alt="ChannelName" /> <a href="${streamer.stream ? streamer.stream.channel.url : 'http://www.google.com'}" class="twitch-streamer-name">${streamer.name}</a> <p class="twitch-streamer-game">${streamer.stream ? streamer.stream.channel.game : 'offline'}</p> </div>
`).join('')}
`;
const getTwitchInfo = function(channelList){ channelList.forEach(function(channel){ const channelUrl = 'https://wind-bow.glitch.me/twitch-api/streams/' + channel; fetch(channelUrl) .then( function(response) { if (response.status !== 200) { console.log('Looks like there was a problem. Status Code: ' + response.status); return; } // Examine the text in the response response.json().then(function(data) { console.log(data); data.name = channel; document.querySelector('.all').innerHTML += renderStreamers({streamerList: [data]}); if(data.stream) { document.querySelector('.online').innerHTML += renderStreamers({streamerList: [data]}); } else { document.querySelector('.offline').innerHTML += renderStreamers({streamerList: [data]}); } }); } ) .catch(function(err) { console.log('Fetch Error :-S', err); }); });
};
getTwitchInfo(channels);
btnOnline.addEventListener('click', function(){ btnOnline.classList.add('active'); btnOffline.classList.remove('active'); btnAll.classList.remove('active'); document.querySelector('.online').classList.remove('hidden'); document.querySelector('.all').classList.add('hidden'); document.querySelector('.offline').classList.add('hidden');
});
btnOffline.addEventListener('click', function(){ btnOnline.classList.remove('active'); btnOffline.classList.add('active'); btnAll.classList.remove('active'); document.querySelector('.online').classList.add('hidden'); document.querySelector('.all').classList.add('hidden'); document.querySelector('.offline').classList.remove('hidden');
});
btnAll.addEventListener('click', function(){ btnOnline.classList.remove('active'); btnOffline.classList.remove('active'); btnAll.classList.add('active'); document.querySelector('.online').classList.add('hidden'); document.querySelector('.all').classList.remove('hidden'); document.querySelector('.offline').classList.add('hidden');
});
Twitch API - Script Codes
Twitch API - Script Codes
Home Page Home
Developer Alex Sperellis
Username asperellis
Uploaded December 20, 2022
Rating 3
Size 3,163 Kb
Views 8,096
Do you need developer help for Twitch API?

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!

Alex Sperellis (asperellis) Script Codes
Name
Custom File Input
Weather generator
Checkbox dropdown
Header with search dropdown
Credit Card Form with Parsley Validation
Demo port page - for messing around
International Phone Number
Highlights
Wiki viewer
Mobile Navigation
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!