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 :
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
  }
} );
2) Code
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