johnmboudreaux · March 15, 2019 01:28
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TRIBUS</title>
  <link rel="stylesheet" href="./main.css">
  <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
 </head>
 <body>
  <video id="video" autoplay muted loop>
    <source src="./video/orbit.mp4" type="video/mp4">
  </video>
  <div class="wrapper">
    <h1 class="init-heading" id="heading">Click to see NASA's daily image </h1>
    <input class="button" id="get-image" type="submit">
    <h2 id="title"></h2>
    <p class="description" id="explanation"></p>
    <div id="image"></div>
  </div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script src="./main.js"></script>
 </body>
 </html>
diff --git a/main.css b/main.css
 body {
  background-color: lightgray;
  font-family: 'Acme', sans-serif;
 }

 .button {
  background-image: url('./images/Starsinthesky.jpg');
  border-radius: 5px;
  color: #fff;
  font-size: 1em;
  padding: 1em;
  text-align: center;
  width: 15em;
 }

 .description {
  margin: 2em 2em;
  text-align: justify;
 }

 .init-heading {
  color: white;
  font-size: 2.4em;
  margin: 3em 0 3em 0;
 }

 .theImg {
  height: 40em;
  width: 100vw;
 }

 video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
 }

 .wrapper {
  text-align: center;
 }
diff --git a/main.js b/main.js
 (function() {
  const getImage = $("#get-image");
  const imageElem = $("#image");
  const titleElem = $("#title");
  const heading = $("#heading");
  const explanationElem = $("#explanation");
  const video = $("#video");

  const displayItems = (image, explanation, title) => {
    titleElem.html(title);
    explanationElem.html(explanation);
    imageElem.append($("<img>", { class: "theImg", src: image }));

    getImage.hide();
    heading.hide();
    video.hide();
  };

  const fetchData = () => {
    fetch(
      "https://api.nasa.gov/planetary/apod?api_key=N7JKaWmAqjvYVswYP9qUSGgLo0b1FStzzYchTXHz"
    )
      .then(response => response.json())
      .then(results => {
        let image = results.url;
        let explanation = results.explanation;
        let title = results.title;

        displayItems(image, explanation, title);
      })
      .catch(error => {
        console.log(error);
      });
  };

  getImage.on("click", fetchData);
 })()
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>TRIBUS</title>
	<link rel="stylesheet" href="./main.css">
	<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
	</head>
	<body>
	<video id="video" autoplay muted loop>
	<source src="./video/orbit.mp4" type="video/mp4">
	</video>
	<div class="wrapper">
	<h1 class="init-heading" id="heading">Click to see NASA's daily image </h1>
	<input class="button" id="get-image" type="submit">
	<h2 id="title"></h2>
	<p class="description" id="explanation"></p>
	<div id="image"></div>
	</div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
	<script src="./main.js"></script>
	</body>
	</html>
	body {
	background-color: lightgray;
	font-family: 'Acme', sans-serif;
	}

	.button {
	background-image: url('./images/Starsinthesky.jpg');
	border-radius: 5px;
	color: #fff;
	font-size: 1em;
	padding: 1em;
	text-align: center;
	width: 15em;
	}

	.description {
	margin: 2em 2em;
	text-align: justify;
	}

	.init-heading {
	color: white;
	font-size: 2.4em;
	margin: 3em 0 3em 0;
	}

	.theImg {
	height: 40em;
	width: 100vw;
	}

	video {
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: -1;
	}

	.wrapper {
	text-align: center;
	}
	(function() {
	const getImage = $("#get-image");
	const imageElem = $("#image");
	const titleElem = $("#title");
	const heading = $("#heading");
	const explanationElem = $("#explanation");
	const video = $("#video");

	const displayItems = (image, explanation, title) => {
	titleElem.html(title);
	explanationElem.html(explanation);
	imageElem.append($("<img>", { class: "theImg", src: image }));

	getImage.hide();
	heading.hide();
	video.hide();
	};

	const fetchData = () => {
	fetch(
	"https://api.nasa.gov/planetary/apod?api_key=N7JKaWmAqjvYVswYP9qUSGgLo0b1FStzzYchTXHz"
	)
	.then(response => response.json())
	.then(results => {
	let image = results.url;
	let explanation = results.explanation;
	let title = results.title;

	displayItems(image, explanation, title);
	})
	.catch(error => {
	console.log(error);
	});
	};

	getImage.on("click", fetchData);
	})()