Pokemon basic filte

data.js

loadAllPokemon() //When the web page is finish to load, the first function to load is this one


// const allPokemon = pokemon["pokemon"]
function loadAllPokemon() {
  const allPokemon = pokemon["pokemon"]
  renderPokemonListInvView( allPokemon )
}

function searchPokemonByName( ){

  const args = document.getElementById("searchPokemon");

  if(args.value.length > 0){
    // apply filter with condition to create a new array
    const searchList = pokemon["pokemon"].filter( 
        // Is very important to check the follow information
        // 1. "pokemon.name.toUpperCase()" convert name in list to capital letters
        // Example: Pikachu to PIKACHU
        // 2. "args.value.toUpperCase()" convert value typed in Input to capital letters
        // Example : pi to PI
        //why?
        // 'cause its much better to create condition like name PIKACHU includes PI
        // than Pikachu includes pi. The last one its not true and when creates new array doesnt
        // exist a condition like 'Pikachu includes pi and the array will be empty
        pokemon => pokemon.name.toUpperCase().includes(args.value.toUpperCase())
      )
    // After create a new array, put information in view
    //Validate array is empty, put a simple message "no data founded"
    renderPokemonListInvView( searchList )
  }else if(args.value.length == 0){
    loadAllPokemon()
  }

}

function renderPokemonListInvView( allPokemon ){

    let pokemonListContainer = document.getElementById("pokemonList")
    pokemonListContainer.innerHTML = '';
    
    var counter = 0
    allPokemon.forEach(pokemon => {

      let parent = document.createElement("div");
      parent.className = "pokemonItem"

      //image
      //creamos un elemento IMG (porque es una imagen) y la metemos en la variable pokemonImage
      let pokemonImage = document.createElement("img");
      pokemonImage.src = pokemon.img;
      pokemonImage.className = "pokemonImage";
      parent.appendChild(pokemonImage);

      parent.appendChild(createClear());

      //Number
     let pokemonNum = document.createElement("span");
     pokemonNum.innerHTML = pokemon.num;
     pokemonNum.className = "pokemonNum";
     parent.appendChild(pokemonNum);
     parent.appendChild(createClear());
      //name. 
      //Span es para poner un texto dentro del div papá. 
      //al pokemonName le digo que ponga un HTML dentro de él.
      //a  la variable creada le asigno una clase para identificarla(le asigné el mismo nombre para identificar mejor).
      //a la variable creada le asigno un papá que será el parent.
      let pokemonName = document.createElement("span");
      pokemonName.innerHTML = pokemon.name;
      pokemonName.className = "pokemonName";
      parent.appendChild(pokemonName);
      parent.appendChild(createClear());
      //Weaknesses
      let pokemonWeaknesses = pokemon.weaknesses
      for (i = 0; i < pokemonWeaknesses.length; i++){
        let pokemonWeak = document.createElement("span");
        pokemonWeak.innerHTML = pokemonWeaknesses[i];
        parent.appendChild(pokemonWeak);
      }

      parent.appendChild(createClear());
      //type
      let pokemonType = document.createElement("span");
      pokemonType.innerHTML = pokemon.type;
      pokemonType.classList = "pokemonType";
      parent.appendChild( pokemonType );
      pokemonListContainer.appendChild(parent);

      counter += 1
      console.log( counter )
      console.log( allPokemon.length )
      if( counter == allPokemon.length ){
        pokemonListContainer.appendChild(createClear());
      }

    });


}

function createClear() {
  let clear = document.createElement("div");
  clear.className = "clear"
  return clear
}





/*let allpokemon; 

function preload() {
  allpokemon = loadJSON("pokemon.json")
}

function setup(){
  let pokemon = allpokemon.pokemon;

  for (let i = 0; i < pokemon.length; i++){
    console.log(i)
    /*let name = pokemon[i].name;
    for (let j = 0; j < name[i].length; j++){
      creatediv(name[j]);
    }
  }
console.log(name)
}*/



/*const example = () => {
  return 'example';
};

window.example = example;*/

pokebusqueda.html

<!DOCTYPE html>
<html lang="en">
<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>POKEBUSQUEDA</title>
    <link rel="stylesheet" href="style.css" />
    <link type="image/x-icon" rel="icon" href="favicon.ico"/>
    <link href="https://fonts.googleapis.com/css?family=Dokdo" rel="stylesheet">
</head>
<body>
        <div>
            <h1>POKEFAN LOVERS</h1>
            <div id="header">
                <ul class="nav">
                    <li><a href="index.html">Inicio</a></li>
                    <li><a href="pokebusqueda.html">PokeBusqueda</a></li>
                    <li><a href="poketube.html">PokeTube</a></li>
                    <li><a href="favoritos.html">Favoritos</a></li>
                </ul>
            </div>
        </div> 
        <div class = "clear"></div>

        <input type="text" name="searhPokemon" id="searchPokemon" class="inputSearch" placeholder="Type name of pokemon" onkeyup="searchPokemonByName()">
        <!-- Pleas, check more information about events in input element 
            https://www.w3schools.com/tags/ref_eventattributes.asp
            https://www.w3schools.com/js/js_events_examples.asp
         -->

        <div class = "clear"></div>
        <div id= "pokemonList"> 
        </div>
        <div class = "clear"></div>
    <div id="root"></div>
    <script src="./data/pokemon/pokemon.js"></script>
    <script src="data.js"></script>
    <script src="main.js"></script>     
</body>
</html>

style.css

div h1 {
    font-family: "Dokdo", cursive;
    font-size: 80px;
    color: yellow;
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    text-align: center;
}

html{
    background-image: url(https://www.imgbase.info/images/safe-wallpapers/anime/pokemon/40142_pokemon.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(1);
    background-color: rgba(10, 10, 10, 0.3);
    background-blend-mode: soft-light;
    margin: 0;
    padding: 0;
  
}

#header{
    margin: auto;
    width: 500px;
    font-family: "Dokdo", cursive;
}

ul li{
    list-style: none;
}

.nav li a{
    background-color: black;
    color: yellow;
    text-decoration:none; 
    padding: 10px 15px;
    display:block;
}

.nav > li {
    float: left;
}

.nav li a:hover{
    background-color: gray;
}

#pokemonList{
    position: relative;
    text-align: center;
}

.pokemonItem{
    padding: 20px;
    border: 1px solid #ffffff;
    margin: 1px 2px 1px 2px;

    display: block;
    width: 16%;
    float: left;
    height: 260px;
    text-align: center;
}


.pokemonItem span.pokemonName{
    padding: 10px;
    align-self: center;
    
}

.clear{
    clear: both;
}

.pokemonNum{
    text-align: center;
    text-decoration-color: #ffffff;

}

.inputSearch{
width: 90%;
padding: 10px;
margin: 10px;

}

iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);
}