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

Products Which I like

By Apna Coding Adda
Induction Buy now Induction Buy now
Post a Comment
Read more

Pascal's Triangle

By Apna Coding Adda
 Pascal's Triangle Introduction In mathematics, Pascal’s triangle is triangular array of binomial coefficient. below you can see how it looks like… 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 How to Build it? First of all start with “1” and second rows as “1 1” then we can clearly see every element in next rows(except 1) if sum of two elements from above row. (i.e, 1+1=2, 1+2=3, 1+3=4) and with this rules we can create pascal’s triangle of n rows. Below is visual of how it will look like, Formula let’s take 0th row as first row and 0th column as first column, so we can get each value using formula where n is row number and k is column number. so for finding 1st(0 indexed) element in 2nd row we can write 2C1 which will give 2. There is one another technique, in which we need to solve (x + y)^n for nth row, if we solve (x +y)² then we will get 2nd row as coefficient of x and y in this solved formula which is x² + 2xy + y² . coefficients are (...
Post a Comment
Read more