js3

ligopsychakis-michalis · Feb 21, 2020 · Mar 1, 2020 · Mar 1, 2020 · Mar 1, 2020 · Mar 1, 2020
commit e8541fcf699fda26158f42eb0497fe6be374a50d
diff --git a/Week1/.DS_Store b/Week1/.DS_Store
diff --git a/Week1/homework/.DS_Store b/Week1/homework/.DS_Store
diff --git a/Week1/hack-repo-1/.DS_Store → Week1/homework/hack-repo-1/.DS_Store b/Week1/hack-repo-1/.DS_Store → Week1/homework/hack-repo-1/.DS_Store
diff --git a/Week1/hack-repo-1/hyf.png → Week1/homework/hack-repo-1/hyf.png b/Week1/hack-repo-1/hyf.png → Week1/homework/hack-repo-1/hyf.png
diff --git a/Week1/hack-repo-1/index.html → Week1/homework/hack-repo-1/index.html b/Week1/hack-repo-1/index.html → Week1/homework/hack-repo-1/index.html
diff --git a/Week1/hack-repo-1/index.js → Week1/homework/hack-repo-1/index.js b/Week1/hack-repo-1/index.js → Week1/homework/hack-repo-1/index.js
diff --git a/Week1/hack-repo-1/style.css → Week1/homework/hack-repo-1/style.css b/Week1/hack-repo-1/style.css → Week1/homework/hack-repo-1/style.css
diff --git a/Week1/js-exercises/dog-photo.js → Week1/homework/js-exercises/dog-photo.js b/Week1/js-exercises/dog-photo.js → Week1/homework/js-exercises/dog-photo.js
diff --git a/Week1/js-exercises/index.html → Week1/homework/js-exercises/index.html b/Week1/js-exercises/index.html → Week1/homework/js-exercises/index.html
diff --git a/Week1/js-exercises/programmer-humor.js → ...homework/js-exercises/programmer-humor.js b/Week1/js-exercises/programmer-humor.js → ...homework/js-exercises/programmer-humor.js
diff --git a/Week1/js-exercises/who-here.js → Week1/homework/js-exercises/who-here.js b/Week1/js-exercises/who-here.js → Week1/homework/js-exercises/who-here.js
diff --git a/Week1/number-facts/index.html → Week1/homework/number-facts/index.html b/Week1/number-facts/index.html → Week1/homework/number-facts/index.html
diff --git a/Week1/number-facts/num-facts.js → Week1/homework/number-facts/num-facts.js b/Week1/number-facts/num-facts.js → Week1/homework/number-facts/num-facts.js
diff --git a/Week2/.DS_Store b/Week2/.DS_Store
diff --git a/Week2/homework/.DS_Store b/Week2/homework/.DS_Store
diff --git a/Week2/hack-repo-2/hyf.png → Week2/homework/hack-repo-2/hyf.png b/Week2/hack-repo-2/hyf.png → Week2/homework/hack-repo-2/hyf.png
diff --git a/Week2/hack-repo-2/index.html → Week2/homework/hack-repo-2/index.html b/Week2/hack-repo-2/index.html → Week2/homework/hack-repo-2/index.html
diff --git a/Week2/hack-repo-2/index.js → Week2/homework/hack-repo-2/index.js b/Week2/hack-repo-2/index.js → Week2/homework/hack-repo-2/index.js
diff --git a/Week2/hack-repo-2/style.css → Week2/homework/hack-repo-2/style.css b/Week2/hack-repo-2/style.css → Week2/homework/hack-repo-2/style.css
diff --git a/Week2/weather-app/.DS_Store → Week2/homework/weather-app/.DS_Store b/Week2/weather-app/.DS_Store → Week2/homework/weather-app/.DS_Store
diff --git a/Week2/weather-app/index.html → Week2/homework/weather-app/index.html b/Week2/weather-app/index.html → Week2/homework/weather-app/index.html
diff --git a/Week2/weather-app/skycons.js → Week2/homework/weather-app/skycons.js b/Week2/weather-app/skycons.js → Week2/homework/weather-app/skycons.js
diff --git a/Week2/weather-app/weather.css → Week2/homework/weather-app/weather.css b/Week2/weather-app/weather.css → Week2/homework/weather-app/weather.css
diff --git a/Week2/weather-app/weather.js → Week2/homework/weather-app/weather.js b/Week2/weather-app/weather.js → Week2/homework/weather-app/weather.js
diff --git a/Week3/.DS_Store b/Week3/.DS_Store
diff --git a/Week3/homework/.DS_Store b/Week3/homework/.DS_Store
diff --git a/Week3/hack-repo-3.1/hyf.png → Week3/homework/hack-repo-3.1/hyf.png b/Week3/hack-repo-3.1/hyf.png → Week3/homework/hack-repo-3.1/hyf.png
diff --git a/Week3/hack-repo-3.1/index.html → Week3/homework/hack-repo-3.1/index.html b/Week3/hack-repo-3.1/index.html → Week3/homework/hack-repo-3.1/index.html
diff --git a/Week3/hack-repo-3.1/index.js → Week3/homework/hack-repo-3.1/index.js b/Week3/hack-repo-3.1/index.js → Week3/homework/hack-repo-3.1/index.js
diff --git a/Week3/hack-repo-3.1/style.css → Week3/homework/hack-repo-3.1/style.css b/Week3/hack-repo-3.1/style.css → Week3/homework/hack-repo-3.1/style.css
diff --git a/Week3/hack-repo-3.2/.DS_Store → Week3/homework/hack-repo-3.2/.DS_Store b/Week3/hack-repo-3.2/.DS_Store → Week3/homework/hack-repo-3.2/.DS_Store
diff --git a/Week3/hack-repo-3.2/App.js → Week3/homework/hack-repo-3.2/App.js b/Week3/hack-repo-3.2/App.js → Week3/homework/hack-repo-3.2/App.js
diff --git a/Week3/hack-repo-3.2/ContributorsView.js → ...omework/hack-repo-3.2/ContributorsView.js b/Week3/hack-repo-3.2/ContributorsView.js → ...omework/hack-repo-3.2/ContributorsView.js
diff --git a/Week3/hack-repo-3.2/ErrorView.js → Week3/homework/hack-repo-3.2/ErrorView.js b/Week3/hack-repo-3.2/ErrorView.js → Week3/homework/hack-repo-3.2/ErrorView.js
diff --git a/Week3/hack-repo-3.2/HeaderView.js → Week3/homework/hack-repo-3.2/HeaderView.js b/Week3/hack-repo-3.2/HeaderView.js → Week3/homework/hack-repo-3.2/HeaderView.js
diff --git a/Week3/hack-repo-3.2/Model.js → Week3/homework/hack-repo-3.2/Model.js b/Week3/hack-repo-3.2/Model.js → Week3/homework/hack-repo-3.2/Model.js
diff --git a/Week3/hack-repo-3.2/Observable.js → Week3/homework/hack-repo-3.2/Observable.js b/Week3/hack-repo-3.2/Observable.js → Week3/homework/hack-repo-3.2/Observable.js
diff --git a/Week3/hack-repo-3.2/RepoView.js → Week3/homework/hack-repo-3.2/RepoView.js b/Week3/hack-repo-3.2/RepoView.js → Week3/homework/hack-repo-3.2/RepoView.js
diff --git a/Week3/hack-repo-3.2/Util.js → Week3/homework/hack-repo-3.2/Util.js b/Week3/hack-repo-3.2/Util.js → Week3/homework/hack-repo-3.2/Util.js
diff --git a/Week3/hack-repo-3.2/hyf.png → Week3/homework/hack-repo-3.2/hyf.png b/Week3/hack-repo-3.2/hyf.png → Week3/homework/hack-repo-3.2/hyf.png
diff --git a/Week3/hack-repo-3.2/index.html → Week3/homework/hack-repo-3.2/index.html b/Week3/hack-repo-3.2/index.html → Week3/homework/hack-repo-3.2/index.html
diff --git a/Week3/hack-repo-3.2/style.css → Week3/homework/hack-repo-3.2/style.css b/Week3/hack-repo-3.2/style.css → Week3/homework/hack-repo-3.2/style.css
diff --git a/Week3/homework/y-tube-api/index.html b/Week3/homework/y-tube-api/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MY Y-T API</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+
+    <style>
+        #content,#authorize-button,#signout-button { display: none; }
+    </style>
+</head>
+<body>
+    <nav class="black">
+        <div class="nav-wrapper">
+            <div class="container">
+                <a href="#!" class="brand-logo">You Tube Channel Data</a>
+            </div>
+        </div>
+    </nav>
+    <br>
+    <section>
+        <div class="container">
+            <p>Log In With Google</p>
+            <button class="btn red" id="authorize-button">Log In</button>
+            <button class="btn red" id="signout-button">Log Out</button>
+            <br>
+            <div id="content">
+                <div class="row">
+                    <div class="col s6">
+                        <form id="channel-form">
+                            <div class="input-field col s6">
+                                <input type="text" id="channel-input" placeholder="Enter Channel Name">
+                                <input type="submit" class="btn grey" value="Get Channel Data">
+                            </div>
+                        </form>
+                    </div>
+                    <div id="channel-data" class="col s6"></div>
+                    <div class="row" id="video-container"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+    <script src="main.js"></script>
+    <script async defer src="https://apis.google.com/js/api.js"
+            onload="this.onload=function(){};handleClientLoad()"
+            onreadystatechange="if (this.readyState === 'complete') this.onload()">
+    </script>
+</body>
+</html>
+
diff --git a/Week3/homework/y-tube-api/main.js b/Week3/homework/y-tube-api/main.js
@@ -0,0 +1,142 @@
+const clientId = "570509200895-4da0136v9n9cc5t369e1ij2bkerddlrt.apps.googleusercontent.com";
+const discoveryDocs = ["https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"];
+const scopes = "https://www.googleapis.com/auth/youtube.readonly";
+
+const authorizeButton = document.getElementById("authorize-button");
+const signoutButton = document.getElementById("signout-button");
+const content = document.getElementById("content");
+const channelForm = document.getElementById("channel-form");
+const channelInput = document.getElementById("channel-input");
+const videoContainer = document.getElementById("video-container");
+
+const defaultChannel = "techguyweb";
+
+//Form submit and change channel
+channelForm.addEventListener("submit", e => {
+    e.preventDefault();
+    const channel = channelInput.value;
+    getChannel(channel);
+});
+
+
+//Load auth2 library
+function handleClientLoad(){
+    gapi.load('client:auth2', initClient);
+}
+
+//Init Api client library and set up sign in listeners
+function initClient(){
+    gapi.client.init({
+        clientId: clientId,
+        discoveryDocs: discoveryDocs,
+        scope: scopes
+    }).then(() => {
+        //listen for sign in changes
+        gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
+        //handle initial sign in state
+        updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
+        authorizeButton.onclick = handleAuthClick;
+        signoutButton.onclick = handleSignoutClick;
+    })
+}
+
+//update UI sign state changes
+function updateSigninStatus(isSignedIn){
+    if (isSignedIn){
+        authorizeButton.style.display = "none";
+        signoutButton.style.display = "block";
+        content.style.display = "block";
+        videoContainer.style.display = "block";
+        getChannel(defaultChannel);
+    }else{
+        authorizeButton.style.display = "block";
+        signoutButton.style.display = "none";
+        content.style.display = "none";
+        videoContainer.style.display = "none";
+    }
+}
+
+//Handle log in
+function handleAuthClick(){
+    gapi.auth2.getAuthInstance().signIn();
+}
+
+//Handle log out
+function handleSignoutClick(){
+    gapi.auth2.getAuthInstance().signOut();
+}
+
+
+//Display channel Data
+function showChannelData(data){
+    const channelData = document.getElementById("channel-data");
+    channelData.innerHTML = data;
+}
+
+
+
+//get channel from API
+function getChannel(channel){
+    gapi.client.youtube.channels
+        .list({
+            part:'snippet,contentDetails,statistics',
+            forUsername: channel
+        })
+        .then(res => {
+            console.log(res)
+            const channel = res.result.items[0];
+
+            const output = `
+                <ul class='collection'>
+                    <li class='collection-item'>Title: ${channel.snippet.title}</li>
+                    <li class='collection-item'>ID: ${channel.id}</li>
+                    <li class='collection-item'>Subscribers: ${numberWithDots(channel.statistics.subscriberCount)}</li>
+                    <li class='collection-item'>Views: ${numberWithDots(channel.statistics.viewCount)}</li>
+                    <li class='collection-item'>Videos: ${numberWithDots(channel.statistics.videoCount)}</li>
+                </ul>
+                <p>${channel.snippet.discription}</p>
+                <hr>
+                <a class='btn grey darken-2' href='https://youtube.com/${channel.snippet.customUrl}'>Visit Channel</a>
+            `;
+
+            showChannelData(output);
+            const playListId = channel.contentDetails.relatedPlaylists.uploads;
+            requestVideoPlaylist(playListId);
+        })
+        .catch(err => alert('No Channel By That Name...'))
+}
+
+
+//Show the videos to UI
+function requestVideoPlaylist(playListId){
+    const requestOptions = {
+        playlistId: playListId,
+        part: 'snippet',
+        maxResults:10
+    }
+    const request = gapi.client.youtube.playlistItems.list(requestOptions);
+    request.execute(res => {
+        const playlistItems = res.result.items;
+        if (playlistItems){
+            let output = `<br><h4 class="center-align">Latest Videos</h4>`
+            //loop through videos and append the output
+            playlistItems.forEach(item => {
+                const videoId = item.snippet.resourceId.videoId;
+                output += `<div class="col s3">
+                <iframe width="100%" height="auto" src="https://youtube.com/embeded/${videoId}" 
+                frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+                </div>`
+            })
+            //output the videos
+            videoContainer.innerHTML = output; 
+        }else{
+            videoContainer.innerHTML = 'No Uploaded Videos...';
+        }
+
+    })
+}
+
+//add dots to numbers
+function numberWithDots(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+}