Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- CALENDAR DOORS -->

<section class="calendar-grid">

  <div class="title">
    <div class="title-lines-container">
      <p class="title-line1">Brighton&nbsp;&&nbsp;Hove</p>
      <p class="title-line2">Advent Calendar<br><span class="bigger-text">2018!</span></p>
    </div><!-- closes title-lines-container -->
    <p class="title-intro">A festive event each day in Brighton & Hove. Click a door to open it, click again for event details. Check back daily to see what's on!</p>
  </div><!-- closes title -->

  <div class="day1">
    <div class="door">
      <div class="front">1</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day2">
    <div class="door">
      <div class="front">2</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day3">
    <div class="door">
      <div class="front">3</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day4">
    <div class="door">
      <div class="front">4</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day5">
    <div class="door">
      <div class="front">5</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day6">
    <div class="door">
      <div class="front">6</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day7">
    <div class="door">
      <div class="front">7</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day8">
    <div class="door">
      <div class="front">8</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day9">
    <div class="door">
      <div class="front">9</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day10">
    <div class="door">
      <div class="front">10</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day11">
    <div class="door">
      <div class="front">11</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day12">
    <div class="door">
      <div class="front">12</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day13">
    <div class="door">
      <div class="front">13</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day14">
    <div class="door">
      <div class="front">14</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day15">
    <div class="door">
      <div class="front">15</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day16">
    <div class="door">
      <div class="front">16</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day17">
    <div class="door">
      <div class="front">17</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day18">
    <div class="door">
      <div class="front">18</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day19">
    <div class="door">
      <div class="front">19</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day20">
    <div class="door">
      <div class="front">20</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day21">
    <div class="door">
      <div class="front">21</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day22">
    <div class="door">
      <div class="front">22</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day23">
    <div class="door">
      <div class="front">23</div>
      <div class="back"></div>
    </div>
  </div>

  <div class="day24">
    <div class="door">
      <div class="front">24</div>
      <div class="back"></div>
    </div>
  </div>

</section><!-- closes calendar-grid -->

<!-- MODAL POPUP BOX -->

<div id="modalPopup" class="modal">

  <!-- MODAL CONTENT -->
  
  <div class="modalContent">
    
    <span class="close">&times;</span>
    <h3 class="dailyDate"></h3>
    <h2 class="dailyTitle"></h2>
    <p class="dailyContent"></p>
    <p>
      <span class="highlight">When:</span> <span class="dailyTime"></span><br>
      <span class="highlight">Where:</span> <span class="dailyLocation"></span> 
    </p>
    <p>
      <span class="highlight">Price:</span> <span class="dailyPrice"></span>
    </p>
    <a class="dailyLink" target="_blank"></a>
    
  </div><!-- closes modalContent -->

</div><!-- closes modalPopup -->

<footer>
  <p>Anwen Williams 2018</p>
</footer>
              
            
!

CSS

              
                /* === SCSS COLOUR VARIABLES === */

$backgroundteal: #266c8e;
$textteal: #0a5656;
$borderpink: #fe52ff;
$textpink: #f50cf7;
$darkslate: #344f63;
$doorback: #135270;
$titlebackground: #ffffff;
$numbers: #ffffff;
$linkbuttonhover: #2883af;

/* SCSS RESPONSIVE TITLE TYPE @MIXIN */

/// Viewport sized typography with minimum and maximum values
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback),
///                 minumum of 35px and maximum of 150px
/// @include responsive-font(5vw, 35px, 150px, 50px);

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}

/* =============================== */

body {
  background-color: $backgroundteal;
  background-image: url("https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/brighton-images/Brighton-Pavilion-Illustration_AnwenW_mobile_v2.png"), url("https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/brighton-images/snow.png");
  background-position: center center;
  background-repeat: no-repeat, repeat;
  background-size: 120vw;
  font-family: 'Montserrat', Verdana;
}

/* === MOBILE-FIRST GRID LAYOUT === */

