From 72635a48833cb3221549e8ad9de6d2ecd28df710 Mon Sep 17 00:00:00 2001 From: Komal Agarwal Date: Wed, 24 Jul 2024 18:03:34 +0530 Subject: [PATCH] marvel api --- Existing_API_Collection/Marvel_API/index.html | 27 ++++ Existing_API_Collection/Marvel_API/script.js | 116 ++++++++++++++++++ Existing_API_Collection/Marvel_API/style.css | 101 +++++++++++++++ 3 files changed, 244 insertions(+) create mode 100644 Existing_API_Collection/Marvel_API/index.html create mode 100644 Existing_API_Collection/Marvel_API/script.js create mode 100644 Existing_API_Collection/Marvel_API/style.css diff --git a/Existing_API_Collection/Marvel_API/index.html b/Existing_API_Collection/Marvel_API/index.html new file mode 100644 index 0000000..1b4a6d8 --- /dev/null +++ b/Existing_API_Collection/Marvel_API/index.html @@ -0,0 +1,27 @@ + + + + + + Marvel API App + + + + + + + +
+
+ + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/Existing_API_Collection/Marvel_API/script.js b/Existing_API_Collection/Marvel_API/script.js new file mode 100644 index 0000000..a543fa3 --- /dev/null +++ b/Existing_API_Collection/Marvel_API/script.js @@ -0,0 +1,116 @@ +let input = document.getElementById("input-box"); +let button = document.getElementById("submit-button"); +let showContainer = document.getElementById("show-container"); +let listContainer = document.querySelector(".list"); + +// Replace with your actual public and private keys +const publicKey = ''; +const privateKey = ''; + +let ts = "1681802982683"; +const hash = CryptoJS.MD5(ts + privateKey + publicKey).toString(); + +function displayWords(value) { + input.value = value; + removeElements(); +} + +function removeElements() { + listContainer.innerHTML = ""; +} + +input.addEventListener("keyup", async () => { + removeElements(); + if (input.value.length < 4) { + return false; + } + + const url = `https://gateway.marvel.com:443/v1/public/characters?ts=${ts}&apikey=${publicKey}&hash=${hash}&nameStartsWith=${input.value}`; + + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + const jsonData = await response.json(); + + jsonData.data["results"].forEach((result) => { + let name = result.name; + let div = document.createElement("div"); + div.style.cursor = "pointer"; + div.classList.add("autocomplete-items"); + div.setAttribute("onclick", `displayWords('${name}')`); + let word = `${name.substr(0, input.value.length)}${name.substr(input.value.length)}`; + div.innerHTML = `

${word}

`; + listContainer.appendChild(div); + }); + } catch (error) { + console.error('Error fetching data:', error); + } +}); + +button.addEventListener("click", async () => { + if (input.value.trim().length < 1) { + alert("Input cannot be blank"); + return; + } + showContainer.innerHTML = ""; + const url = `https://gateway.marvel.com:443/v1/public/characters?ts=${ts}&apikey=${publicKey}&hash=${hash}&name=${input.value}`; + + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + const jsonData = await response.json(); + + jsonData.data["results"].forEach((element) => { + showContainer.innerHTML += ` +
+
+ ${element.name} +
+
${element.name}
+
${element.description}
+
`; + }); + } catch (error) { + console.error('Error fetching data:', error); + } +}); + +window.onload = async () => { + if (input.value.trim().length > 0) { + await getResult(); + } +}; + +async function getResult() { + if (input.value.trim().length < 1) { + alert("Input cannot be blank"); + return; + } + showContainer.innerHTML = ""; + const url = `https://gateway.marvel.com:443/v1/public/characters?ts=${ts}&apikey=${publicKey}&hash=${hash}&name=${input.value}`; + + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + const jsonData = await response.json(); + + jsonData.data["results"].forEach((element) => { + showContainer.innerHTML += ` +
+
+ ${element.name} +
+
${element.name}
+
${element.description}
+
`; + }); + } catch (error) { + console.error('Error fetching data:', error); + } +} diff --git a/Existing_API_Collection/Marvel_API/style.css b/Existing_API_Collection/Marvel_API/style.css new file mode 100644 index 0000000..c0834ea --- /dev/null +++ b/Existing_API_Collection/Marvel_API/style.css @@ -0,0 +1,101 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + background-color: #313030; +} + +.container { + background-color: #ee130b; + width: 90%; + max-width: 500px; + margin: 0 auto; + padding: 3em 2em; + position: absolute; + transform: translateX(-50%); + left: 50%; + right: 50%; + top: 1em; + border-radius: 1em; +} + +.input-container { + display: grid; + grid-template-columns: 9fr 3fr; + gap: 1em; +} + +input { + padding: 1em 0.5em; + background-color: #3a3939; + color: #ffffff; + border: none; + border-radius: 0.5em; + outline: none; +} + +button { + outline: none; + border: none; + background-color: #f8f5f6; + color: black; + border-radius: 0.5em; +} + +.display-container { + padding: 1em; +} + +.container-character-image { + background-color: #ffffff; + padding: 0.5em; + height: 9.37em; + width: 9.37em; + display: block; + margin: auto; + border-radius: 50%; +} + +.container-character-image img { + width: 100%; + position: relative; + width: block; + border-radius: 50%; +} + +.character-name { + padding: 0.5em 0 0.8em 0; + text-align: center; + color: #ffffff; + text-transform: uppercase; + font-size: 1.2em; + font-weight: 600; +} + +.character-description { + text-align: justify; + color: wheat; + line-height: 2em; + font-weight: 300; +} + +.list { + position: absolute; + width: 64%; + background-color: #555; + color: #ffffff; + z-index: 1; +} + +.autocomplete-items { + padding: 0.5em; +} + +.autocomplete-items:hover { + background-color: #ddd; + color: #171821; +} \ No newline at end of file