-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (136 loc) · 6.56 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="/node_modules/crypto-js/crypto-js.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[url('https://wallpaperaccess.com/full/1225736.jpg')] bg-cover bg-no-repeat">
<div class="p-2">
<div class="m-3">
<div class="flex">
<button
class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-white bg-red-700 rounded-l-lg hover:bg-red-800 focus:outline-none"
type="button"> <a href="/favourite.html">Favourite</a></button>
<div class="relative w-full">
<input type="search" id="query"
class="focus:outline-none block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-r-lg border-l-gray-50 border-l-2 border border-gray-300"
placeholder="Search any character..." required>
<button type="submit" id="search"
class="absolute top-0 right-0 p-2.5 text-sm font-medium text-white bg-slate-900 rounded-r-[7px] focus:outline-none h-[42px]">
<svg aria-hidden="true" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<span class="sr-only">Search</span>
</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-8 p-5 xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 transition-all transform ease-in-out float-none" id="results"></div>
</div>
</div>
</body>
</html>
<!-- <script type="module" src="index.js"></script> -->
<script type="module">
let public_api = "df2548987c893122ae5f6233ce06cc76";
let private_api = "ab30ca613935ea396aa2a92d9d04db05211f5432";
let Favourite = JSON.parse(localStorage.getItem("fav")) || [];
let Heros = JSON.parse(localStorage.getItem("heros")) || [];
let results = document.getElementById("results");
// var md5 = CryptoJS.MD5;
let search = document
.getElementById("search")
.addEventListener("click", function () {
sea();
});
// var ts = new Date().getTime();
var ts = "1640717903956";
// console.log(ts);
// var hashed = md5(ts + public_api + private_api).toString();
var hashed = "79f2927f4d78496679d921b2473e0dbf";
// console.log(hashed);
let sea = async () => {
let query = document.getElementById("query").value;
let res = await fetch(
`https://gateway.marvel.com/v1/public/characters?nameStartsWith=${query}&ts=1640717903935&apikey=fbaa46b0c09a2703c7e247764cda66f6&hash=cd07a618bf10905245ca5217773722a2`
);
let data = await res.json();
localStorage.setItem("heros", JSON.stringify(data.data.results));
append(data.data.results);
};
append(Heros);
// This function appends data to the HTML results element
function append(data) {
// Set the innerHTML of the results element to null
// This ensures that the results element is empty before appending new data
results.innerHTML = null;
// Map through the data array and create a box for each element
data.map((el, i) => {
let box = document.createElement("div");
// Set attributes for the box element
box.setAttribute('class', 'h-auto pb-2 group shadow-lg hover:shadow-xl shadow-black rounded-xl bg-slate-900 overflow-hidden hover:scale-105 duration-500 transition-all ease-in-out');
// Create a name element for the superhero and set its text content to the superhero's name
let name = document.createElement("h3");
name.innerHTML = el.name;
// Set attributes for the name element
name.setAttribute('class','text-white text-center mt-3 text-md mx-2 font-bold')
// Create an image element for the superhero and set its source to the superhero's thumbnail path and extension
let image = document.createElement("img");
image.setAttribute('class','p-3 rounded-[100%] h-40 w-40 block mx-auto')
image.src = el.thumbnail.path + "." + el.thumbnail.extension;
// Adding an event listener to the "image" element that was created earlier
image.addEventListener("click", function () {
// Using the "localStorage" API to store the superhero's details as a JSON string
localStorage.setItem("details", JSON.stringify(el));
// Redirecting the browser to the "superheropage.html" page
window.location.assign("superheropage.html");
});
// Creating a "button" element for adding to favourites
let fav = document.createElement("button");
fav.innerText = "Favourite";
fav.setAttribute('class','block mx-auto bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded')
// Adding an event listener to the "fav" button
fav.addEventListener("click", function () {
// Checking if there are any superheroes already in the favourites list
if (Favourite.length > 0) {
// Looping through the favourites list to check if the current superhero is already added
for (let i = 0; i < Favourite.length; i++) {
if (el.id === Favourite[i].id) {
// If the superhero is already in the favourites list, display an alert and exit the function
return alert("Already added to fav list");
}
}
}
// If the superhero is not already in the favourites list, add them to the list
Favourite.push(el);
fav.innerText = "Added!"
fav.classList.add('bg-green-500','hover:bg-green-600')
// Storing the updated favourites list in the browser's localStorage
localStorage.setItem("fav", JSON.stringify(Favourite));
});
// Checking if the "Favourite" array already contains any superheroes
if (Favourite.length > 0) {
// Looping through the "Favourite" array
for (let i = 0; i < Favourite.length; i++) {
// Checking if the current superhero in the "data" array (i.e., "el") has already been added to the "Favourite" array
if (el.id === Favourite[i].id) {
// If the superhero has already been added to the "Favourite" array, update the button's text and classes
fav.innerText= "Added!"
fav.classList.remove('bg-red-600','hover:bg-red-700')
fav.classList.add('bg-green-500','hover:bg-green-600')
}
}
}
// Adding the name, image, and "fav" button to the "box" element
box.append(name, image, fav);
// Adding the "box" element to the "results" element
results.append(box);
});
}
</script>