Git Product home page Git Product logo

pokedex's Introduction

Ton super Pokedex ;-)

Installation

Attention : tu dois avoir node, npm et git installé sur ta machine

Récupére le dossier avec git clone n'importe ou sur ta machine

$ git clone https://github.com/elleetla/pokedex.git

Place toi à la racine du dossier "pokedex" en ligne de commande et execute la commande suivante

$ npm install

Ensuite execute la ligne suivante afin de générer un serveur local

$ npm run start

Ouvre une nouvelle fenetre de ton terminal et execute la ligne suivante pour que webpack compile le fichier "app.js" pour le transformer en "bundle.js" dans le dossier "public/js"

$ npm run build-dev

Tu peux commencer :)

Le but de ce test est de créer un mini pokedex en récupérant la data provenant d'un fichier Json externe et en l'affichant sur la page "index.html" présent à la racine du dossier.

Tu as un dossier "src" à la racine. Ce dossier contient d'autres dossier nommé de la façon suivante :

  • css : contient un fichier "app.css"
  • js : contient un fichier "app.js"
  • img : contient l'img du logo pokemon

La structure html et css sont déjà faite, tu n'as pas à t'en occuper. Pour effectuer l'exercice il te suffit de te focaliser sur le dossier "js". C'est dans le fichier "app.js" que tu écriras ton code.

Pour récupérer la data das pokemons, il faut que fasse appel à ce fichier : https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json

Tu devras afficher chaque pokemon, avec : le nom, la taille, le poid, et l'image. Comme ceci :

Tu peux coder ce pokedex en ES6 ou en jQuery. Si tu souhaites utiliser jQuery, il te suffira d'insérer la ligne suivante dans le fichier "app.js"

let $ = require("jquery");

et de modifier légérement la structure de ton script comme ceci

let jQuery = require("jquery");

(function ($) {
    
    console.log("tu écris ton code ici :)");

})(jQuery);

Pour afficher la liste de tes pokemons, tu peux les afficher dans la balise html "ul" qui a pour class ".list-pokemon"

Tu peux structurer ta lise en utilisant les class de bootstrap, ex : ".col-lg-4""

Une fois ton script terminé, tu peux executer la commande suivante

$ npm run build-prod

et ensuite me remettre le dossier complet sur clès USB ;-)

pokedex's People

Contributors

elleetla avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.