PoketeamProject

In this example below you will see how to do a PoketeamProject with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by TurnipEntropy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright TurnipEntropy ©
  • HTML
  • CSS
  • JavaScript
    <div id="header"> 
  <ul class="header-list">
    <li id="header-name">PokeTeam Project</li>
    <li class="headli"><a href="#body-contact">Contact</a></li>
    <li class="headli"><a href="#body-portfolio">Portfolio</a></li>
    <li class="headli"><a href="#body-about">About</a></li>
    <li class="headli"><a href="#body-main">Home</a><li>
  </ul>
</div>
<div id='input-div'>
  <label>Pokemon Game:</label>
  <!--These selects will eventually be turned
into bootstrap compatable select2's-->
  <select id='games'>
    <option value='Red'>Red</option>
    <option value='Blue'>Blue</option>
    <option value='Yellow'>Yellow</option>
    <option value='Gold'>Gold</option>
  </select>
  <br>
  <label>Closest City:</label>
  <select id='cities'>
    <option value="Cerulean Cave"> Cerulean Cave</option>
    <option value="Veridian City">Veridian City</option>
    <option value="Pallet Town">Pallet Town</option>
  </select>
  <br>
  <button type="button" onclick="changeUp();">Find Best Team</button>
  <p>  </p>
  <div class="container-fluid" id="inner-container">
    <div id="temp-container">
      This gets replaced.
    </div>
  </div>
  
</div>



/*Downloaded from https://www.codeseek.co/TurnipEntropy/poketeamproject-MbpOYo */
    body{
  background:#718cb0;
}

#header-name{
  display:block;
  padding: 12px 16px;
  float:left;
  color: #eee;
}
#header{
  overflow:hidden;
  margin:0;
  padding:0;
}
.header-list{
  list-style-type: none;
  padding: 0;
  width: 100%;
  background-color: #333;
  overflow: hidden;
  position:fixed;
  z-index:100;
  /*height: 100%;
  position: fixed;
  overfow: auto;*/
}

.headli{
  text-align: center;
  float: right;
  
}

.headli a{
  display: block;
  color: #eee;
  padding: 12px 16px;
  text-decoration: none;
}

.headli a:hover{
  background:#111;
}

#input-div{
  margin:5%;
}

.table-head{
  background-color: #333;
  color: #bbb;
}
#list-table{
  max-width:767px;
  
}
 .table td {
    border: none;
}

table.table.table-condensed {
  border: 3px solid black;
  border-color: #333;
  background-color: rgba(240, 240, 240, 0.25);
  
  overflow-y:hidden;
}

.img-d{
  height:100%;
  max-height:45px;
  margin-top:-10%;
  min-width:20px;
}
background-image:url(http://tse4.mm.bing.net/th?id=OIP.Mf476ac0c8e2a0bc8dd7a1a19c77d5741o0&w=250&h=250);


/*Downloaded from https://www.codeseek.co/TurnipEntropy/poketeamproject-MbpOYo */
    function changeUp(){
  $("#temp-container").empty();
  $("<table></table>", {
    "class": "table table-condensed",
    id: "list-table"
  }).appendTo("#temp-container");
  $("<thead></thead>", {
    "class":"thead-inverse",
    id:"list-table-head"
  }).appendTo("#list-table");
  $("#list-table-head").append(
      '<tr><th class="col-xs-5"></th><th class="col-xs-1">Name</th><th class="col-xs-1">Power</th><th class="col-xs-5">Strengths</th></tr>'  
  );
  $("<tbody></tbody>", {
    id:"list-tbody"
  }).appendTo("#list-table");
  $("#list-tbody").append(
    '<tr><th><a><img src="http://cdn.bulbagarden.net/upload/7/78/150Mewtwo.png" class="img-d"></a></th><th>Mewtwo</th><th>680</th><th>Fighting, Poison</th></tr>'
  );
  $("#list-tbody").append(
    '<tr><th><a><img src="http://cdn.bulbagarden.net/upload/8/8b/149Dragonite.png" class="img-d"</th><th>Dragonite</th><th>600</th><th>Dragon, Fighting, Bug, Grass</th></tr>'
  );
  $("#list-tbody").append(
    '<tr><th><a><img src="http://cdn.bulbagarden.net/upload/e/e3/145Zapdos.png" class="img-d"</th><th>Zapdos</th><th>580</th><th>Water, Flying, Fighting, Bug, Grass</th></tr>'
  );
  $("#list-tbody").append(
    '<tr><th><a><img src="http://cdn.bulbagarden.net/upload/2/2d/062Poliwrath.png" class="img-d"</th><th>Poliwrath</th><th>500</th><th>Ground, Rock, Fire, Normal, Ice</th></tr>'
  );
  $("#list-tbody").append(
    '<tr><th><a><img src="http://cdn.bulbagarden.net/upload/7/71/127Pinsir.png" class="img-d"</th><th>Pinsir</th><th>500</th><th>Psychic, Grass</th></tr>'
  );
  $("#list-tbody").append(
    '<tr><th><a><img src="http://cdn.bulbagarden.net/upload/b/bf/031Nidoqueen.png" class="img-d"</th><th>Nidoqueen</th><th>495</th><th>Grass, Poison, Rock, Fire, Electric</th></tr>'
  );
}

function changeUp2(){
  $("#temp-container").empty();
  $("<table></table>", {
    "class": "table",
    id: "list-table"
  }).appendTo("#temp-container");
  $("#list-table").append(
    "<thead></thead>", {
      "class":"thead-inverse"
    }).append("<tr></tr>")
      .append("<th></th>", {
        "class":"col-xs-1",
        text: "#"})
}

Comments