<section id="control-center">
      <h1 class="control-center__title">Nasa Image of the day</h1>
      <h2 class="picture-name"></h2>
      <figure class="daily-image">
      <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 />
          <button id="btn__today">Today Mars Weather</button>
        <div class="mars__tomorrow">
          <div class="mars__tomorrow-data">
            <span class="mars__info">Mars tomorrow </span>
            <br />
          <button id="btn__tomorrow">Tomorrow Mars weather</button>
        <div class="mars__info">
          <div class="mars__info-data">
            <span class="mars__info">Mars in 2 days</span>
            <br />
          <button id="btn__nextDay">Mars in two days</button>
      <p class="mars-weather"></p>
body {
  background: #eceee5;

.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__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__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",


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


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/axios/dist/axios.min.js