Desired Output
For Best Quotes Click Next Button
Source Code
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Quotes Viewer</title>
<style>
body
{
background:url('pexels-pixabay-235985.jpg');
}
.outer
{
width:600px;
margin:auto;
height:360px;
padding:20px;
border-radius:20px;
box-shadow:2px 2px 2px black;
background:rgba(255,255,255,.4);
margin-top:50px;
}
#box
{
width:100%;
height:120px;
margin:auto;
font-size:30px;
font-style:italic;
margin-top:100px;
font-family:'cooper black';
text-align:center;
}
#author
{
width:100%;
height:30px;
text-align:center;
margin:auto;
color:red;
font-size:30px;
font-style:italic;
font-weight:bold;
}
#next{
width:50px;
}
</style>
<script>
var quotes=Array("The purpose of our lives is to be happy","Life is what happens when you're busy making other plans.","Get busy living or get busy dying","You only live once, but if you do it right, once is enough","Many of life’s failures are people who did not realize how close they were to success when they gave up","If you want to live a happy life, tie it to a goal, not to people or things")
var author=Array("Dalai Lama","John Lennon","Stephen King","Mae West","Thomas A. Edison","Albert Einstein")
var count=0;
function next()
{
document.getElementById("box").innerHTML="“"+quotes[count]+"”";
document.getElementById("author").innerHTML=author[count];
count++;
if(count>=quotes.length)
{
count=0;
}
}
function prev()
{
count--;
if(count<0)
{
count=quotes.length-1;
}
document.getElementById("box").innerHTML=quotes[count];
document.getElementById("author").innerHTML=author[count];
}
</script>
</head>
<body>
<div class="outer">
<div id="box">
For Best Quotes Click Next Button
</div>
<div id="author">
Have a Nice Day
</div>
<br/><br/>
<p align="center">
<a href="#" onclick="prev()"><img src="prev.png" id="next" ></a>
<a href="#" onclick="next()"><img src="next.png" id="next" ></a>
<br/>
</p>
</div>
</body>
</html>