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.
HTML
CSS
JavaScript
Anime Chan API
Lorem Picsum API
Project Structure.
Root Directory.
index.html
style.css
script.js
Code.
README.md
# 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
<!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
* {
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
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:
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"]; }); }setupImg
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; }giveRandomImg
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.