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.
.container
.btn__wrapper.prev
<svg class="prev" width="11px" height="23px" viewBox="381 624 11 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Artboard-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(381.000000, 624.000000)" stroke-linecap="square">
<path d="M0.3,11.7 L11.1,23.1" id="Line-Copy" stroke="#979797" stroke-width="2" transform="translate(5.700000, 17.400000) scale(-1, -1) translate(-5.700000, -17.400000) "></path>
<path d="M0.3,0.3 L11.1,11.7" id="Line" stroke="#979797" stroke-width="2" transform="translate(5.700000, 6.000000) scale(-1, 1) translate(-5.700000, -6.000000) "></path>
</g>
</svg>
.calendar
.header__season
<svg width="350" height="82" viewBox="0 0 350 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="seasons">
<!-- We can reuse def objects with the use element-->
<g id="winter">
<circle id="winter-el" fill="#FFFFFF" stroke="none" cx="8.5" cy="8.5" x="0" y="0" r="7.5"></circle>
<path id="path" d="M10.1914062,0.30859375 C2.67796308,8.26445677 -3.08980853,17.7764221 3.3125,28.6347656 C9.98437474,39.9502947 11.757796,34.2596999 13.9902344,45.6210938 C16.086191,56.2879007 2.77202896,63.3876879 4.3046875,74.9140625 C5.54396402,84.2340546 13.5353443,89.9877083 16.0175781,98.6816406" stroke="none" fill="none"></path>
</g>
<g id="spring">
<path d="M8.49023438,19.1347656 C1.30270336,29.7492023 -0.769546799,41.6346957 2.05859375,54.3613281" id="flowerPath" stroke="#2F590B" fill="none" stroke-width="1"></path>
<g class="flower">
<path d="M15.5566406,9.47460938 C10.7288259,9.99630664 7.18624346,16.1172825 13.0488281,17.484375 C19.4090417,18.9675093 20.7813567,12.7298889 16.0683594,9.58789062 L15.5566406,9.47460938" id="Path-2" stroke="#979797" stroke-width="1" fill="#ECF158"></path>
<path d="M12.1230469,9.73632812 C3.517263,-0.650664715 17.2924486,-0.751321104 17.2871094,9.1796875" id="Path-3" stroke="#979797" stroke-width="1" fill="#E9B0B0" class="petal"></path>
<path d="M17.5292969,9.90625 C25.9936584,2.1981089 32.1552105,12.7618762 19.9765625,13.7207031" id="Path-4" stroke="#979797" stroke-width="1" fill="#C47474" class="petal"></path>
<path d="M19.9765625,13.7207031 C21.9341725,14.3056276 32.2304919,32.8114908 16.5644531,18.6484375" id="Path-5" stroke="#979797" stroke-width="1" fill="#C57070" class="petal"></path>
<path d="M15.9414062,17.6640625 C12.0811844,27.1614337 6.52622684,22.3670394 9.99804687,16.1933594" id="Path-6" stroke="#979797" stroke-width="1" fill="#E78282" class="petal"></path>
<path d="M9.26367187,15.1171875 C1.41280793,14.5132749 6.47665559,4.45907747 11.7851562,9.76757812" id="Path-7" stroke="#979797" stroke-width="1" fill="#D07A7A" class="petal"></path>
</g>
</g>
<g id="summer">
<circle id="Oval" fill="#ffc500" cx="39.75" cy="39.65" r="17.55"></circle>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2" stroke="#ffc500" stroke-width="1.3" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-5" stroke="#ffc500" stroke-width="1.3" class="shine" transform="translate(95, 43.929297) rotate(135.000000)"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-3" stroke="#ffc500" stroke-width="1.3" transform="translate(-13.875357, 38.929297) rotate(-45.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-4" stroke="#ffc500" stroke-width="1.3" transform="translate(75.875357, 81.929297) rotate(182.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-2" stroke="#ffc500" stroke-width="1.3" transform="translate(80.878049, 5.928750) rotate(90.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-6" stroke="#ffc500" stroke-width="1.3" transform="translate(-3.878049, 75.928750) rotate(273.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy" stroke="#ffc500" stroke-width="1.3" transform="translate(39.879134, -12.930838) rotate(43.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-7" stroke="#ffc500" stroke-width="1.3" transform="translate(35.879134, 95.930838) rotate(225.000000)" class="shine"></path>
</g>
<g id="fall" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1018.000000, 400.000000)">
<g id="fall-el">
<path d="M10.546875,30.3359375 C12.6465102,5.32092875 20.3465935,12.6242861 39.484375,7.16015625 C43.8547482,5.91234776 48.2189076,-2.00711917 51.640625,0.984375 C55.5465711,4.39921421 51.629364,11.5065325 50.140625,16.4765625 C45.0502822,33.4702439 24.1092521,55.2687926 10.890625,32.5976562 L10.546875,30.3359375 Z" id="Path-4" stroke="#804400" fill="#d47d02"></path>
<path d="M-0.29296875,39.4179687 C21.3453552,29.3170536 41.5288558,22.6217754 53.0507812,0.9453125" id="Path-3" stroke="#804400"></path>
<path d="M24.1171875,26.6210938 L22.3945312,19.484375" id="Path-5" stroke="#804400"></path>
<path d="M36.3320312,21.5234375 L34.3632812,14.3867188" id="Path-6" stroke="#804400"></path>
<path d="M25.1835938,26.8320312 C27.6210938,28.3736979 30.0585938,29.9153646 32.4960938,31.4570312" id="Path-7" stroke="#804400"></path>
<path d="M35.7600098,21.519989 C37.9300098,22.7309265 40.1000099,23.941864 42.27001,25.1528015" id="Path-8" stroke="#804400"></path>
</g>
<path id="path" d="M-0.171875,0.234375 C9.61459211,12.9169658 16.2633042,19.8100645 33.4140625,20.1171875 C38.4289139,20.2069897 47.7387213,13.2631575 48.34375,18.2421875 C48.9888329,23.5508406 39.3693508,24.8068802 34.078125,25.5820313 C25.6734751,26.813291 16.9117356,22.1239437 8.640625,24.0585938 C6.27660906,24.6115477 9.28700366,29.0305653 10.5976562,31.0742188 C12.4287732,33.9294136 14.9899338,36.3490127 17.7695312,38.2929688 C32.235979,48.4103109 46.9157569,52.9625614 64.6171875,52.7851563 C65.9913612,52.7713842 68.7135541,49.4239899 68.1640625,50.6835938 C57.8020206,74.4365821 23.9513163,63.1119321 9.00390625,63.3125 C7.70836948,63.3298838 8.85102584,65.9753328 9.30859375,67.1875 C10.4130072,70.1132597 11.9645757,72.8660762 13.6132812,75.5234375 C16.8993048,80.8198058 20.0426315,86.271514 24.0898437,91.0117188 C36.1829827,105.175531 48.4969991,110.28785 67.5078125,115.738281 C73.4618328,117.445309 79.8796327,117.357699 86.0546875,116.875 C88.3815691,116.693109 94.6086953,113.233417 92.34375,113.796875 C80.3008122,116.792837 68.8416886,122.180302 56.5976562,124.203125 C38.3955739,127.21027 36.6290656,115.071545 16.9765625,115.496094 C14.4998728,115.549597 16.9128936,120.675004 18.1171875,122.839844 C24.610454,134.512144 29.5538936,139.470812 40.2382812,145.828125 C41.9918309,146.871504 43.956048,147.612167 45.9570312,148.011719 C47.2619275,148.272278 48.6132812,147.847656 49.9414062,147.765625" stroke="none" fill="none"></path>
</g>
</svg>
.calendar__header
.calendar__month__year
.calendar__month Month
.calendar__year Year
.calendar__body
.draw-circle
<!-- must be width and height of calendar__body-->
<svg width="350px" height="280px" viewBox="0 0 350 280" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- use <use> to duplicate elements -->
<symbol>
<g id="circle-1">
<path fill="none" d="M5.15717214,10.8491064 C-5.46462548,24.6374541 5.53031259,42.0884193 23.861043,37.1415798 C35.5811294,33.9787278 45.3594842,15.034285 33.867768,6.30529878 C24.290624,-0.969398643 12.1875419,0.457776331 1.45953704,3.39418135"></path>
</g>
</symbol>
</svg>
.calendar__days
.btn__wrapper.next
<svg class="next" width="11px" height="23px" viewBox="270 624 11 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(270.000000, 624.000000)" stroke-linecap="square">
<path d="M0.3,11.7 L11.1,23.1" id="Line-Copy" stroke="#979797" stroke-width="2" transform="translate(5.700000, 17.400000) scale(1, -1) translate(-5.700000, -17.400000) "></path>
<path d="M0.3,0.3 L11.1,11.7" id="Line" stroke="#979797" stroke-width="2"></path>
</g>
</svg>
:root {
--theme: #8dcfff;
--col : #FFFFFF
}
body {
font-family: 'Nunito', sans-serif;
background-color: #F5F5F5;
}
a {
color: #222222;
text-decoration: none;
display: inline-block;
}
.container {
text-align: center;
width: 430px;
margin: 0 auto;
position: relative;
}
.btn__wrapper, .calendar {
display: inline-block;
}
.btn__wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
&.next {
right: 0;
}
&.prev {
left:0;
}
&.next, &.prev {
cursor: pointer;
path {
stroke: var(--theme);
}
}
}
.calendar {
//size of day * number of days in row + margin * 2 (left and right)
width: (50px * 7) + 0;
background-color: #FFFFFF;
position: relative;
margin: 3rem auto;
&__header {
background-color: var(--theme);
color: var(--col);
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
&__month__year {
display: inline-block;
background-color: var(--theme);
position: relative;
padding: 5px;
z-index: 9999;
}
&__body {
position: relative;
}
&__days {
text-align: left;
}
&__day {
display: inline-block;
width: 50px;
height: 50px;
position: relative;
&__number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
.draw-circle, .header__season {
position: absolute;
svg {
position: relative;
}
}
.draw-circle {
svg {
left: 5px;
top: 5px;
}
}
//to style use element, do not style it in html!
svg use {
stroke: #222;
stroke-width: 1;
}
.today-svg {
stroke: var(--theme);
stroke-width: 2;
}
#winter, #spring, #summer, #fall {
visibility: hidden;
}
#winter.winter, #spring.spring, #summer.summer, #fall.fall {
visibility: visible;
}
.today-svg.hidden, .selected-days.hidden {
display: none;
}
// DrawLine code by greensock
/* Variables */
const orig = document.querySelector('.draw-circle path'),
monthHtml = document.querySelector('.calendar__month'),
yearHtml = document.querySelector('.calendar__year');
let length, timer,
html = '',
daysHtml = document.querySelector('.calendar__days');
const svgCircle = document.querySelector('#circle-1');
//DATES
let thisDay = new Date(),
thisMonth = thisDay.getMonth();
var obj = {length:0,
pathLength:orig.getTotalLength()};
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
];
/* Functions */
function drawLine(useEl) {
useEl.style.strokeDasharray = [obj.length,obj.pathLength].join(' ');
}
function createUseEl(svg, el) {
//create new use element on click
var useElement =
document.createElementNS('http://www.w3.org/2000/svg', 'use');
document.querySelector(svg).appendChild(useElement);
useElement.setAttributeNS(
'http://www.w3.org/1999/xlink',
'href',
el);
return useElement
}
// get date + add month, year and days + bigger colored circle around today
function daysInMonth(month,year) {
return new Date(year, month, 0).getDate();
}
//Get current season
function getSeason(date) {
if(thisMonth === 12) {
thisMonth = 0;
}
if(thisMonth === -1) {
thisMonth = 11;
}
let month = thisMonth;
let season = '';
switch(month) {
case 11:
case 0:
case 1:
season = 'winter';
break;
case 2:
case 3:
case 4:
season = 'spring';
break;
case 5:
case 6:
case 7:
season = 'summer';
break;
case 8:
case 9:
case 10:
season = 'fall';
break;
}
return season;
}
function addDate() {
html = '';
let today = new Date(),
year = today.getFullYear(),
month = monthNames[thisMonth],
day = today.getDate(),
totalDays = daysInMonth(today.getMonth()+1, year);
monthHtml.innerHTML = `${month}`;
yearHtml.innerHTML = `${year}`;
// if thisMonth is not this month remove circle
if(thisMonth !== today.getMonth()+1) {
totalDays = daysInMonth(thisMonth+1, year);
}
for(var i = 0; i < totalDays; i++) {
html += `<a href="#">
<div class="calendar__day ${day === (i+1) ? 'today' : ''}">
<div class="calendar__day__number"> ${i+1}</div>
</div>
</a>`;
}
daysHtml.innerHTML = html;
var element = document.querySelector('.today-svg');
if(thisMonth === today.getMonth() && !element) {
var useEl = createUseEl('.draw-circle svg' ,'#circle-1');
var todayHtml = document.querySelector('.today');
var posX = todayHtml.offsetLeft;
var posY = todayHtml.offsetTop;
useEl.classList.add('today-svg');
useEl.style.transform = `translate(${posX}px, ${posY}px)`;
}
else if (thisMonth === today.getMonth() && element) {
document.querySelector('.today-svg').classList.remove('hidden');
}
else {
document.querySelector('.today-svg').classList.add('hidden');
}
}
function drawOnClick() {
let useEl = createUseEl('.draw-circle svg' ,'#circle-1');
useEl.classList.add(`selected-days`);
useEl.classList.add(monthNames[thisMonth]);
// Reset length to 0 on every click and if second click on this element
if (obj.length === obj.pathLength) {
obj.length = 0;
}
// Animation on every use element
TweenMax.to(obj, 0.5, {length:obj.pathLength, onUpdate:drawLine, onUpdateParams:[useEl], ease:Linear.easeNone})
// Put svg use element on clicked location
const posX = this.offsetLeft;
const posY = this.offsetTop;
useEl.style.transform = `translate(${posX}px, ${posY}px)`;
}
function seasons(next){
//Remove previous added group elements
var elems = document.querySelectorAll(".spring");
elems.forEach(elem => elem.parentNode.removeChild(elem));
var elems = document.querySelectorAll(".summer");
elems.forEach(elem => elem.parentNode.removeChild(elem));
var elems = document.querySelectorAll(".fall");
elems.forEach(elem => elem.parentNode.removeChild(elem));
var elems = document.querySelectorAll(".winter");
elems.forEach(elem => elem.parentNode.removeChild(elem));
let season = getSeason();
if (next === true) {
thisMonth = thisMonth + 1;
season = getSeason(thisMonth);
}
else if (next === false) {
thisMonth = thisMonth - 1;
season = getSeason(thisMonth);
}
//change snow to seasons element
let seasonEl, transX, transY;
//getSeason();
let amount = 0;
if(season === 'winter') {
amount = 30;
}
else if (season === 'spring') {
amount = 15;
}
else if (season === 'summer') {
amount = 1;
}
else if (season === 'fall') {
amount = 15;
}
for(var i = 0; i < amount; i++) {
//We need to clone the elements instead of using <use> because we can't animate along path with use
seasonEl = document.getElementById(season).cloneNode(true);
document.querySelector("#seasons").appendChild(seasonEl);
transX = Math.floor(Math.random() * 350) + 1;
transY = Math.floor(Math.random() * 82) + 1;
seasonEl.classList.add(season);
let winterEl = seasonEl.querySelector(`#winter-el`);
let springEl = seasonEl.querySelector('#spring');
let summerEl = seasonEl;
let fallEl = seasonEl.querySelector(`#fall-el`);
//animation on every new season element
if (season === 'winter') {
seasonEl.style.transform = `translate(${transX}px, 0px) scale(${Math.random()})`;
snowAnimation(winterEl);
document.documentElement.style.setProperty(`--theme`, '#8dcfff');
}
else if (season === 'spring') {
seasonEl.style.transform = `translate(${transX}px, ${transY}px) scale(${Math.random()})`;
springAnimation(seasonEl);
document.documentElement.style.setProperty(`--theme`, '#bddc53');
}
else if (season === 'summer') {
seasonEl.style.transform = `translate(270px,0) scale(${Math.random()+0.9})`;
document.documentElement.style.setProperty(`--theme`, '#deab05');
document.documentElement.style.setProperty(`--col`, '#222222');
sunAnimation(summerEl);
}
else if (season === 'fall') {
seasonEl.style.transform = `translate(${transX}px, 0px) scale(${Math.random()})`;
document.documentElement.style.setProperty(`--theme`, '#ea994a');
fallAnimation(fallEl);
}
}
}
function snowAnimation(el) {
//make svg follow path
let siblingPath = el.nextElementSibling;
let delayAnimation = Math.random();
TweenMax.to(el, 1, {
bezier: {
values: MorphSVGPlugin.pathDataToBezier(siblingPath),
type: "cubic"
},
repeat: -1,
delay: delayAnimation,
ease: Ease.easeOut
}, delayAnimation*10);
}
function springAnimation(el) {
//random flower petal colors
let colors = ['#FF9900', '#FF6600', '#FF3300', '#F56991'];
let petals = el.querySelectorAll('.petal');
petals.forEach(petal => petal.style.fill = colors[Math.floor(Math.random() * 3) + 0]);
//Scale flowerpath en move .flower
const path = document.querySelector('#flowerPath');
TweenMax.to('#flowerPath', 2, {
scaleY:1.8,
transformOrigin:"50% 50%",
delay: 0.1,
ease: Ease.easeOut
}, 1.5);
TweenMax.to('.flower', 1, {
y:-12,
transformOrigin:"50% 50%",
delay: 0.1,
ease: Ease.easeOut
}, 1.5);
}
function sunAnimation(el) {
let shines = el.querySelectorAll('.shine');
shines.forEach((shine, i) => {
TweenMax.to(shine, 0.8, {
morphSVG:'M3,8 C7.27916667,12.0320312 17.0177083,20.9453125 21.296875,24.9773437 L3,8 Z',
repeat: -1,
delay: i*0.1,
ease: Ease.easeOut,
yoyo:true
});
});
let sun = el.querySelector('#Oval');
TweenMax.to(sun, 2.5, {
scale:1.1,
transformOrigin:"50% 50%",
ease: Ease.easeOut,
repeat:-1,
yoyo:true
});
}
function fallAnimation(el) {
//make svg follow path
let siblingPath = el.nextElementSibling;
let delayAnimation = Math.random();
TweenMax.to(el, 3, {
bezier: {
values: MorphSVGPlugin.pathDataToBezier(siblingPath),
type: "cubic"
},
repeat: -1,
delay: delayAnimation,
ease: Ease.ease
});
}
// Fist add dates
addDate();
function addRemoveSelected() {
let selected = document.querySelectorAll('.selected-days');
let today = new Date();
selected.forEach( function(useEl) {
if( useEl.classList.contains( `${monthNames[thisMonth]}` ) ) {
useEl.classList.remove('hidden');
}
else {
useEl.classList.add('hidden');
}
});
days = document.querySelectorAll('a');
days.forEach(day => day.addEventListener('click', drawOnClick));
}
//get all days
var days = document.querySelectorAll('a');
const nextMonth = document.querySelector('.next');
const prevMonth = document.querySelector('.prev');
let next;
/* Event listeners */
days.forEach(day => day.addEventListener('click', drawOnClick));
nextMonth.addEventListener('click', function() {
//month + 1
next = true;
seasons(next);
addDate();
addRemoveSelected();
});
prevMonth.addEventListener('click', function() {
//month -1
next = false;
seasons(next);
addDate();
addRemoveSelected();
});
// Add seasons header
seasons(next);
//remember month of clicked element, remove hidden from element if this month is the same as that month
Also see: Tab Triggers