Scribd
Upload
22 views16 pages

WEBproject

Uploaded by

Smriti Dandagi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views16 pages

WEBproject

Uploaded by

Smriti Dandagi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

KARNATAK LAW SOCIETY’S

GOGTE INSTITUTE OF TECHNOLOGY


UDYAMBAG, BELAGAVI-590008
(An Autonomous Institution under Visvesvaraya Technological University, Belagavi)
(APPROVED BY AICTE, NEW DELHI)
Department of Computer Science and Engineering

COURSE PROJECT REPORT


For
Open Elective – I
(Web Programming – 21CS554)

“Random Quote Generator”

Submitted by
Smriti Dandagi – 2GI21EC142

Guide
Prof. Veena Kangralkar
Institute Vision

KLS Gogte Institute of Technology shall stand out as an institution of excellence in


technical education and in training individuals for outstanding caliber, character
coupled with creativity and entrepreneurial skills.

Mission

To train the students to become quality engineers with high standards of


professionalism and ethics who have positive attitude, a perfect blend of techno-
managerial skills and problem-solving ability with an analytical and innovative
mindset.

Department Vision:

Imparting futuristic technical education with high degree professionalism in


endeavor to attain global standards to make students technologically competent
and ethically strong to ensure better quality of life.

Mission:

Contributing to the country’s infrastructure endeavour by encouraging creativity


in civil engineering aspirants and educating them with up to date knowledge,
strong leadership skills and commitment to the society.
KARNATAK LAW SOCIETY’S
GOGTE INSTITUTE OF TECHNOLOGY
UDYAMBAG, BELAGAVI-590008
(An Autonomous Institution under Visvesvaraya Technological
University, Belagavi)
(APPROVED BY AICTE, NEW DELHI)

Department of Computer Science & Engineering

Certificate of Completion

This is to certify that Ms. Smriti Dandagi of 5 th semester bearing USN 2GI21EC142 has
satisfactorily completed the course project in Web Programming (Course code: 21CS554) .
It can be considered as a bonafide work carried out in partial fulfillment for the academic
requirement of 5th Semester B.E. in Computer Science & Engineering prescribed by KLS
Gogte Institute of Technology, Belagavi during the academic year 2023- 2024.
The report has been approved as it satisfies the academic requirements in respect of Assignment
(Course activity) prescribed for the said Degree.

Signature of the Faculty Member Signature of the HOD


Marks allocation:

Project Title: Random Quote Generator

2GI21EC142
Table of Content:

Sl. no Content Page no.


1 Abstract 1

2 Introduction 2
3 Code 3-6

4 Methodology/Implementation 7-8
5 Output 9

6 Conclusion 10
7 References 11
Abstract:

This project is a simple Random Quote Generator built using JavaScript. It displays a random
inspirational quote along with its author's name when a button is clicked. The Random Quote
Generator is designed to provide users with a source of motivation and inspiration by
displaying random quotes from various authors. With each button click, a new quote and its
author are displayed on the page. This application fetches a new random quote from an API,
upon the click of a button, and displays it in the browser.

1
Introduction:

A Random Quote Generator is capable of pulling quotes randomly from an API, a database, or
simply from an array. We will be designing a Random Quote Generator from scratch using
HTML, CSS, JavaScript, and type.fit API. The webpage displays a random quote from a
collection and upon the click of a button, it randomly generates a new quote. We will first
generate the basic HTML Template and style it using CSS before diving deeper into the
JavaScript Logic. Random Quote Generator is a user-friendly online tool designed to deliver a
wide range of quotes on various topics. From wisdom and love to success and perseverance,
our tool offers an eclectic mix of quotes from renowned thinkers, authors, philosophers, and
even some lesser-known sources. With each click, you’ll encounter a new gem of wisdom to
uplift your spirits and ignite your imagination.

2
Code:
//file.html ( HTML code)
<!DOCTYPE html>
<html>
<head>
<!--META information-->
<meta charset="UTF-8">
<meta name="description" content="Random Quote Generator">
<meta name="keywords" content="HTML,CSS,JavaScript, Quotes, API">
<meta name="author" content="Smriti Dandagi">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--End of META information-->

<title>Random Quote Generator</title>

<!--LINK CUSTOM CSS FILE-->


<link rel="stylesheet" href="style.css">

<!--FONTAWESOME CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.1/css/all.min.css" integrity="sha512-
+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28
IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
</head>
<body>
<!-- Quote Container -->
<div class="container">
<!-- Quote to be Displayed Here -->
<h1>
<i class="fas fa-quote-left"></i>
<span class="quote" id="quote"></span>
<i class="fas fa-quote-right"></i>
</h1>
<!-- Author to be Displayed Here -->
<p class="author" id="author"></p>

<hr/>
<div class="buttons">
<!--Button to tweet the quote -->
<a class="twitter" id="tweet"
href="https://twitter.com/intent/tweet?text=Greetings" data-size="large" target="_blank"
rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
<!--Add an onclick event on 'next quote' button. Upon the click of a button, a new random
quote is generated-->
<button class="next" onclick="getNewQuote()">Next quote</button>
</div>
</div>

<!--LINK CUSTOM JS FILE-->

3
<script src="script.js"></script>
</body>
</html>

//style.css(CSS code)
*{
margin:0;
padding:0;
box-sizing: border-box;
}

