Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pokedex</title>
​
   
    <link rel="stylesheet" href="css/style.css" />
  </head>
​
  <body >
    <header class="header">
      <div class="logo">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/9/98/International_Pok%C3%A9mon_logo.svg"
          alt="logo"
        />
      </div>
      <div class="hamburger-nav">
        <svg
          height="32px"
          id="Layer_1"
          style="enable-background: new 0 0 32 32"
          version="1.1"
          viewBox="0 0 32 32"
          width="32px"
          xml:space="preserve"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <path
            style="fill: white"
            d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"
          />
        </svg>
​
        <div class="wrapper">
          <select name="pokemonList" class="list">
            <option value="names">NAMES</option>
          </select>
        </div>
      </div>
    </header>
​
    <div class="container">
      <div class="pokedex-container">
        <div class="pokedex">
          <div class="panel left-panel">
            <h3 class="pokemon-name screen" id="pokemonNameDisplay"></h3>
            <img class="poke-img" id="pokemonImg" src=>
            <div class="controls">
              <div class="btn-fronteview" id="fronteview">
                <img src="images/redo.png" />
              </div>
              <div class="btn-shiny" id="shiny">Shiny</div>
              <div class="btn-rearview" id="rearview">
                <img src="images/undo.png" />
              </div>
            </div>
​
            <p class="pokemon-description screen">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum molestiae quia molestias, id aperiam ducimus consequatur, deserunt eos culpa delectus reprehenderit possimus consectetur numquam maiores commodi tenetur eligendi nostrum nihil.
            </p>
          </div>
​
​
          <div class="border">
            <img src="./images/PokedexBorder.jpeg" alt="border" />
          </div>
​
​
          <div class="panel right-panel">
            <div class="right-topBox">
              <div class="abillity screen">
                <h2 >Abilities</h2>
                <ul id="ability" class="abilityDisplay">
                </ul>
              </div>
              <div class="type screen">
                <h2 >Types</h2>
                <ul id="type" class="typeDisplay">
                </ul>
              </div>
          </div>
            <div class="moves-bigBox">
              <div class="display-moves panel screen">
                <h2>Moves</h2>
                <ul id="moves"></ul>
              </div>
            </div>
​
          <div class="big-searchBox"> </div>
          <div class="search-box">
            <input type="text" id="pokemonId" placeholder="Write pokemon Num">
            <button id="search">Search</button>
            <button id="savePokemon" >Save Pokemon</button>
            
          </div>
        </div>
      </div>
    </div>
​
​
​
​
​
    <script src="./script.js"></script>
    
​
    
  </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
doronddavpro
0viewers