Complex Api NASA

README.md

@@ -1,22 +1,10 @@
 # 🚀 Project: Complex NASA API
 
-### Goal: Use NASA's API to return all of their facility locations (~400). Display the name of the facility, its location, and the weather at the facility currently. 
+### Goal: Use NASA's API to return all of their facility locations 
 
-### How to submit your code for review:
 
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+### To Display the name of facility, location, weather :
+
+- Click on button below title
+- See the display of facility location and weather

assets/css/main.css

@@ -0,0 +1,53 @@
+*{
+  box-sizing: border-box;
+}
+
+@font-face {
+    font-family: myFirstFont;
+    src: url(Super-Plants.ttf);
+}
+
+
+body {
+  background: url(https://media1.giphy.com/media/woqvaIWdwdPBECsTQu/giphy.gif?cid=6c09b952val4l6q5lp5yngt9e4ljf7tdprb91qiki98281if&ep=v1_gifs_search&rid=giphy.gif&ct=g);
+  width: 100%;
+  background-size: 100%;
+  margin: 0 auto;
+  height: 100%;
+  color: greenyellow;
+  text-align: center;
+}
+
+h1 {
+  padding-top: 3rem;
+  /* text-decoration: underline white; */
+  font-family: myFirstFont;
+  /* color: darkgreen !important; */
+  text-align: center;
+}
+
+h2 {
+  padding-top: 4rem;
+  text-align: left;
+  text-decoration: underline white;
+}
+
+h3 {
+  padding-top: 4rem;
+  text-align: left;
+  text-decoration: underline white;
+}
+
+#hidden {
+  display: none !important;
+}
+
+button {
+  font-family: myFirstFont !important;
+  margin-top: 2rem !important;
+  margin-bottom: 2rem !important;
+}
+
+.table-wrapper{
+  margin: 0% 10%;
+}

assets/js/main.js

@@ -0,0 +1,87 @@
+//The user will enter a name of facility and zip code to find weather at current location. Use that location to get the name of facility and weather of that facility location! https://data.nasa.gov/Management-Operations/NASA-Facilities/scmi-np9r
+
+//connect button  function "getTemp"
+document.querySelector("button").addEventListener("click", getFacilityNameWeather);
+
+
+
+function getFacilityNameWeather() {
+  document.querySelector(".table").id = "hidden";
+
+  const urlNasa = 'https://data.nasa.gov/resource/gvk9-iz74.json';
+
+
+  //using method fetch to request my data from that api using url
+  fetch(urlNasa) // go get api
+    .then((res) =>  res.json())
+    .then((data) => {
+
+      console.log(data);
+
+      let index = 1; // Counter for Table Rows
+
+      data.forEach((facility)=>{ 
+        console.log(facility);
+        let facilityCenter = facility.center;//calling api for facilities
+        let zipCode = facility.zipcode;//callling api for zipcode
+
+        const urlZip = `http://api.weatherapi.com/v1/current.json?key=eb88852a78b84a5ab07191927231810&q=${zipCode}`;
+
+        fetch(urlZip) // go get api
+          .then((res) => res.json()) //.then property passes param res which responds with JSON parsing out the data you requested
+          .then((data) => {
+            let temp = Math.floor(data.current.temp_f); //using method to round current temp of F
+            let fTemp = `${temp}°F`;
+
+            // let listFacility = document.createElement("li");
+            // let text = document.createTextNode(`${facilityCenter} ${fTemp}`);
+            // listFacility.appendChild(text);
+            // document.querySelector("#list").appendChild(listFacility);
+
+            // <tr>
+            //   <th scope="row">1</th>
+            //   <td>Mark</td>
+            //   <td>Otto</td>
+            // </tr>
+
+            let tableIndex = document.createElement("th"); // creating ELement table header for table
+            tableIndex.scope = "row"; //
+            tableIndex.innerText = index; //start at index 1
+            index++; // then increment as we add
+
+            // console.log("th element:" );
+            // console.log(tableIndex);
+
+            let tableDataOne = document.createElement("td");
+            tableDataOne.innerText = facilityCenter;
+            // console.log("facility Name :")
+            // console.log(tableDataOne);
+
+            let tableDataTwo = document.createElement("td");
+            tableDataTwo.innerText = fTemp;
+
+            let tableDataThree = document.createElement("td");
+            tableDataThree.innerText = zipCode;
+
+            let tableRow = document.createElement("tr");
+            tableRow.appendChild(tableIndex);
+            tableRow.appendChild(tableDataOne);
+            tableRow.appendChild(tableDataTwo);
+            tableRow.appendChild(tableDataThree);
+
+            console.log("Table Row :")
+            console.log(tableRow)
+
+            document.querySelector("tbody").appendChild(tableRow);
+
+
+          })
+          .catch((err) => {
+            console.log(`error ${err}`);
+          });
+      })
+
+      document.querySelector("#hidden").id = "";
+    })
+}
+

index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="description" content="NASA Facilities and weather at the location">
+  <meta name="keywords" content="one, two, three">
+
+  <title>Nasa Facilities Name and Weather</title>
+
+  <link rel="icon" type="image/png"
+        href="https://cdn-icons-png.flaticon.com/512/290/290836.png">
+
+  <!-- external CSS link -->
+  <link rel="stylesheet" href="assets/css/main.css">
+
+  <!-- Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+
+</head>
+
+<body>
+
+  <h1 class="text-success"> Nasa Facilities Name and Current Weather 🧑‍🚀</h1>
+
+  <div class="d-grid gap-2 col-3 mx-auto">
+    <button type="button" class="btn btn-success"> Get☀️Facility🌧️Weather🌈</button>
+  </div>
+
+
+  <div class="table-wrapper">
+    <table class="table table-hover table-dark" id="hidden">
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">Facility Name</th>
+          <th scope="col">Current Weather</th>
+          <th scope="col">Facility Zip Code</th>
+        </tr>
+      </thead>
+      <tbody>
+      </tbody>
+    </table>
+  </div>
+
+
+  <!-- Will Print Temperature for Weather at Location -->
+  <ul id="list"></ul>
+
+  <script type="text/javascript" src="assets/js/main.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
+</body>
+
+</html>