Skip to content

Commit 4f82cc0

Browse files
Rezan92Rezan92
committed
Created random quote generator app
1 parent 687dda1 commit 4f82cc0

3 files changed

Lines changed: 165 additions & 2 deletions

File tree

‎Week1/project/index.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,300&display=swap');
2+
:root {
3+
--mainColor: #fba530;
4+
}
5+
6+
* {
7+
box-sizing: border-box;
8+
font-family: 'Roboto', sans-serif;
9+
}
10+
11+
body {
12+
margin: 0;
13+
padding: 0;
14+
}
15+
16+
.container {
17+
background-color: var(--mainColor);
18+
color: var(--mainColor);
19+
width: 1000px;
20+
margin: auto;
21+
margin-top: 30px;
22+
padding: 80px;
23+
}
24+
25+
.content {
26+
width: 80%;
27+
background-color: white;
28+
text-align: center;
29+
margin: auto;
30+
padding: 2.6rem;
31+
padding-bottom: 1.6rem;
32+
}
33+
34+
.fa-quote-left {
35+
font-size: 2rem;
36+
}
37+
38+
.quote {
39+
font-size: 1.4rem;
40+
font-weight: 400;
41+
height: 58px;
42+
}
43+
44+
.author {
45+
text-align: right;
46+
font-size: 1rem;
47+
font-weight: 300;
48+
}
49+
50+
.content_footer {
51+
display: flex;
52+
flex-direction: row;
53+
flex-wrap: nowrap;
54+
justify-content: space-between;
55+
}
56+
57+
.btn {
58+
background-color: var(--mainColor);
59+
border: none;
60+
outline: none;
61+
color: white;
62+
font-size: 1rem;
63+
height: 38px;
64+
padding: .7rem;
65+
border-radius: 3px;
66+
transition: all .5s ease;
67+
}
68+
69+
.btn:hover {
70+
cursor: pointer;
71+
box-shadow: 5px 5px 10px #000000;
72+
}
73+
74+
.btn:active {
75+
position: relative;
76+
top: 1px;
77+
background-color: #cf7900;
78+
}
79+
80+
.white-footer {
81+
background-color: white;
82+
width: 300px;
83+
height: 50px;
84+
margin: auto;
85+
margin-top: 3px;
86+
}

‎Week1/project/index.html‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,38 @@
1-
<!-- Your code goes in here -->
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+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
9+
/>
10+
<link rel="stylesheet" href="./index.css" />
11+
<title>Document</title>
12+
</head>
13+
<body>
14+
15+
<div class="container">
16+
<div class="content">
17+
<p class="quote" id="quote">
18+
<i class="fa fa-quote-left" aria-hidden="true"></i> Don't cry because it's over, smile
19+
because it happend.
20+
</p>
21+
22+
<p class="author" id="author"><span>-</span> Dr.Seuss</p>
23+
24+
<div class="content_footer">
25+
<div class="icons">
26+
<i class="fa fa-twitter-square fa-3x" aria-hidden="true"></i>
27+
<i class="fa fa-tumblr-square fa-3x" aria-hidden="true"></i>
28+
</div>
29+
<button class="btn" id="new-quote_btn">New quote</button>
30+
</div>
31+
</div>
32+
33+
<div class="white-footer"></div>
34+
</div>
35+
36+
<script src="./index.js"></script>
37+
</body>
38+
</html>

‎Week1/project/index.js‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,41 @@
1-
// your code goes in here
1+
const changeQuotesBtn = document.getElementById("new-quote_btn");
2+
const quote = document.getElementById("quote").lastChild;
3+
const author = document.getElementById("author").lastChild;
4+
5+
const quotes = [
6+
{
7+
quote: " Life is really simple, but we insist on making it complicated.",
8+
author: " Confucius"
9+
},
10+
{
11+
quote: " I attribute my success to this: I never gave or took any excuse.",
12+
author: " Florence Nightingale"
13+
},
14+
{
15+
quote: " Doing the best at this moment puts you in the best place for the next moment.",
16+
author: " Oprah Winfrey"
17+
},
18+
{
19+
quote: " Trust yourself. You know more than you think you do.",
20+
author: " Benjamin Spock"
21+
},
22+
{
23+
quote: " No one can make you feel inferior without your consent.",
24+
author: " Eleanor Roosevelt"
25+
},
26+
{
27+
quote: " It is never too late to be what you might have been.",
28+
author: " George Eliot"
29+
},
30+
];
31+
32+
changeQuotesBtn.addEventListener("click", changeQuote);
33+
34+
function changeQuote() {
35+
const index = Math.floor(Math.random() * 6);
36+
const newQuote = quotes[index].quote;
37+
const theAuthor = quotes[index].author;
38+
quote.textContent = newQuote;
39+
author.textContent = theAuthor;
40+
};
41+

0 commit comments

Comments
 (0)