Skip to content

Instantly share code, notes, and snippets.

@CyberRoute

CyberRoute/app.js

Last active October 15, 2018 07:13
Show Gist options
  • Save CyberRoute/06c5bbb4780e512056cad4d60f1603e0 to your computer and use it in GitHub Desktop.
Save CyberRoute/06c5bbb4780e512056cad4d60f1603e0 to your computer and use it in GitHub Desktop.
Download ZIP
app.js
Raw
app.js
// document.querySelectorAll
const items = document.querySelectorAll('ul.collection li.collection-item');
console.log(items)
// document.getElementsByTagName
// let lis = document.getElementsByTagName('li');
// console.log(lis);
// console.log(lis[0]);
// lis[0].style.color = 'red';
// lis[3].textContent = 'Hello';
// // Convert HTML Collection into array
// lis = Array.from(lis);
// lis.reverse();
// lis.forEach(function(li, index){
// console.log(li.className);
// li.textContent = `${index}: Hello`;
// });
// console.log(lis);
// document.getElementsByClassName
// const items = document.getElementsByClassName('collection-item');
// // console.log(items);
// // console.log(items[0]);
// items[0].style.color = 'red';
// items[3].textContent = 'Hello';
// const listItems = document.querySelector('ul').getElementsByClassName('collection-item');
// console.log(listItems);
// let val;
// val = document;
// val = document.all;
// val = document.all[1];
// val = document.all.length;
// val = document.head;
// val = document.doctype;
// val = document.body;
// val = document.domain;
// val = document.URL;
// val = document.contentType;
// val = document.forms;
// val = document.forms[0];
// val = document.forms[0].id;
// val = document.forms[0].method;
// val = document.forms[0].action;
// val = document.links;
// val = document.links[0];
// val = document.links[0].id;
// val = document.links[0].className;
// val = document.links[0].classList;
// val = document.images;
// val = document.scripts;
// val = document.scripts[2].getAttribute('src');
// console.log(val);
// Global Scope
// var a = 1;
// let b = 2;
// const c = 3;
// Function Scope
// function test() {
// var a = 4;
// let b = 5;
// const c = 6;
// console.log('Function Scope ', a, b, c);
// }
// test();
// if(true){
// //Block Scope
// var a = 4;
// let b = 5;
// const c = 6;
// console.log('If Scope ', a, b, c);
// }
// for(let a = 0; a < 10; a++){
// console.log(`Loop: ${a}`)
// }
//console.log('Global Scope ', a, b, c);
// // WINDOW METHODS / OBJECTS / PROPERTIES
// console.log(123);
// // Alert
// // window.alert('Hello World');
// // alert('Hello World');
// // Prompt
// // const input = prompt();
// // alert(input);
// // Confirm
// // if(confirm('Are you sure?')){
// // console.log('YES');
// // } else {
// // console.log('NO');
// // }
// let val;
// // Outer height and width
// // val = window.outerHeight;
// // val = window.innerWidth;
// // // Scroll points
// // val = window.scrollY;
// // Location Object
// // val = window.location;
// // val = window.location.hostname;
// // val = window.location.port;
// // val = window.location.href;
// // val = window.location.search;
// // // Redirect
// //window.location.href = 'http://google.com'
// // // Reload
// window.location.reload();
// // History Object
// //val = window.history.go(-1);
// //val = window.history.length;
// Navigator Object
// val = window.navigator;
// val = window.navigator.appName;
// val = window.navigator.appVersion;
// val = window.navigator.platform;
// val = window.navigator.vendor;
// val = window.navigator.language;
// console.log(val);
// JAVASCRIPT FOUNDATION
// FOR IN LOOPS
// const user = {
// firName: 'John',
// lastName: 'Doe',
// age: 40
// }
// for(let x in user){
// console.log(`${x} : ${user[x]}`);
// }
// // LOOP THROUGH ARRAY
// const cars = ['Ford', 'Chevy', 'Honda', 'Toyota']
// // MAP
// const users = [
// {id: 1, name:'John'},
// {id: 2, name:'Sara'},
// {id: 3, name:'Karen'},
// {id: 4, name:'Josh'},
// {id: 5, name:'Alex'}
// ];
// const ids = users.map(function(user){
// return user.id;
// });
// console.log(ids);
// FOREACH
// cars.forEach(function(car, index, array){
// console.log(`${index} : ${car}`);
// console.log(array);
// });
// for(let i = 0; i < cars.length; i++){
// console.log(cars[i]);
// }
// GENERAL DO WHILE LOOP
// let i = 0;
// do {
// console.log('Number ' + i);
// i++;
// }
// while(i < 10);
// GENERAL WHILE LOOP
// let i = 0;
// while(i < 10){
// console.log('Number ' + i);
// i++;
// }
// GENERAL FOR LOOPS
// for(let i = 0; i <= 10; i++){
// if(i === 2){
// console.log('2 is my favorite number');
// continue;
// }
// if(i === 5){
// break;
// }
// console.log('Number ' + i);
// }
// // PROPERTY METHODd
// const todo = {
// add: function(){
// console.log('Add todo..');
// },
// edit: function(id){
// console.log(`Edit todo ${id}`);
// }
// }
// todo.delete = function(){
// console.log('Delete todo...')
// }
// todo.add();
// todo.edit(22);
// todo.delete();
// // FUNCTION EXPRESSIONS
// const square = function(x){
// return x*x;
// };
// console.log(square(1000));
// // FUNCTION DECLARATIONS
// function greet(firstNAme = 'John', lastName = 'Doe'){
// // if(typeof firstNAme === 'undefined'){firstNAme = 'John'}
// // if(typeof lastName === 'undefined'){lastName = 'Doe'}
// //console.log('Hello')
// return 'Hello ' + firstNAme + ' ' + lastName;
// }
// //console.log(greet('Alex', 'Bres'));
// console.log(greet());
// SWITCHES
// const color = 'yellow';
// switch(color){
// case 'red':
// console.log('Color is red');
// break;
// case 'blue':
// console.log('Color is blue');
// break;
// default:
// console.log('Color is not red or blue');
// break;
// }
// let day;
// switch(new Date().getDay()){
// case 0:
// day = 'Sunday';
// break;
// case 1:
// day = 'Monday';
// break;
// case 2:
// day = 'Tuesday';
// break;
// case 3:
// day = 'Wednesday';
// break;
// case 4:
// day = 'Thursday';
// break;
// case 5:
// day = 'Friday';
// break;
// case 6:
// day = 'Saturday';
// break;
// }
// console.log(`Today is ${day}`);
// // LOGICAL OPERATORS
// const name = 'Steve';
// const age = 17;
// const id = 100;
// if(age > 0 && age < 12){
// console.log(`${name} is a child`);
// } else if(age>= 12 && age <= 19){
// console.log(`${name} is a teenager`);
// } else {
// console.log(`${name} is an adult`)
// }
// if(age < 16 || age > 65){
// console.log(`${name} can not run in race`)
// } else {
// console.log(`${name} is registered for the race`)
// }
// console.log(id === 100 ? 'CORRECT' : 'INCORRECT');
// // Without braces
// if (id == 200)
// console.log('Correct');
// else
// console.log('Incorrect');
// const color = 'yellow';
// if(color === 'red'){
// console.log('Color is red');
// } else if(color === 'blue'){
// console.log('Color is blue ');
// } else {
// console.log('Color is not red or blue');
// }
// const id = 300;
// // GREATER
// if(id > 200){
// console.log('CORRECT');
// } else {
// console.log('INCORRECT');
// }
// // Conditionals
// const id = 100;
// // Test if undefined
// if(typeof id !== 'undefined'){
// console.log(`The ID is ${id}`);
// } else {
// console.log('NO ID');
// }
// EQUAL TO
// if(id == 101){
// console.log('CORRECT');
// } else {
// console.log('INCORRECT');
// }
// if(id != 101){
// console.log('CORRECT');
// } else {
// console.log('INCORRECT');
// }
// Dates
// let val;
// const today = new Date();
// let birthday = new Date('07-30-1977 11:25:00');
// birthday = new Date('July 30 1977');
// birthday = new Date('07/30/1977');
// val = birthday;
// val = today;
// val = today.getDate();
// val = today.getDay();
// val = today.getFullYear();
// val = today.getHours();
// val = today.getMinutes();
// val = today.getSeconds();
// val = today.getMilliseconds();
// val = today.getTime();
// console.log(val);
// console.log(typeof val);
// birthday.setMonth(2);
// birthday.setDate(12);
// birthday.setFullYear(1966);
// birthday.setHours(3);
// birthday.setMinutes(30);
// birthday.setSeconds(25);
// console.log(birthday);
// Object LITERALS
// const person = {
// firstName: 'Steve',
// lastName: 'Smith',
// age: 30,
// email: 'steve@aol.com',
// hobbies: ['misic', 'sports'],
// address: {
// city: 'Miami',
// state: 'FL'
// },
// getBirthYEar: function(){
// return 1987 - this.age;
// }
// }
// let val;
// val = person;
// val = person.firstName;
// val = person['firstName'];
// val = person.age;
// val = person.hobbies[1];
// val = person.address.state;
// val = person.getBirthYEar();
// //val = person.address['city'];
// console.log(val);
// const people = [
// {name: 'John', age: 30},
// {name: 'Mike', age: 23},
// {name: 'Alex', age: 41}
// ];
// for(let i = 0; i < people.length; i++){
// console.log(people[i].name);
// }
// Object LITERALS
// // Create some ARRAYS
// const numbers = [1,2,3,4,5,6,7,8,9];
// const numbers2 = new Array(56.78,79,39,5,23,6,77,78);
// const fruit = ['Apple', 'Banana', 'Orange', 'Pear']
// const mixed = [43,54, 'hello', true, undefined, null, {a:1, b:1}, new Date()];
// let val;
// // Get array lenght
// val = numbers.length;
// // Check if is array
// val = Array.isArray(numbers);
// // Get single value
// val = numbers[3];
// // Insert into array
// numbers[2] = 100
// // Find index of a value
// val = numbers.indexOf(9);
// // // MUTATING ARRAYS
// // // add on to end
// // numbers.push(250);
// // // ad on to front
// // numbers.unshift(120);
// // // take off from end
// // numbers.pop();
// // // take off from the front
// // numbers.shift();
// // // Splice values
// // numbers.splice(1,3);
// // // reverse array
// // numbers.reverse();
// // concatenate arrays
// val = numbers.concat(numbers2);
// Sorting
// val = fruit.sort();
// val = numbers.sort();
// // Use the compare function
// val = numbers.sort(function(x, y){
// return x - y;
// })
// // Reverse sorting
// val = numbers.sort(function(x, y){
// return y - x;
// })
// Find
// function over50(num){
// return num > 50;
// }
// val = numbers.find(over50);
// console.log(numbers);
// console.log(val);
// const name = 'John';
// const age = 30;
// const job = 'Web Developer';
// const city = 'Miami';
// let html;
// // Without template strings (es5)
// html = '<ul><li>Name: ' + name + '</li><li>Age: ' + age + '</li><li>Job: ' + job
// + '</li><li>City: ' + city + ' </li></ul>';
// html = '<ul>' +
// '<li>Name: ' + name + '</li>' +
// '<li>Age: ' + age + '</li>' +
// '<li>Job: ' + job + '</li>' +
// '<li>City: ' + city + '</li>';
// function hello(){
// return 'hello';
// }
// // With template strings (es6)
// html = `
// <ul>
// <li>Name: ${name}</li>
// <li>Age: ${age}</li>
// <li>Job: ${job}</li>
// <li>City: ${city}</li>
// <li>${2+2}</li>
// <li>${hello()}</li>
// <li>${age > 30 ? 'Over 30' : 'Under 30'}</li>
// </ul>
// `;
// document.body.innerHTML = html;
// let val;
// val = 'That\'s pretty much weird';
// var firstName;
// var lastNam;
// const str = 'Hello there my name is Cyber Route';
// firstName = 'Alessandro';
// lastName = 'Bresciani';
// val = firstName.toUpperCase();
// val = lastName.toLowerCase();
// val = firstName[0];
// val = firstName.indexOf('l');
// val = lastName.charAt(2);
// val = firstName.charAt(firstName.length -1);
// val = firstName.substring(0, 4);
// val = firstName.slice(-4);
// val = str.split(' ');
// val = str.replace('Route', 'Evil');
// val = str.includes('Hello');
// console.log(val);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment