Project Title:
Motivational Quotes Website
By:
Aadya Mishra & Charu Srivastav
(723008 & 723039)
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Motivational Quotes</title>
<link rel="stylesheet" href="style.css">
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
text-align: center;
color: white;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
flex-direction: column;
}
/* Navigation Bar */
.navbar {
width: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 0, 0, 0.7);
padding: 10px 20px;
z-index: 1000;
}
.navbar .logo {
display: flex;
align-items: center;
}
.navbar img {
height: 40px;
margin-right: 10px;
}
.navbar .title {
font-size: 20px;
font-weight: bold;
}
.navbar .about {
position: relative;
cursor: pointer;
}
.navbar .profile-img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-left: 10px;
}
/* Dropdown Menu */
.dropdown-content {
display: none;
position: absolute;
right: 0;
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 10px;
border-radius: 5px;
width: 250px;
text-align: left;
}
.about:hover .dropdown-content {
display: block;
}
/* Time Display */
#current-time {
font-size: 50px;
margin-left: 20px;
}
/* Quote Box */
.container {
background: rgba(0, 0, 0, 0.6);
padding: 20px;
border-radius: 10px;
width: 80%;
max-width: 500px;
margin-top: 40px;
}
/* Button Style */
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
background: #fff;
border: none;
color: #333;
cursor: pointer;
border-radius: 5px;
transition: 0.3s;
}
button:hover {
background: #eee;
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
<div class="logo">
<img src="images/logo.jpg" alt="Logo">
<span class="title">Motivational Quotes</span>
</div>
<div class="about">
<img src="images/profile.jpg" alt="Profile" class="profile-img">
<div class="dropdown-content">
<p><strong>About Us:</strong> This website provides daily motivational quotes to inspire
and uplift your day!</p>
<p><strong>Created by:</strong> Charu and Aadya</p>
<p><strong>Course:</strong> BCA 2nd Year</p>
<p><strong>Follow us on:</strong> <a href="#" style="color: lightblue;">Instagram</a>,
<a href="#" style="color: lightblue;">Twitter</a></p>
</div>
</div>
</div>
<!-- Current Time Display -->
<div id="current-time">Loading time...</div>
<!-- Quote Container -->
<div class="container">
<h1>Motivational Quote of the Day</h1>
<p id="quote">Loading...</p>
<button onclick="generateQuote()">New Quote</button>
<button onclick="copyQuote()">Copy Quote</button>
<p id="copyMessage" style="display:none; color: lightgreen;">Quote copied!</p>
</div>
<script>
// Array of Motivational Quotes
const quotes = [
"Believe in yourself and all that you are.",
"Your only limit is your mind.",
"Do what you can, with what you have, where you are.",
"Dream it. Wish it. Do it.",
"Success is not the key to happiness. Happiness is the key to success.",
"Hardships often prepare ordinary people for an extraordinary destiny.",
"The future belongs to those who believe in the beauty of their dreams.",
"Don’t watch the clock; do what it does. Keep going.",
"Opportunities don’t happen, you create them.",
"Push yourself, because no one else is going to do it for you.",
"Difficulties in life are intended to make us better, not bitter.",
"If you want to achieve greatness stop asking for permission."
];
// Array of Background Images
const backgrounds = [
"images/bg1.jpg",
"images/bg2.jpg",
"images/bg3.jpg",
"images/bg4.jpg",
"images/bg5.jpg"
];
// Function to generate a random quote and change background instantly
function generateQuote() {
let randomIndex = Math.floor(Math.random() * quotes.length);
document.getElementById("quote").textContent = quotes[randomIndex];
let bgIndex = Math.floor(Math.random() * backgrounds.length);
document.body.style.backgroundImage = `url('${backgrounds[bgIndex]}')`;
}
// Function to copy quote to clipboard
function copyQuote() {
const quoteText = document.getElementById("quote").textContent;
navigator.clipboard.writeText(quoteText).then(() => {
let message = document.getElementById("copyMessage");
message.style.display = "block";
setTimeout(() => { message.style.display = "none"; }, 2000);
});
}
// Function to update current time
function updateTime() {
const now = new Date();
document.getElementById("current-time").textContent = now.toLocaleTimeString();
}
setInterval(updateTime, 1000);
// Load a random quote and background on page load
window.onload = () => {
generateQuote();
updateTime();
};
</script>
</body>
</html>
Website Screenshots:
Documentation:
This HTML document is designed to be a webpage for a Motivational Quotes website. Here’s
a breakdown of its structure and functionality:
1. Header Section:
Navigation Bar: Contains a fixed navigation bar at the top of the page. It includes a
logo and the website title ('Motivational Quotes') on the left, and a profile image on
the right. Hovering over the profile image displays a dropdown menu with
information about the creators (Charu and Aadya), their course (BCA 2nd Year), and
links to social media profiles.
2. Current Time Display:
A dynamic time display that updates every second, showing the current time at the top
centre of the page.
3. Content Section:
Motivational Quote Display: Shows a randomly generated motivational quote from a
pre-defined list when the page loads and when the 'New Quote' button is clicked.
Background Image Change: Each time a new quote is generated, the background
image also changes randomly from a set of background images.
Copy Quote Button: Allows users to copy the displayed quote to the clipboard. A
confirmation message ('Quote copied!') briefly appears after copying.
4. Footer:
The footer section is minimal and does not contain specific content.
5. Stylesheet:
Defines the visual appearance of the webpage, including layout, colours, fonts, and
responsive design. The page has a dark theme with contrasting white text and vibrant
button styles. The header is semi-transparent with a fixed position for easy navigation.
6. JavaScript Functionality:
Handles dynamic content updates, including generating random quotes, changing the
background image, copying the quote to the clipboard, and updating the current time.
The script uses arrays for quotes and background images and employs event listeners
for button clicks.
The webpage is visually appealing with motivational content, dynamic background images,
and interactive features. It is structured to inspire users with uplifting quotes while offering a
clean and simple user interface.
