Создание календаря для Youtube

Question

Я написал следующий код на repl.it и у меня есть 2 основных вопроса:

1. Код ниже не работает. Реализует ли JS repl.it gird-template-columns? Если нет, что я могу использовать вместо этого? Я что-то не так понял? Если так, как я могу улучшить это?

   .date-picker .dates .days {
        display: grid;
        grid-template-columns: repeat(7, 1fr); // which does not work
        height: 200px; 
   }
   

2. Этот код не позволяет toggleDatePicker (e) {} функционировать:

   const selected_date_element = document.querySelector('.date-picker .selected-date');
   selected_date_element.textContent = formatDate(date);
   
   
   
   function toggleDatePicker(e) {
     console.log(e.path);
     if (!checkEventPathForClass(e.path, 'dates')) {
         dates_element.classList.toggle('active');
     }
   

   Это проблема из-за использования repl.it или код сломана? Если у кода есть недостаток, как я могу его улучшить?

const date_picker_element = document.querySelector('.date-picker');
const selected_date_element = document.querySelector('.date-picker .selected-date');
const dates_element = document.querySelector('.date-picker .dates');

const mth_element = document.querySelector('.date-picker .dates .month .mth');
const next_mth_element = document.querySelector('.date-picker .dates .month .next-mth');
const prev_mth_element = document.querySelector('.date-picker .dates .month .prev-mth');

const days_element = document.querySelector('.date-picker .dates .days');

const months = ['January' ,'Feburary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

let date = new Date();
let day = date.getDate();
let month = date.getMonth();
let year = date.getFullYear();

let selectedDate= date;
let selectedDay = day;
let selectedMonth = month;
let selectedYear = year;

mth_element.textContent = year + 
'/' + months[month];

selected_date_element.textContent = formatDate(date);//problem

//Event Listeners
date_picker_element.addEventListener('click', toggleDatePicker);
next_mth_element.addEventListener('click', goToNextMonth);
prev_mth_element.addEventListener('click', goToPrevMonth);

//Functions
function toggleDatePicker(e) {
  console.log(e.path);
  if (!checkEventPathForClass(e.path, 'dates')) {
    dates_element.classList.toggle('active');
  }
}
function goToNextMonth(e) {
  month++;
  if (month > 11) {
    month = 0;
    year++;
  }
  mth_element.textContent = year + '/' +months[month];
}

function goToPrevMonth(e) {
  month--;
  if (month < 0) {
    month = 11;
    year--;
  }
  mth_element.textContent = year + '/' +months[month];
}

//Helper Functions
function checkEventPathForClass (path, selector) {
  for (let i=0; i < path.length; i++) {
    if (path[i].classList && path[i].classList.contains(selector)) {
      return true;
    }
  }

  return false;
}

function formatDate(d) {
  let day = d.getDate();
  if (day <10) {
    day = '0' +day;
  }
  let month = d.getMonth()+1;
  if (month <10) {
    month = '0' +month;
  }
  let year = d.getFullYear();

  return year + '/' + month + '/' + day;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  background-color: #FFCE00;
  font-family: 'Saira', Arial, Arial, Helvetica, sans-serif;
}

h1 {
  margin:30px 0px;
  color: #313131;
  font-size: 42px;
  font-weight: 900;
  text-align: center;
}

h1 span {
  font-weight: 300;
}

.date-picker {
  position: relative;
  width: 100%;
  max-width: 320px;
  background-color: #FFF;
  height: 60px;
  margin: 30px auto;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);

  cursor: pointer;
  user-select: none;
}

.date-picker:hover {
  background-color: #F3F3F3;
}

.date-picker, selected-date {
  width : 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #313131;
  font-size: 28px;
}

.date-picker .dates {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  background-color: #FFF;
}

.date-picker .dates.active {
  display: block;
}

.date-picker .dates .month {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #EEE;
}

.date-picker .dates .month .arrows {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #313131;
  font-size: 20px;
}

.date-picker .dates .month .arrows:hover {
  background-color: #F3F3F3;
}

.date-picker .dates .month .arrows:active {
  background-color: #00CA85;
}

.date-picker .dates .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr); // which does not work
  height: 200px; 
}

.date-picker .dates .days .day {
  display:flex;
  justify-content: center;
  align-items: center;
  color: #313131;
}

.date-picker .dates .days .day.selected {
  background-color: #00CA85;
  
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Date Picker</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    
  </head>
  <body>
    <h1>CUSTOM<span>DATE</span>PICKER</h1>

    <div class='date-picker'>
      <div class='selected-date'><div>

      <div class='dates'>
        <div class='month'>
          <div class='arrows prev-mth'>&lt;</div>
          <div class='mth'></div>
          <div class='arrows next-mth'>&gt;</div>
        </div>

        <div class='days'></div>
          <div class='day'>1</div> 
          <div class='day'>2</div>
          <div class='day'>3</div>
          <div class='day'>4</div>
          <div class='day'>5</div>
          <div class='day'>6</div> 
          <div class='day'>7</div>
      </div>

      <script src="script.js"></script>
  </body>
</html>

Это видео, которым я следовал в качестве учебного пособия .