JSFiddle - React, Tailwind, and code Playground

by VaAlina

HTML

<img src="http://pokeapi.co/media/img/4.png" alt="pokemon" />

JavaScript

var model = {
    link: "http://pokeapi.co/api/v1/pokemon/",
    pokemonName: "no name",
    pokemonType: "",
    pokemonAttak: "",
    pokemonDefense: "",
    pokemonHp: "",
    pokemonSpAtk: "",
    pokemonSpDef: "",
    pokemonSpeed: "",
    pokemonWeight: "",
    pokemonMoves: "",
    pokemonNationalId: "",
    
    
    loadNextPokemon: function(jsonPage){
        $.getJSON(model.link + jsonPage + "/", function(item) {
            model.pokemonName = item.name;
            alert(model.pokemonName);//Test.
            model.pokemonType = item.types[0].name;
            model.pokemonAttak = item.attack;
            model.pokemonDefense  = item.defense;
            model.pokemonHp = item.hp;  
            model.pokemonSpAtk = item.sp_atk; 
            model.pokemonSpDef = item.sp_def;
            model.pokemonSpeed = item.speed;
            model.pokemonWeight = item.weight;
            model.pokemonMoves = item.moves.length;
            model.pokemonNationalId = item.national_id;           
        });
    }
};

model.loadNextPokemon(1);
alert(model.pokemonName);

var view = {
    showPokemon: function(){
        alert("works");
    }
};

var controller = {
    loadPokemon: function(){
        alert("loads");
    }
};