Skip to content

Commit 088cddc

Browse files
Sbiswas001Sbiswas001
authored
Merge pull request #41 from Yash6012/patch
Quote_App
2 parents de6f3a1 + a211f51 commit 088cddc

File tree

3 files changed

+420
-0
lines changed

3 files changed

+420
-0
lines changed

‎root/Quote_App/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Quote Generator App</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<button id="show-history" class="history-btn">History</button>
11+
<button id="theme-toggle" class="theme-btn">Theme</button>
12+
<div class="app-layout">
13+
<div id="history-sidebar" class="sidebar" style="display: none;">
14+
<div class="sidebar-header">
15+
<h2>History</h2>
16+
<button id="close-history">&times;</button>
17+
</div>
18+
<ul id="history-list"></ul>
19+
</div>
20+
<div class="center-outer">
21+
<div class="container main-content">
22+
<h1>Quote Generator</h1>
23+
<div id="quote-box">
24+
<div class="quote-item" id="single-quote-item">
25+
<div class="quote-text" id="quote">Loading...</div>
26+
<div class="quote-author" id="author"></div>
27+
</div>
28+
<div class="action-row">
29+
<button id="new-quote">New Quote</button>
30+
<button id="copy-quote">Copy</button>
31+
<button id="screenshot-quote">Screenshot</button>
32+
<button id="toggle-author">Hide Author</button>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
39+
<script src="script.js"></script>
40+
</body>
41+
</html>

