How can I make this calendar close correctly?

I got this code off of codepen and I am trying to edit it. I am trying to make it so that when you actually click the X in the corner of the popup, the box actually closes, and that after hitting the add button after putting in text, the box closes. Can anyone help me accomplish this? I am having trouble getting it to work. Any help is appreciated. Thanks!
https://codepen.io/pokyparachute66/pen/QzXYjL

var date = document.getElementsByClassName("day");



for(i = 0; i < 50; i++){



  var event = document.createElement("div");

  event.id = "add";

  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span 

  class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";

  date[i].appendChild(event);



  var btn = document.createElement("button");

  btn.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";

  event.appendChild(btn);  

  btn.addEventListener("click", createEvent);



  date[i].addEventListener("click", clickEvent);



  event.getElementsByClassName("close")[0].addEventListener("click", 

   closeEvent);



 }



 function createEvent(){



  var parent = this.parentElement;

  var parentDay = parent.parentElement;



  if(parent.getElementsByTagName("input")[0].value === "" ){

    alert("type something");

  }

    else{

      var createDiv = document.createElement("div");

  createDiv.id = "eventDiv";

  parent.appendChild(createDiv);



  parentDay.classList.add("active");



  var txt = parent.getElementsByTagName("input")[0].value;

  createDiv.innerHTML = txt;

  parent.getElementsByTagName("input")[0].value = "";



      //parent.style.visibility = "visible";



    }





  }



  function clickEvent(){

  var a = this.getElementsByTagName("div")[0];

  a.classList.toggle("active");

}



function closeEvent(){

  document.getElementById("add").classList.remove("active");

}

button:focus, input:focus{outline: none;}



.calendar{

  margin: calc(50vh - 100px) auto 0 auto;

  width: 260px;

  height: 200px;

  text-align: center;

  transform: scale(2.5);

}



.day{

  position: relative;

  margin: 2px; 

  width: 33px;

  height: 33px;

  font-size: 12px;

  line-height: 30px;

  border-radius: 100%;

  float: left;

  cursor: pointer;

  transition: all .4s ease 0s;

}



.day:hover{

  color: #fff;

  background: #3f64fd;

}





.day-week{

  margin: 0px; 

  width: 37px;

  height: 20px;

  color: #515067;

  font-size: 9px;

  line-height: 20px;

  text-transform: uppercase;

  float: left;

}



.blank{

  margin: 0px ; 

  width: 37px;

  height: 37px;

  float: left;

}



#add{

  padding: 15px;

  position: absolute;

  left: -90px;

  bottom: 50px;

  width: 200px;

  min-height: 50px;

  background: linear-gradient(to top left, #3f64fd, #14c0ff);

  transition: all .2s ease 0s;

  visibility: hidden;

  opacity: 0;

  box-shadow: 0 0 25px rgba(0,0,0,.6);

}



#add.active,

#add:hover{

  bottom: 30px;

  visibility: visible;

  opacity: 1;

  transition: all .4s ease 0s;

  z-index: 999;

}



#add .close{

  position: absolute;

  top: 0px;

  right: 5px;

  color: white;

}



#add input[type="text"]{

  width: 140px;

  padding: 3px 5px;

  color: #fff;

  background: none;

  border: none;

  border-bottom: 1px solid white;

}



#add button{

  height: 50px;

  width: 50px;

  color: #fff;

  line-height: 23px;

  text-align: center;

  background: #3f64fd;

  border: none;

    left: 70%;

    top:53%;

    position: absolute;

  border-radius: 100%;

  cursor: pointer;

}



#eventDiv{

  padding: 5px;

  line-height: 12px;

  text-align: left;

}



.day.active{

  color: black;

  border: 2px solid #3f64fd;

}

<div class="calendar">



<div class="day-week">s</div>

<div class="day-week">m</div>

<div class="day-week">t</div>

<div class="day-week">w</div>

<div class="day-week">t</div>

<div class="day-week">f</div>

<div class="day-week">s</div> 



<div class="blank"></div>

<div class="blank"></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 class="day">8</div>

<div class="day">9</div>

<div class="day">10</div>

<div class="day">11</div>

<div class="day">12</div>

<div class="day">13</div>

<div class="day">14</div>



<div class="day">15</div>

<div class="day">16</div>

<div class="day">17</div>

<div class="day">18</div>

<div class="day">19</div>

<div class="day">20</div>

<div class="day">21</div>



<div class="day">22</div>

<div class="day">23</div>

<div class="day">24</div>

