Quote generator using JavaScript

By -

 Code is given below.

1.HTML 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Qoute Generator</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Uchen&display=swap" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="style.css">

/head>

<body>

<div class="con">

<button onclick="getQuote()">Get Quote</button>

<p id="quote"></p>

</div>

</body>

</html>


2.CSS

body

{

padding: 0;

margin: 0;

}

.con

{

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

position: absolute;

text-align: center;

width: 50%;

}

p

{

padding: 5px;

font-weight: bold;

font-size: 22px;

color: #3498DB;

font-family: 'Uchen', serif;

}

button

{

border: none;

background: #9B59B6;

outline: none;

border-radius: 20px;

padding: 5px 35px 5px 35px;

font-size: 20px;

cursor: pointer;

}

button:hover

{

background: #6C3483;

color: #fff;

}


3.JavaScript

let quotes=[

"The greatest glory in living lies not in never falling, but in rising every time we fall.",

"The way to get started is to quit talking and begin doing.",

"If life were predictable it would cease to be life, and be without flavor.",

"Life is what happens when you're busy making other plans.",

"Spread love everywhere you go. Let no one ever come to you without leaving happier.",

"Always remember that you are absolutely unique. Just like everyone else.",

"The future belongs to those who believe in the beauty of their dreams.",

"Whoever is happy will make others happy too.",

"It is during our darkest moments that we must focus to see the light.",

"Tell me and I forget. Teach me and I remember. Involve me and I learn."]

let r=Math.floor(Math.random() * 10);

function getQuote()

{

let r=Math.floor(Math.random() * 10);

let quote=document.getElementById("quote");

quote.innerHTML="\" "+quotes[r]+ " \"";

quote.style.border="2px solid #111";

}


OUTPUT

Fig. Before click the button.


Fig. After the click the button


Comments

Post a Comment