Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/chrisvander/basic-node-js. Node.JS website demo. Uses EJS templating, Express, SASS, and Nightwatch
Something went wrong. Try again.
2.4 kB · 97 lines
JavaScript
at master
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798// ----------------- //// ---- NAV BAR ---- //// ----------------- //
function toggleTab(id) { toggleElements(id, document.getElementsByClassName("tab"), "active"); toggleElements(id, document.getElementsByClassName("nav-button"), "selected");}
function toggleElements(id,tabs,className) { for (var i = 0; i < tabs.length; i++) { if (id == i) { tabs[i].classList.add(className); if (className === "selected") { window.location.hash = 'tab-' + i; } } else if (tabs[i].classList.contains(className)) { tabs[i].classList.remove(className); } }}
window.onload = function() { if (window.location.hash !== "") { toggleTab(parseInt(window.location.hash[5])); }}
// ----------------- //// ----- MUSIC ----- //// ----------------- //
var app = new Vue({ el: '#vue-music', data: { results: [] }, mounted() { getMusicJSON() }});
function getMusicJSON() { var xhr = new XMLHttpRequest(); xhr.open('GET', "/data/music", true); xhr.send();
xhr.addEventListener("readystatechange", function() { if (xhr.readyState == 4 && xhr.status == 200) { app.results = JSON.parse(xhr.responseText); } }, false);}
// ----------------- //// ----- MOVIES ---- //// ----------------- //
Vue.component('movie-item', { template: '\ <div class="movie">\ <span class="title">{{ title }}</span>\ <span class="year">{{ year }}</span>\ <button v-on:click="$emit(\'remove\')">Remove</button>\ </div>\ ', props: ['title','year','runtime','rating','director']})
var app2 = new Vue({ el: '#vue-movies', data: { newMovieText: '', movies: [], nextMovieId: 2 }, methods: { addNewMovie: function () { var xhr = new XMLHttpRequest(); xhr.open('GET', "http://www.omdbapi.com/?apikey=539d6961&t=" + this.newMovieText, true); xhr.send();
xhr.addEventListener("readystatechange", function() { if (xhr.readyState == 4 && xhr.status == 200) { var ret = JSON.parse(xhr.responseText); console.log(ret); app2.movies.push({ id: app2.nextMovieId++, title: ret.Title, year: ret.Year, rating: ret.Rated, runtime: ret.Runtime, director: ret.Director }) } }, false); app2.newMovieText = '' } }});