<h1>Moment.js</h1>
<blockquote>Working with date and time the build in Date object of javascript may not be enough for you. The Moment.js package will most likely offer you what you need. Here are some examples (many borrowed from the <a href="https://momentjs.com/docs/">Moment.js Documentation</a> website). Below you can see code examples. Their outcome may be stored and reused as <span class="var">variables</span>. Example: <span class="var">today</span>.</blockquote>
<div class="examples"></div>
<footer>
	*) Acording to web.archive.org Codepen.io was first seen on <span class="seen"></span> - where it looked like <a href="https://web.archive.org/web/20120401000000*/codepen.io">this</a>.
</footer>

html {
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}
body {
	font-weight: 100;
	margin: 10px;
}

.examples:hover section:not(:hover) {
	opacity: 0.1;
	transition: opacity 0.3s;
}
section {
	padding: 0 20px 10px;
	transition: opacity 0.9s;
}
section:hover {
	cursor: pointer;
	transition: opacity 0.6s;
}
section:hover input {
	background: #eee;
}

h1 {
	line-height: 100%;
	margin-bottom: 0;
	font-weight: 400;
	border-bottom: solid 2px #ddd;
	letter-spacing: 1px;
}
h2 {
	color: #009;
	font-weight: 100;
	border-bottom: dashed 1px #999;
	display: flex;
	justify-content: space-between;
}
.example {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 5px;
	font-size: larger;
}

.var {
	color: orange;
}
blockquote {
	line-height: 150%;
	margin-bottom: 30px;
}
input {
	padding: 5px;
	width: 300px;
	font-size: larger;
	font-family: monospace;
}

.invalid .dynamic-value {
	color: red;
	font-weight: bold;
}

const eleExamples = document.querySelector(".examples");
const today = moment();

function validate(dateString) {
	const dt = moment(dateString);
	const isValid = dt.isValid();
	eleDynamic.innerHTML = dt;
	secDynamic.classList.toggle('invalid', !isValid);
	secDynamic.classList.toggle('valid', isValid);
	if (isValid) {
		eleDynamic.innerHTML += `<br>Which is around ${dt.fromNow()}`;
	}
}

class Example {
	constructor(code, title, variable) {
		this.title = title ? title : code;
		if (typeof code === 'object') {
			this.code = code.join('<br>');
			let temp = '';
			code.forEach(c => {
				temp += `${eval(c)}<br>`
			})
			this.value = temp;
		} else {
			this.code = code;
			this.value = eval(code);
			if (variable) {
				window[variable] = this.value;
				this.title += `<code class="var">(${variable})</code>`
			}	
		}
		
	}
	
	toString() {
		return `
<section>
<h2>${this.title}</h2>
<div class="example">
<code>${this.code}</code>
<code class="result">${this.value}
</div>
</code>
</section>
`
	}
}
const thisYear = new Date().getFullYear();
const examples = [
	new Example(`moment('${thisYear}-12-24')`, `Christmas ${thisYear} - from a string`, 'christmas'),
	new Example(["moment('2012-03-24').fromNow() // birth of Codepen*", "moment(christmas).fromNow()"], `TimeAgo: fromNow() and toNow()`),
	new Example(`moment('31/12-${thisYear} 23:59:59','DD/MM-YYYY H:m:s')`, `Last second of ${thisYear} in Danish format`, 'newYear'),
	new Example(["moment().format()","moment().format('[Week] w [of] YYYY')", "moment().add({days:7}).format('dddd YYYY-MM-DD')", "moment().subtract(3, 'months').format('dddd YYYY-MM-DD')"], 'Various examples'),
	
	new Example(`moment(newYear).isAfter(christmas)`, `Is new year after christmas?`),
	new Example(`moment().dayOfYear()`, `Which day of the year is today?`),
	new Example(`moment().get('week')`, `Which week of the year are we in?`),
];

examples.forEach((example, i) => {
	eleExamples.innerHTML =
		eleExamples.innerHTML += example
		;
});
eleExamples.innerHTML = `
<section class="dynamic-section">
	<h2>Validation - try out yourself</h2>
	<div class="example">
		<code><input placeholder="Enter a string" oninput="validate(value)" class="dynamicInput" /></code>
	<code class="result dynamic-value">
</code>
</div>
</section>` + eleExamples.innerHTML;

const eleDynamic = document.querySelector(".dynamic-value");
const secDynamic = document.querySelector(".dynamic-section");
const eleSeen = document.querySelector(".seen");
eleSeen.innerText = moment('2012-3-24').format('dddd YYYY-MM-DD');