advent calendar template

by John Doe

HTML

<script src="https://fonts.googleapis.com/css?family=Kalam"></script>
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/raw"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script>
<div id="wrapper">

  <div id="header">
    <div id="toggleBlock">
      <input type="checkbox" id="toggle" class="toggleCheckbox" />
      <label for="toggle" class='toggleContainer'>
        <div>Calendar</div>   
        <div>Editor</div>
      </label>
    </div>
  </div>
  
  <div id="calendar">
    <div id="dateGrid"></div>
    <div id="results"></div>
  </div>
  
  <div id="editorBlock">
    <label for="datepicker">Pick a date:</label>
    <select id="datepicker">
      <option value="1">01.12.2022</option>
      <option value="2">02.12.2022</option>
      <option value="3">03.12.2022</option>
      <option value="4">04.12.2022</option>
    </select>
    <div id='editorjs'></div>
    <div id='saveButton'>SAVE</div>
  </div>
</div>

CSS

/*
  Styles partially taken from:
  https://codepen.io/tutsplus/pen/YEROxZ
  https://codepen.io/nubianlachlan-the-encoder/pen/GRvVyYN
  https://gist.github.com/ghosh/4f94cf497d7090359a5c9f81caf60699
*/
body {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/snow-bg.svg) no-repeat top center #82d8cb;
  background-size: cover;
}

#header {
  display: flex;
  justify-content: center;
}

#calendar {
  
}

#saveButton {
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 10px;
  font-size: 1.2rem;
  color: white;
  background-color: #8bc34a;
  border-radius: 10px;
  z-index: 2;
}
#editorBlock {
  display: none;
  background-color: white;
  border-radius: 20px;
  padding: 1rem;
}
#editorjs {
  width: 100%;
}




#dateGrid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.day {
  width: 250px;
  height: 250px;
  border: 2px dashed #ffffff55;
  border-radius: 10px;
  margin: 1rem;
  
  display: flex;
  align-items: center;
  justify-content: center;

  /* typography */
  font-family: 'Kalam', cursive;
  color: #7cafb3;
  font-size: 2em;
  font-weight: bold;
}

.day.active {
  cursor: pointer;
  color: #385052;
  border-color: #385052;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.day.active:hover {
  /*transform: scale(1.1);*/
  transition: transform 1s;
}


/****************/
/* Toggle block */
/****************/
#toggleBlock {
  z-index: 1;
}
.toggleContainer {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  border: 3px solid #343434;
  border-radius: 20px;
  background: #343434;
  font-weight: bold;
  color: #343434;
  cursor: pointer;
}
.toggleContainer::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0%;
  border-radius:20px;
  background: white;
  transition: all 0.3s;
}
.toggleCheckbox:checked + .toggleContainer::before {
  left: 50%;
}
.toggleContainer div {
  padding:...

JavaScript

function ModalTemplate(content) {
	return `
      <div class="modal__overlay" data-micromodal-close>
        <div class="modal__container" role="dialog" aria-modal="true">
          <header class="modal__header">
          	<button class="modal__close" data-micromodal-close></button>
          </header>
          <main class="modal__content">
          	${content}
          </main>
        </div>
      </div>
  `;
}

const daysWithoutData = [];

const defaultData = {
  "time": 1550476186479,
  "blocks": [
    {
      "id": "zbGZFPM-iI",
      "type": "paragraph",
      "data": {
        "text": "Here is some sample text. You can also add images and embed social media posts and videos by pasting their link here directly (fb instagram, youtube and more)."
      }
    },
    {
      "type" : "image",
      "data" : {
        "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
        "caption" : "car",
        "withBorder" : false,
        "withBackground" : false,
        "stretched" : true
      }
    },
    {
      "type" : "embed",
      "data" : {
        "service" : "youtube",
        "source" : "https://www.youtube.com/watch?v=jfKfPfyJRdk",
        "embed" : "https://www.youtube.com/embed/jfKfPfyJRdk",
        "width" : 580,
        "height" : 320,
        "caption" : ""
      }
    }
  ],
  "version": "2.8.1"
}


const data = [
	{day: 1, active: true, data: `innerHTML1`},
  {day: 2, active: true, data: `innerHTML2`},
  {day: 3, active: false, data: null}
];

const calendar = document.getElementById('calendar');
const editorBlock = document.getElementById('editorBlock');
const editorToggle = document.getElementById('toggle');
editorToggle.onchange = (e) => {
  calendar.style.display = (e.target.checked) ? 'none' : 'block';
  editorBlock.style.display = (e.target.checked) ? 'block' : 'none';
}

const grid = document.getElementById('dateGrid');
const results =...