<div class="day">25</div>

<div class="day">26</div>

<div class="day">27</div>

<div class="day">28</div>



<div class="day">29</div>

<div class="day">30</div>

<div class="day">31</div>



</div>

edited Jan 18 at 19:19

Calvin Nunes

3,66021033

asked Jan 18 at 18:57

Bob Higgins

add a comment |

var date = document.getElementsByClassName("day");



for(i = 0; i < 50; i++){



  var event = document.createElement("div");

  event.id = "add";

  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span 

  class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";

  date[i].appendChild(event);



  var btn = document.createElement("button");

  btn.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";

  event.appendChild(btn);  

  btn.addEventListener("click", createEvent);



  date[i].addEventListener("click", clickEvent);



  event.getElementsByClassName("close")[0].addEventListener("click", 

   closeEvent);



 }



 function createEvent(){



  var parent = this.parentElement;

  var parentDay = parent.parentElement;



  if(parent.getElementsByTagName("input")[0].value === "" ){

    alert("type something");

  }

    else{

      var createDiv = document.createElement("div");

  createDiv.id = "eventDiv";

  parent.appendChild(createDiv);



  parentDay.classList.add("active");



  var txt = parent.getElementsByTagName("input")[0].value;

  createDiv.innerHTML = txt;

  parent.getElementsByTagName("input")[0].value = "";



      //parent.style.visibility = "visible";



    }





  }



  function clickEvent(){

  var a = this.getElementsByTagName("div")[0];

  a.classList.toggle("active");

}



function closeEvent(){

  document.getElementById("add").classList.remove("active");

}

button:focus, input:focus{outline: none;}



.calendar{

  margin: calc(50vh - 100px) auto 0 auto;

  width: 260px;

  height: 200px;

  text-align: center;

  transform: scale(2.5);

}



.day{

  position: relative;

  margin: 2px; 

  width: 33px;

  height: 33px;

  font-size: 12px;

  line-height: 30px;

  border-radius: 100%;

  float: left;

  cursor: pointer;

  transition: all .4s ease 0s;

}



.day:hover{

  color: #fff;

  background: #3f64fd;

}





.day-week{

  margin: 0px; 

  width: 37px;

  height: 20px;

  color: #515067;

  font-size: 9px;

  line-height: 20px;

  text-transform: uppercase;

  float: left;

}



.blank{

  margin: 0px ; 

  width: 37px;

  height: 37px;

  float: left;

}



#add{

  padding: 15px;

  position: absolute;

  left: -90px;

  bottom: 50px;

  width: 200px;

  min-height: 50px;

  background: linear-gradient(to top left, #3f64fd, #14c0ff);

  transition: all .2s ease 0s;

  visibility: hidden;

  opacity: 0;

  box-shadow: 0 0 25px rgba(0,0,0,.6);

}



#add.active,

#add:hover{

  bottom: 30px;

  visibility: visible;

  opacity: 1;

  transition: all .4s ease 0s;

  z-index: 999;

}



#add .close{

  position: absolute;

  top: 0px;

  right: 5px;

  color: white;

}



#add input[type="text"]{

  width: 140px;

  padding: 3px 5px;

  color: #fff;

  background: none;

  border: none;

  border-bottom: 1px solid white;

}



#add button{

  height: 50px;

  width: 50px;

  color: #fff;

  line-height: 23px;

  text-align: center;

  background: #3f64fd;

  border: none;

    left: 70%;

    top:53%;

    position: absolute;

  border-radius: 100%;

  cursor: pointer;

}



#eventDiv{

  padding: 5px;

  line-height: 12px;

  text-align: left;

}



.day.active{

  color: black;

  border: 2px solid #3f64fd;

}

<div class="calendar">



<div class="day-week">s</div>

<div class="day-week">m</div>

<div class="day-week">t</div>

<div class="day-week">w</div>

<div class="day-week">t</div>

<div class="day-week">f</div>

<div class="day-week">s</div> 



<div class="blank"></div>

<div class="blank"></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 class="day">8</div>

<div class="day">9</div>

<div class="day">10</div>

<div class="day">11</div>

<div class="day">12</div>

<div class="day">13</div>

<div class="day">14</div>



<div class="day">15</div>

<div class="day">16</div>

<div class="day">17</div>

<div class="day">18</div>

<div class="day">19</div>

<div class="day">20</div>

<div class="day">21</div>



<div class="day">22</div>

<div class="day">23</div>

<div class="day">24</div>

<div class="day">25</div>

<div class="day">26</div>

