-
Notifications
You must be signed in to change notification settings - Fork 0
/
api_call_client.html
130 lines (125 loc) · 4.24 KB
/
api_call_client.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="static/css/style.css" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
</style>
<style>
html,
body {
font-family: "Montserrat", sans-serif;
height: 100%;
background: rgb(0, 255, 229);
background: var(--gradient-bottom-left);
}
#contenuto {
background-color: rgba(255, 240, 240, 0.4);
border-radius: 2rem;
padding: 1rem;
max-width: 50%;
}
#contenitore-center {
display: flex;
align-items: center;
height: 100%;
}
.btn {
border-radius: 1rem;
}
.form-control {
border-radius: 1rem;
}
img {
max-width: 50%;
max-height: 50%;
border-radius: 2rem;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.443);
}
</style>
<title>Document</title>
</head>
<body>
<div id="contenitore-center">
<div id="contenuto" class="container" class="center">
<center><h2 class="display-3">Mexican inspiration</h2></center>
<center>
<button
class="btn btn-primary"
onclick="api_client('contenutorecipe')"
title="recipe"
>
Lasciati ispirare
</button>
</center>
<br />
<center><div id="contenutorecipe"></div></center>
</div>
</div>
<script src="static/javascript/main.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"
></script>
<script
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"
></script>
<script>
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
}
// const settings = {
// async: true,
// crossDomain: true,
// // il numero alla fine del link indica l'_id della ricetta
// url: "https://the-mexican-food-db.p.rapidapi.com/" + getRandomInt(1, 100),
// method: "GET",
// headers: {
// "X-RapidAPI-Key":
// "56952c7f2amsh11ce56ddc1c81c2p123b04jsn9daba08a1037",
// "X-RapidAPI-Host": "the-mexican-food-db.p.rapidapi.com",
// },
// };
// function api_client(content) {
// $.ajax(settings).done(function (response) {
// document.getElementById(content).innerHTML =
// response.title + "<br>" + response.description;
// console.log(response);
// });
// }
var xhr = new XMLHttpRequest();
xhr.withCredentials = false;
function api_client(content) {
const data = null;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
document.getElementById(content).innerHTML =
JSON.parse(this.response).title + "<br>" + JSON.parse(this.response).description + "</br></br></br><img src='" + JSON.parse(this.response).image + "' alt=''>";
console.log(JSON.parse(this.response));
}
});
xhr.open("GET", "https://the-mexican-food-db.p.rapidapi.com/" + getRandomInt(1, 100));
xhr.setRequestHeader(
"X-RapidAPI-Key",
"56952c7f2amsh11ce56ddc1c81c2p123b04jsn9daba08a1037"
);
xhr.setRequestHeader(
"X-RapidAPI-Host",
"the-mexican-food-db.p.rapidapi.com"
);
xhr.send(data);
}
</script>
</body>
</html>