complete project

README.md

@@ -1,22 +1,86 @@
-# 📊 Project: Simple API 1
-
-### Goal: Display data returned from an api
-
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# 🦸‍♂️ Marvel Origins Finder
+
+This little project lets you search for any Marvel character and instantly see their story and picture. It connects straight to the **Marvel Developer API** and pulls the info right into the browser — no backend needed.
+
+I built it as a fun way to practice working with APIs, JavaScript, and some responsive design.
+
+---
+
+## 💡 What It Does
+
+Type a character’s name — like “Spider-Man,” “Deadpool,” or “Black Widow” — hit **Search**, and boom: you’ll get their official Marvel bio and image pulled live from the API.
+
+It’s fast, clean, and designed to work on both desktop and mobile screens.
+
+---
+
+## 🧰 Built With
+
+* **HTML** – simple layout and structure
+* **CSS** – made it responsive and gave it some style (yes, Deadpool is the background 😎)
+* **JavaScript** – handles API calls, error checks, and DOM updates
+* **CryptoJS** – used to generate the MD5 hash Marvel requires for authentication
+
+---
+
+## 🚀 How It Works
+
+1. You enter a name.
+2. The app builds a Marvel API request using your keys, timestamp, and hash.
+3. The data comes back as JSON — the app grabs the description and image.
+4. The content updates on the page instantly.
+
+It’s a simple flow, but a great example of how to work with an authenticated external API in JavaScript.
+
+---
+
+## ⚙️ How To Run
+
+1. Clone or download this repo
+
+   ```bash
+   git clone https://github.com/yourusername/marvel-origins.git
+   cd marvel-origins
+   ```
+2. Open the `index.html` file in your browser
+3. Type in a character name and click **Search**
+
+*(You’ll need valid Marvel API keys — replace the ones in `main.js` with your own.)*
+
+---
+
+## 📚 What I Learned
+
+This project helped me really understand:
+
+* How to authenticate API requests using hashes and timestamps
+* How to fetch and handle API data with `fetch()`
+* How to manipulate the DOM dynamically without a framework
+* How to build a clean responsive UI using just CSS
+
+It’s simple, but it taught me a lot about putting the pieces together from start to finish.
+
+---
+
+## 🖼️ Visual
+
+The background image is Deadpool (because why not?), and the layout automatically adjusts to fit your screen.
+
+If you type “Deadpool,” he basically stares back at you. Creepy. But funny.
+
+---
+
+## 🔮 Future Ideas
+
+* Add a random character button
+* Show a list of matching characters instead of one
+* Display extra info like comics or movies they’ve appeared in
+* Add a loading animation while waiting for results
+
+---
+
+## ✍️ Created By
+
+**Abdirahman Mohamed**
+Just a developer building cool stuff, one project at a time.
+

css/style.css

@@ -0,0 +1,157 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    align-items: center;
+
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+
+    background-image: url('../img/deadpool.jpeg');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    background-attachment: fixed;
+    color: white;
+    background-color: black;
+}
+
+input {
+    width: 350px;
+    height: 40px;
+    font-size: 2rem;
+    border-radius: 15px;
+}
+
+div {
+    text-align: center;
+    width: 100%;
+    margin: 0%;
+}
+
+.info img {
+    width: 50%;
+}
+
+h1 {
+    font-size: 5rem;
+    margin: 0% 2%;
+}
+
+.info {
+    display: flex;
+    font-size: 2rem;
+    height: 800px;
+}
+
+h3 {
+    margin-top: 0%;
+    height: 100%;
+    text-align: left;
+    padding-left: 3%;
+    padding-top: 5%;
+    width: 50%;
+}
+
+button {
+    width: 130px;
+    height: 40px;
+    font-size: 2rem;
+    border-radius: 15px;
+}
+
+@media (max-width: 1224px) {
+    body {
+        background-size: 120%;
+    }
+
+    h1 {
+        font-size: 4rem;
+    }
+
+    .info {
+        flex-direction: column;
+        height: auto;
+    }
+
+    .info img,
+    h3 {
+        width: 45%;
+        height: 400px;
+        margin: 0%;
+        padding: 0%;
+    }
+    h3{
+        width: 50%;
+        padding-left: 2%;
+    }
+    .info{
+        height: 400px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+}
+
+
+@media (max-width: 798px) {
+    body {
+        background-size: 120%;
+        background-attachment: scroll;
+    }
+
+    h1 {
+        font-size: 5rem;
+    }
+
+    h3 {
+        width: 90%;
+        padding: 2%;
+        font-size: 1.7rem;
+    }
+
+    input {
+        width: 50%;
+        font-size: 1.6rem;
+    }
+
+    button {
+        width: 100px;
+        font-size: 1.6rem;
+    }
+}
+
+@media (max-width: 480px) {
+
+    h1 {
+        font-size: 2.5rem;
+        margin: 1rem 0;
+    }
+
+    h3 {
+        font-size: 1.4rem;
+        width: 95%;
+        padding: 1rem;
+    }
+
+    input {
+        width: 50%;
+        height: 35px;
+        font-size: 1.4rem;
+    }
+
+    button {
+        width: 90px;
+        height: 35px;
+        font-size: 1.3rem;
+    }
+
+    .info img {
+        width: 90%;
+    }
+}

index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Marvel History</title>
+</head>
+
+<body>
+    <div>
+        <h1>Marvel Origins</h1>
+        <input type="text" id="name" placeholder="Enter Character Name">
+        <button>Search</button>
+    </div>
+
+    <div class="info">
+        <h3></h3>
+        <img src="" alt="">
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/core.js"></script>
+    <!--stack overflow: https://stackoverflow.com/questions/1655769/fastest-md5-implementation-in-javascript -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/md5.js"></script>
+    <!--stack overflow: https://stackoverflow.com/questions/1655769/fastest-md5-implementation-in-javascript  -->
+
+    <script type="text/javascript" src="js/main.js"></script>
+</body>
+
+</html>

js/main.js

@@ -0,0 +1,27 @@
+//listener for get bio
+document.querySelector('button').addEventListener('click', search)
+
+function search() {
+    const name = document.querySelector('#name').value
+    const timeStamp = new Date().getTime() //stack overflow: https://stackoverflow.com/questions/10599148/how-do-i-get-the-current-time-only-in-javascript
+    const publicKey = `0cbdab65561589b5c6823a18213134d9`
+    const privateKey = `fea933a14bb2d38b5c86ae525b44aa494638f0e2`
+    const hash = CryptoJS.MD5(timeStamp + privateKey + publicKey).toString() //stack overflow: https://stackoverflow.com/questions/1655769/fastest-md5-implementation-in-javascript
+    const url = `https://gateway.marvel.com/v1/public/characters?name=${name}&apikey=${publicKey}&hash=${hash}&ts=${timeStamp}`
+
+    const image = document.querySelector('img')
+    const origin = document.querySelector('h3')
+    fetch(url)
+        .then(res => res.json())
+        .then(data => {
+            console.log(data)
+            let img = data.data.results[0].thumbnail
+            image.src = `${img.path}.${img.extension}`
+            origin.innerText = data.data.results[0].description
+        })
+        .catch(err => {
+            console.log(`error ${err}`)
+        })
+}
+
+