HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!-- CALENDAR DOORS -->
<section class="calendar-grid">
<div class="title">
<div class="title-lines-container">
<p class="title-line1">Brighton & 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">×</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>
/* === 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;
}
}
// === 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";
}
}
Also see: Tab Triggers