Nathan Allen nallenanderson

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Modyo Requests</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body>

## main.js
alert("This is working!");

## main01.js
// Create the array where we will store our JSON response.
let jsonData =[];

// Get the original JSON from site
$.ajax({
  method: 'GET',
  dataType: 'jsonp',
  url: 'http://developers.modyo.com/media.json',
  success: data => data.media,
  error: err => console.log(err)

## main02.js
// After the first JSON is returned, we are going to convert the URL string by mapping over the array of objects and replacing the default cover image size.
.then( data => {
  data.media.map( media => {
    if(media.covers[0]){
      // Replace the cover image size with "original" image size.
      media.covers[0] = media.covers[0].replace('R320x240', 'original');

      // Add the item to the jsonPost array.
      jsonData = [...jsonData, media];
    } else {

## main03.js
// After the first JSON is returned, we are going to convert the URL string by mapping over the array of objects and replacing the default cover image size.
.then( data => {
  data.media.map( media => {
    if(media.covers[0]){

      // Check if original image is one being served.
      if(!media.covers[0].includes('original')){
        // Replace the cover image size with "original" image size.
        media.covers[0] = media.covers[0].replace('R320x240', 'original');

## main04.js
// Chain this onto the end of the AJAX request.
.then( () => {

  // Create an array of <div>s and then map over each element to create a div with image and title.
  const showImages = `
    ${jsonData.map( card => {
        return `
          <div class="col-md-6">
            <div class="card">
              <img src=${card.covers[0]} class="img-responsive" />

## main05.js
// This needs to be placed within the final .then() block
const imagesDiv = document.querySelector('#images');
imagesDiv.innerHTML = showImages;

## bootstrap.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">

## tooltipster.html
<head>
    <link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        // Putting a tooltip on an image:
        <img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

## react.jsx
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Modyo Requests</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	</head>
	<body>
	// Create the array where we will store our JSON response.
	let jsonData =[];

	// Get the original JSON from site
	$.ajax({
	method: 'GET',
	dataType: 'jsonp',
	url: 'http://developers.modyo.com/media.json',
	success: data => data.media,
	error: err => console.log(err)
	// After the first JSON is returned, we are going to convert the URL string by mapping over the array of objects and replacing the default cover image size.
	.then( data => {
	data.media.map( media => {
	if(media.covers[0]){
	// Replace the cover image size with "original" image size.
	media.covers[0] = media.covers[0].replace('R320x240', 'original');

	// Add the item to the jsonPost array.
	jsonData = [...jsonData, media];
	} else {
	// Chain this onto the end of the AJAX request.
	.then( () => {

	// Create an array of <div>s and then map over each element to create a div with image and title.
	const showImages = `
	${jsonData.map( card => {
	return `
	<div class="col-md-6">
	<div class="card">
	<img src=${card.covers[0]} class="img-responsive" />
	// This needs to be placed within the final .then() block
	const imagesDiv = document.querySelector('#images');
	imagesDiv.innerHTML = showImages;
	<head>
	<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
	<script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
	</head>
	<body>
	<div class="container">
	// Putting a tooltip on an image:
	<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />
	var HelloMessage = React.createClass({
	render: function() {
	return <div>Hello {this.props.name}</div>;
	}
	});

	ReactDOM.render(<HelloMessage name="John" />, mountNode);