<div class="day">27</div>

<div class="day">28</div>



<div class="day">29</div>

<div class="day">30</div>

<div class="day">31</div>



</div>

edited Jan 18 at 19:19

Calvin Nunes

3,66021033

asked Jan 18 at 18:57

Bob Higgins

add a comment |

var date = document.getElementsByClassName("day");



for(i = 0; i < 50; i++){



  var event = document.createElement("div");

  event.id = "add";

  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span 

  class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";

  date[i].appendChild(event);



  var btn = document.createElement("button");

  btn.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";

  event.appendChild(btn);  

  btn.addEventListener("click", createEvent);



  date[i].addEventListener("click", clickEvent);



  event.getElementsByClassName("close")[0].addEventListener("click", 

   closeEvent);



 }



 function createEvent(){



  var parent = this.parentElement;

  var parentDay = parent.parentElement;



  if(parent.getElementsByTagName("input")[0].value === "" ){

    alert("type something");

  }

    else{

      var createDiv = document.createElement("div");

  createDiv.id = "eventDiv";

  parent.appendChild(createDiv);



  parentDay.classList.add("active");



  var txt = parent.getElementsByTagName("input")[0].value;

  createDiv.innerHTML = txt;

  parent.getElementsByTagName("input")[0].value = "";



      //parent.style.visibility = "visible";



    }





  }



  function clickEvent(){

  var a = this.getElementsByTagName("div")[0];

  a.classList.toggle("active");

}



function closeEvent(){

  document.getElementById("add").classList.remove("active");

}

button:focus, input:focus{outline: none;}



.calendar{

  margin: calc(50vh - 100px) auto 0 auto;

  width: 260px;

  height: 200px;

  text-align: center;

  transform: scale(2.5);

}



.day{

  position: relative;

  margin: 2px; 

  width: 33px;

  height: 33px;

  font-size: 12px;

  line-height: 30px;

  border-radius: 100%;

  float: left;

  cursor: pointer;

  transition: all .4s ease 0s;

}



.day:hover{

  color: #fff;

  background: #3f64fd;

}





.day-week{

  margin: 0px; 

  width: 37px;

  height: 20px;

  color: #515067;

  font-size: 9px;

  line-height: 20px;

  text-transform: uppercase;

  float: left;

}



.blank{

  margin: 0px ; 

  width: 37px;

  height: 37px;

  float: left;

}



#add{

  padding: 15px;

  position: absolute;

  left: -90px;

  bottom: 50px;

  width: 200px;

  min-height: 50px;

  background: linear-gradient(to top left, #3f64fd, #14c0ff);

  transition: all .2s ease 0s;

  visibility: hidden;

  opacity: 0;

  box-shadow: 0 0 25px rgba(0,0,0,.6);

}



#add.active,

#add:hover{

  bottom: 30px;

  visibility: visible;

  opacity: 1;

  transition: all .4s ease 0s;

  z-index: 999;

}



#add .close{

  position: absolute;

  top: 0px;

  right: 5px;

  color: white;

}



#add input[type="text"]{

  width: 140px;

  padding: 3px 5px;

  color: #fff;

  background: none;

  border: none;

  border-bottom: 1px solid white;

}



#add button{

  height: 50px;

  width: 50px;

  color: #fff;

  line-height: 23px;

  text-align: center;

  background: #3f64fd;

  border: none;

    left: 70%;

    top:53%;

    position: absolute;

  border-radius: 100%;

  cursor: pointer;

}



#eventDiv{

  padding: 5px;

  line-height: 12px;

  text-align: left;

}



.day.active{

  color: black;

  border: 2px solid #3f64fd;

}

<div class="calendar">



<div class="day-week">s</div>

<div class="day-week">m</div>

<div class="day-week">t</div>

<div class="day-week">w</div>

<div class="day-week">t</div>

<div class="day-week">f</div>

<div class="day-week">s</div> 



<div class="blank"></div>

<div class="blank"></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 class="day">8</div>

<div class="day">9</div>

<div class="day">10</div>

<div class="day">11</div>

<div class="day">12</div>

<div class="day">13</div>

<div class="day">14</div>



<div class="day">15</div>

<div class="day">16</div>

<div class="day">17</div>

<div class="day">18</div>

<div class="day">19</div>

<div class="day">20</div>

<div class="day">21</div>



<div class="day">22</div>

<div class="day">23</div>

<div class="day">24</div>

<div class="day">25</div>

<div class="day">26</div>

<div class="day">27</div>

<div class="day">28</div>



