Bonjour à tous,
J'aimerais faire un site équivalent à celui-ci https://hello-jquery6.glitch.me/ mais en utilisant un générateur aléatoire de chiens (vous moquez pas). Or j'ai à peu pris repris le même code mais ça ne marche absolument pas. Je suis bloquée car je ne comprends pas où est le problème, voici le code :
1) Code JS :
2) Code
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 $.getJSON( "https://api.thedogapi.com/v1/images/search?limit=50&page=50&order=Desc", function( json ) { //i take the data from the dogapi database and callback to the function json console.log( json ); // print data in the console var dogs = json; //the variable dogs uses the document json var body = $( "body" ); // store the "body" of our document inside a jQuery object id body for( var i = 0; i< json.length; i = i + 1 ) { // loop through each dogs in our "breeds" array var dog = dogs[ i ]; // store the current dog in a variable var imgContainer = $( "<div class='img-container'></div>" ); // we create a container for the dog image and its data var img = $( "<img>" ); // we create a jQuery object with an "img" element img.attr( "src", dogs.url); // set its "src" attribute with a jquery method imgContainer.append( img ); // and append this element to our container var dogsdata = $( "<p class='dogs-data'></p>" ); // we create a jQuery object with a new paragraph dogsdata.html( dogs.breed.name ); // set its inner HTML with jQuery imgContainer.append( dogsdata ); // and append this to our container body.append( dogsdata ); // finally we append the container to the "body" of our document } } );
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Dogs</title> <link rel="stylesheet" href="style.css"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
3) Code CSS
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 * { margin: 0; padding: 0; } body { background: black; text-align: center; line-height: 0; } .img-container { display: inline-block; position: relative; overflow: hidden; cursor: pointer; } .dogs-data { position: absolute; bottom: 0; left: -120%; width: 100%; height: 50px; background: rgba( 0, 0, 0, 0.3 ); padding-left: 10px; text-align: left; color: white; font-family: sans-serif; font-size: 20px; line-height: 24px; transition: left 0.3s ease-in; } .img-container:hover .dogs-data { left: 0; }
Pourriez-vous m'aider à comprendre ce qui ne fonctionne pas s'il vous plaît ?
Merci d'avance![]()
Partager