<section id="control-center">
      <h1 class="control-center__title">Nasa Image of the day</h1>
      <h2 class="picture-name"></h2>
      <figure class="daily-image">
        <figcaption></figcaption>
      </figure>
      <h3 class="mars__title">Weather in Mars</h3>
      <section class="mars__container">
        <div class="mars__today">
          <div class="mars__today-data">
            <span class="mars__info">Mars today</span>
            <br />
          </div>
          <button id="btn__today">Today Mars Weather</button>
        </div>
        <div class="mars__tomorrow">
          <div class="mars__tomorrow-data">
            <span class="mars__info">Mars tomorrow </span>
            <br />
          </div>
          <button id="btn__tomorrow">Tomorrow Mars weather</button>
        </div>
        <div class="mars__info">
          <div class="mars__info-data">
            <span class="mars__info">Mars in 2 days</span>
            <br />
          </div>
          <button id="btn__nextDay">Mars in two days</button>
        </div>
      </section>
      <p class="mars-weather"></p>
    </section>

body {
  background: #eceee5;
}

.control-center__title,
.mars__title {
  color: #a64e43;
  text-align: center;
  font-family: cursive;
  font-size: 50px;
  margin: 0;
}

img {
  width: 90%;
  height: 400px;
  border-radius: 40px;
}

.picture-name {
  text-align: center;
  color: #6a7b9c;
}

.daily-image {
  text-align: center;
}

button {
  box-shadow: 0px 10px 14px -7px #20263f;
  background: linear-gradient(to bottom, #7720263f b55a 5%, #72b352 100%);
  background-color: #20263f;
  border-radius: 4px;
  border: 1px solid #6a7b9c;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 17px;
  font-weight: bold;
  padding: 10px 21px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #6a7b9c;
}

.mars__container {
  display: flex;
  justify-content: space-around;
}

.mars__info {
  color: #20263f;
  font-size: bold;
}

.mars__today-data,
.mars__tomorrow-data,
.mars__info-data {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #a64e43;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
}

.mars__today,
.mars__tomorrow,
.mars__info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

const pictureName = document.querySelector(".picture-name");
const imageOfTheDay = document.querySelector(".daily-image");
const marsWeatherToday = document.querySelector(".mars__today-data");
const marsWeatherTomorrow = document.querySelector(".mars__tomorrow-data");
const btnMarsToday = document.getElementById("btn__today");
const marsTitle = document.querySelector(".mars__title");
const btnMarsTomorrow = document.getElementById("btn__tomorrow");
const btnNextDay = document.getElementById("btn__nextDay");
const marsInfoData = document.querySelector(".mars__info-data");

const apiPicOfTheDay = axios.get("https://api.nasa.gov/planetary/apod?", {
  params: {
    api_key: "Onqg4G2DGUYaK5ohIlX0hELgEHw5yNT6fgQEVTNh",
  },
});

const apiMarsWeather = axios.get("https://api.nasa.gov/insight_weather/", {
  params: {
    api_key: "DEMO_KEY",
    version: "1.0",
    feedtype: "json",
  },
});

const getImageOfTheDay = () => {
  apiPicOfTheDay
    .then((response) => {
      imageOfTheDay.insertAdjacentHTML(
        "beforeend",
        `<img src=${response.data.hdurl}>`
      );
      pictureName.insertAdjacentHTML("beforeend", `${response.data.title}`);
    })
    .catch((err) => {
      console.log(err);
    });
};

getImageOfTheDay();

const getTodayWeather = () => {
  apiMarsWeather
    .then((response) => {
      const weather = Object.values(response.data);
      const weatherToday = weather[0].AT.av;
      marsWeatherToday.insertAdjacentHTML("beforeend", weatherToday);
    })
    .catch((err) => {
      console.log(err);
    });
};

// Tomorrow temperature
const getTomorrowWeather = () => {
  apiMarsWeather
    .then((response) => {
      const weather = Object.values(response.data);
      const weatherTomorrow = weather[1].AT.av;
      marsWeatherTomorrow.insertAdjacentHTML("beforeend", weatherTomorrow);
    })
    .catch((err) => {
      console.log(err);
    });
};

// Today temperature
const getNextDayWeather = () => {
  apiMarsWeather
    .then((response) => {
      const weather = Object.values(response.data);
      const weatherInTwoDays = weather[2].AT.av;
      console.log(weatherInTwoDays);
      marsInfoData.insertAdjacentHTML("beforeend", weatherInTwoDays);
    })
    .catch((err) => {
      console.log(err);
    });
};

btnMarsToday.addEventListener("click", getTodayWeather, {
  once: true,
});
btnMarsTomorrow.addEventListener("click", getTomorrowWeather, {
  once: true,
});
btnNextDay.addEventListener("click", getNextDayWeather, {
  once: true,
});