body{
min-height:100vh;
transition: 0.5s;
transition-timing-function: ease-in;
background-image: linear-gradient(to right bottom, rgb(255, 128, 128), #ffedbca8);
display: flex;
align-items: center;
justify-content: center;

.container
{
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
border-radius: 15px;
width: 600px;
background-color: rgba(255, 255, 255, 0.3);
margin: 10px;

}
.fa-quote-left, .fa-quote-right {
font-size: 35px;
color: rgb(179, 0, 0);
}
.quote
{
text-align: center;
font-size: 40px;
font-weight: bold;
}
.author
{

4
margin:10px;
text-align: right;
font-size: 25px;
font-style: italic;
font-family: cursive;
}
hr {
margin: 10px 0;
width: 100%;
border: 1px solid black;
background-color: black;
}
.buttons {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 9px;
}
.twitter
{
border:1px solid rgb(102, 179, 255);
border-radius: 4px;
background-color: rgb(102, 179, 255);
color: white;
text-align: center;
font-size: 1.8em;
width: 60px;
height: 35px;
line-height: 40px;
}
.next
{
font-size:18px;
border-radius: 5px;
cursor:pointer;
padding: 10px;
margin-top: 5px;
font-weight: bold;
color: white;
background-image: linear-gradient(to right bottom, rgb(230, 0, 0), #ffedbca8);
}
.container:hover
{
box-shadow: 0 10px 10px rgb(230, 0, 0);
}

5
//script.js(Javascript code)
const text=document.getElementById("quote");
const author=document.getElementById("author");
const tweetButton=document.getElementById("tweet");

const getNewQuote = async () =>


{
//api for quotes
var url="https://type.fit/api/quotes";

// fetch the data from api


const response=await fetch(url);
console.log(typeof response);
//convert response to json and store it in quotes array
const allQuotes = await response.json();

// Generates a random number between 0 and the length of the quotes array
const indx = Math.floor(Math.random()*allQuotes.length);

//Store the quote present at the randomly generated index


const quote=allQuotes[indx].text;

//Store the author of the respective quote


const auth=allQuotes[indx].author;

if(auth==null)
{
author = "Anonymous";
}

//function to dynamically display the quote and the author


text.innerHTML=quote;
author.innerHTML="~ "+auth;

//tweet the quote


tweetButton.href="https://twitter.com/intent/tweet?text="+quote+" ~ "+auth;
}
getNewQuote();

6
Methodology & Implementation:
Making the Bare Bones Of Our Application: In this section, we will use only HTML and put
all the required CDN links.

Step 1 (Adding our Foundation): Link your stylesheet and add other resources required for the
project as desired, for instance, we have added additional bootstrap libraries and Google fonts
for styling purposes. Our next step is to add the main body tag, where the bare bones of the
Random Quote Generator Lie.

Step 2 (Holding the front part and the back part of the Quote Box): Now it’s time for adding
the main HTML Code of our application. Add a div tag that holds the front side and the
backside of the Quote Box.

Step 3 (Adding front part of the Quote Box): Add a div element that holds the text, author, and
the clickable button.

Step 4 (Allocating area for displaying the quote): Let’s add a span element that holds the left
font awesome quote icon and the quote to be displayed. A span tag is used as the quote icon
and the quote needs to be on the same line.

Step 5 (Allocating area for displaying the author): Use a div tag to hold the author of the quote.

Step 6 (Adding the button): Use an anchor tag to display the button.

Step 7(Adding the back part of the Quote Box): Repeat the above 5 steps and generate a replica
of the quote box which exists behind the current box. After performing the above steps, we
have a bare-bones application with no styling or logic.

Styling The Application: CSS is used to make the application attractive and visually appealing
to the end-user.
Center the quote box using the top and left properties.
Apply padding and margin to the necessary elements.
Use two font families, Primary for the quote and Secondary for the author.

7
Two classes namely rotateB and rotateF are added to rotate the backside and the front side
when the button is clicked.

JavaScript Part:
Now here comes the main and last part of our random quote generator app. The entire code for
the working of the app is written within the getNewQuote() function. In this function, we will
fetch the data from the API. Since fetching the data from API is an asynchronous process so
we will use the async function to fetch the data and store it in the array.
Learn more about JavaScript async function here.

Let's discuss everything step by step:-

Step 1:- Create a function getNewQuote().


Step 2:- Store the API in an url variable and fetch the data from it using fetch() method. Now
the fetch() method returns a promise, to handle it we use await keyword. Whenever the promise
gets resolved save the data in the response variable.
Step 3:- Convert the response to JSON format and it also returns a promise so again we need
to add await keyword to handle the promise and whenever the promise gets resolved we will
save the data in the all Quotes array.
Step 4:- JavaScript has useful built-in functions: Math.floor() and Math.random(). We will use
Math.random() method to generate a number between 0 and a total number of quotes fetched
from the API(length of allQuotes array) and Math.floor() method to rounds a number
DOWNWARDS to the nearest integer. Now, with the help of this number, we will be able to
access a single object from an array.
Step 5:- Each element stored in the array is an object which has the property text and author.
Store the quote present at the randomly generated index and also store the author of the
respective quote.
Step 6:- Making the author anonymous if no author is present and once the values are ready,
let's display it in the HTML elements which we made before. This is done by obtaining them
using the document.getElementById method and insert the values inside it using the
innerHTML property.
Step 7:- Add some attribute to the Twitter button.
Step 8:- Call the function getNewQuote() at the end to start function at exact reloading of the
page.

8
OUTPUT:

9
Conclusion:
Our Random Quote Generator is a user-friendly online tool designed to deliver a wide range
of quotes on various topics. From wisdom and love to success and perseverance, our tool offers
an eclectic mix of quotes from renowned thinkers, authors, philosophers, and even some lesser-
known sources. With each click, you’ll encounter a new gem of wisdom to uplift your spirits
and ignite your imagination.

10
References:
Random Quote Generator Using HTML, CSS, and JavaScript - DEV Community
Random Quote Generator Using HTML, CSS and JavaScript - GeeksforGeeks

11

You might also like