Skip to main content

I created website which generates Random Quotes of anime

By Apna Coding Adda

 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 😊😊


Labels:

Comments

Post a Comment

Popular posts from this blog

Makefile

By Apna Coding Adda
 You may have seen file named Makefile or you may have type command like make, make install. so what is this file Makefile and what are this command. let's discuss about it.
2 comments
Read more

Instagram OSINT

By Apna Coding Adda
 OSINT stands for Open Source INTelligence . it means any information that can legally gathered from free , open source software or tool. if you want simple Example of OSINT then any search engine is OSINT. Today's Topic is Instagram OSINT then let's get started......
Post a Comment
Read more