-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproducto.html
181 lines (172 loc) · 5.77 KB
/
producto.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="icon" type="image/x-icon" href="favicon.png?" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css"
/>
<style>
#factor {
width: 100px;
}
header {
display: flex;
align-items: center;
}
footer.footer {
display: flex;
align-items: center;
}
</style>
<!-- <meta
id="ogimage"
property="og:image"
content="/Helados/fotos/xxxx.jpg"
/>
<meta id="ogtitle" property="og:title" content="Helado de xxxx" />
<meta
id="ogdescription"
property="og:description"
content="xxxx."
/>
<meta id="ogurl" property="og:url" content="/Helados/xxxx.html" /> -->
</head>
<body>
<header class="bg-primary py-3">
<div class="container">
<a href="."
><img
src="fotos/logo.png"
alt="..."
width="50"
style="margin-top: -2%"
/>
</a>
<h1 id="titulo" class="text-white d-inline-block ms-3">
Error de nombre del helado
</h1>
</div>
</header>
<div class="container py-5">
<div class="row">
<div class="col-md-6">
<img id="foto" src="" class="img-fluid" alt="" />
</div>
<div id="receta" class="col-md-6"><h2></h2></div>
</div>
</div>
<footer class="footer sticky-footer bg-secondary py-3">
<div class="container mb-0 d-inline-block">
<form class="d-inline-block">
<span class="d-inline-block">Factor:</span>
<input
type="number"
step="1"
min="1"
class="form-control d-inline-block"
id="factor"
value="1"
/>
</form>
<p
class="text-white mb-0 d-inline-block float-end"
style="transform: translateY(5px)"
>
© 2023 Fede Krum (Neo-Heladero)
</p>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
<script>
var sabor;
var foto;
var titulo;
var factor = 1;
// ----- levanta el nombre del primer parametro de la URL que sera el identificador del sabor
function getParam(url = window.location) {
// Create a params object
let params = {};
new URL(url).searchParams.forEach(function (val, key) {
if (params[key] !== undefined) {
if (!Array.isArray(params[key])) {
params[key] = [params[key]];
}
params[key].push(val);
} else {
params[key] = val;
}
});
for (var prop in params) {
return prop;
}
}
// ----- Asigna los valores
sabor = getParam();
foto = "fotos/" + sabor + ".jpg";
document.getElementById("foto").setAttribute("src", foto);
//document.getElementById("ogimage").setAttribute("content", "./" + foto);
//document.getElementById("ogtitle").setAttribute("content", sabor);
//document.getElementById("ogdescription").setAttribute("content", "xxx");
//document.getElementById("ogurl").setAttribute("content", "./producto.html?" + sabor);
// ----- Levanta la receta basado en el nombre
function reqListenerReceta() {
if (reqReceta.status === 200) {
// aca remplazar la receta en el dom
document.getElementById("receta").innerHTML = this.responseText;
//console.log(this.responseText);
} else {
document.getElementById("receta").innerHTML =
"Esta receta aún no esta disponible.";
}
updateRefreshTags();
}
const reqReceta = new XMLHttpRequest();
reqReceta.addEventListener("load", reqListenerReceta);
reqReceta.open("GET", "recetas/" + sabor + ".html?");
reqReceta.send();
// ----- Levanta los datos de los sabores disponibles
function reqListenerTitulos() {
// aca remplazar la receta en el dom
var data = JSON.parse(this.responseText);
document.title = "Helado de " + data[sabor].titulo;
document.getElementById("titulo").innerHTML =
"Helado de " + data[sabor].titulo;
//console.log(data[sabor].titulo);
}
const reqTitulos = new XMLHttpRequest();
reqTitulos.addEventListener("load", reqListenerTitulos);
reqTitulos.open("GET", "datos.json");
reqTitulos.send();
// ----- Refresca la pagina con las proporciones nuevas
function updateRefreshTags() {
const refreshTags = document.querySelectorAll("span[data-defvalue]");
for (let i = 0; i < refreshTags.length; i++) {
const refreshTag = refreshTags[i];
const defvalue = parseFloat(refreshTag.getAttribute("data-defvalue"));
if (Number.isInteger(defvalue * factor)) {
refreshTag.textContent = (defvalue * factor).toFixed(0);
} else {
refreshTag.textContent = (defvalue * factor).toFixed(2);
}
}
// Find all the img elements that failed to load
document.querySelectorAll("img").forEach((img) => {
if (img.naturalWidth === 0) {
// Replace the src attribute with the default image
img.src = "fotos/any.jpg";
}
});
}
// ----- Esta pendiente de un cambio en el factor
document.getElementById("factor").oninput = () => {
factor = parseFloat(event.target.value);
if (isNaN(factor)) factor = 1;
updateRefreshTags();
};
</script>
</body>
</html>