.calendar-grid {
  display: grid;
  width: 96%;
  max-width: 900px;
  margin: 2% auto;

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 15px;

  grid-template-areas:    "title    title     title"
                          "day23    day20     day12"
                          "day2     day14     day4"
                          "day5     day22     day16"
                          "day1     day7      day9"
                          "day10    day11     day18"
                          "day13    day3      day15"
                          "day6     day17     day8"
                          "day19    day24     day21";
}

/* MEDIA QUERY -- DESKTOP LAYOUT */

@media only screen and (min-width: 520px) {

  body {
    background-image: url("https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/brighton-images/Brighton-Pavilion-Illustration_AnwenW_full_v2.png"), url("https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/brighton-images/snow.png");
    background-position: center top;
    background-repeat: no-repeat, repeat;
    background-size: 125vw;
  }

  .calendar-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:    "title      title     title     day2      day7      day8"
                            "title      title     title     day4      day11     day12"
                            "title      title     title     day19     day9      day13"
                            "day6       day1      day24     day24     day21     day20"
                            "day17      day18     day24     day24     day5      day22"
                            "day3       day23     day16     day14     day10     day15";
  }
}

/* === INDIVIDUAL GRID ITEMS ===  */

.title {
  grid-area: title;
  text-align: center;
  color: $textteal;
}

.title-lines-container {
  background: $titlebackground;
  border-radius: 30px 0;
  border: 5px solid $borderpink;
  transform: rotate(2deg);
  margin: 1.5% 0 0 0;
}
.title-line1 {
  font-family: 'Oleo Script Swash Caps', Courier;
  @include responsive-font(4vw, 30px, 60px, 45px);
  margin: 0;
  padding: 10px 15px 0;
}
.title-line2 {
  font-family: 'BioRhyme', Courier;
  @include responsive-font(3vw, 21px, 44px, 35px);
  line-height: 1.1em;
  margin: 0;
  padding: 0 15px 15px;
}
.bigger-text {
  @include responsive-font(3.5vw, 26px, 50px, 40px);
}
.title-intro {
  background: $titlebackground;
  padding: 20px 25px;
  border: 1px solid #0a5656;
  border-radius: 0 30px;
  line-height: 1.5em;
  transform: rotate(-1.5deg);
  margin: 5% 2% 2%;
}

.day1 {
  grid-area: day1;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/1-beachhut.png);
  }
}
.day2 {
  grid-area: day2;
 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/2-openhouses.png);
  }
}
.day3 {
  grid-area: day3;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/3-choir.png);
  }
}
.day4 {
  grid-area: day4;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/4-seagull.png);
  }
}
.day5 {
  grid-area: day5;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/5-wine.png);
  }
}
.day6 {
  grid-area: day6;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/6-guitar.png);
  }
}
.day7 {
  grid-area: day7;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/7-gifts.png);
  }
}
.day8 {
  grid-area: day8;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/8-santadash.png);
  }
}
.day9 {
  grid-area: day9;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/9-pavilion.png);
  }
}
.day10 {
  grid-area: day10;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/10-camel.png);
  }
}
.day11 {
  grid-area: day11;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/11-grimmtales.png);
  }
}
.day12 {
  grid-area: day12;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/12-ghost.png);
  }
}
.day13 {
  grid-area: day13;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/13-snowman.png);
  }
}
.day14 {
  grid-area: day14;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/14-xmastree.png);
  }
}
.day15 {
  grid-area: day15;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/15-snowflake.png);
  }
}
.day16 {
  grid-area: day16;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/16-fairy.png);
  }
}
.day17 {
  grid-area: day17;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/17-skates.png);
  }
}
.day18 {
  grid-area: day18;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/18-bells.png);
  }
}
.day19 {
  grid-area: day19;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/19-reindeer.png);
  }
}
.day20 {
  grid-area: day20;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/20-candle.png);
  }
}
.day21 {
  grid-area: day21;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/21-lantern.png);
  }
}
.day22 {
  grid-area: day22;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/22-glitterball.png);
  }
}
.day23 {
  grid-area: day23;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/23-viking.png);
  }
}
.day24 {
  grid-area: day24;
  .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/24-dove.png);
  }
}

