RocketLaunchNavigator/index.html at main · HamsterSpaceNerd3000/RocketLaunchNavigator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
  <title>Home | Rocket Launch Navigator</title>
  <link rel="icon" href="RocketLaunchNavigatorIcon.ico" type="image/ico">
  <link rel="stylesheet" href="styles.css">
  <div>
    <a href="index" class="button">Home</a>
    <a href="upcominglaunches" class="button">Upcoming Launches</a>
    <a href="previouslaunches" class="button">Previous Launches</a>
    <a href="all-launches" class="button">All Launches</a>
  <div>
  <header>Rocket Launch Navigator</header>
  <p>A navigator for upcoming rocket launches</p>
</head>
<body>
  <div class="launch-container">
    <script>
      let renderedLaunches = 0;$
      const apiKey = 'fb936b1abcf85549fa9c74a20c5e3ad5a125cc88'; // Replace 'YOUR_API_KEY' with your actual API key
      const apiUrl = `https://ll.thespacedevs.com/2.2.0/launch/upcoming/?limit=6&api_key={apiKey}`;
      async function fetchRocketLaunches() {
        try {
          const response = await fetch(apiUrl);
          if (!response.ok) {
            throw new Error('Database Callback Failure');
          }
          const data = await response.json();
          if (data && data.results) {
            const launches = data.results.filter((launch) => launch.status.id !== 3 && launch.status.id !== 4);

            launches.forEach((launch) => {
              const { name, net, pad, rocket, webcast_live, status, net_precision, image } = launch;
              const launchItem = document.createElement('div');
              launchItem.classList.add('launch-item');
              const launchImage = new Image();
              launchImage.src = image; // Replace with actual image URL
              launchImage.alt = 'altimage.png';
              launchImage.classList.add('launch-image');
              const launchBox = document.createElement('div');
              launchBox.classList.add('launch-box');
              launchBox.innerHTML = `
                <h2><span class="rocket-name">${name}<span></h2>
                <p>${rocket.configuration.full_name}</p>
                <p>NET: ${net}</p>
                <p>Status: ${status.abbrev}</p>
                <p>NET Precestion: ${net_precision && net_precision.name}</p> <!-- Add null check for net_precision -->
                <p>Launch Pad: ${pad.name}</p>
                <p>Pad Location: ${pad.location.name}</p>
                <p>Webcast Live: ${webcast_live}</p>
              `;

              launchItem.appendChild(launchImage);
              launchItem.appendChild(launchBox);
              document.querySelector('.launch-container').appendChild(launchItem);

              renderedLaunches++;
              if (renderedLaunches >= 60) {
                return;
              }
            });
          } else {
            const noDataText = document.createElement('p');
            noDataText.textContent = 'No launch data available.';
            document.body.appendChild(noDataText);
          }
        } catch (error) {
          const errorText = document.createElement('p');
          errorText.textContent = `An error occurred while fetching the data: ${error}`;
          document.body.appendChild(errorText);
        }
      }

      fetchRocketLaunches();
    </script>
  </div>
</body>
</html>