<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 apiPicOfTheDay = axios.get("https://api.nasa.gov/planetary/apod?", {
  params: {
    api_key: "DEMO_KEY",
    
    
  },
});

console.log(apiPicOfTheDay);

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();