/* ===  DOOR STYLES ===  */

.calendar-grid input {
  display: none;
}

.door {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 300ms;
  border: 1.5px dashed $darkslate;
  border-radius: 10px;
  cursor: pointer;
  min-height: 110px;
  font-family: 'BioRhyme', serif;
  font-size: 58px;
  color: $numbers;
  &.no-hover {
   border-color: $darkslate;
  }
  &:not(.no-hover):hover {
    border: 1.5px dashed $numbers;
  }
}

.door div {
   position: absolute;
   height: 100%;
   width: 100%;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .door .front {
   background: rgba(29, 101, 135, 0.1);
   text-shadow:  2px 2px 0 $darkslate,
                 2px -2px 0 $darkslate,
                 -2px 2px 0 $darkslate,
                 -2px -2px 0 $darkslate,
                 2px 0px 0 $darkslate,
                 0px 2px 0 $darkslate,
                 -2px 0px 0 $darkslate,
                 0px -2px 0 $darkslate;
 }

.door .back {
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
   background-color: $doorback;
   transform: rotateY(180deg);
}

.open {
  transform: rotateY(180deg);
}

footer {
  height: 50px;
  padding: 15px 15px 10px;
  text-align: right;
  p {
    margin-top: 25px;
    color: #222222;
  }
}

/* ===  MODAL (BACKGROUND) ===  */

.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* === MODAL CONTENT + BOX ===  */

.modalContent {
  background-color: $titlebackground;
  margin: 15% auto;
  padding: 20px 20px 30px;
  border: 4px solid $borderpink;
  border-radius: 6px;
  width: 76%;
  max-width: 600px;
  min-height: 200px;
  letter-spacing: 0.5px;
  line-height: 1.4em;
  p {
    font-size: 0.9em;
  }
}

.dailyTitle {
  font-family: 'BioRhyme', Courier;
  color: $doorback;
}

.dailyDate {
  color: $textpink;
}

.highlight {
  font-weight: bold;
  color: $textpink;
}

.dailyLink {
  background-color: $doorback;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: $numbers;
  font-weight: bold;
  line-height: 2.3em;
  &:hover {
    background-color: $linkbuttonhover;
  }
}

/* ===  MODAL CLOSE BUTTON (X) ===  */

.close {
  color: #aaa;
  float: right;
  font-size: 48px;
  line-height: 26px;
  font-weight: bold;
  &:hover,
  &:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
}

@media only screen and (max-width: 519px) {
  .title-line1 {
    @include responsive-font(10vw, 34px, 52px, 38px);
  }
  .title-line2 {
    @include responsive-font(8vw, 27px, 48px, 35px);
  }
  .bigger-text {
    @include responsive-font(10vw, 32px, 52px, 40px);
  }
  .title-intro {
    padding: 18px 18px;
  }
}

@media only screen and (max-width: 690px) {
  .door {
    font-size: 46px;
  }
}

              
            
!

JS

              
                // ===  Want each of 24 calendar doors to open only if number matches today's date or earlier:

// var date = new Date();
// var todaysDate = date.getDate();

// === To test/view other dates, set var todaysDate to a fixed number to pretend that's today's date:

var todaysDate = 24;

// ===  Get the modal popup box + content + close span

var modal = document.getElementById('modalPopup');

var modalDailyDate = document.querySelector('.dailyDate');
var modalDailyTitle = document.querySelector('.dailyTitle');
var modalDailyContent = document.querySelector('.dailyContent');
var modalDailyTime = document.querySelector('.dailyTime');
var modalDailyLocation = document.querySelector('.dailyLocation');
var modalDailyPrice = document.querySelector('.dailyPrice');
var modalDailyLink = document.querySelector('.dailyLink');
var spanClose = document.querySelector('.close');

// ===  Array of popup messages for each door

var moreInfo = [
                  { date: "1st December",
                    title: "BEYOND Beach Hut Advent Calendar",
                    content: "For this popular community arts event, a different Hove beach hut opens its doors each evening to display a Nativity-themed art installation, reminding people of the roots of Advent.",
                    time: "1st to 24th December, 5.30 – 6.30pm.",
                    location: "See website for map and details",
                    price: "Free",
                    linkUrl: "http://www.beyondchurch.co.uk/",
                    linkText: "Visit website"
                  },

                  { date: "2nd December",
                    title: "Artists' Open Houses",
                    content: "Christmas Open Houses are back, with work from local artists, designers, and makers on sale in homes around the city. Pop along for mulled wine, mince pies and one-of-a-kind gifts.",
                    time: "Weekends until 9th December",
                    location: "See website for map and details",
                    price: "Free entry (until you start shopping...)",
                    linkUrl: "https://aoh.org.uk/",
                    linkText: "Visit website"
                  },

                  { date: "3rd December",
                    title: "Brighton & Hove Schools Concert",
                    content: "A choir of over 1200 voices from the city's Primary, Junior and Special Schools will come together to sing seasonal and specially written songs. The choir is joined by Brighton & Hove Youth Wind Orchestra and Brighton & Hove Youth Big Band.",
                    time: "7.00pm – 8.30pm",
                    location: "Brighton Centre",
                    price: "£4.50 — £13.00",
                    linkUrl: "https://brightoncentre.co.uk/whats-on/2018/brighton-hove-schools-concert/",
                    linkText: "Visit website"
                  },

                  { date: "4th December",
                    title: "Brighton & Hove Albion vs Crystal Palace",
                    content: "Cheer on the Seagulls!",
                    time: "Kick off 7.45pm",
                    location: "AMEX Stadium",
                    price: "Tickets from £30.00 (concessions available)",
                    linkUrl: "https://www.brightonandhovealbion.com/matches/fixtures/first-team/2018192/december/brighton-and-hove-albion-vs-crystal-palace-on-04-dec-18/",
                    linkText: "Visit website"
                  },

                  { date: "5th December",
                    title: "Lion & Lobster Christmas Market",
                    content: "A festive market to kick off the countdown to Christmas. Gifts, food, mulled wine, craft beer and artists all wrapped under one roof.",
                    time: "5.00pm - 11.00pm",
                    location: "Lion & Lobster, Sillwood Street",
                    price: "Free entry",
                    linkUrl: "https://www.thelionandlobster.co.uk/event/christmas-market-opening-party/",
                    linkText: "Visit website"
                  },

                  { date: "6th December",
                    title: "SPECTRUM",
                    content: "SPECTRUM is a Brighton Dome music project dedicated to nurturing and cultivating Brighton's vibrant music scene.<br>Winter special at Brighton Museum. Enjoy a range of unplugged performances in the exhibition rooms and listen to local acts in a way that you won't have experienced before.",
                    time: "8.00pm",
                    location: "Brighton Museum",
                    price: "£6.00 advance/ £8.00 on the door",
                    linkUrl: "https://brightondome.org/event/18868/spectrum/",
                    linkText: "Visit website"
                  },

                  { date: "7th December",
                    title: "New England House Artists' Open Studios",
                    content: "35+ artists and makers open the doors to their studios in New England House for 3 days. Enjoy an alternative to high street Christmas shopping and buy unique gifts directly from the makers.",
                    time: "Friday 7th December, 11.00am – 8.00pm<br>Saturday 8th December, 11.00am – 6.00pm<br>Sunday 9th December, 11.00am – 6.00pm",
                    location: "New England House, New England Street",
                    price: "Free entry",
                    linkUrl: "http://nehopenstudios.org.uk/",
                    linkText: "Visit website"
                  },

                  { date: "8th December",
                    title: "Santa Dash",
                    content: "A crowd of Santas running in aid of Rockinghorse children's charity.",
                    time: "10.30am",
                    location: "Hove Lawns near the Peace Statue",
                    price: "Free/ Make a donation",
                    linkUrl: "http://www.santadashbrighton.co.uk/",
                    linkText: "Visit website"
                  },

                  { date: "9th December",
                    title: "Christmas at the Royal Pavilion",
                    content: "Experience the Royal Pavilion transformed with festive decorations and glittering trees, and a replica of Queen Victoria's sleigh awaits you, where you can have Christmas photos!",
                    time: "Drop-in craft activities take place on 8th & 9th, 15th & 16th, 21st – 23rd December | 11.00am – 5.00pm (last admission 4.30pm)",
                    location: "Royal Pavilion",
                    price: "Included in Royal Pavilion admission (half price for Brighton & Hove residents with proof of address)",
                    linkUrl: "https://brightonmuseums.org.uk/royalpavilion/whattosee/christmas-at-the-royal-pavilion/",
                    linkText: "Visit website"
                  },

                  { date: "10th December",
                    title: "Blue Camel Club Christmas Party",
                    content: "THE club night for learning disabled people and their friends. If you like to party, dance to bands, watch films, hang out with friends and see performance, then the Blue Camel Club is for you! With live music and DJ sets.",
                    time: "7.00pm – 10.00pm",
                    location: "The Old Market",
                    price: "Price: £5.00 (£1.00 carers)",
                    linkUrl: "https://www.carousel.org.uk/events/blue-camel-club-8/",
                    linkText: "Visit Carousel website"
                  },

                  { date: "11th December",
                    title: "Grimm Tales",
                    content: "Folk classics Little Red Riding Hood, Cinderella, Hansel and Gretel, Snow White, Rumpelstiltskin and others from the Brothers Grimm are presented in a fresh adaptation by acclaimed poet Carol Ann Duffy.<br>A beguiling and vigorous stage dramatization which takes a journey into the bright, warped world of a child's imagination. A feast of storytelling magic suitable for children and adults alike.",
                    time: "Tuesday 11th – Saturday 15th at 7.45pm, plus Saturday 15th at 2.30pm",
                    location: "Brighton Little Theatre, Clarence Gardens",
                    price: "£10.00 adults/ £8.50 under 14s",
                    linkUrl: "https://www.brightonlittletheatre.com/grimmtales",
                    linkText: "Visit website"
                  },

                  { date: "12th December",
                    title: "Christmas Ghost Stories",
                    content: "Never mind the tinsel and the presents, the turkey and the mistletoe. Take time out to celebrate the festive season the Victorian way — gathered together for spooky stories and tales of terror!",
                    time: "7.30pm – 9.30pm",
                    location: "The Southern Belle, Waterloo Street",
                    price: "See listings",
                    linkUrl: "https://www.facebook.com/events/290706548450860/",
                    linkText: "Visit Facebook event"
                  },

                  { date: "13th December",
                    title: "The Snowman exhibition",
                    content: "Nothing says Christmas like The Snowman! To celebrate the 40th anniversary of Raymond Briggs' much loved classic picture book, discover the magic in this exhibition of the original illustrations.",
                    time: "Until 6th January 2019",
                    location: "Brighton Museum",
                    price: "Free with Brighton Museum admission (free to Brighton & Hove residents with proof of address)",
                    linkUrl: "https://brightonmuseums.org.uk/brighton/exhibitions-displays/the-snowman/",
                    linkText: "Visit website"
                  },

                  { date: "14th December",
                    title: "Hove for the Holidays: Evergreen",
                    content: "Resound and Rebelles presents two evenings of fresh and festive music in the wonderful acoustic of St Andrew's Church. Experience rare winter songs from around the world, lush evergreen favourites and musical gems.",
                    time: "Friday 14th and Saturday 15th, 7.30 pm",
                    location: "St Andrew's Church, Waterloo Street",
                    price: "£14.00",
                    linkUrl: "https://www.ticketsource.co.uk/whats-on/hove/st-andrews-church/hove-for-the-holidays-evergreen",
                    linkText: "Visit TicketSource website"
                  },

                  { date: "15th December",
                    title: "Festive events at Jubilee Library",
                    content: "Winter Wonderfest: Poet Kay Walton will be hosting this poetry event welcoming young poets from local primary schools to perform their own poetry.<br>Plus Hullabaloo Quire will be singing some beautifully wintery yuletide songs. Relax, switch off from the hustle and bustle and enjoy!",
                    time: "From 1.00pm",
                    location: "Jubilee Library",
                    price: "Free",
                    linkUrl: "https://www.brighton-hove.gov.uk/content/leisure-and-libraries/libraries/jubilee-library",
                    linkText: "Visit library's website"
                  },

                  { date: "16th December",
                    title: "Peter Pan",
                    content: "JM Barrie's classic Peter Pan comes to life this Christmas with a sprinkle of fairy dust and plenty of surprises. Peter and Tinkerbell invite you to the magical world of Neverland, a place where lost boys run riot, pirates are in fine voice, crocodiles go tick-tock, and the villain has a very shiny hook!<br>Suitable for all ages and is a perfect 'first-time' theatrical experience.",
                    time: "Until 31st December; see website for performance dates and times",
                    location: "Attenborough Centre for the Creative Arts, University of Sussex, Falmer",
                    price: "From £15.00",
                    linkUrl: "https://www.attenboroughcentre.com/index.php?p=events/1991/peter-pan/",
                    linkText: "Visit website"
                  },

                  { date: "17th December",
                    title: "Royal Pavilion Ice Rink",
                    content: "Ice skating at the Royal Pavilion Ice Rink, open until 13th January 2019 — one of the most beautiful spots to go ice skating!",
                    time: "Open 10.00am – 10.15pm<br>(Tip: Go weekdays before 4.15pm, it’s cheaper!)",
                    location: "Pavilion Gardens",
                    price: "From £10.00 (concessions available)",
                    linkUrl: "https://royalpavilionicerink.co.uk/",
                    linkText: "Visit website"
                  },

                  { date: "18th December",
                    title: "Lion & Lobster Gay Men's Chorus",
                    content: "Partnering up with Gay Men's Chorus who will sing their hearts out, as part of the pub's festive events season.",
                    time: "8.00pm",
                    location: "Lion & Lobster, Sillwood Street",
                    price: "Free entry (just the drinks to pay for!)",
                    linkUrl: "https://www.visitbrighton.com/whats-on/the-lion-and-lobster-gay-mens-chorus-p1657971",
                    linkText: "Visit website"
                  },

                  { date: "19th December",
                    title: "The Animals and Children Took to the Streets",
                    content: "Like a giant novel burst to life. Seamlessly synchronising live music, performance and storytelling with stunning films and animation, this is the wickedly twisted international hit tale from the multiple award-winning 1927, the company behind Golem and The Magic Flute. Highly recommended!",
                    time: "Until 12th January 2019; see website for performance dates and times",
                    location: "The Old Market",
                    price: "£18.00 – £29.50 (concessions available)",
                    linkUrl: "http://theoldmarket.com/shows/animals-children-took-streets/",
                    linkText: "Visit website"
                  },

                  { date: "20th December",
                    title: "Carols by Candlelight",
                    content: "A carol service for everyone, featuring NHS Community Choir Brighton and The Choir of St George's Church.<br>During the service there will be an opportunity to hang a star on the Christmas Tree in memory of a loved one.",
                    time: "From 5.45pm for drinks and mince pies, carol service starts 6.30pm",
                    location: "St George's Church, Kemp Town",
                    price: "Free/ Donation to Friends of Brighton & Hove Hospitals",
                    linkUrl: "https://www.brightonhospitalfriends.org.uk/support-us/fundraising/events/",
                    linkText: "Visit website"
                  },

                  { date: "21st December",
                    title: "Burning the Clocks",
                    content: "One of Brighton's best-loved public events, this year's theme is Remembrance. The lantern parade passes through the city centre, ending on the seafront with a dance performance and spectacular firework display.",
                    time: "Starts 6.30pm",
                    location: "Parade kicks off from New Road, ending on Madeira Drive",
                    price: "Free/ Make a donation",
                    linkUrl: "https://www.crowdfunder.co.uk/burning-the-clocks-2018",
                    linkText: "Visit Crowdfunder website"
                  },

                  { date: "22nd December",
                    title: "Retro Xmas at Funky Fish",
                    content: "The best tunes and Christmas hits of the 60s, 70s and 80s, including Funk, Soul, Motown, Rock'n'Roll, Rock Pop, Old School RnB, Jazzy, Disco, Britpop, Folk-pop and Northern Soul.",
                    time: "9.00pm – 2.00am",
                    location: "Funky Fish Club, New Madeira Hotel, Marine Parade",
                    price: "Free entry",
                    linkUrl: "http://www.funkyfishclub.co.uk/",
                    linkText: "Visit website"
                  },

                  { date: "23rd December",
                    title: "Thor's Tipi Bar",
                    content: "Take a break from your Christmas preparations and check out Thor's Viking-inspired tipi bar, with real log fire, sweet treats, hot cocoa, glühwein, ale, fizz and more. Children welcome. Skol!",
                    time: "Until 31st December, 12.00 to 10.00pm",
                    location: "Jubilee Square, Jubilee Street",
                    price: "Free entry",
                    linkUrl: "https://www.thorstipi.com/locations/winter/brighton",
                    linkText: "Visit website"
                  },

                  { date: "24th December | Christmas Eve!",
                    title: "Jack & The Beanstalk — Pantomime and Christmas Fayre",
                    content: "Christmas isn't Christmas without a panto! This new production of Jack & The Beanstalk promises a West End cast, lavish costumes, dazzling special effects... and Daisy the tap-dancing cow! Entrance to the Christmas Fayre is free for all panto ticket holders.<br><strong>Merry Christmas!</strong>",
                    time: "Until 29th December; see website for performance dates and times",
                    location: "Hilton Brighton Metropole",
                    price: "From £20.00",
                    linkUrl: "https://www.jackinbrighton.com/",
                    linkText: "Visit website"
                  },

               ];

// === no hover action if higher than today's date (add class 'no-hover') 

function noHover() {

  var doorNumber = this.innerHTML;
  var calendarNum = parseInt(doorNumber, 10);

  if (calendarNum > todaysDate) {
    this.parentNode.classList.add("no-hover");
  }

}

// === door-front: hover + click events 

var doorFronts = document.querySelectorAll(".front");

for (var i = 0; i < doorFronts.length; i++) {
  doorFronts[i].addEventListener("mouseover", noHover);
  doorFronts[i].addEventListener("click", clickFront);
}

// === door-back: click event 

var doorBacks = document.querySelectorAll(".back");

for (var i = 0; i < doorBacks.length; i++) {
  doorBacks[i].addEventListener("click", clickBack);
}

// === door-front: click toggles class 'open'

function clickFront() {

  var numberClicked = this.innerHTML;
  var calendarNum = parseInt(numberClicked, 10);
  // console.log(numberClicked);
  // console.log(calendarNum);

  if (calendarNum <= todaysDate) {
   this.parentNode.classList.toggle("open");
  }

};

// === door-back: click opens the modal + displays corresponding content 

function clickBack() {

  // find number of corresponding door-front (as back has no innerHTML of its own) //
  var calendarNum = this.previousElementSibling.innerHTML;
  // -1 from door-front to get correct message array index //
  var calendarNumIndex = calendarNum - 1;

  // change modal css to display it //
  modal.style.display = "block";

  // put message from array into modal content //

  modalDailyDate.innerHTML = moreInfo[calendarNumIndex].date;
  modalDailyTitle.innerHTML = moreInfo[calendarNumIndex].title;
  modalDailyContent.innerHTML = moreInfo[calendarNumIndex].content;
  modalDailyTime.innerHTML = moreInfo[calendarNumIndex].time;
  modalDailyLocation.innerHTML = moreInfo[calendarNumIndex].location;
  modalDailyPrice.innerHTML = moreInfo[calendarNumIndex].price;
  modalDailyLink.href = moreInfo[calendarNumIndex].linkUrl;
  modalDailyLink.innerHTML = moreInfo[calendarNumIndex].linkText;

  // can toggle door closed again IF want to: //
  // this.parentNode.classList.toggle("open");

};


// === click span (x) to close modal 

spanClose.onclick = function() {
  modal.style.display = "none";
}

// === click anywhere outside modal to close it

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
              
            
!
999px

Console