Category: JavaScript

<?php
$s_width = '<script>document.write(screen.width);</script>';
echo $s_width;

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
  }
  #page-top a {
    background: #EEEEEE;
    color: #fff;
    width: 80px;
    padding: 25px;
    text-align: center;
    display: block;
    border-radius: 5px;
  }
  #page-top a:hover {
    backgorund: rgba(144, 144,144, 0.8);
  }

$(function(){
	var topBtn = $('#page-top');
	topBtn.hide();
	$(window).scroll(function(){
		if($(this).scrollTop() > 450){
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	topBtn.click(function(){
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
	});
});

fetch('<URL-to-the-resource-that-is-being-requested>');
fetch('https://api.unsplash.com/search/photos?page=1&query=flowers')

fetch('https://api.unsplash.com/search/photos?page=1&query=${searchedForText}', {
	method: 'POST'
});

[javascriit]
fetch(‘https://api.unsplash.com/search/photos?page=1&query${searchedForText}’, {
headers: {
Authorization: ‘Client-ID abc123’
}
}).then(function(response){
debugger;
});[/javascript]

Since the Unsplash API we’re using will return JSON to us, we just need to call .json() on the response variable.

fetch('https://api.unsplash.com/search/photos?page=1&query${searchedForText}', {
	headers: {
		Authorization: 'Client-ID abc123'
	}	
}).then(function(response){
	return response.json();
});

function addImage(data){
	let htmlContent = '';
	const firstImage = data.result[0];

	if (firstImage){
		htmlContent = '<figure>
			<img src="${firstImage.urls.small}" alt="${searchedForText}">
			<figcaption>${searchedForText} by ${firstImage.user.name}</figcaption>
			</figure>
	} else {
		htmlContent = 'Unfortunately, no image was returned for your search.'
	}

	responseContainer.insertAdjacentHTML('afterbegin', htmlContent);
}

const imgRequest = new XMLHttpRequest();
imgRequest.onload = addImage;
imgRequest.open('GET', 'https://api.unsplash.com/photos?page=1&query=${searchedForText}');
imgRequest.setRequestHeader('Authorization', 'Client-ID <client-id-here>');
imgRequest.send();

function addImage(){
	const data = JSON.parse(this.responseText);
	const firstImage = datat.results[0];

	responseContainer.insertAdjacementHTML('afterbegin', <figure>
		<img src="${firstImage.urls.small}" alt="${searchedForText}">
		<figcaption>${searchedForText} by ${firstImage.user.name}</figcaption>
		</figure>
		);
}

$.ajax(<url-to-fetch>,<a-configuration-object>);
$.ajax(<just a configuration object>);

var settings = {
	frosting: 'buttercream',
	colors: ['orange', 'blue'],
	layers: 2,
	isRound: true
};

const myDeliciousCake = MakeCake({
	frosting: 'buttercream',
	colors: ['orange', 'blue'],
	layers: 2,
	isRound: true
});

$.ajax({
	url: 'http://swapi.co/api/people/1/'
});

function handleResponse(data){
	console.log('the ajax request has finished!');
	console.log(data);
}

$.ajax({
	url: 'http://swapi.co/api/people/1/'
}).done(handleResponse);

function handleSuccess(){
	const data = JSON.parse(this.responseText);
	const.log(data);
}
asyncRequestObject.onload = handleSuccess;

unsplash for developer
https://unsplash.com/developers
create an application
https://unsplash.com/oauth/applications

The New York Times for developers
https://developer.nytimes.com/

function addImage(){}
const searchedForText = 'hippos';
const unsplashRequest = new XMLHttpRequest();

unsplashRequest.open('GET', 'https://api.unsplash.com/search/photos?page=1&query=${searchedForText}');
unsplashRequest.onload = addImage;

unsplashRequest.send()

function addArticles(){}
const articleRequest = new XMLHttpRequest();
articleRequest.onload = addArticles;
articleRequest.open('GET', 'http://api.nytimes.com/svc/search/v2/articlesearch.json?q=${searchedForText}&api-key=<API-key-goes-here>');
articleRequest.send();

What’s an API?
The acronym “API” stands for:

Application
Programming
Interface

google API
https://developers.google.com/apis-explorer/#p/
ProgrammableWeb
https://www.programmableweb.com/apis/directory

const asyncRequestObject = new XMLHttpRequest();
asyncRequestObject.open('GET', 'https://unsplash.com');

const req = new XMLHttpRequest();
undefined
req.open('GET', 'https://www.google.com/');
undefined

VM453:1 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

function handleSuccess(){
	console.log(this.responseText);
}
asyncRequestObject.onload = handleSuccess;

function handleError(){
	// in the function, the 'this' value is the XHR object
	console.log('An error occured');
}
asyncRequestOjbect.onerror = handleError;

function handleSuccess (){
	console.log(this.responseText);
}
function handleError(){
	console.log('An error occurred')
}

const asyncRequestObject = new XMLHttpRequest();

asyncRequestObject.open('GET', 'https://unsplash.com');
asyncRequestObject.onload = handleSuccess;
asyncRequestOjbect.onerror = handleError;

asyncRequestObject.send();

GET Request: An internet request for data. Sent from a client to a server.
Response: A server’s response to a request. Sent from a server to a client. A response to a GET request will usually include data that the client needs to load the page’s content.

-Ajax Definition
Asynchronous
JavaScript
And
XML
request

Get request and response
Data: XML, JSON, HTML

xhr(XMLHttpRequest (XHR)) is Asynchronous

sudo npm install -g bower

https://bower.io/

run bower install

var numLetters = function(letter){
	return new Function('times',
		"if (times < 0) return '';
		var result = '';
		times = Math.round(times);
		while(times--){ result += '" + letter +"'; }
		return result;"
		);
}
&#91;/javascript&#93;

&#91;javascript&#93;
<div id="beach-info"></div>
<script type="text/template" id="beach-supplies">
	<% if(supplies.empty) { %>
		<p> Whaaaat? Get to the beach anyway! </p>
	<% } %>

	<ul>
		<li> Sunscreen - <% if (supplies.sunscreen) { %> check! <% } %> </li>
		<% if (supplies.towel) { %>
			<li> Towel - Yes, a <%= supplies.towel =%> one! </li>
		<% } %>
		<li> Shades - <% if (supplies.shades) { %> check! <% } else { %> sadly, no!! <% } %></li>
	</ul>
</script>

var string = "Hi, my name is *(name)*. And I *(emotion)* this *(thing)*!";

var logResult = template( string );

logResult('Richard', 'love', 'green mint icecream', 2);

Yomen
npm install -g grunt-cli bower yo generator-karma generator-angular