<div class="day">29</div>

<div class="day">30</div>

<div class="day">31</div>



</div>

edited Jan 18 at 19:19

Calvin Nunes

3,66021033

asked Jan 18 at 18:57

Bob Higgins

var date = document.getElementsByClassName("day");



for(i = 0; i < 50; i++){



  var event = document.createElement("div");

  event.id = "add";

  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span 

  class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";

  date[i].appendChild(event);



  var btn = document.createElement("button");

  btn.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";

  event.appendChild(btn);  

  btn.addEventListener("click", createEvent);



  date[i].addEventListener("click", clickEvent);



  event.getElementsByClassName("close")[0].addEventListener("click", 

   closeEvent);



 }



 function createEvent(){



  var parent = this.parentElement;

  var parentDay = parent.parentElement;



  if(parent.getElementsByTagName("input")[0].value === "" ){

    alert("type something");

  }

    else{

      var createDiv = document.createElement("div");

  createDiv.id = "eventDiv";

  parent.appendChild(createDiv);



  parentDay.classList.add("active");



  var txt = parent.getElementsByTagName("input")[0].value;

  createDiv.innerHTML = txt;

  parent.getElementsByTagName("input")[0].value = "";



      //parent.style.visibility = "visible";



    }





  }



  function clickEvent(){

  var a = this.getElementsByTagName("div")[0];

  a.classList.toggle("active");

}



function closeEvent(){

  document.getElementById("add").classList.remove("active");

}

button:focus, input:focus{outline: none;}



.calendar{

  margin: calc(50vh - 100px) auto 0 auto;

  width: 260px;

  height: 200px;

  text-align: center;

  transform: scale(2.5);

}



.day{

  position: relative;

  margin: 2px; 

  width: 33px;

  height: 33px;

  font-size: 12px;

  line-height: 30px;

  border-radius: 100%;

  float: left;

  cursor: pointer;

  transition: all .4s ease 0s;

}



.day:hover{

  color: #fff;

  background: #3f64fd;

}





.day-week{

  margin: 0px; 

  width: 37px;

  height: 20px;

  color: #515067;

  font-size: 9px;

  line-height: 20px;

  text-transform: uppercase;

  float: left;

}



.blank{

  margin: 0px ; 

  width: 37px;

  height: 37px;

  float: left;

}



#add{

  padding: 15px;

  position: absolute;

  left: -90px;

  bottom: 50px;

  width: 200px;

  min-height: 50px;

  background: linear-gradient(to top left, #3f64fd, #14c0ff);

  transition: all .2s ease 0s;

  visibility: hidden;

  opacity: 0;

  box-shadow: 0 0 25px rgba(0,0,0,.6);

}



#add.active,

#add:hover{

  bottom: 30px;

  visibility: visible;

  opacity: 1;

  transition: all .4s ease 0s;

  z-index: 999;

}



#add .close{

  position: absolute;

  top: 0px;

  right: 5px;

  color: white;

}



#add input[type="text"]{

  width: 140px;

  padding: 3px 5px;

  color: #fff;

  background: none;

  border: none;

  border-bottom: 1px solid white;

}



#add button{

  height: 50px;

  width: 50px;

  color: #fff;

  line-height: 23px;

  text-align: center;

  background: #3f64fd;

  border: none;

    left: 70%;

    top:53%;

    position: absolute;

  border-radius: 100%;

  cursor: pointer;

}



#eventDiv{

  padding: 5px;

  line-height: 12px;

  text-align: left;

}



.day.active{

  color: black;

  border: 2px solid #3f64fd;

}

<div class="calendar">



<div class="day-week">s</div>

<div class="day-week">m</div>

<div class="day-week">t</div>

<div class="day-week">w</div>

<div class="day-week">t</div>

<div class="day-week">f</div>

<div class="day-week">s</div> 



<div class="blank"></div>

<div class="blank"></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 class="day">8</div>

<div class="day">9</div>

<div class="day">10</div>

<div class="day">11</div>

<div class="day">12</div>

<div class="day">13</div>

<div class="day">14</div>



<div class="day">15</div>

<div class="day">16</div>

<div class="day">17</div>

<div class="day">18</div>

<div class="day">19</div>

<div class="day">20</div>

<div class="day">21</div>



<div class="day">22</div>

<div class="day">23</div>

<div class="day">24</div>

<div class="day">25</div>

<div class="day">26</div>

<div class="day">27</div>

<div class="day">28</div>



<div class="day">29</div>

<div class="day">30</div>

