Code javascript utilisant json, jquery et css
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:
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:
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:
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 :)
