Skip to main content

I created website which generates Random Quotes of anime

 Hello Everyone , Today's post is all about how i created website which generates random anime Quotes. Then Let's begin...

This website is simple. it uses API  random quotes generator . so i will just put code here which i use to create that website.

You just need basic knowledge of HTML, CSS and JavaScript.

Please Check Last Message on this page.

<!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">
<title>Anime Quotes</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
color: white;
}
.main-box{

border-radius: 15px;
background-color: wheat;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 10px;
}
.anime{
text-align: center;
color: rgb(255, 144, 144);
text-decoration: underline;
font-family:-apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;

}
.data{
padding: 10px;
font-family: 'Courier New', Courier, monospace;
background-color: rgb(47, 56, 56);
}
.box{
background-color: honeydew;
border-radius: 15px;
}
</style>
<body >
<div class="main-box">
<div class="box">

<h2 class="anime"></h2>
<h3 class="data"></h3>
</div>
</div>
<script>
const api = "https://animechan.vercel.app/api/random";
async function getquote(){
const response = await fetch(api);
const data = await response.json();
console.log(data)
const anime = data['anime'];
const character = data['character'];
const quote = data['quote'];
console.log(anime,character,quote);
const otherdata = character+ " Once Said " + quote;
console.log(otherdata)
document.getElementsByClassName("anime")[0].textContent = anime;
document.getElementsByClassName("data")[0].textContent = otherdata;

}
getquote();
</script>
</body>
</html>

if you want to host your website on GitHub then follow some steps which are Here

[****IMPORTANT****]

I've also made this website using python framework Django and deploy it on Heroku. so if you want tutorial for making website using Django and deploy it on Heroku than comment down. I will put as fast as i can.

By the way i 've already created that website you can check it out Here

Comment Below if you want Full step by step guide for Creating This website using Django and Deploy on Heroku.

Thank You 😊😊


Comments

Popular posts from this blog

Products Which I like

headphone Buy now Camera Buy now

What is Docker?

 Hello Everyone , Today we'll talk about what is docker ?, how to use it ? and why you should use it ?, then let's begin...

What is Digital Root ?

 What is a Digital root? if you have done little competitive programming or practice for Data Structure or anything else you have got a problem where you need to sum all digits of the number and do this process until the number becomes a single-digit number. so that is Digital Root, let's talk about it.