diff --git a/Existing_API_Collection/Marvel_API/Readme.md b/Existing_API_Collection/Marvel_API/Readme.md new file mode 100644 index 0000000..682c8bf --- /dev/null +++ b/Existing_API_Collection/Marvel_API/Readme.md @@ -0,0 +1,49 @@ +# Marvel API App + +Marvel API App is a simple web application that allows users to search for Marvel characters and view detailed information about them using the Marvel API. + +## Features + +- Search Marvel Characters: Type in the name of a Marvel character to search for matching results. +- Autocomplete Suggestions: Get autocomplete suggestions as you type in the search box. +- Character Details: View detailed information about each character, including their name, image, and description. + +## Screenshots + +![Marvel API App Screenshot](./image.png) + +## Technologies Used + +- HTML +- CSS +- JavaScript +- [Marvel API](https://developer.marvel.com/) + +## Getting Started + +### Prerequisites + +To run this project locally, you will need: + +- A modern web browser (Chrome, Firefox, Safari, etc.) +- Internet connection + +### Installation + +1. Clone the repository: + +```sh +git clone https://github.com/your-username/marvel-api-app.git +cd marvel-api-app +Open index.html in your browser to view the application. +``` + +### Configuration + +- Sign up for an API key at Marvel Developer Portal. +- Get your public and private keys from your Marvel Developer account. +- Replace the placeholder keys in the script.js file with your actual keys: +``` +const publicKey = 'your_public_key'; +const privateKey = 'your_private_key'; +``` diff --git a/Existing_API_Collection/Marvel_API/image.png b/Existing_API_Collection/Marvel_API/image.png new file mode 100644 index 0000000..b6e9d0d Binary files /dev/null and b/Existing_API_Collection/Marvel_API/image.png differ 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