@@ -0,0 +1,18 @@
+body {
+   font-family: sans-serif;
+}
+
+p {
+   padding: 8px;
+   background-color: rgb(227, 227, 227);
+   transition: 3s;
+}
+
+p:nth-of-type(2) {
+   color: rgb(255, 27, 27);
+}
+
+.expand {
+   padding: 40px;
+   background-color: rgb(200, 200, 200);
+}
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="utf-8">
+   <title>JavaScript Examples | Timer (Example 1)</title>
+   <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+   <h1>JavaScript Examples | Timer (Example 1)</h1>
+   <p>The following paragraph will expand, based on a class that is added then removed via two timers. The first timer waits a half a second to add a class, triggering the transition; the second waits three seconds to transition back by removing the class added by the first timer.</div>
+   <p>I expand. Just wait a moment.</p>
+   <p>See <a href="js/app.js">the JS</a> bound to this file.</p>
+   <script src="js/app.js"></script>
+</body>
+</html>
@@ -0,0 +1,16 @@
+/*jslint browser, es6, single, devel */
+/*global window */
+
+window.onload = function () {
+    'use strict';
+
+    let p = document.getElementsByTagName('p');
+
+    setTimeout(function () {
+        p[1].setAttribute('class', 'expand');
+    }, 500);
+
+    setTimeout(function () {
+        p[1].removeAttribute('class');
+    }, 3500);
+};