From e7e2f3f85cd8b9d9bbe960d2e1c1ee10ebdda60a Mon Sep 17 00:00:00 2001
From: orbitalbitmap <orbitalbitmap@gmail.com>
Date: Sun, 19 Apr 2020 00:17:30 -0400
Subject: [PATCH 1/9] Added the eslint and pug-lint rules to master

---
 .eslintrc.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index e69de29..ef46313 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,62 @@
+module.exports = {
+  "env": {
+    "es6": true,
+    "node": true,
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "rules": {
+    "array-bracket-spacing": ["error", "never"],
+    "array-element-newline": ["error", "consistent"],
+    "arrow-spacing": ["error", { "before": true, "after": true }],
+    "block-spacing": "error",
+    "camelcase": 0,
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "computed-property-spacing": ["error", "never"],
+    "dot-location": ["error", "property"],
+    "eol-last": ["error", "always"],
+    "func-call-spacing": ["error", "never"],
+    "function-paren-newline": ["error", "never"],
+    "implicit-arrow-linebreak": ["error", "beside"],
+    "indent": ["error", 2, { "SwitchCase": 1 }],
+    "key-spacing": ["error", { "afterColon": true }],
+    "keyword-spacing": ["error", { "before": true, "after": true }],
+    "linebreak-style": ["error", "unix"],
+    "max-len": ["error", { "code": 120, "ignoreComments": true, "ignoreTrailingComments": true }],
+    "no-console": "error",
+    "no-case-declarations": 0,
+    "no-mixed-spaces-and-tabs": "error",
+    "no-multi-spaces": "error",
+    "no-spaced-func": "error",
+    "no-trailing-spaces": ["error", { "ignoreComments": true }],
+    "no-whitespace-before-property": "error",
+    "nonblock-statement-body-position": ["error", "beside"],
+    "object-curly-newline": ["error", { "multiline": true, "minProperties": 5, "consistent": true }],
+    "object-curly-spacing": ["error", "always", { "arraysInObjects": true, "objectsInObjects": true }],
+    "object-property-newline": ["error", { "allowAllPropertiesOnSameLine": true }],
+    "one-var": ["error", "never"],
+    "operator-linebreak": ["error", "after", { "overrides": { "?": "before", ":": "before" } }],
+    "padded-blocks": ["error", "never"],
+    "padding-line-between-statements": [
+      "error",
+      { blankLine: "always", prev: "*", next: "return" },
+      { blankLine: "always", prev: ["const", "let", "var"], next: "*" },
+      { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"] },
+    ],
+    "quotes": ["error", "single"],
+    "rest-spread-spacing": ["error", "never"],
+    "space-before-blocks": "error",
+    "space-before-function-paren": ["error", { "anonymous": "always", "named": "never", "asyncArrow": "always" }],
+    "space-in-parens": ["error", "never"],
+    "space-infix-ops": "error",
+    "space-unary-ops": "error",
+    "spaced-comment": ["error", "always"],
+    "semi": ["error", "never"],
+    "semi-spacing": ["error", { "before": false, "after": true }],
+    "switch-colon-spacing": "error",
+    "template-tag-spacing": ["error", "always"],
+  }
+};
\ No newline at end of file

From c01f9b782c6de30728499e8b49ece8643754fc71 Mon Sep 17 00:00:00 2001
From: orbitalbitmap <orbitalbitmap@gmail.com>
Date: Sun, 19 Apr 2020 00:19:23 -0400
Subject: [PATCH 2/9] Actually added the pug-lint rules.

---
 .pug-lintrc.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 .pug-lintrc.js

diff --git a/.pug-lintrc.js b/.pug-lintrc.js
new file mode 100644
index 0000000..5ae7099
--- /dev/null
+++ b/.pug-lintrc.js
@@ -0,0 +1,24 @@
+module.exports = {
+  disallowAttributeConcatenation: true,
+  disallowBlockExpansion: true,
+  disallowClassLiterals: true,
+  disallowDuplicateAttributes: true,
+  disallowHtmlText: true,
+  disallowIdLiterals: true,
+  disallowLegacyMixinCall: true,
+  disallowMultipleLineBreaks: true,
+  disallowSpacesInsideAttributeBrackets: true,
+  disallowStringConcatenation: 'aggressive',
+  disallowTagInterpolation: true,
+  disallowTrailingSpaces: true,
+  requireLineFeedAtFileEnd: true,
+  requireLowerCaseAttributes: true,
+  requireLowerCaseTags: true,
+  requireSpaceAfterCodeOperator: true,
+  requireStrictEqualityOperators: true,
+  validateAttributeQuoteMarks: '"',
+  validateExtensions: true,
+  validateIndentation: 2,
+  validateLineBreaks: 'LF',
+  validateTemplateString: true
+}
\ No newline at end of file

From 606354311d093f4040aa616dedab654dce7daddb Mon Sep 17 00:00:00 2001
From: orbitalbitmap <orbitalbitmap@gmail.com>
Date: Sun, 19 Apr 2020 00:22:26 -0400
Subject: [PATCH 3/9] Initial commit for branch part-one-answer.

---
 index.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 index.js

diff --git a/index.js b/index.js
new file mode 100644
index 0000000..e69de29

From ed460ce2af0841a608a9dca6c4d29bb18d1ca992 Mon Sep 17 00:00:00 2001
From: orbitalbitmap <orbitalbitmap@gmail.com>
Date: Thu, 23 Apr 2020 11:31:55 -0400
Subject: [PATCH 4/9] Set up some of the documentatin site and some of the
 styling.

---
 controllers/pug-index-controller.js | 27 +++++++++++++
 index.js                            | 18 +++++++++
 package.json                        |  2 +-
 public/css/styles.css               | 39 ++++++++++++++++++
 views/index.pug                     | 61 +++++++++++++++++++++++++++++
 5 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 controllers/pug-index-controller.js
 create mode 100644 public/css/styles.css
 create mode 100644 views/index.pug

diff --git a/controllers/pug-index-controller.js b/controllers/pug-index-controller.js
new file mode 100644
index 0000000..2c147af
--- /dev/null
+++ b/controllers/pug-index-controller.js
@@ -0,0 +1,27 @@
+function activateEndpoint(id) {
+  var endPointId = id + '-end-point'
+  // eslint-disable-next-line no-undef
+  var endPoints = document.getElementsByClassName('endpoint')
+
+  for (var i = 0; i < endPoints.length; i++) {
+    if (endPoints[i].id === endPointId) {
+      endPoints[i].classList.add('selected')
+    } else {
+      endPoints[i].classList.remove('selected')
+    }
+  }
+
+  var docId = id + '-doc'
+  // eslint-disable-next-line no-undef
+  var docs = document.getElementsByClassName('doc')
+
+  for (var j = 0; j < docs.length; j++) {
+    if (docs[j].id === docId) {
+      docs[j].classList.remove('hidden')
+    } else {
+      docs[j].classList.add('hidden')
+    }
+  }
+}
+
+module.exports = activateEndpoint()
diff --git a/index.js b/index.js
index e69de29..ac6034b 100644
--- a/index.js
+++ b/index.js
@@ -0,0 +1,18 @@
+const express = require('express')
+
+const app = express()
+
+app.set('view engine', 'pug')
+app.use(express.static('public'))
+
+app.get('/', (request, response) => {
+  return response.status(200).render('index')
+})
+
+app.all('*', (request, response) => {
+  return response.status(404).send('Looks like you found nothing in the pokedex.')
+})
+
+app.listen(1337, () => {
+  console.log('Listening on 1337...')// eslint-disable-line no-console
+})
diff --git a/package.json b/package.json
index 3e4bcde..c507d9c 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "dev": "./node_modules/.bin/nodemon index.js",
     "lint": "run lint:pug-lint && run lint:eslint",
     "lint:eslint": "./node_modules/.bin/eslint --format codeframe .",
-    "lint:puglint": "./node_modules/.bin/pug-lint ."
+    "puglint": "./node_modules/.bin/pug-lint ."
   },
   "repository": {
     "type": "git",
diff --git a/public/css/styles.css b/public/css/styles.css
new file mode 100644
index 0000000..846ff97
--- /dev/null
+++ b/public/css/styles.css
@@ -0,0 +1,39 @@
+h2{
+  text-align: center;
+}
+
+h3{
+  margin-bottom: 5px;
+}
+
+.get-generation, .get-pokemon{
+  display: none;
+}
+
+.get-all, .get-generation, .get-pokemon{
+  position: absolute;
+}
+
+.main-container{
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  position: relative;
+}
+
+.left-container{
+  align-self: center;
+  flex-direction: column;
+  margin: 0px 20px;
+}
+
+.right-container{
+  align-self: center;
+  flex-direction: row;
+  margin: 0px 20px;
+  position: relative;
+}
+
+.tabs{
+  margin-top: 10px;
+}
diff --git a/views/index.pug b/views/index.pug
new file mode 100644
index 0000000..8df3498
--- /dev/null
+++ b/views/index.pug
@@ -0,0 +1,61 @@
+html
+  head
+    title Pokemon API
+    link(rel="stylesheet" href="/css/styles.css")
+    script(src="../controllers/pug-index-controller.js")
+  body
+    h2 Welcome to the Pokemon API
+    div(class="main-container")
+      div(class="left-container")
+        div(class="tabs" id="get")
+          span GET
+          span /pokemon
+        div(class="tabs" id="get")
+          span GET
+          span /generation/{genId}
+
+        div(class="tabs" id="get")
+          span GET
+          span /pokemon/{pokemon name}
+          div /pokemon/{pokemon id}
+
+        div(class="tabs" id="push")
+          span PUSH
+          span /pokemon
+
+      div(class="right-container")
+        div(class="method-container")
+          h3 Method
+          div GET
+          h3 Route
+          div http://localhost:1337/pokemon
+          div(class="get-all")
+            h3 Headers
+            div None needed
+            div
+            h3 Decription
+            div Returns a list all of the pokemon in the databse.
+
+          div(class="get-generation")
+            h3 Method
+            div GET
+            h3 Route
+            div http://localhost:1337/pokemon/generations/{id}
+            h3 Headers
+            div None needed
+            div
+            h3 Decription
+            div Returns a list of all pokemon associated with the generation of the numerical {id}.
+
+          div(class="get-pokemon")
+            h3 Method
+            div GET
+            h3 Route
+            div http://localhost:1337/pokemon/pokemon/{id}
+            div(style="margin-left:110px") OR
+            div http://localhost:1337/pokemon/pokemon/{name}
+            h3 Headers
+            div None needed
+            div
+            h3 Decription
+            div Returns the pokemon associated with the numerical {id]} (pokedex number) or the {name} of the pokemon.

From 860fc4c6cfb598c132b2959b6aaea8f779142f01 Mon Sep 17 00:00:00 2001
From: orbitalbitmap <orbitalbitmap@gmail.com>
Date: Tue, 28 Apr 2020 00:05:26 -0400
Subject: [PATCH 5/9] Added some more styling and added the functionality to
 show and hide the correct method information.

---
 controllers/pug-index-controller.js |  27 -------
 public/css/styles.css               |  58 ++++++++++++---
 public/pug-index-controller.js      |  22 ++++++
 views/index.pug                     | 110 +++++++++++++++++-----------
 4 files changed, 136 insertions(+), 81 deletions(-)
 delete mode 100644 controllers/pug-index-controller.js
 create mode 100644 public/pug-index-controller.js

diff --git a/controllers/pug-index-controller.js b/controllers/pug-index-controller.js
deleted file mode 100644
index 2c147af..0000000
--- a/controllers/pug-index-controller.js
+++ /dev/null
@@ -1,27 +0,0 @@
-function activateEndpoint(id) {
-  var endPointId = id + '-end-point'
-  // eslint-disable-next-line no-undef
-  var endPoints = document.getElementsByClassName('endpoint')
-
-  for (var i = 0; i < endPoints.length; i++) {
-    if (endPoints[i].id === endPointId) {
-      endPoints[i].classList.add('selected')
-    } else {
-      endPoints[i].classList.remove('selected')
-    }
-  }
-
-  var docId = id + '-doc'
-  // eslint-disable-next-line no-undef
-  var docs = document.getElementsByClassName('doc')
-
-  for (var j = 0; j < docs.length; j++) {
-    if (docs[j].id === docId) {
-      docs[j].classList.remove('hidden')
-    } else {
-      docs[j].classList.add('hidden')
-    }
-  }
-}
-
-module.exports = activateEndpoint()
diff --git a/public/css/styles.css b/public/css/styles.css
index 846ff97..91cf69e 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -6,34 +6,70 @@ h3{
   margin-bottom: 5px;
 }
 
-.get-generation, .get-pokemon{
+.delete{
+  color:red;
+  font-weight: bold;
+}
+
+.hidden{
   display: none;
 }
 
-.get-all, .get-generation, .get-pokemon{
+.highlighted{
+  width: 300px;
+  height: 25px;
+  position: relative;
+  background: lightgray;
+  padding-top: 5px;
+}
+
+.highlighted:after {
+  content: "";
   position: absolute;
+  right: -15px;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-left: 15px solid lightgray;
+  border-top: 15px solid transparent;
+  border-bottom: 15px solid transparent;
+}
+
+.get-all, .get-generation, .get-pokemon{
+  padding: 0px;
+}
+
+.get{
+  color: green;
+  font-weight: bold;
+}
+
+.left-container{
+  flex-direction: row;
+  margin: 0px 20px;
+  padding-top: 30px;
+  width: 320px;
 }
 
 .main-container{
   display: flex;
-  justify-content: center;
   flex-direction: row;
-  position: relative;
+  justify-content: center;
 }
 
-.left-container{
-  align-self: center;
-  flex-direction: column;
-  margin: 0px 20px;
+.push{
+  color: darkorange;
+  font-weight: bold;
 }
 
 .right-container{
-  align-self: center;
-  flex-direction: row;
   margin: 0px 20px;
   position: relative;
+  width: 320px;
 }
 
 .tabs{
-  margin-top: 10px;
+  cursor: pointer;
+  font-size: 20px;
+  margin: 20px;
 }
diff --git a/public/pug-index-controller.js b/public/pug-index-controller.js
new file mode 100644
index 0000000..e220b6e
--- /dev/null
+++ b/public/pug-index-controller.js
@@ -0,0 +1,22 @@
+/* eslint-disable no-undef */
+// eslint-disable-next-line no-unused-vars
+function updateSelected(id) {
+  const tabs = document.getElementsByClassName('tabs')
+  const methods = document.getElementsByClassName('method')
+
+  for (let i = 0; i < tabs.length; i++) {
+    if (tabs[i].id === id) {
+      tabs[i].classList.add('highlighted')
+    } else {
+      tabs[i].classList.remove('highlighted')
+    }
+  }
+
+  for (let i = 0; i < methods.length; i++) {
+    if (methods[i].id === id) {
+      methods[i].classList.remove('hidden')
+    } else {
+      methods[i].classList.add('hidden')
+    }
+  }
+}
diff --git a/views/index.pug b/views/index.pug
index 8df3498..4f0d8b9 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -2,60 +2,84 @@ html
   head
     title Pokemon API
     link(rel="stylesheet" href="/css/styles.css")
-    script(src="../controllers/pug-index-controller.js")
+    script(src="/pug-index-controller.js")
   body
     h2 Welcome to the Pokemon API
     div(class="main-container")
       div(class="left-container")
-        div(class="tabs" id="get")
-          span GET
+        div(class="tabs highlighted" id="getAll" onclick="updateSelected('getAll')")
+          span(class="get") GET
           span /pokemon
-        div(class="tabs" id="get")
-          span GET
+        div(class="tabs" id="getGeneration" onclick="updateSelected('getGeneration')")
+          span(class="get") GET
           span /generation/{genId}
 
-        div(class="tabs" id="get")
-          span GET
-          span /pokemon/{pokemon name}
-          div /pokemon/{pokemon id}
+        div(class="tabs" id="getPokemonById" onclick="updateSelected('getPokemonById')")
+          span(class="get") GET
+          span /pokemon/{pokemonId}
 
-        div(class="tabs" id="push")
-          span PUSH
+        div(class="tabs" id="pushPokemon" onclick="updateSelected('pushPokemon')")
+          span(class="push") PUSH
           span /pokemon
 
+        div(class="tabs" id="deletePokemonById" onclick="updateSelected('deletePokemonById')")
+          span(class="delete") DELETE
+          span /pokemon/{pokemonId}
+
       div(class="right-container")
-        div(class="method-container")
+        div(class="method" id="getAll")
+          h3 Method
+          div(class="get") GET
+          h3 Route
+          div http://localhost:1337/pokemon
+          h3 Headers
+          div None needed
+          div
+          h3 Decription
+          div Returns a list all of the pokemon in the databse.
+
+        div(class="method hidden" id="getGeneration")
+          h3 Method
+          div(class="get") GET
+          h3 Route
+          div http://localhost:1337/pokemon/generations/{genId}
+          h3 Headers
+          div None needed
+          div
+          h3 Decription
+          div Returns the generation list of all pokemon associated with {genId}.
+
+        div(class="method hidden" id="getPokemonById")
+          h3 Method
+          div(class="get") GET
+          h3 Route
+          div http://localhost:1337/pokemon/pokemon/{pokemonId}
+          h3 Headers
+          div None needed
+          div
+          h3 Decription
+          div Returns the pokemon associated with the {id} (Id's are also the pokemon's pokedex number).
+
+        div(class="method hidden" id="pushPokemon")
           h3 Method
-          div GET
+          div(class="push") PUSH
           h3 Route
           div http://localhost:1337/pokemon
-          div(class="get-all")
-            h3 Headers
-            div None needed
-            div
-            h3 Decription
-            div Returns a list all of the pokemon in the databse.
-
-          div(class="get-generation")
-            h3 Method
-            div GET
-            h3 Route
-            div http://localhost:1337/pokemon/generations/{id}
-            h3 Headers
-            div None needed
-            div
-            h3 Decription
-            div Returns a list of all pokemon associated with the generation of the numerical {id}.
-
-          div(class="get-pokemon")
-            h3 Method
-            div GET
-            h3 Route
-            div http://localhost:1337/pokemon/pokemon/{id}
-            div(style="margin-left:110px") OR
-            div http://localhost:1337/pokemon/pokemon/{name}
-            h3 Headers
-            div None needed
-            div
-            h3 Decription
-            div Returns the pokemon associated with the numerical {id]} (pokedex number) or the {name} of the pokemon.
+          h3 Headers
+          div Content-Type: application/json
+          div
+          h3 Body
+          div { "gen": "1", "name": "Bulbasaur", "Types": "['grass', 'poison']"}
+          h3 Decription
+          div Returns a list all of the pokemon in the databse.
+
+        div(class="method hidden" id="deletePokemonById")
+          h3 Method
+          div(class="delete") DELETE
+          h3 Route
+          div http://localhost:1337/pokemon/pokemon/{pokemonId}
+          h3 Headers
+          div None needed
+          div
+          h3 Decription
+          div Deletes the pokemon associated with the {id} (Id's are also the pokemon's pokedex number).

From d9e11ec7d57012e104787a0245f22a07a66d4a16 Mon Sep 17 00:00:00 2001
From: orbitalbitmap <orbitalbitmap@gmail.com>
Date: Wed, 29 Apr 2020 15:19:51 -0400
Subject: [PATCH 6/9] Split the index.pug into partials, added a javascript
 folder in public and moved and renamed the indexPugInteractions.js file to
 the new folder, and deleted a dependency that was accidentally installed.

---
 package.json                              |  7 +-
 public/css/styles.css                     |  9 ++-
 public/javascripts/indexPugInteraction.js | 18 +++++
 public/pug-index-controller.js            | 22 -------
 views/index.pug                           | 80 ++---------------------
 views/partials/leftSideDocumentation.pug  | 19 ++++++
 views/partials/rightSideDocumentaion.pug  | 52 +++++++++++++++
 7 files changed, 100 insertions(+), 107 deletions(-)
 create mode 100644 public/javascripts/indexPugInteraction.js
 delete mode 100644 public/pug-index-controller.js
 create mode 100644 views/partials/leftSideDocumentation.pug
 create mode 100644 views/partials/rightSideDocumentaion.pug

diff --git a/package.json b/package.json
index c507d9c..d2850fa 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,9 @@
   "main": ".eslintrc.js",
   "scripts": {
     "dev": "./node_modules/.bin/nodemon index.js",
-    "lint": "run lint:pug-lint && run lint:eslint",
+    "lint": "run lint:puglint && run lint:eslint",
     "lint:eslint": "./node_modules/.bin/eslint --format codeframe .",
-    "puglint": "./node_modules/.bin/pug-lint ."
+    "lint:pug": "./node_modules/.bin/pug-lint ."
   },
   "repository": {
     "type": "git",
@@ -26,7 +26,6 @@
   },
   "dependencies": {
     "express": "^4.17.1",
-    "pug": "^2.0.4",
-    "s": "^1.0.0"
+    "pug": "^2.0.4"
   }
 }
\ No newline at end of file
diff --git a/public/css/styles.css b/public/css/styles.css
index 91cf69e..1436635 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -17,10 +17,10 @@ h3{
 
 .highlighted{
   width: 300px;
-  height: 25px;
+  height: 30px;
   position: relative;
   background: lightgray;
-  padding-top: 5px;
+  
 }
 
 .highlighted:after {
@@ -45,7 +45,6 @@ h3{
 }
 
 .left-container{
-  flex-direction: row;
   margin: 0px 20px;
   padding-top: 30px;
   width: 320px;
@@ -57,7 +56,7 @@ h3{
   justify-content: center;
 }
 
-.push{
+.post{
   color: darkorange;
   font-weight: bold;
 }
@@ -71,5 +70,5 @@ h3{
 .tabs{
   cursor: pointer;
   font-size: 20px;
-  margin: 20px;
+  margin: 30px;
 }
diff --git a/public/javascripts/indexPugInteraction.js b/public/javascripts/indexPugInteraction.js
new file mode 100644
index 0000000..d3ad3af
--- /dev/null
+++ b/public/javascripts/indexPugInteraction.js
@@ -0,0 +1,18 @@
+/* eslint-disable no-undef */
+// eslint-disable-next-line no-unused-vars
+const updateSelected = (id) => {
+  const tabs = document.getElementsByClassName('tabs')
+  const methods = document.getElementsByClassName('method')
+
+  for (let i = 0; i < tabs.length; i++) {
+    tabs[i].id === id
+      ? tabs[i].classList.add('highlighted')
+      : tabs[i].classList.remove('highlighted')
+  }
+
+  for (let i = 0; i < methods.length; i++) {
+    methods[i].id === id
+      ? methods[i].classList.remove('hidden')
+      : methods[i].classList.add('hidden')
+  }
+}
diff --git a/public/pug-index-controller.js b/public/pug-index-controller.js
deleted file mode 100644
index e220b6e..0000000
--- a/public/pug-index-controller.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/* eslint-disable no-undef */
-// eslint-disable-next-line no-unused-vars
-function updateSelected(id) {
-  const tabs = document.getElementsByClassName('tabs')
-  const methods = document.getElementsByClassName('method')
-
-  for (let i = 0; i < tabs.length; i++) {
-    if (tabs[i].id === id) {
-      tabs[i].classList.add('highlighted')
-    } else {
-      tabs[i].classList.remove('highlighted')
-    }
-  }
-
-  for (let i = 0; i < methods.length; i++) {
-    if (methods[i].id === id) {
-      methods[i].classList.remove('hidden')
-    } else {
-      methods[i].classList.add('hidden')
-    }
-  }
-}
diff --git a/views/index.pug b/views/index.pug
index 4f0d8b9..972ff05 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -2,84 +2,12 @@ html
   head
     title Pokemon API
     link(rel="stylesheet" href="/css/styles.css")
-    script(src="/pug-index-controller.js")
+    script(src="/javascripts/indexPugInteraction.js")
+
   body
     h2 Welcome to the Pokemon API
     div(class="main-container")
-      div(class="left-container")
-        div(class="tabs highlighted" id="getAll" onclick="updateSelected('getAll')")
-          span(class="get") GET
-          span /pokemon
-        div(class="tabs" id="getGeneration" onclick="updateSelected('getGeneration')")
-          span(class="get") GET
-          span /generation/{genId}
-
-        div(class="tabs" id="getPokemonById" onclick="updateSelected('getPokemonById')")
-          span(class="get") GET
-          span /pokemon/{pokemonId}
-
-        div(class="tabs" id="pushPokemon" onclick="updateSelected('pushPokemon')")
-          span(class="push") PUSH
-          span /pokemon
-
-        div(class="tabs" id="deletePokemonById" onclick="updateSelected('deletePokemonById')")
-          span(class="delete") DELETE
-          span /pokemon/{pokemonId}
-
-      div(class="right-container")
-        div(class="method" id="getAll")
-          h3 Method
-          div(class="get") GET
-          h3 Route
-          div http://localhost:1337/pokemon
-          h3 Headers
-          div None needed
-          div
-          h3 Decription
-          div Returns a list all of the pokemon in the databse.
-
-        div(class="method hidden" id="getGeneration")
-          h3 Method
-          div(class="get") GET
-          h3 Route
-          div http://localhost:1337/pokemon/generations/{genId}
-          h3 Headers
-          div None needed
-          div
-          h3 Decription
-          div Returns the generation list of all pokemon associated with {genId}.
-
-        div(class="method hidden" id="getPokemonById")
-          h3 Method
-          div(class="get") GET
-          h3 Route
-          div http://localhost:1337/pokemon/pokemon/{pokemonId}
-          h3 Headers
-          div None needed
-          div
-          h3 Decription
-          div Returns the pokemon associated with the {id} (Id's are also the pokemon's pokedex number).
 
-        div(class="method hidden" id="pushPokemon")
-          h3 Method
-          div(class="push") PUSH
-          h3 Route
-          div http://localhost:1337/pokemon
-          h3 Headers
-          div Content-Type: application/json
-          div
-          h3 Body
-          div { "gen": "1", "name": "Bulbasaur", "Types": "['grass', 'poison']"}
-          h3 Decription
-          div Returns a list all of the pokemon in the databse.
+      include partials/leftSideDocumentation.pug
 
-        div(class="method hidden" id="deletePokemonById")
-          h3 Method
-          div(class="delete") DELETE
-          h3 Route
-          div http://localhost:1337/pokemon/pokemon/{pokemonId}
-          h3 Headers
-          div None needed
-          div
-          h3 Decription
-          div Deletes the pokemon associated with the {id} (Id's are also the pokemon's pokedex number).
+      include partials/rightSideDocumentaion.pug
diff --git a/views/partials/leftSideDocumentation.pug b/views/partials/leftSideDocumentation.pug
new file mode 100644
index 0000000..12c5c5c
--- /dev/null
+++ b/views/partials/leftSideDocumentation.pug
@@ -0,0 +1,19 @@
+div(class="left-container")
+  div(class="tabs highlighted" id="getAll" onclick="updateSelected('getAll')")
+    span(class="get") GET
+    span /pokemon
+  div(class="tabs" id="getGeneration" onclick="updateSelected('getGeneration')")
+    span(class="get") GET
+    span /generation/{genId}
+
+  div(class="tabs" id="getPokemonById" onclick="updateSelected('getPokemonById')")
+    span(class="get") GET
+    span /pokemon/{pokemonId}
+
+  div(class="tabs" id="postPokemon" onclick="updateSelected('postPokemon')")
+    span(class="post") POST
+    span /pokemon
+
+  div(class="tabs" id="deletePokemonById" onclick="updateSelected('deletePokemonById')")
+    span(class="delete") DELETE
+    span /pokemon/{pokemonId}
diff --git a/views/partials/rightSideDocumentaion.pug b/views/partials/rightSideDocumentaion.pug
new file mode 100644
index 0000000..3ad6c64
--- /dev/null
+++ b/views/partials/rightSideDocumentaion.pug
@@ -0,0 +1,52 @@
+div(class="right-container")
+  div(class="method" id="getAll")
+    h3 Method
+    div(class="get") GET
+    h3 Route
+    div http://localhost:1337/pokemon
+    h3 Headers
+    div None needed
+    h3 Decription
+    div Returns a list all of the pokemon in the databse.
+
+  div(class="method hidden" id="getGeneration")
+    h3 Method
+    div(class="get") GET
+    h3 Route
+    div http://localhost:1337/pokemon/generations/{genId}
+    h3 Headers
+    div None needed
+    h3 Decription
+    div Returns the generation list of all pokemon associated with {genId}.
+
+  div(class="method hidden" id="getPokemonById")
+    h3 Method
+    div(class="get") GET
+    h3 Route
+    div http://localhost:1337/pokemon/pokemon/{pokemonId}
+    h3 Headers
+    div None needed
+    h3 Decription
+    div Returns the pokemon associated with the {id} (Id's are also the pokemon's pokedex number).
+
+  div(class="method hidden" id="postPokemon")
+    h3 Method
+    div(class="post") POST
+    h3 Route
+    div http://localhost:1337/pokemon
+    h3 Headers
+    div Content-Type: application/json
+    h3 Body
+    div { "gen": "1", "name": "Bulbasaur", "Types": "['grass', 'poison']"}
+    h3 Decription
+    div Returns a list all of the pokemon in the databse.
+
+  div(class="method hidden" id="deletePokemonById")
+    h3 Method
+    div(class="delete") DELETE
+    h3 Route
+    div http://localhost:1337/pokemon/pokemon/{pokemonId}
+    h3 Headers
+    div None needed
+    h3 Decription
+    div Deletes the pokemon associated with the {id} (Id's are also the pokemon's pokedex number).

From 8da6bb618595e507071e686d083ec99aedb9ab05 Mon Sep 17 00:00:00 2001
From: orbitalbitmap <orbitalbitmap@gmail.com>
Date: Wed, 29 Apr 2020 23:37:29 -0400
Subject: [PATCH 7/9] Adjusted styles.css to be sorted and adjusted some
 styling.

---
 public/css/styles.css                    | 51 ++++++++++++++----------
 views/partials/rightSideDocumentaion.pug | 42 +++++++++----------
 2 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index 1436635..584a53d 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,3 +1,7 @@
+body{
+  margin-top: 150px;
+}
+
 h2{
   text-align: center;
 }
@@ -7,46 +11,43 @@ h3{
 }
 
 .delete{
-  color:red;
+  color: crimson;
   font-weight: bold;
 }
 
+.get{
+  color: green;
+  font-weight: bold;
+}
+
+.get-all, .get-generation, .get-pokemon{
+  padding: 0px;
+}
+
 .hidden{
   display: none;
 }
 
 .highlighted{
-  width: 300px;
-  height: 30px;
+  background-color: lightgray;
   position: relative;
-  background: lightgray;
+  width: 300px;
   
 }
 
 .highlighted:after {
+  bottom: 0;
+  border-bottom: 15px solid transparent;
+  border-left: 15px solid lightgray;
+  border-top: 15px solid transparent;
   content: "";
   position: absolute;
   right: -15px;
-  bottom: 0;
   width: 0;
-  height: 0;
-  border-left: 15px solid lightgray;
-  border-top: 15px solid transparent;
-  border-bottom: 15px solid transparent;
-}
-
-.get-all, .get-generation, .get-pokemon{
-  padding: 0px;
-}
-
-.get{
-  color: green;
-  font-weight: bold;
 }
 
 .left-container{
   margin: 0px 20px;
-  padding-top: 30px;
   width: 320px;
 }
 
@@ -64,11 +65,19 @@ h3{
 .right-container{
   margin: 0px 20px;
   position: relative;
-  width: 320px;
+  width: 340px;
+}
+
+.spacing{
+  margin: 20px 0px;
+  padding-left: 20px;
 }
 
 .tabs{
   cursor: pointer;
   font-size: 20px;
-  margin: 30px;
+  margin: 30px 0;
+  padding-top: 4px;
+  padding-left: 5px;
+  padding-bottom: 3px;
 }
diff --git a/views/partials/rightSideDocumentaion.pug b/views/partials/rightSideDocumentaion.pug
index 3ad6c64..ec43195 100644
--- a/views/partials/rightSideDocumentaion.pug
+++ b/views/partials/rightSideDocumentaion.pug
@@ -1,52 +1,52 @@
 div(class="right-container")
   div(class="method" id="getAll")
     h3 Method
-    div(class="get") GET
+    div(class="get spacing") GET
     h3 Route
-    div http://localhost:1337/pokemon
+    div(class="spacing") http://localhost:1337/pokemon
     h3 Headers
-    div None needed
+    div(class="spacing") None needed
     h3 Decription
-    div Returns a list all of the pokemon in the databse.
+    div(class="spacing") Returns a list all of the pokemon in the databse.
 
   div(class="method hidden" id="getGeneration")
     h3 Method
-    div(class="get") GET
+    div(class="spacing get") GET
     h3 Route
-    div http://localhost:1337/pokemon/generations/{genId}
+    div(class="spacing") http://localhost:1337/pokemon/generations/{genId}
     h3 Headers
-    div None needed
+    div(class="spacing") None needed
     h3 Decription
-    div Returns the generation list of all pokemon associated with {genId}.
+    div(class="spacing") Returns the generation list of all pokemon associated with {genId}.
 
   div(class="method hidden" id="getPokemonById")
     h3 Method
-    div(class="get") GET
+    div(class="spacing get") GET
     h3 Route
-    div http://localhost:1337/pokemon/pokemon/{pokemonId}
+    div(class="spacing") http://localhost:1337/pokemon/pokemon/{pokemonId}
     h3 Headers
-    div None needed
+    div(class="spacing") None needed
     h3 Decription
-    div Returns the pokemon associated with the {id} (Id's are also the pokemon's pokedex number).
+    div(class="spacing") Returns the pokemon associated with the {id} (Id's are also the pokemon's pokedex number).
 
   div(class="method hidden" id="postPokemon")
     h3 Method
-    div(class="post") POST
+    div(class="spacing post") POST
     h3 Route
-    div http://localhost:1337/pokemon
+    div(class="spacing") http://localhost:1337/pokemon
     h3 Headers
-    div Content-Type: application/json
+    div(class="spacing") Content-Type: application/json
     h3 Body
-    div { "gen": "1", "name": "Bulbasaur", "Types": "['grass', 'poison']"}
+    div(class="spacing") { "gen": "1", "name": "Bulbasaur", "Types": "['grass', 'poison']"}
     h3 Decription
-    div Returns a list all of the pokemon in the databse.
+    div(class="spacing") Returns a list all of the pokemon in the databse.
 
   div(class="method hidden" id="deletePokemonById")
     h3 Method
-    div(class="delete") DELETE
+    div(class="spacing delete") DELETE
     h3 Route
-    div http://localhost:1337/pokemon/pokemon/{pokemonId}
+    div(class="spacing") http://localhost:1337/pokemon/pokemon/{pokemonId}
     h3 Headers
-    div None needed
+    div(class="spacing") None needed
     h3 Decription
-    div Deletes the pokemon associated with the {id} (Id's are also the pokemon's pokedex number).
+    div(class="spacing") Deletes the pokemon associated with the {id} (Id's are also the pokemon's pokedex number).

From 088fc2cd95eaddf0717db87ec6e728c8e444db0d Mon Sep 17 00:00:00 2001
From: orbitalbitmap <orbitalbitmap@gmail.com>
Date: Wed, 29 Apr 2020 23:41:27 -0400
Subject: [PATCH 8/9] Took out some code that wasn't doing anything in
 styles.css.

---
 public/css/styles.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index 584a53d..080b9cf 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -20,10 +20,6 @@ h3{
   font-weight: bold;
 }
 
-.get-all, .get-generation, .get-pokemon{
-  padding: 0px;
-}
-
 .hidden{
   display: none;
 }

From 332c07cee2e32f497ae96783def2c0cd2e6a3078 Mon Sep 17 00:00:00 2001
From: orbitalbitmap <orbitalbitmap@gmail.com>
Date: Thu, 30 Apr 2020 12:55:49 -0400
Subject: [PATCH 9/9] Minor styling changes.

---
 public/css/styles.css                    | 12 ++++++++----
 views/partials/rightSideDocumentaion.pug |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index 080b9cf..7738eea 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -15,6 +15,10 @@ h3{
   font-weight: bold;
 }
 
+.delete, .get, .post{
+  padding-right: 10px;
+}
+
 .get{
   color: green;
   font-weight: bold;
@@ -27,8 +31,7 @@ h3{
 .highlighted{
   background-color: lightgray;
   position: relative;
-  width: 300px;
-  
+  width: 320px;
 }
 
 .highlighted:after {
@@ -43,7 +46,7 @@ h3{
 }
 
 .left-container{
-  margin: 0px 20px;
+  margin: 0px 30px;
   width: 320px;
 }
 
@@ -61,7 +64,7 @@ h3{
 .right-container{
   margin: 0px 20px;
   position: relative;
-  width: 340px;
+  width: 440px;
 }
 
 .spacing{
@@ -72,6 +75,7 @@ h3{
 .tabs{
   cursor: pointer;
   font-size: 20px;
+  letter-spacing: 1px;
   margin: 30px 0;
   padding-top: 4px;
   padding-left: 5px;
diff --git a/views/partials/rightSideDocumentaion.pug b/views/partials/rightSideDocumentaion.pug
index ec43195..0eb036c 100644
--- a/views/partials/rightSideDocumentaion.pug
+++ b/views/partials/rightSideDocumentaion.pug
@@ -37,7 +37,7 @@ div(class="right-container")
     h3 Headers
     div(class="spacing") Content-Type: application/json
     h3 Body
-    div(class="spacing") { "gen": "1", "name": "Bulbasaur", "Types": "['grass', 'poison']"}
+    div(class="spacing") { "gen": "1", "name": "Bulbasaur", "Types": "['grass', 'poison']" }
     h3 Decription
     div(class="spacing") Returns a list all of the pokemon in the databse.