Merge pull request #10 from lawandothman/develop

Release 1.0
lawandothman · Feb 5, 2020 · 3ab234c · 3ab234c
2 parents 4869109 + e8d2a5d
commit 3ab234c
Show file tree

Hide file tree

Showing 8 changed files with 169 additions and 34 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+.DS_Store
diff --git a/ReadMe.md b/ReadMe.md
@@ -1,4 +1,24 @@
-# Law Pokedex
+# Pokédex
+
+A live Pokédex web application in JavaScript, HTML and CSS and deployed using [Heroku app](https://www.heroku.com/).
+
+![Home Page Screenshot](pokedex-home-screenshot.png)
+
+![Pokemon Page Screenshot](pokedex-pokemon-screenshot.png)
+
+## Availabe Scripts
+
+```
+npm start
+```
+
+Runs the application. You need to open http://localhost:3000
+
+```
+npm run dev
+```
+
+Runs the application in development mode.
 
 ## Environments
 

diff --git a/pokedex-home-screenshot.png b/pokedex-home-screenshot.png
diff --git a/pokedex-pokemon-screenshot.png b/pokedex-pokemon-screenshot.png
diff --git a/public/style.css b/public/style.css
@@ -1,3 +1,5 @@
+/*Home Page*/
+
 body {
   margin: 0;
 }
@@ -43,10 +45,10 @@ body {
   margin: auto;
   text-align: center;
 }
-
 .image {
   height: 180px;
   margin: 10px 0px 10px 0px;
+  width: 180px;
 }
 
 .fire {
@@ -119,3 +121,70 @@ body {
 .poison {
   background-color: #b97fc9;
 }
+
+/* Pokemon Page*/
+li {
+  list-style-type: none;
+}
+.title {
+  text-align: center;
+}
+.pokeman-name {
+  text-transform: uppercase;
+  text-align: left;
+}
+.pokemon-image {
+  margin: 30px;
+}
+.info {
+  text-align: left;
+  margin: 100px 0px 50px 100px;
+  padding-left: 10px;
+  word-spacing: 2px;
+}
+
+.moves {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  flex-grow: 1;
+  flex-basis: 0;
+  width: max-content;
+  height: max-content;
+  justify-content: center;
+}
+
+.card {
+  margin: 20px;
+  padding: 20px;
+  line-height: 2rem;
+  text-align: left;
+  width: 250px;
+  height: 250px;
+}
+
+.moves-title {
+  text-align: left;
+  padding-left: 20px;
+  margin-top: 20px;
+  margin-left: 60px;
+}
+
+.move-name {
+  text-transform: uppercase;
+  font-size: 20px;
+  font-weight: 200;
+  text-align: center;
+}
+.move-damage-class {
+  text-transform: capitalize;
+}
+
+.move-type {
+  text-align: center;
+}
+
+span {
+  margin-left: 10px;
+}
diff --git a/views/index.html b/views/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>My Pokédex</title>
+    <title>Pokédex</title>
     <link rel = "stylesheet" type = "text/css" href = "/style.css">
     <link
       rel="stylesheet"

diff --git a/views/pokemon.html b/views/pokemon.html
@@ -1,41 +1,86 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <meta http-equiv="X-UA-Compatible" content="ie=edge">
-      <title>Pokémon</title>
-      <link rel="stylesheet" href="../style.css">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title class="pokeman-name">{{pokemon.name | upper}}</title>
+    <link rel="stylesheet" href="../style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"
+    />
+    <script src="https://kit.fontawesome.com/225aeb8e22.js" crossorigin="anonymous">
+    </script>
   </head>
 
+  <body>
+  <div class = "container">
+    <a href="/">
+      <h1 class="title is-1">Pokédex</h1>
+    </a>
+    </div>
 
+    <div class="container">
+      <div class = "columns">
+          <div class= "pokemon-image column is-two-thirds">
+          <img height="300" width="300" src="{{pokemon.sprites.front_default}}" />
+        </div>
+        <div class = "info column">
+          <h2 class="pokeman-name title is-3">{{pokemon.name}}</h2>
+          <p>Weight:  {{pokemon.weight/10}} kg</p>
+          <p>Height:  {{pokemon.height/10}} m</p>
+          <p>
+            Type(s):{%for type in pokemon.types%} 
+              <span class = "type {{type.type.name}}"> {{type.type.name}}</span> 
+            {%endfor%}
+          </p>
+        </div>
 
-  <body>
-
-    <li class = "PokemonCard">
-      <img class = "card-image" src="{{pokemon.sprites.front_default}}">
-      <h2 class = "card-title">{{pokemon.id}} {{pokemon.name}}</h2>
-      <p class = "card-weight"> Weight: {{pokemon.weight/10}} kg </p>
-      <p class = "card-height"> Height: {{pokemon.height/10}} m </p>
-      <p class = "card-type">Type: {%for type in pokemon.types%} {{type.type.name}} {%endfor%}</p>
-    </li>
+
+      </div>
+
+      <div class = "container">
+        <h3 class = "moves-title title is-4">MOVES</h3>
+      </div>
+
+      <div class = "moves container">
+        {%for move in moves%}
+          <div class = "card">
+              <p class="move-name"> {{move.data.name}}
+                {% if (move.data.damage_class.name) === "status" %}
+                <span class="fas fa-record-vinyl"></span>
+                {% elif (move.data.damage_class.name) === "special" %}
+                <span class="fas fa-bolt"></span>
+                {% else %}
+                <span class="fas fa-bahai"></span>
+                {% endif %}
+              </p>
+              <p class = " move-power"> <b>Power :</b> {{move.data.power or '100'}}</p>
+              <p class = " move-accuracy"><b>Acc:</b> {{move.data.accuracy or '100'}} % 
+
+                <progress class="progress is-primary" value="{{move.data.accuracy or '100'}}" max="100">
+               {{move.data.accuracy or '100'}} %</progress>
+
+
+              </p>
+              <p class = " move-pp"> <b>PP:</b> {{move.data.pp}}</p>
+              <p class = "move-damage-class"></p>
+              <p class = " move-type">
+                  <span class = "type {{move.data.type.name}}"> {{move.data.type.name}} </span>
+              </p>
+          </div>
+        {%endfor%}
+        </div>
 
-    {#page links#}
-    <a href="/pokemon/{{pokemon.id - 1}}">Previous</a>
-    <a href="/">Pokédex</a> 
-    <a href="/pokemon/{{pokemon.id + 1}}">Next</a>
-    <hr>
 
-    {%for move in moves%}
-      <p class = "move-name"> move name: {{move.data.name}} </p>
-      <p> type: {{move.data.type.name}} </p>
-      <p> power : {{move.data.power or '100'}} </p>
-      <p> damage class: {{move.data.damage_class.name}} </p>
-      <p> accuracy: {{move.data.accuracy or '100'}} %</p>
-      <p> power point: {{move.data.pp}} </p>
-      <hr>
-    {%endfor%}
+    </div>
 
+    <div class="container">
+      <a class="button is-primary" href="/pokemon/{{pokemon.id - 1}}"
+        >Previous</a
+      >
+      <a class="button is-primary" href="/pokemon/{{pokemon.id + 1}}">Next</a>
+    </div>
   </body>
-
-</html>
+</html>