<div class="day">31</div>



</div>

var date = document.getElementsByClassName("day");



for(i = 0; i < 50; i++){



  var event = document.createElement("div");

  event.id = "add";

  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span 

  class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";

  date[i].appendChild(event);



  var btn = document.createElement("button");

  btn.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";

  event.appendChild(btn);  

  btn.addEventListener("click", createEvent);



  date[i].addEventListener("click", clickEvent);



  event.getElementsByClassName("close")[0].addEventListener("click", 

   closeEvent);



 }



 function createEvent(){



  var parent = this.parentElement;

  var parentDay = parent.parentElement;



  if(parent.getElementsByTagName("input")[0].value === "" ){

    alert("type something");

  }

    else{

      var createDiv = document.createElement("div");

  createDiv.id = "eventDiv";

  parent.appendChild(createDiv);



  parentDay.classList.add("active");



  var txt = parent.getElementsByTagName("input")[0].value;

  createDiv.innerHTML = txt;

  parent.getElementsByTagName("input")[0].value = "";



      //parent.style.visibility = "visible";



    }





  }



  function clickEvent(){

  var a = this.getElementsByTagName("div")[0];

  a.classList.toggle("active");

}



function closeEvent(){

  document.getElementById("add").classList.remove("active");

}

button:focus, input:focus{outline: none;}



.calendar{

  margin: calc(50vh - 100px) auto 0 auto;

  width: 260px;

  height: 200px;

  text-align: center;

  transform: scale(2.5);

}



.day{

  position: relative;

  margin: 2px; 

  width: 33px;

  height: 33px;

  font-size: 12px;

  line-height: 30px;

  border-radius: 100%;

  float: left;

  cursor: pointer;

  transition: all .4s ease 0s;

}



.day:hover{

  color: #fff;

  background: #3f64fd;

}





.day-week{

  margin: 0px; 

  width: 37px;

  height: 20px;

  color: #515067;

  font-size: 9px;

  line-height: 20px;

  text-transform: uppercase;

  float: left;

}



.blank{

  margin: 0px ; 

  width: 37px;

  height: 37px;

  float: left;

}



#add{

  padding: 15px;

  position: absolute;

  left: -90px;

  bottom: 50px;

  width: 200px;

  min-height: 50px;

  background: linear-gradient(to top left, #3f64fd, #14c0ff);

  transition: all .2s ease 0s;

  visibility: hidden;

  opacity: 0;

  box-shadow: 0 0 25px rgba(0,0,0,.6);

}



#add.active,

#add:hover{

  bottom: 30px;

  visibility: visible;

  opacity: 1;

  transition: all .4s ease 0s;

  z-index: 999;

}



#add .close{

  position: absolute;

  top: 0px;

  right: 5px;

  color: white;

}



#add input[type="text"]{

  width: 140px;

  padding: 3px 5px;

  color: #fff;

  background: none;

  border: none;

  border-bottom: 1px solid white;

}



#add button{

  height: 50px;

  width: 50px;

  color: #fff;

  line-height: 23px;

  text-align: center;

  background: #3f64fd;

  border: none;

    left: 70%;

    top:53%;

    position: absolute;

  border-radius: 100%;

  cursor: pointer;

}



#eventDiv{

  padding: 5px;

  line-height: 12px;

  text-align: left;

}



.day.active{

  color: black;

  border: 2px solid #3f64fd;

}

<div class="calendar">



<div class="day-week">s</div>

<div class="day-week">m</div>

<div class="day-week">t</div>

<div class="day-week">w</div>

<div class="day-week">t</div>

<div class="day-week">f</div>

<div class="day-week">s</div> 



<div class="blank"></div>

<div class="blank"></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 class="day">8</div>

<div class="day">9</div>

<div class="day">10</div>

<div class="day">11</div>

<div class="day">12</div>

<div class="day">13</div>

<div class="day">14</div>



<div class="day">15</div>

<div class="day">16</div>

<div class="day">17</div>

<div class="day">18</div>

<div class="day">19</div>

<div class="day">20</div>

<div class="day">21</div>



<div class="day">22</div>

<div class="day">23</div>

<div class="day">24</div>

<div class="day">25</div>

<div class="day">26</div>

<div class="day">27</div>

<div class="day">28</div>



<div class="day">29</div>

<div class="day">30</div>

<div class="day">31</div>



</div>

var date = document.getElementsByClassName("day");



