ESLint added, integration with prettier (need testing, suggestions)

.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "airbnb-base",
+
+  "env": {
+    "browser": true,
+    "node": true
+  }
+}

.vscode/settings.json

@@ -1,3 +1,11 @@
 {
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+
+  "javascript.format.enable": false,
+
+  "prettier.eslintIntegration": true,
+
+  "[html]": {
+    "editor.formatOnSave": false
+  }
 }

docs/css/style.css

@@ -80,8 +80,7 @@
 html {
   position: relative;
   font-size: 125%;
-  font-family: Inconsolata, Consolas, "SFMono-Regular", Menlo,
-    "DejaVu Sans Mono", monospace;
+  font-family: Inconsolata, Consolas, 'SFMono-Regular', Menlo, 'DejaVu Sans Mono', monospace;
   line-height: 1.25;
   background-color: var(--page-background);
 }
@@ -90,7 +89,7 @@ html[data-loaded] {
 }
 
 html:before {
-  content: "";
+  content: '';
   position: absolute;
   display: block;
   top: 0;
@@ -189,7 +188,7 @@ h1 {
   width: 45%;
   height: 45%;
   margin: 2.5%;
-  outline : 1px solid transparent;
+  outline: 1px solid transparent;
   animation: var(--logo-tiles-in-animation);
 }
 
@@ -261,8 +260,8 @@ footer p {
   animation-delay: calc(var(--move-in-base-delay) * 11);
 }
 
-footer [href*="github"]:hover,
-footer [href*="github"]:focus {
+footer [href*='github']:hover,
+footer [href*='github']:focus {
   color: var(--green);
 }
 

docs/theme/theme.css

@@ -55,11 +55,11 @@
   border-radius: 0.6rem;
 }
 
-.theme__button[value="dark"] {
+.theme__button[value='dark'] {
   background: black;
 }
 
-.theme__button[value="light"] {
+.theme__button[value='light'] {
   background: white;
 }
 
@@ -109,7 +109,7 @@ body.js-theme-light {
 
 body.js-theme-code {
   color: lightslategrey;
-  font-family: "Courier New", Courier, monospace;
+  font-family: 'Courier New', Courier, monospace;
 }
 
 .js-theme-light .theme__button {

docs/theme/theme.js

@@ -1,20 +1,22 @@
-var $body = document.body;
-var $themeBtns = document.querySelectorAll(".js-theme-button");
+const $body = document.body;
+const $themeBtns = document.querySelectorAll('.js-theme-button');
 
-$themeBtns[0].setAttribute("disabled", true);
+$themeBtns[0].setAttribute('disabled', true);
 
-$themeBtns.forEach(function(ele) {
-  ele.onclick = function(e) {
-    var selectedName = e.target.value;
+$themeBtns.forEach((ele) => {
+  const element = ele;
 
-    $themeBtns.forEach(function(ele) {
-      var themeName = ele.value;
+  element.onclick = function onClick(e) {
+    const selectedName = e.target.value;
+
+    $themeBtns.forEach((btn) => {
+      const themeName = btn.value;
       if (themeName === selectedName) return;
-      $body.classList.remove("js-theme-" + themeName);
-      ele.removeAttribute("disabled");
+      $body.classList.remove(`js-theme-${themeName}`);
+      ele.removeAttribute('disabled');
     });
 
-    $body.classList.add("js-theme-" + selectedName);
-    ele.setAttribute("disabled", true);
+    $body.classList.add(`js-theme-${selectedName}`);
+    ele.setAttribute('disabled', true);
   };
 });