Skip to content

Commit e11bdc4

Browse files
bradmwongbradmwong
authored
Fixed link between index.html and creator.js
Fixed bug where quote button in index.html did not generate any output -called creator.js in index.html -created click listener in creator.js for the quote button -refactored createQuote() function with jQuery to output a random quote on the page -fixed minor spacing issues in index.html
1 parent fca768e commit e11bdc4

2 files changed

Lines changed: 174 additions & 175 deletions

File tree

‎creator.js‎

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,38 @@
1-
//this JavaScript Code outputs random Quotes from the following arrays
2-
3-
const quotesArray = [
4-
{'quote': 'Be yourself; everyone else is already taken.',
5-
'author': 'Oscar Wilde'
6-
},
7-
{'quote': 'Two things are infinite: the universe and human stupidity; and I\'m not sure about the universe.',
8-
'author': 'Albert Einstein'
9-
},
10-
{'quote': 'So many books, so little time.',
11-
'author': 'Frank Zappa'
12-
},
13-
{'quote': 'Be who you are and say what you feel, because those who mind don\'t matter, and those who matter don\'t mind.',
14-
'author': 'Bernard M. Baruch'
15-
},
16-
{'quote': 'A room without books is like a body without a soul.',
17-
'author': 'Marcus Tullius Cicero'
18-
},
19-
{'quote': 'You know you\'re in love when you can\'t fall asleep because reality is finally better than your dreams.',
20-
'author': 'Dr. Seuss'
21-
},
22-
{'quote': 'If you want to know what a man\'s like, take a good look at how he treats his inferiors, not his equals.',
23-
'author': 'J.K. Rowling'
24-
},
25-
26-
];
27-
28-
function createQuote(){
29-
const rand = Number.parseInt(Math.random()*quotesArray.length + 1);
30-
document.querySelector('#quoteOut').textContent = `\"${quotesArray[random].quote}\"`;
31-
document.querySelector('#authorOut').textContent = `--${quotesArray[random].author}`;
32-
1+
//this JavaScript Code outputs random Quotes from the following arrays
2+
3+
//This event will trigger when user clicks the 'Quote' button
4+
$("#new-quote").click(function(){
5+
createQuote();
6+
});
7+
8+
var quotesArray = [
9+
{'quote': 'Be yourself; everyone else is already taken.',
10+
'author': 'Oscar Wilde'
11+
},
12+
{'quote': 'Two things are infinite: the universe and human stupidity; and I\'m not sure about the universe.',
13+
'author': 'Albert Einstein'
14+
},
15+
{'quote': 'So many books, so little time.',
16+
'author': 'Frank Zappa'
17+
},
18+
{'quote': 'Be who you are and say what you feel, because those who mind don\'t matter, and those who matter don\'t mind.',
19+
'author': 'Bernard M. Baruch'
20+
},
21+
{'quote': 'A room without books is like a body without a soul.',
22+
'author': 'Marcus Tullius Cicero'
23+
},
24+
{'quote': 'You know you\'re in love when you can\'t fall asleep because reality is finally better than your dreams.',
25+
'author': 'Dr. Seuss'
26+
},
27+
{'quote': 'If you want to know what a man\'s like, take a good look at how he treats his inferiors, not his equals.',
28+
'author': 'J.K. Rowling'
29+
},
30+
];
31+
32+
//Updates the text/author field in the page
33+
function createQuote(){
34+
const rand = Number.parseInt(Math.random()*quotesArray.length + 1);
35+
$("#text").text(quotesArray[rand].quote);
36+
$("#author").text(quotesArray[rand].author);
37+
3338
}

‎index.html‎

Lines changed: 137 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,143 +1,137 @@
1-
<style>
2-
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');
3-
* {
4-
margin: 0;
5-
padding: 0;
6-
list-style: none;
7-
vertical-align: baseline;
8-
}
9-
10-
div {
11-
position: relative;
12-
z-index: 2;
13-
}
14-
15-
body {
16-
background-color: #333;
17-
color: #333;
18-
font-family: 'Raleway', sans-serif;
19-
font-weight: 400;
20-
display: flex;
21-
justify-content: center;
22-
align-items: center;
23-
height: 100vh;
24-
}
25-
.footer {
26-
width: 450px;
27-
text-align: center;
28-
display: block;
29-
margin: 15px auto 30px auto;
30-
font-size: 0.8em;
31-
color: #fff;
32-
a {
33-
font-weight: 500;
34-
text-decoration: none;
35-
color: #fff;
36-
}
37-
}
38-
#quote-box {
39-
border-radius: 3px;
40-
position: relative;
41-
//margin:8% auto auto auto;
42-
width: 450px;
43-
padding: 40px 50px;
44-
display: table;
45-
background-color: #fff;
46-
.quote-text {
47-
i {
48-
font-size: 1em;
49-
margin-right: 0.4em;
50-
}
51-
text-align: center;
52-
width: 450px;
53-
height: auto;
54-
clear: both;
55-
font-weight: 500;
56-
font-size: 1.75em;
57-
}
58-
.quote-author {
59-
width: 450px;
60-
height: auto;
61-
clear: both;
62-
padding-top: 20px;
63-
font-size: 1em;
64-
text-align: right;
65-
}
66-
.buttons {
67-
width: 450px;
68-
margin: auto;
69-
display: block;
70-
.button {
71-
height: 38px;
72-
border: none;
73-
border-radius: 3px;
74-
color: #fff;
75-
background-color: #333;
76-
outline: none;
77-
font-size: 0.85em;
78-
padding: 8px 18px 6px 18px;
79-
margin-top: 30px;
80-
opacity: 1;
81-
cursor: pointer;
82-
&:hover {
83-
opacity: 0.9;
84-
}
85-
&#tweet-quote,
86-
&#tumblr-quote {
87-
float: left;
88-
padding: 0px;
89-
padding-top: 8px;
90-
text-align: center;
91-
font-size: 1.2em;
92-
margin-right: 5px;
93-
height: 30px;
94-
width: 40px;
95-
}
96-
&#new-quote {
97-
float: right;
98-
}
99-
}
100-
}
101-
}
102-
</style>
103-
104-
<link
105-
rel="stylesheet"
106-
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-
107-
108-
awesome.min.css"
109-
/>
110-
<div id="wrapper">
111-
<div id="quote-box">
112-
<div class="quote-text">
113-
<i class="fa fa-quote-left"> </i><span id="text"></span>
114-
</div>
115-
<div class="quote-author">- <span id="author"></span></div>
116-
<div class="buttons">
117-
<a
118-
class="button"
119-
id="tweet-quote"
120-
title="Tweet this quote!"
121-
target="_blank"
122-
>
123-
<i class="fa fa-twitter"></i>
124-
</a>
125-
<a
126-
class="button"
127-
id="tumblr-quote"
128-
title="Post this quote on tumblr!"
129-
target="_blank"
130-
>
131-
<i class="fa fa-tumblr"></i>
132-
</a>
133-
<button class="button" id="new-quote">New quote</button>
134-
</div>
135-
</div>
136-
<div class="footer">by <a href="https://codepen.io/hezag/">yash</a></div>
137-
</div>
138-
<script
139-
140-
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
141-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-
142-
143-
ui.min.js"></script>
1+
<style>
2+
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
list-style: none;
7+
vertical-align: baseline;
8+
}
9+
10+
div {
11+
position: relative;
12+
z-index: 2;
13+
}
14+
15+
body {
16+
background-color: #333;
17+
color: #333;
18+
font-family: 'Raleway', sans-serif;
19+
font-weight: 400;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
height: 100vh;
24+
}
25+
.footer {
26+
width: 450px;
27+
text-align: center;
28+
display: block;
29+
margin: 15px auto 30px auto;
30+
font-size: 0.8em;
31+
color: #fff;
32+
a {
33+
font-weight: 500;
34+
text-decoration: none;
35+
color: #fff;
36+
}
37+
}
38+
#quote-box {
39+
border-radius: 3px;
40+
position: relative;
41+
//margin:8% auto auto auto;
42+
width: 450px;
43+
padding: 40px 50px;
44+
display: table;
45+
background-color: #fff;
46+
.quote-text {
47+
i {
48+
font-size: 1em;
49+
margin-right: 0.4em;
50+
}
51+
text-align: center;
52+
width: 450px;
53+
height: auto;
54+
clear: both;
55+
font-weight: 500;
56+
font-size: 1.75em;
57+
}
58+
.quote-author {
59+
width: 450px;
60+
height: auto;
61+
clear: both;
62+
padding-top: 20px;
63+
font-size: 1em;
64+
text-align: right;
65+
}
66+
.buttons {
67+
width: 450px;
68+
margin: auto;
69+
display: block;
70+
.button {
71+
height: 38px;
72+
border: none;
73+
border-radius: 3px;
74+
color: #fff;
75+
background-color: #333;
76+
outline: none;
77+
font-size: 0.85em;
78+
padding: 8px 18px 6px 18px;
79+
margin-top: 30px;
80+
opacity: 1;
81+
cursor: pointer;
82+
&:hover {
83+
opacity: 0.9;
84+
}
85+
&#tweet-quote,
86+
&#tumblr-quote {
87+
float: left;
88+
padding: 0px;
89+
padding-top: 8px;
90+
text-align: center;
91+
font-size: 1.2em;
92+
margin-right: 5px;
93+
height: 30px;
94+
width: 40px;
95+
}
96+
&#new-quote {
97+
float: right;
98+
}
99+
}
100+
}
101+
}
102+
</style>
103+
104+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
105+
106+
<div id="wrapper">
107+
<div id="quote-box">
108+
<div class="quote-text">
109+
<i class="fa fa-quote-left"> </i><span id="text"></span>
110+
</div>
111+
<div class="quote-author">- <span id="author"></span></div>
112+
<div class="buttons">
113+
<a
114+
class="button"
115+
id="tweet-quote"
116+
title="Tweet this quote!"
117+
target="_blank"
118+
>
119+
<i class="fa fa-twitter"></i>
120+
</a>
121+
<a
122+
class="button"
123+
id="tumblr-quote"
124+
title="Post this quote on tumblr!"
125+
target="_blank"
126+
>
127+
<i class="fa fa-tumblr"></i>
128+
</a>
129+
<button class="button" id="new-quote">New quote</button>
130+
</div>
131+
</div>
132+
<div class="footer">by <a href="https://codepen.io/hezag/">yash</a></div>
133+
</div>
134+
135+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
136+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
137+
<script src="creator.js"></script>

0 commit comments

Comments
 (0)