Skip to content

Commit c9c420e

Browse files
sarabgisarabgi
authored
Merge pull request #16 from octosapien/main
Added a Random Quote Generator Website that uses HTML ,CSS and JavaScript .
2 parents 7a0a1e1 + 7561000 commit c9c420e

File tree

3 files changed

+139
-0
lines changed

3 files changed

+139
-0
lines changed

‎Random_Quote_Generator_Website/app.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
let jokes=[
2+
"Be yourself; everyone else is already taken." ,
3+
"A room without books is like a body without a soul.",
4+
"To live is the rarest thing in the world. Most people exist, that is all.",
5+
"Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.",
6+
"You only live once, but if you do it right, once is enough.",
7+
"Be the change that you wish to see in the world.",
8+
"If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals",
9+
"Insanity is doing the same thing, over and over again, but expecting different results.",
10+
"Fairy tales are more than true: not because they tell us that dragons exist, but because they tell us that dragons can be beaten.",
11+
"Life is what happens to us while we are making other plans.",
12+
13+
];
14+
15+
let jokeText1=document.getElementById("jokeText");
16+
let clicks=0;
17+
18+
function updateJoke(){
19+
20+
clicks=clicks+1;
21+
clicks=clicks%(jokes.length);
22+
//the array just cycles to give new jokes
23+
jokeText1.textContent=jokes[clicks];
24+
25+
}
26+

‎Random_Quote_Generator_Website/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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 rel="stylesheet" href="styles.css" />
7+
<title> Random Quote Generator</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
12+
<h3>Random Quote Generator</h3>
13+
<div id="joke" class="joke">
14+
<div>
15+
<svg id="ic1" xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-quote" viewBox="0 0 16 16">
16+
<path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z"/>
17+
</svg>
18+
</div>
19+
<br>
20+
<br>
21+
<div id="jokeText">
22+
Be the change you wish to see in the world .
23+
</div></div>
24+
<div id="btn1"><button id="jokeBtn" class="btn" onclick="updateJoke()">Get Another Quote</button></div>
25+
</div>
26+
<div id="icon2">
27+
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-chat-left-quote" viewBox="0 0 16 16">
28+
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
29+
<path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/>
30+
</svg>
31+
</div>
32+
33+
<script src="app.js"></script>
34+
</body>
35+
</html>

‎Random_Quote_Generator_Website/styles.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
body{
2+
background-color:#749F82;
3+
4+
}
5+
6+
7+
h3{
8+
border: 3px solid #CFFF8D;
9+
font-weight:1000;
10+
padding:20px 0 20px;
11+
border-radius:10px;
12+
color:#CFFF8D;
13+
background-color:#425F57;
14+
font-family:sans-serif ;
15+
display:flex;
16+
font-size:2.5rem;
17+
flex-direction:row;
18+
justify-content:center;
19+
20+
21+
22+
}
23+
#ic1{
24+
margin-left:0%;
25+
}
26+
27+
28+
29+
#joke{
30+
font-style:italic;
31+
padding:2% 4% 4% 2%;
32+
font-family:sans-serif;
33+
border-radius:10px;
34+
background-color:#A8E890;
35+
width:70%;
36+
height: 50px;
37+
border:solid 3px #425F57;
38+
margin:0 auto;
39+
40+
display:flex;
41+
flex-direction:row;
42+
justify-content:center;
43+
}
44+
45+
#btn1{
46+
margin:10px auto;
47+
display:flex;
48+
flex-direction:row;
49+
justify-content:center;
50+
}
51+
52+
#jokeBtn{
53+
font-weight:bold;
54+
color:#CFFF8D;
55+
background-color:#425F57;
56+
display:flex;
57+
flex-direction:row;
58+
justify-content:center;
59+
border:3px solid #CFFF8D;
60+
border-radius:10px;
61+
padding:1%
62+
63+
}
64+
65+
#jokeBtn:hover{
66+
color:#425F57;
67+
background-color:#CFFF8D;
68+
}
69+
#icon2 {
70+
margin-top:50px;
71+
display:flex;
72+
flex-direction:row;
73+
justify-content:center;
74+
75+
}
76+
path{
77+
width:1100px;
78+
}

0 commit comments

Comments
 (0)