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 😊😊
0 Comments:
Post a Comment