<aside> 📖 Le test technique d’Enoki est un site responsive où on choisit des cartes Pokémon à ajouter dans son deck. Ce site fait appel à une API spécifique donnée par l’entreprise. On peut retrouver la maquette Figma ainsi que les instructions du projet ci-dessous : file:///C:/Users/ahau7/Desktop/dossier%20test%20technique%20enoki/Test%20technique%20Pokmeon.pdf

</aside>

Tentative en React

Installation

npx create-react-app nomDeLApp

Set background image

Je regarde ensuite comment mettre une image en fond avec le site freecodecamp et ce site Reactgo. J’ai notamment consulté cette vidéo.

How to set React background image full screen

How To Create a Full Page Image

Display data api

Connexion à l’api : https://pokeapi-enoki.netlify.app/pokeapi.json

Fetch and display data from API in React js | CodingDeft.com

Fetch and Display Data From API in React JS - Tuts Make

Fetch and display data from an API with react 🔥🔥

Framework style

On va utiliser Tailwindcss pour le style de la page

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Retour aux bases : HTML, CSS et Javascript

Display api data

Fetch & display API data using JavaScript

How to Use JavaScript Fetch to Display API Results in HTML

Fetch API (JavaScript)- How to Make GET and POST Requests

Pour afficher une image sur une autre

Il faut utiliser une position relative sur le background et une position absolute sur l’image allant par-dessus. Ensuite, il faut changer la position de l’image grâce au top, left, right et bottom.