Merge pull request #25 from David-Kasilia/add-content

Add content to home page
David-Kasilia · Aug 31, 2022 · e11684e · e11684e
2 parents a4d9d63 + 5abe072
commit e11684e
Show file tree

Hide file tree

Showing 10 changed files with 295 additions and 26 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -7,7 +7,7 @@
     <title>Pokemon</title>
     <link rel="icon" href="32d7036b771b4f36ba0b.png">
     <link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@500&display=swap" rel="stylesheet"> 
-<script defer src="runtime.js"></script><script defer src="main.js"></script></head>
+<script defer src="main.js"></script></head>
 <body>
     <nav>
         <div id="nav-bar">
@@ -26,7 +26,11 @@
             </div>
         </div>
     </nav>
-
+    <main id="main" class="main">
+        <div id="poke-container" class="poke-container">
+
+        </div> 
+    </main>
     <footer class="footer">
         <p class="footerTopText">Created by Microverse under CC license</p>
     </footer>

diff --git a/dist/main.js b/dist/main.js
diff --git a/src/images/background.jpg b/src/images/background.jpg
diff --git a/src/images/background.png b/src/images/background.png
diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,5 @@
-
 body {
-  background-image: url('./images/background.jpg');
+  background-image: url('./images/background.png');
   background-repeat: no-repeat;
   background-size: cover;
 }
@@ -19,7 +18,7 @@ a {
   flex-direction: row;
   justify-content: space-around;
   width: 85%;
-  background-color: rgba(255, 255, 255, 0.4);
+  background-color: rgba(255, 255, 255, 0.95);
   border-width: 5px;
   border-radius: 0 0 14px 14px;
   margin: 0 auto;
@@ -38,7 +37,7 @@ a {
   align-items: center;
   flex-direction: column;
   justify-content: space-around;
-  background-color: rgba(235, 111, 111, 0.3);
+  background-color: rgba(68, 137, 201, 0.7);
   border-radius: 10%;
 }
 
@@ -60,20 +59,12 @@ a {
   text-transform: uppercase;
 }
 
-.main {
-  display: none;
-  background-color: rgba(255, 255, 255, 0.4);
-  width: 85%;
-  margin: 25px auto;
-  border-radius: 14px 14px 0 0;
-}
-
 .footer {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 85%;
-  background-color: rgba(255, 255, 255, 0.4);
+  background-color: rgba(255, 255, 255, 0.8);
   border-width: 5px;
   border-radius: 0 0 14px 14px;
   margin: 0 auto;
@@ -83,3 +74,59 @@ a {
   font-family: 'Oxanium', cursive;
   font-size: 18px;
 }
+
+.poke-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 80%;
+}
+
+.pokemon {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 10px;
+  box-shadow: 0 3px 15px rgba(255, 255, 255, 0.4);
+  margin: 10px;
+  padding: 20px;
+  text-align: center;
+}
+
+.img-container {
+  background-color: rgba(68, 137, 201, 0.2);
+  border-radius: 10%;
+  width: 120px;
+  height: 120px;
+  display: block;
+  margin: auto;
+}
+
+.poke-img {
+  display: block;
+  margin: auto;
+  height: 90%;
+  max-width: 90%;
+}
+
+.poke-name {
+  margin: 15px 0 7px;
+  letter-spacing: 1px;
+  font-family: 'Oxanium', cursive;
+  font-size: 20px;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.comments-btn {
+  font-family: 'Oxanium', cursive;
+  font-size: 20px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 0 0 14px 14px;
+  width: 180px;
+  height: 50px;
+}
diff --git a/src/index.html b/src/index.html
@@ -7,6 +7,7 @@
     <title>Pokemon</title>
     <link rel="icon" href="./images/pokeball.png">
     <link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@500&display=swap" rel="stylesheet"> 
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
 </head>
 <body>
     <nav>
@@ -27,7 +28,9 @@
         </div>
     </nav>
     <main id="main" class="main">
-        <a href="#" class="click">Clicke Me!</a>
+        <div id="poke-container" class="poke-container">
+
+        </div> 
     </main>
     <footer class="footer">
         <p class="footerTopText">Created by Microverse under CC license</p>

diff --git a/src/index.js b/src/index.js
@@ -1 +1,14 @@
 import './index.css';
+import getPokemon from './modules/pokeapi.js';
+
+// function to fetch pokemon
+
+const pokemonNumber = 20;
+const fetchPokemons = async () => {
+  // eslint-disable-next-line no-plusplus
+  for (let i = 1; i <= pokemonNumber; i++) {
+    getPokemon(i);
+  }
+};
+
+fetchPokemons();
diff --git a/src/modules/content.js b/src/modules/content.js
@@ -0,0 +1,27 @@
+// populating the html container for the pokemon
+
+const createPokemonCard = (pokemon) => {
+  const pokeContainer = document.getElementById('poke-container');
+  const pokemonEl = document.createElement('div');
+  pokemonEl.classList.add('pokemon');
+
+  const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
+
+  const pokeInnerHTML = `
+  <div class="img-container">
+  <img class="poke-img" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/${pokemon.id}.png">
+  </div>
+<div class="info">
+<h3 class="poke-name">${name} <span class="material-symbols-outlined">
+favorite
+</span> </h3>
+<button id="comments" class="comments-btn">Comments</buttons>
+</div>
+  `;
+
+  pokemonEl.innerHTML = pokeInnerHTML;
+
+  pokeContainer.appendChild(pokemonEl);
+};
+
+export default createPokemonCard;
diff --git a/src/modules/pokeapi.js b/src/modules/pokeapi.js
@@ -0,0 +1,14 @@
+// function to get pokemon
+import createPokemonCard from './content.js';
+
+const getPokemon = async (id) => {
+  // base for the api to get the pokemon
+  const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
+
+  // fetch data
+  const res = await fetch(url);
+  const pokemon = await res.json();
+  createPokemonCard(pokemon);
+};
+
+export default getPokemon;
diff --git a/webpack.config.js b/webpack.config.js
@@ -5,6 +5,7 @@ module.exports = {
   mode: 'development',
   entry: './src/index.js',
   output: {
+    filename: '[name].js',
     path: path.resolve(__dirname, 'dist'),
   },
 
@@ -22,6 +23,7 @@ module.exports = {
         test: /\.html$/,
         loader: 'html-loader',
       },
+      { test: /\.txt$/, use: 'raw-loader' },
     ],
   },