Skip to content

Commit 9a0287b

Browse files
mohamed111112mohamed111112
committed
First commit
0 parents  commit 9a0287b

File tree

3 files changed

+134
-0
lines changed

3 files changed

+134
-0
lines changed

‎JS/index.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
var changeBtn = document.getElementById("changeBtn");
2+
var quoteOutput = document.getElementById("quoteOutput");
3+
var authorOutput = document.getElementById("authorOutput");
4+
5+
var quotes = [
6+
{ quote: "“Be yourself; everyone else is already taken.”", author: "― Oscar Wilde" },
7+
{ quote: "“So many books, so little time.”", author: "― Frank Zappa" },
8+
{ quote: "“A room without books is like a body without a soul.”", author: "― Marcus Tullius Cicero" },
9+
{ quote: "“You only live once, but if you do it right, once is enough.”", author: "― Mae West" },
10+
{ quote: "“In three words I can sum up everything I've learned about life: it goes on.”", author: "― Robert Frost" },
11+
{ quote: "“To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”", author: "― Ralph Waldo Emerson" },
12+
{ quote: "“If you tell the truth, you don't have to remember anything.”", author: "― Mark Twain" },
13+
{ quote: "“Without music, life would be a mistake.”", author: "― Friedrich Nietzsche" },
14+
{ quote: "“We accept the love we think we deserve.”", author: "― Stephen Chbosky" },
15+
{ quote: "“It is never too late to be what you might have been.”", author: "― George Eliot" }
16+
];
17+
18+
function generateQuote() {
19+
var randomIndex = Math.floor(Math.random() * quotes.length);
20+
var randomQuote = quotes[randomIndex];
21+
22+
quoteOutput.textContent = randomQuote.quote;
23+
authorOutput.textContent = randomQuote.author;
24+
}
25+
26+
changeBtn.addEventListener("click", generateQuote);
27+
28+

‎css/style.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
body {
2+
font-family: 'Montserrat', sans-serif;
3+
background: linear-gradient(135deg, #89f7fe, #66a6ff);
4+
color: #333;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
margin: 0;
10+
}
11+
12+
.container {
13+
text-align: center;
14+
background-color: rgba(255, 255, 255, 0.1);
15+
padding: 30px;
16+
border-radius: 15px;
17+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
18+
backdrop-filter: blur(10px);
19+
width: 90%;
20+
max-width: 500px;
21+
}
22+
23+
h1 {
24+
font-size: 2rem;
25+
font-weight: 700;
26+
color: #fff;
27+
margin-bottom: 20px;
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
gap: 10px;
32+
}
33+
34+
.description {
35+
font-size: 1.1rem;
36+
color: #fff;
37+
margin-bottom: 20px;
38+
}
39+
40+
.btn {
41+
width: 200px;
42+
padding: 12px;
43+
background-color: #66a6ff;
44+
color: #fff;
45+
border: none;
46+
border-radius: 25px;
47+
font-size: 1rem;
48+
cursor: pointer;
49+
transition: background-color 0.3s ease, transform 0.3s ease;
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
53+
gap: 10px;
54+
margin: 0 auto;
55+
}
56+
57+
.btn:hover {
58+
background-color: #558de8;
59+
transform: scale(1.05);
60+
}
61+
62+
.quote-box {
63+
margin-top: 20px;
64+
padding: 20px;
65+
border: 2px solid #fff;
66+
border-radius: 10px;
67+
background-color: rgba(255, 255, 255, 0.2);
68+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
69+
}
70+
71+
.quote-text {
72+
font-size: 1.3rem;
73+
font-weight: 400;
74+
color: #fff;
75+
margin-bottom: 10px;
76+
}
77+
78+
.quote-author {
79+
font-size: 1.1rem;
80+
font-weight: 700;
81+
color: #fff;
82+
}

‎index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Quotes App</title>
8+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
10+
<link rel="stylesheet" href="css/style.css">
11+
</head>
12+
<body>
13+
<div class="container">
14+
<h1><i class="fas fa-quote-left"></i> Quote of the Day <i class="fas fa-quote-right"></i></h1>
15+
<p class="description">Press the button below to receive a random quote!</p>
16+
<button id="changeBtn" class="btn"><i class="fas fa-sync-alt"></i> New Quote</button>
17+
<div class="quote-box">
18+
<p class="quote-text" id="quoteOutput"></p>
19+
<p class="quote-author" id="authorOutput"></p>
20+
</div>
21+
</div>
22+
<script src="js/index.js"></script>
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)