Day 26: Making a PokeDex
Lesson 1: PokeDex 1
Set up your project in the standard way, an index.html, a style.css and a main.js.
Here is all the HTML that you need:
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 9 <link rel="stylesheet" href="style.css" /> 10 </head> 11 <body> 12 <div id="container" class="center"> 13 <h1>All The Pokemon</h1> 14 <div id="flex-container"> 15 <div class="card" id="placeholder"> 16 <div class="lds-ring"> 17 <div></div> 18 <div></div> 19 <div></div> 20 <div></div> 21 </div> 22 <div class="title"></div> 23 <img src="" alt="" /> 24 <div class="flex-row"> 25 <div class="types"></div> 26 <div class="weight"></div> 27 </div> 28 </div> 29 </div> 30 <div class="footer"> 31 Showing 1 to <span id="total-pokemon">20</span>, 32 <span class="action-text" onclick="nextPage()">show more ></span> 33 </div> 34 <div id="backdrop" class="hidden"> 35 <div id="modal"> 36 <div id="modal-title">Wartortle</div> 37 <img 38 id="modal-image" 39 src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/8.png" 40 alt="" 41 /> 42 <div> 43 <canvas id="statsChart"></canvas> 44 </div> 45 </div> 46 </div> 47 </div> 48 </body> 49 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 50 <script src="main.js"></script> 51</html>
Here is the CSS:
1*, 2*::before, 3*::after { 4 box-sizing: border-box; 5} 6 7body { 8 font-family: "Open Sans", "Helvetica Neue", sans-serif; 9} 10 11#container { 12 max-width: 800px; 13 min-width: 300px; 14 margin: auto; 15} 16 17#flex-container { 18 display: flex; 19 flex-wrap: wrap; 20 row-gap: 24px; 21 flex-direction: row; 22 width: 100%; 23 justify-content: space-between; 24} 25 26.card { 27 box-sizing: border-box; 28 padding: 32px; 29 border: 1px solid #ddd; 30 box-shadow: 4px 10px 44px -22px rgba(133, 133, 133, 1); 31 border-radius: 8px; 32 flex: 1 0 100%; 33} 34 35.title { 36 font-weight: bold; 37 font-size: 20px; 38 text-transform: capitalize; 39} 40 41.center { 42 text-align: center; 43} 44 45ul { 46 font-size: 20px; 47 line-height: 35px; 48 padding: 0; 49} 50 51form { 52 font-size: 18px; 53} 54 55input { 56 padding: 5px; 57 border-radius: 5px; 58 border: 1px solid gray; 59} 60 61li { 62 list-style-type: none; 63} 64 65#backdrop { 66 position: fixed; 67 top: 0; 68 left: 0; 69 background-color: rgba(0, 0, 0, 0.75); 70 height: 100vh; 71 width: 100%; 72} 73 74#modal { 75 position: absolute; 76 padding: 32px; 77 border: 1px solid #ddd; 78 box-shadow: 4px 10px 44px -22px rgba(133, 133, 133, 1); 79 border-radius: 8px; 80 max-width: 600px; 81 width: 100%; 82 height: 600px; 83 background-color: white; 84 left: 50%; 85 top: 100px; 86 transform: translateX(-50%); 87} 88 89#modal-title { 90 font-size: 50px; 91 font-weight: bold; 92 text-align: center; 93 text-transform: capitalize; 94} 95 96#modal img { 97 display: block; 98 margin: 10px auto; 99 width: 180px; 100} 101 102.flex-row { 103 display: flex; 104 flex-direction: row; 105 justify-content: space-between; 106} 107 108.hidden { 109 display: none; 110} 111 112.action-text { 113 cursor: pointer; 114 color: rgb(40, 109, 246); 115} 116 117.footer { 118 margin: 30px; 119} 120 121.types { 122 text-transform: capitalize; 123} 124 125@media screen and (min-width: 40em) { 126 .card { 127 max-width: calc(50% - 1em); 128 } 129} 130 131@media screen and (min-width: 60em) { 132 .card { 133 max-width: calc(33.33% - 1em); 134 } 135 #flex-container::after { 136 content: ""; 137 flex: auto; 138 max-width: calc(33.33% - 1em); 139 } 140} 141 142.lds-ring { 143 display: inline-block; 144 position: relative; 145 width: 80px; 146 height: 80px; 147} 148.lds-ring div { 149 box-sizing: border-box; 150 display: block; 151 position: absolute; 152 width: 64px; 153 height: 64px; 154 margin: 8px; 155 border: 8px solid rgb(40, 109, 246); 156 border-radius: 50%; 157 animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; 158 border-color: rgb(40, 109, 246) transparent transparent transparent; 159} 160.lds-ring div:nth-child(1) { 161 animation-delay: -0.45s; 162} 163.lds-ring div:nth-child(2) { 164 animation-delay: -0.3s; 165} 166.lds-ring div:nth-child(3) { 167 animation-delay: -0.15s; 168} 169@keyframes lds-ring { 170 0% { 171 transform: rotate(0deg); 172 } 173 100% { 174 transform: rotate(360deg); 175 } 176} 177 178label { 179 font-size: 20px; 180} 181 182select { 183 font-size: 18px; 184 border-radius: 4px; 185 border: 1px solid #aaa; 186 padding: 4px; 187}
When you run this you should see a single card with a loading spinner in it.