for(i = 0; i < 50; i++){



  var event = document.createElement("div");

  event.id = "add";

  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span 

  class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";

  date[i].appendChild(event);



  var btn = document.createElement("button");

  btn.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";

  event.appendChild(btn);  

  btn.addEventListener("click", createEvent);



  date[i].addEventListener("click", clickEvent);



  event.getElementsByClassName("close")[0].addEventListener("click", 

   closeEvent);



 }



 function createEvent(){



  var parent = this.parentElement;

  var parentDay = parent.parentElement;



  if(parent.getElementsByTagName("input")[0].value === "" ){

    alert("type something");

  }

    else{

      var createDiv = document.createElement("div");

  createDiv.id = "eventDiv";

  parent.appendChild(createDiv);



  parentDay.classList.add("active");



  var txt = parent.getElementsByTagName("input")[0].value;

  createDiv.innerHTML = txt;

  parent.getElementsByTagName("input")[0].value = "";



      //parent.style.visibility = "visible";



    }





  }



  function clickEvent(){

  var a = this.getElementsByTagName("div")[0];

  a.classList.toggle("active");

}



function closeEvent(){

  document.getElementById("add").classList.remove("active");

}

button:focus, input:focus{outline: none;}



.calendar{

  margin: calc(50vh - 100px) auto 0 auto;

  width: 260px;

  height: 200px;

  text-align: center;

  transform: scale(2.5);

}



.day{

  position: relative;

  margin: 2px; 

  width: 33px;

  height: 33px;

  font-size: 12px;

  line-height: 30px;

  border-radius: 100%;

  float: left;

  cursor: pointer;

  transition: all .4s ease 0s;

}



.day:hover{

  color: #fff;

  background: #3f64fd;

}





.day-week{

  margin: 0px; 

  width: 37px;

  height: 20px;

  color: #515067;

  font-size: 9px;

  line-height: 20px;

  text-transform: uppercase;

  float: left;

}



.blank{

  margin: 0px ; 

  width: 37px;

  height: 37px;

  float: left;

}



#add{

  padding: 15px;

  position: absolute;

  left: -90px;

  bottom: 50px;

  width: 200px;

  min-height: 50px;

  background: linear-gradient(to top left, #3f64fd, #14c0ff);

  transition: all .2s ease 0s;

  visibility: hidden;

  opacity: 0;

  box-shadow: 0 0 25px rgba(0,0,0,.6);

}



#add.active,

#add:hover{

  bottom: 30px;

  visibility: visible;

  opacity: 1;

  transition: all .4s ease 0s;

  z-index: 999;

}



#add .close{

  position: absolute;

  top: 0px;

  right: 5px;

  color: white;

}



#add input[type="text"]{

  width: 140px;

  padding: 3px 5px;

  color: #fff;

  background: none;

  border: none;

  border-bottom: 1px solid white;

}



#add button{

  height: 50px;

  width: 50px;

  color: #fff;

  line-height: 23px;

  text-align: center;

  background: #3f64fd;

  border: none;

    left: 70%;

    top:53%;

    position: absolute;

  border-radius: 100%;

  cursor: pointer;

}



#eventDiv{

  padding: 5px;

  line-height: 12px;

  text-align: left;

}



.day.active{

  color: black;

  border: 2px solid #3f64fd;

}

<div class="calendar">



<div class="day-week">s</div>

<div class="day-week">m</div>

<div class="day-week">t</div>

<div class="day-week">w</div>

<div class="day-week">t</div>

<div class="day-week">f</div>

<div class="day-week">s</div> 



<div class="blank"></div>

<div class="blank"></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 class="day">8</div>

<div class="day">9</div>

<div class="day">10</div>

<div class="day">11</div>

<div class="day">12</div>

<div class="day">13</div>

<div class="day">14</div>



<div class="day">15</div>

<div class="day">16</div>

<div class="day">17</div>

<div class="day">18</div>

<div class="day">19</div>

<div class="day">20</div>

<div class="day">21</div>



<div class="day">22</div>

<div class="day">23</div>

<div class="day">24</div>

<div class="day">25</div>

<div class="day">26</div>

<div class="day">27</div>

<div class="day">28</div>



<div class="day">29</div>

<div class="day">30</div>

<div class="day">31</div>



</div>

javascript html css

edited Jan 18 at 19:19

Calvin Nunes

3,66021033

asked Jan 18 at 18:57

Bob Higgins

edited Jan 18 at 19:19

Calvin Nunes

3,66021033

asked Jan 18 at 18:57

Bob Higgins

edited Jan 18 at 19:19

Calvin Nunes