‎root/Quote_App/script.js‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
const quotes = [
2+
{ quote: "The best way to get started is to quit talking and begin doing.", author: "Walt Disney" },
3+
{ quote: "Don’t let yesterday take up too much of today.", author: "Will Rogers" },
4+
{ quote: "It’s not whether you get knocked down, it’s whether you get up.", author: "Vince Lombardi" },
5+
{ quote: "If you are working on something exciting, it will keep you motivated.", author: "Steve Jobs" },
6+
{ quote: "Success is not in what you have, but who you are.", author: "Bo Bennett" },
7+
{ quote: "Believe you can and you’re halfway there.", author: "Theodore Roosevelt" },
8+
{ quote: "Do what you can with all you have, wherever you are.", author: "Theodore Roosevelt" },
9+
{ quote: "Everything you can imagine is real.", author: "Pablo Picasso" },
10+
{ quote: "What we think, we become.", author: "Buddha" },
11+
{ quote: "Dream big and dare to fail.", author: "Norman Vaughan" },
12+
{ quote: "The only place where success comes before work is in the dictionary.", author: "Vidal Sassoon" },
13+
{ quote: "Believe in yourself and all that you are.", author: "Christian D. Larson" },
14+
{ quote: "Happiness is not something ready made. It comes from your own actions.", author: "Dalai Lama" },
15+
{ quote: "Strive not to be a success, but rather to be of value.", author: "Albert Einstein" },
16+
{ quote: "Your time is limited, don’t waste it living someone else’s life.", author: "Steve Jobs" },
17+
{ quote: "If you want to lift yourself up, lift up someone else.", author: "Booker T. Washington" },
18+
{ quote: "The journey of a thousand miles begins with one step.", author: "Lao Tzu" },
19+
{ quote: "It always seems impossible until it’s done.", author: "Nelson Mandela" },
20+
{ quote: "You miss 100% of the shots you don’t take.", author: "Wayne Gretzky" },
21+
{ quote: "Do not wait to strike till the iron is hot; but make it hot by striking.", author: "William Butler Yeats" },
22+
{ quote: "Everything you’ve ever wanted is on the other side of fear.", author: "George Addair" },
23+
{ quote: "Success is the sum of small efforts, repeated day in and day out.", author: "Robert Collier" },
24+
{ quote: "Act as if what you do makes a difference. It does.", author: "William James" },
25+
{ quote: "Don't watch the clock; do what it does. Keep going.", author: "Sam Levenson" },
26+
{ quote: "Be yourself; everyone else is already taken.", author: "Oscar Wilde" },
27+
{ quote: "To live is the rarest thing in the world. Most people exist, that is all.", author: "Oscar Wilde" },
28+
{ quote: "The only way to do great work is to love what you do.", author: "Steve Jobs" },
29+
{ quote: "In the middle of every difficulty lies opportunity.", author: "Albert Einstein" },
30+
{ quote: "We cannot solve our problems with the same thinking we used when we created them.", author: "Albert Einstein" },
31+
{ quote: "Never let the fear of striking out keep you from playing the game.", author: "Babe Ruth" },
32+
{ quote: "Doubt kills more dreams than failure ever will.", author: "Suzy Kassem" },
33+
{ quote: "You are never too old to set another goal or to dream a new dream.", author: "C. S. Lewis" },
34+
{ quote: "What lies behind us and what lies before us are tiny matters compared to what lies within us.", author: "Ralph Waldo Emerson" },
35+
{ quote: "Spread love everywhere you go. Let no one ever come to you without leaving happier.", author: "Mother Teresa" },
36+
{ quote: "Change your thoughts and you change your world.", author: "Norman Vincent Peale" },
37+
{ quote: "Do what you feel in your heart to be right, for you’ll be criticized anyway.", author: "Eleanor Roosevelt" }
38+
];
39+
40+
const gradients = [
41+
"linear-gradient(135deg, #67b26f, #4ca2cd)",
42+
"linear-gradient(120deg, #a1c4fd, #c2e9fb)",
43+
"linear-gradient(120deg, #f093fb, #f5576c)",
44+
"linear-gradient(135deg, #ffecd2, #fcb69f)",
45+
"linear-gradient(120deg, #30cfd0, #330867)",
46+
"linear-gradient(140deg, #fffbd5, #b20a2c)",
47+
"linear-gradient(135deg, #fc00ff, #00dbde)",
48+
"linear-gradient(100deg, #a8edea, #fed6e3)",
49+
"linear-gradient(135deg, #ee9ca7, #ffdde1)",
50+
"linear-gradient(120deg, #614385, #516395)",
51+
"linear-gradient(135deg, #e0c3fc, #8ec5fc)",
52+
"linear-gradient(120deg, #ff6a00, #ee0979)",
53+
"linear-gradient(135deg, #43cea2, #185a9d)",
54+
"linear-gradient(120deg, #f7971e, #ffd200)",
55+
"linear-gradient(135deg, #485563, #29323c)",
56+
"linear-gradient(120deg, #de6161, #2657eb)",
57+
"linear-gradient(132deg, #11998e, #38ef7d)",
58+
"linear-gradient(120deg, #ff758c, #ff7eb3)",
59+
"linear-gradient(135deg, #1e3c72, #2a5298)",
60+
"linear-gradient(120deg, #4568dc, #b06ab3)"
61+
];
62+
63+
const quoteText = document.getElementById('quote');
64+
const authorText = document.getElementById('author');
65+
const newQuoteBtn = document.getElementById('new-quote');
66+
const quoteCard = document.getElementById('single-quote-item');
67+
const showHistoryBtn = document.getElementById('show-history');
68+
const closeHistoryBtn = document.getElementById('close-history');
69+
const historySidebar = document.getElementById('history-sidebar');
70+
const historyList = document.getElementById('history-list');
71+
const themeToggleBtn = document.getElementById('theme-toggle');
72+
const copyQuoteBtn = document.getElementById('copy-quote');
73+
const screenshotQuoteBtn = document.getElementById('screenshot-quote');
74+
const toggleAuthorBtn = document.getElementById('toggle-author');
75+
76+
let history = [];
77+
let authorVisible = true;
78+
79+
function getRandomQuote() {
80+
const randomIndex = Math.floor(Math.random() * quotes.length);
81+
return quotes[randomIndex];
82+
}
83+
function getRandomGradient() {
84+
const idx = Math.floor(Math.random() * gradients.length);
85+
return gradients[idx];
86+
}
87+
function setRandomBg() {
88+
document.body.style.background = getRandomGradient();
89+
}
90+
function displayQuote() {
91+
const q = getRandomQuote();
92+
quoteText.textContent = `"${q.quote}"`;
93+
authorText.textContent = `- ${q.author}`;
94+
setRandomBg();
95+
history.push({quote: q.quote, author: q.author});
96+
}
97+
function renderHistory() {
98+
historyList.innerHTML = '';
99+
[...history].reverse().forEach(entry => {
100+
const li = document.createElement('li');
101+
li.className = 'history-item';
102+
li.innerHTML = `"${entry.quote}" <span style='color:#888;'>- ${entry.author}</span>`;
103+
historyList.appendChild(li);
104+
});
105+
}
106+
function openHistorySidebar() {
107+
renderHistory();
108+
historySidebar.style.display = 'flex';
109+
}
110+
function closeHistorySidebar() {
111+
historySidebar.style.display = 'none';
112+
}
113+
function toggleTheme() {
114+
document.body.classList.toggle('dark');
115+
// save preference
116+
localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
117+
}
118+
function copyQuoteToClipboard() {
119+
const text = `${quoteText.textContent} ${authorText.textContent}`.trim();
120+
navigator.clipboard.writeText(text).then(() => {
121+
copyQuoteBtn.classList.add('copied');
122+
copyQuoteBtn.textContent = 'Copied!';
123+
setTimeout(() => {
124+
copyQuoteBtn.classList.remove('copied');
125+
copyQuoteBtn.textContent = 'Copy';
126+
}, 1000);
127+
});
128+
}
129+
function takeQuoteScreenshot() {
130+
if (window.html2canvas) {
131+
const prevBg = quoteCard.style.background;
132+
const randomGradient = getRandomGradient();
133+
quoteCard.style.background = randomGradient;
134+
html2canvas(quoteCard, {
135+
backgroundColor: null,
136+
useCORS: true
137+
}).then(canvas => {
138+
quoteCard.style.background = prevBg;
139+
const link = document.createElement('a');
140+
link.href = canvas.toDataURL('image/png');
141+
link.download = 'quote.png';
142+
link.click();
143+
});
144+
}
145+
}
146+
function toggleAuthor() {
147+
authorVisible = !authorVisible;
148+
authorText.style.display = authorVisible ? '' : 'none';
149+
toggleAuthorBtn.textContent = authorVisible ? 'Hide Author' : 'Show Author';
150+
if (authorVisible) {
151+
toggleAuthorBtn.classList.remove('author-hidden');
152+
} else {
153+
toggleAuthorBtn.classList.add('author-hidden');
154+
}
155+
}
156+
157+
window.onload = function() {
158+
// Load stored theme
159+
const savedTheme = localStorage.getItem('theme');
160+
if (savedTheme === 'dark') document.body.classList.add('dark');
161+
displayQuote();
162+
authorText.style.display = authorVisible ? '' : 'none';
163+
}
164+
newQuoteBtn.addEventListener('click', displayQuote);
165+
showHistoryBtn.addEventListener('click', openHistorySidebar);
166+
closeHistoryBtn.addEventListener('click', closeHistorySidebar);
167+
themeToggleBtn.addEventListener('click', toggleTheme);
168+
copyQuoteBtn.addEventListener('click', copyQuoteToClipboard);
169+
screenshotQuoteBtn.addEventListener('click', takeQuoteScreenshot);
170+
toggleAuthorBtn.addEventListener('click', toggleAuthor);

0 commit comments

Comments
 (0)