superskiers/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <title>Star Wars API</title>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">

  </head>
  <body>
     <nav id="navbar">
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Star_Wars_Logo.svg/1041px-Star_Wars_Logo.svg.png" alt="star wars logo" id="logo-img">
    <ul class='movies-list'>
    <li class='movie' value='2' id="button">I</li>
    <li class='movie' value='1'>II</li>
    <li class='movie' value='3'>III</li>
    <li class='movie'value='0'>IV</li>
    <li class='movie' value='5'>V</li>
    <li class='movie' value='4'>VI</li>
    <li class='movie' value='6'>VII</li>
   </ul>
  </nav>

    <div class="info-container1">
          <h1 id="titleOfFilm"></h1>
    </div>
  <!--<div class="info-container2">
          <h1 id="openingCrawl"></h1>
    </div>  -->
    <h1 id="openingCrawl"></h1>

  </body>
</html>


## script.js
var movies = document.getElementsByClassName('movie');
let filmTitle = document.querySelector('#titleOfFilm');
let crawl = document.querySelector('#openingCrawl');

function fetchInfo(chosenFilm) {
  var url = 'https://swapi.co/api/films/' + chosenFilm;
  fetch(url)
  .then(response => response.json())
  .then(data => {
     updateInfo(data, data);
     console.log(data.title);
  })
  .catch(error => console.error(error))
  }

function updateInfo(data, data) {
  filmTitle.innerText = data.title;
  crawl.innerText = data.opening_crawl;
}

// This is for the multiple movies to choose from
for(var i = 0; i < movies.length; i++) {
  movies[i].addEventListener("click", function() {
    var chosenFilm = this.value;
    fetchInfo(chosenFilm);
    console.log("Clicked " + chosenFilm);
});

}

## star-wars-films-api.markdown

      
    Raw
  

              star-wars-films-api.markdown
            
          
    Star Wars Films API

A Pen by superskiers on CodePen.
License.

  
## style.css
body {
  text-align: center;
  font-family: 'Pathway Gothic One', sans-serif;
}
#navbar {
  text-align: center;
}
#logo-img {
  height: 200px;
  max-height: 100vh;
  border-radius: 10px;
}
.movies-list{
    display: block;
    list-style-type: none;
    text-align: center;
    font-size: 40px;
    font-weight: 800;
  }

  .movie{
    display: inline-block;
    height: 95%;
    padding: 0 20px;
  }

  .movie:hover{
    cursor: pointer;
  }


#title {
  margin: 0 auto 40px auto;
}
/* .info-container1 {
  border: 2px solid black;
  margin: 0 auto;
  border-radius: 8px;
  max-width: 50vw;
}
.info-container2 {
  justify-content: center;
  height: 50vh;
  border: 2px solid black;
  max-width: 50vw;
  margin: 30px auto 10px;;
  border-radius: 8px;
  flex-direction: column;
} */
#button {
  margin: 20px;
  padding: 10px 30px;
  border-radius: 8px;
  font-weight: 600;
  background-color: white;
}
	<!DOCTYPE html>
	<html lang="en">
	<title>Star Wars API</title>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

	<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">

	</head>
	<body>
	<nav id="navbar">
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Star_Wars_Logo.svg/1041px-Star_Wars_Logo.svg.png" alt="star wars logo" id="logo-img">
	<ul class='movies-list'>
	<li class='movie' value='2' id="button">I</li>
	<li class='movie' value='1'>II</li>
	<li class='movie' value='3'>III</li>
	<li class='movie'value='0'>IV</li>
	<li class='movie' value='5'>V</li>
	<li class='movie' value='4'>VI</li>
	<li class='movie' value='6'>VII</li>
	</ul>
	</nav>

	<div class="info-container1">
	<h1 id="titleOfFilm"></h1>
	</div>
	<!--<div class="info-container2">
	<h1 id="openingCrawl"></h1>
	</div> -->
	<h1 id="openingCrawl"></h1>

	</body>
	</html>
	var movies = document.getElementsByClassName('movie');
	let filmTitle = document.querySelector('#titleOfFilm');
	let crawl = document.querySelector('#openingCrawl');

	function fetchInfo(chosenFilm) {
	var url = 'https://swapi.co/api/films/' + chosenFilm;
	fetch(url)
	.then(response => response.json())
	.then(data => {
	updateInfo(data, data);
	console.log(data.title);
	})
	.catch(error => console.error(error))
	}

	function updateInfo(data, data) {
	filmTitle.innerText = data.title;
	crawl.innerText = data.opening_crawl;
	}

	// This is for the multiple movies to choose from
	for(var i = 0; i < movies.length; i++) {
	movies[i].addEventListener("click", function() {
	var chosenFilm = this.value;
	fetchInfo(chosenFilm);
	console.log("Clicked " + chosenFilm);
	});

	}
	body {
	text-align: center;
	font-family: 'Pathway Gothic One', sans-serif;
	}
	#navbar {
	text-align: center;
	}
	#logo-img {
	height: 200px;
	max-height: 100vh;
	border-radius: 10px;
	}
	.movies-list{
	display: block;
	list-style-type: none;
	text-align: center;
	font-size: 40px;
	font-weight: 800;
	}

	.movie{
	display: inline-block;
	height: 95%;
	padding: 0 20px;
	}

	.movie:hover{
	cursor: pointer;
	}


	#title {
	margin: 0 auto 40px auto;
	}
	/* .info-container1 {
	border: 2px solid black;
	margin: 0 auto;
	border-radius: 8px;
	max-width: 50vw;
	}
	.info-container2 {
	justify-content: center;
	height: 50vh;
	border: 2px solid black;
	max-width: 50vw;
	margin: 30px auto 10px;;
	border-radius: 8px;
	flex-direction: column;
	} */
	#button {
	margin: 20px;
	padding: 10px 30px;
	border-radius: 8px;
	font-weight: 600;
	background-color: white;
	}