3,66021033

edited Jan 18 at 19:19

Calvin Nunes

3,66021033

edited Jan 18 at 19:19

Calvin Nunes

3,66021033

asked Jan 18 at 18:57

Bob Higgins

asked Jan 18 at 18:57

Bob Higgins

asked Jan 18 at 18:57

Bob Higgins

add a comment |

3 Answers
3

active

oldest

votes

Instead of doing that really complicated thing why you should do something like:

<input type="date">

answered Jan 18 at 19:07

Jaime Argila

add a comment |

I don't understand what are you trying to accomplish!
It's closing when you hit X or + BUT the code is really confusing...

It's creating a div element with id="add" around 50 times?!

for(i = 0; i < 50; i++){



  var event = document.createElement("div");

  event.id = "add"; // should make this event.className = 'add';

  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";

  date[i].appendChild(event);

DO NOT FORGET to change CSS (#add -> .add) and closing event (getElementById -> getElementsByClassName)

answered Jan 18 at 19:45

James De Souza

153110

I am trying to make it so that the popup closes when you hit X or + and not have to hover away from it. Thanks for the heads up on the css!

– Bob Higgins
Jan 18 at 19:51

add a comment |

During the closeEvent function, you're removing the 'active' class, but the element doesn't have that class. So it's not closing the popup until you've moused away from the box itself.

I would remove the closeEvent function and the reference to it on line 18 of your JS, and would change the clickEvent() function to something like this:

function clickEvent(){

var a = this.getElementsByTagName("div")[0];

    a.classList.toggle("active");  

    if (!a.classList.contains('active')) {

        var parentOfA = a.parentNode;

        parentOfA.removeChild(a);

    }

}

That way you're removing the element from the document entirely, rather than just changing the class on it.

edited Jan 18 at 21:05

answered Jan 18 at 19:33

kathy

142

Where should I add that class onto to fix it

– Bob Higgins
Jan 18 at 19:34

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54259941%2fhow-can-i-make-this-calendar-close-correctly%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Instead of doing that really complicated thing why you should do something like:

<input type="date">

answered Jan 18 at 19:07

Jaime Argila

add a comment |

Instead of doing that really complicated thing why you should do something like:

<input type="date">

answered Jan 18 at 19:07

Jaime Argila

add a comment |

Instead of doing that really complicated thing why you should do something like:

<input type="date">

answered Jan 18 at 19:07

Jaime Argila

Instead of doing that really complicated thing why you should do something like:

<input type="date">

<input type="date">

<input type="date">

answered Jan 18 at 19:07

Jaime Argila

answered Jan 18 at 19:07

Jaime Argila

answered Jan 18 at 19:07

Jaime Argila

answered Jan 18 at 19:07

Jaime Argila

add a comment |

I don't understand what are you trying to accomplish!
It's closing when you hit X or + BUT the code is really confusing...

It's creating a div element with id="add" around 50 times?!

for(i = 0; i < 50; i++){



  var event = document.createElement("div");

  event.id = "add"; // should make this event.className = 'add';

  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";

  date[i].appendChild(event);

DO NOT FORGET to change CSS (#add -> .add) and closing event (getElementById -> getElementsByClassName)

answered Jan 18 at 19:45

James De Souza

153110

I am trying to make it so that the popup closes when you hit X or + and not have to hover away from it. Thanks for the heads up on the css!

– Bob Higgins
Jan 18 at 19:51

add a comment |

I don't understand what are you trying to accomplish!
It's closing when you hit X or + BUT the code is really confusing...

It's creating a div element with id="add" around 50 times?!

for(i = 0; i < 50; i++){



  var event = document.createElement("div");

  event.id = "add"; // should make this event.className = 'add';

  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";

  date[i].appendChild(event);

DO NOT FORGET to change CSS (#add -> .add) and closing event (getElementById -> getElementsByClassName)

answered Jan 18 at 19:45

James De Souza

153110

I am trying to make it so that the popup closes when you hit X or + and not have to hover away from it. Thanks for the heads up on the css!

– Bob Higgins
Jan 18 at 19:51

add a comment |

I don't understand what are you trying to accomplish!
It's closing when you hit X or + BUT the code is really confusing...

It's creating a div element with id="add" around 50 times?!

for(i = 0; i < 50; i++){



  var event = document.createElement("div");

  event.id = "add"; // should make this event.className = 'add';

  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";

  date[i].appendChild(event);

DO NOT FORGET to change CSS (#add -> .add) and closing event (getElementById -> getElementsByClassName)

answered Jan 18 at 19:45

James De Souza

153110

I don't understand what are you trying to accomplish!
It's closing when you hit X or + BUT the code is really confusing...

It's creating a div element with id="add" around 50 times?!

for(i = 0; i < 50; i++){



  var event = document.createElement("div");

  event.id = "add"; // should make this event.className = 'add';

  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";

  date[i].appendChild(event);

DO NOT FORGET to change CSS (#add -> .add) and closing event (getElementById -> getElementsByClassName)

answered Jan 18 at 19:45

James De Souza

153110

answered Jan 18 at 19:45

James De Souza

153110

answered Jan 18 at 19:45

James De Souza

153110

answered Jan 18 at 19:45

James De Souza

153110

I am trying to make it so that the popup closes when you hit X or + and not have to hover away from it. Thanks for the heads up on the css!

– Bob Higgins
Jan 18 at 19:51

add a comment |

I am trying to make it so that the popup closes when you hit X or + and not have to hover away from it. Thanks for the heads up on the css!

– Bob Higgins
Jan 18 at 19:51

I am trying to make it so that the popup closes when you hit X or + and not have to hover away from it. Thanks for the heads up on the css!

– Bob Higgins
Jan 18 at 19:51

add a comment |

During the closeEvent function, you're removing the 'active' class, but the element doesn't have that class. So it's not closing the popup until you've moused away from the box itself.

I would remove the closeEvent function and the reference to it on line 18 of your JS, and would change the clickEvent() function to something like this:

function clickEvent(){

var a = this.getElementsByTagName("div")[0];

    a.classList.toggle("active");  

    if (!a.classList.contains('active')) {

        var parentOfA = a.parentNode;

        parentOfA.removeChild(a);

    }

}

That way you're removing the element from the document entirely, rather than just changing the class on it.

edited Jan 18 at 21:05

answered Jan 18 at 19:33

kathy

142

Where should I add that class onto to fix it

– Bob Higgins
Jan 18 at 19:34

add a comment |

During the closeEvent function, you're removing the 'active' class, but the element doesn't have that class. So it's not closing the popup until you've moused away from the box itself.

I would remove the closeEvent function and the reference to it on line 18 of your JS, and would change the clickEvent() function to something like this:

function clickEvent(){

var a = this.getElementsByTagName("div")[0];

    a.classList.toggle("active");  

    if (!a.classList.contains('active')) {

        var parentOfA = a.parentNode;

        parentOfA.removeChild(a);

    }

}

That way you're removing the element from the document entirely, rather than just changing the class on it.

edited Jan 18 at 21:05

answered Jan 18 at 19:33

kathy

142

Where should I add that class onto to fix it

– Bob Higgins
Jan 18 at 19:34

add a comment |

During the closeEvent function, you're removing the 'active' class, but the element doesn't have that class. So it's not closing the popup until you've moused away from the box itself.

I would remove the closeEvent function and the reference to it on line 18 of your JS, and would change the clickEvent() function to something like this:

function clickEvent(){

var a = this.getElementsByTagName("div")[0];

    a.classList.toggle("active");  

    if (!a.classList.contains('active')) {

        var parentOfA = a.parentNode;

        parentOfA.removeChild(a);

    }

}

That way you're removing the element from the document entirely, rather than just changing the class on it.

edited Jan 18 at 21:05

answered Jan 18 at 19:33

kathy

142

During the closeEvent function, you're removing the 'active' class, but the element doesn't have that class. So it's not closing the popup until you've moused away from the box itself.

I would remove the closeEvent function and the reference to it on line 18 of your JS, and would change the clickEvent() function to something like this:

function clickEvent(){

var a = this.getElementsByTagName("div")[0];

    a.classList.toggle("active");  

    if (!a.classList.contains('active')) {

        var parentOfA = a.parentNode;

        parentOfA.removeChild(a);

    }

}

That way you're removing the element from the document entirely, rather than just changing the class on it.

edited Jan 18 at 21:05

answered Jan 18 at 19:33

kathy

142

edited Jan 18 at 21:05

answered Jan 18 at 19:33

kathy

142

answered Jan 18 at 19:33

kathy

142

answered Jan 18 at 19:33

kathy

142

Where should I add that class onto to fix it

– Bob Higgins
Jan 18 at 19:34

add a comment |

Where should I add that class onto to fix it

– Bob Higgins
Jan 18 at 19:34

Where should I add that class onto to fix it

– Bob Higgins
Jan 18 at 19:34

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku