# Anime Quote Generator

# Objective

I was learning web development and thought it would be cool to have my own Quote Generator and especially an anime one. So made one.

# Tools.

1. HTML
    
2. CSS
    
3. JavaScript
    
4. Anime Chan API
    
5. Lorem Picsum API
    

# Project Structure.

## Root Directory.

* README.md
    
* index.html
    
* style.css
    
* script.js
    

# Code.

## README.md

```markdown
# Anime_Quote_Generator
This is a (as the name suggests) Anime_Quote_Generator. Created with HTML, CSS, Vanilla JS & APIs Like Fetch, Animechan, Lorem Picsum.
```

## index.html

```xml
<!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" />
        <link rel="stylesheet" href="style.css">
        <title>A-Q-G</title>
    </head>
    <body>
        <div id="container">
            <div id="photo">
                <img id="image">
                <h3 id="quote"></h3>
            </div>
            
            <button>Generate</button>
            <h1 id="anime">Anime: </h1>
            <h1 id="character">Character: </h1>
        </div>
        <script src="script.js"></script>
    </body>
</html>
```

## style.css

```css
* {
    margin: 0px;
}
body {
    background-color: rgba(0, 0, 0, 0.851);
}
#container {
    width: 20em;
    height: 30em;
    padding: 1em;
    border: 1px solid white;
    border-radius: 0.5em;
    margin: 2em auto 2em auto;
    overflow: auto;
}
#photo {
    box-sizing: border-box;
    width: 100%;
    height: 15em;
    border: 1px solid white;
    margin-bottom: 1em;
    position: relative;
    color: white;
    overflow: hidden;
}
#photo h3{
    box-sizing: border-box;
    width: 100%;
    height: 13em;
    color: rgb(0, 0, 0);
    background-color: rgba(255, 255, 255, 0.332);
    padding: 5px;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow-y: auto;
}
button {
    width: 100%;
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition: background-color 0.5s;
}
button:hover {
    background-color: #18b41d;
}
h1#anime{
    color: rgb(255, 133, 133);
    margin-bottom: 5px;
}

h1#character{
    color: rgb(117, 179, 255);
}
```

## script.js

```javascript
const img = document.querySelector("#image");
const qot = document.querySelector("#quote");
const btn = document.querySelector("button");
const ani = document.querySelector("#anime");
const cha = document.querySelector("#character");
const imgTypes = ["sea", "hills", "cities", "nightstars", "picsum", "space"];
let qotUrl = "https://animechan.vercel.app/api/random";
let qotRequest = new Request(qotUrl);
let imgType;
let imgUrl;

btn.addEventListener("click", visualize);

function visualize() {
    setupImg();

    fetch(qotRequest)
        .then((res) => {
            if (res.ok) {
                return res.json();
            } else {
                throw new Error(`Error: ${res.status}`);
            }
        })
        .then((data) => {
            ani.textContent = `Anime: ${data["anime"]}`;
            cha.textContent = `Character: ${data["character"]}`;
            qot.textContent = data["quote"];
        });
}

function setupImg() {
    imgType = giveRandomImg();
    imgUrl = `https://picsum.photos/seed/${imgType}/1920/1080?blur=10?greyscale`;
    img.src = imgUrl;
    img.width = img.parentElement.offsetWidth;
    img.height = img.parentElement.offsetHeight;
}

function giveRandomImg() {
    return imgTypes[Math.floor(Math.random() * imgTypes.length)];
}

visualize();
```

# File Explanation.

## README.md

This file is GitHub related that generates details Graphics at GitHub.

## index.html

The Markup-Code of the project. The body contains an IMG tag and an H3 tag enclosed in a DIV tag. The H3 tag will contain the quote and it will sit atop the image. For more details on styling read the style.css file. bellow it has a button tag that says 'Generate'. This is used to generate or get the quote from the API. After that 2 H1 tags, one of them will show the anime name and the other, The character that said that quote.

## style.css

This file contains all the styling for our single-page project. You can read it to get a better understanding of the stying. I didn't use any CSS Frameworks in this project and I am a crapy designer so just ignore the design part.

## script.js

This file contains all the logic behind this project. It declares all the DOM selectors at the top. It is divided into three functions:

1. Visualize.
    
    ```javascript
    function visualize() {
        setupImg();
    
        fetch(qotRequest)
            .then((res) => {
                if (res.ok) {
                    return res.json();
                } else {
                    throw new Error(`Error: ${res.status}`);
                }
            })
            .then((data) => {
                ani.textContent = `Anime: ${data["anime"]}`;
                cha.textContent = `Character: ${data["character"]}`;
                qot.textContent = data["quote"];
            });
    }
    ```
    
2. setupImg
    
    ```javascript
    function setupImg() {
        imgType = giveRandomImg();
        imgUrl = `https://picsum.photos/seed/${imgType}/1920/1080?blur=10?greyscale`;
        img.src = imgUrl;
        img.width = img.parentElement.offsetWidth;
        img.height = img.parentElement.offsetHeight;
    }
    ```
    
3. giveRandomImg
    
    ```javascript
    function giveRandomImg() {
        return imgTypes[Math.floor(Math.random() * imgTypes.length)];
    }
    ```
    

### visualize Function

This function first calls the 'setupImg' function. Then gets the quote data from the "Anime Chan" API. Which comes with a quote, it's anime and the character that said it. After that, it (the function) renders the data into its respective HTML elements.

### setupImg and giveRandomImg Functions

These functions first get a random name of an image and then get that image from the "Lorem Picsum" API. After that load the image into its respective IMG tag.

# Conclusion

Creating this project was a new experience for me because, through it, I got introduced to the power of APIs. And in the end, I ended up learning a couple of things and it was worth the time a gave to this project.