Skip to content

Commit 7a4f89a

Browse files
author
Kurt Hepler
committed
add preloader on btn click, clean up styles
1 parent e0e8b68 commit 7a4f89a

File tree

5 files changed

+186
-143
lines changed

5 files changed

+186
-143
lines changed

‎comparar/static/index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/*
2+
* Entry point runs on page load.
3+
*/
4+
$(function() {
5+
$('#comparify-btn').on('click', showLoaderAnimation);
6+
});
7+
8+
9+
/*
10+
* Show the loader animation when submit button is clicked.
11+
*/
12+
function showLoaderAnimation() {
13+
$('#comparify-btn').hide();
14+
$('#loading').show();
15+
}

‎comparar/static/loading.svg

Lines changed: 1 addition & 0 deletions
Loading

‎comparar/static/style.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,18 @@
1717
border-radius: 4px;
1818
}
1919

20+
.custom-btn:hover {
21+
background-color: #00b1e6;
22+
}
23+
2024
.small-text {
2125
font-size: 1em;
2226
}
2327

28+
.fail {
29+
text-align: center;
30+
}
31+
2432

2533

2634
/* the top search box */
@@ -38,6 +46,11 @@
3846
padding: 10px;
3947
}
4048

49+
#loading {
50+
margin-top: 15px;
51+
display: none;
52+
}
53+
4154
/* the images with titles */
4255

4356
#images {

‎comparar/templates/index.html

Lines changed: 148 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,159 @@
11
<!DOCTYPE html>
22
<html>
33
<head lang="en">
4-
<meta charset="utf-8">
5-
<title>...comparar{{title}}</title>
6-
7-
{% load staticfiles %}
8-
{% load app_filters %}
9-
10-
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
11-
12-
<!-- Pulling ourselves up by others' Bootstap :D -->
13-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
14-
<!-- Latest compiled and minified JavaScript -->
15-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
16-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
17-
<script>
18-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
19-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
20-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
21-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
22-
23-
ga('create', 'UA-62828202-1', 'auto');
24-
ga('send', 'pageview');
25-
</script>
4+
<meta charset="utf-8">
5+
<title>...comparar{{title}}</title>
6+
7+
{% load staticfiles %}
8+
{% load app_filters %}
9+
10+
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
11+
12+
<!-- Pulling ourselves up by others' Bootstap :D -->
13+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
14+
<!-- Latest compiled and minified JavaScript -->
15+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
16+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
17+
<script>
18+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
19+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
20+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
21+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
22+
ga('create', 'UA-62828202-1', 'auto');
23+
ga('send', 'pageview');
24+
</script>
25+
<script src="{% static 'index.js' %}"></script>
2626

2727
</head>
2828

2929
<body>
30-
<div class="box box-element">
31-
<div id="top-box">
32-
33-
34-
<div class="logo">
35-
<img src="{% static 'logo.jpg' %}" alt="Logo"/>
30+
<div class="box box-element">
31+
<div id="top-box">
32+
33+
<a href="/">
34+
<div class="logo">
35+
<img src="{% static 'logo.jpg' %}" alt="Logo"/>
36+
</div>
37+
</a>
38+
<h2>
39+
everything you don't want to know about anything
40+
</h2>
41+
42+
<form method="POST" class="input-items">
43+
{% csrf_token %}
44+
<input class="input-text top-buffer" name="input_left" placeholder="compare this">
45+
<input class="input-text top-buffer" name="input_right" placeholder="with this">
46+
<br/>
47+
<input type="submit" id="comparify-btn" class="top-buffer custom-btn" value="comparify">
48+
<div id="loading">
49+
<img src="{% static 'loading.svg' %}"/>
50+
</div>
51+
</form>
52+
</div>
53+
<br/>
54+
55+
{% if status == 'success' %}
56+
57+
<div id="images" class="container">
58+
<div class="row">
59+
<div class="col-md-6">
60+
<h2>{{item_left}}</h2>
61+
{% if image_left %}
62+
<img src="{{image_left}}">
63+
{% else %}
64+
Whoops! Image could not be found.
65+
{% endif %}
66+
</div>
67+
<div class="col-md-6">
68+
<h2>{{item_right}}</h2>
69+
{% if image_right %}
70+
<img src="{{image_right}}">
71+
{% else %}
72+
Whoops! Image could not be found.
73+
{% endif %}
74+
</div>
75+
</div>
76+
</div>
77+
78+
<div class="center" id="winner">
79+
<h1>{{winner}}s are {{difference}}% better than {{loser}}s!</h1>
80+
<h4>
81+
<input type="button" class="custom-btn small-text" onclick="window.open('{{amazon_url}}','_blank')" value="Buy {{winner}}s on Amazon!">
82+
</h4>
83+
</div>
84+
85+
<section class="container-fluid vertical-center center">
86+
<div id="results" class="lead">
87+
<h2>How We Determine Worth</h2>
88+
89+
<p class="row top-buffer"> The Twitter sentiment for
90+
<strong>{{winner}}</strong> is {{ stats.results|get_winner_item:"Twitter Sentiment" }}.
91+
<strong>{{loser}}&#39s</strong> is {{ stats.results|get_loser_item:"Twitter Sentiment" }}.
92+
</p>
93+
<em class="small"> More extreme sentiment, regardless of whether sentiment was positive, meant higher scores, because
94+
<strong>passion.</strong>
95+
</em>
96+
97+
<p class="row top-buffer"> Gender guesser guessed that
98+
<strong>{{winner}}</strong> is a {{ stats.results|get_winner_item:"Gender Guesser" }}, and that
99+
<strong>{{loser}}</strong> is a {{ stats.results|get_loser_item:"Gender Guesser" }}.
100+
</p>
101+
<em class="small"> Being a female gives you a 150% kicker because,
102+
<strong>diversity.</strong>
103+
</em>
104+
105+
<p class="row top-buffer">
106+
<strong>{{winner}}</strong> has {{ stats.results|get_winner_item:"Thesaurus" }} synonyms and antonyms,
107+
<strong>{{loser}}</strong> has {{ stats.results|get_loser_item:"Thesaurus" }}.
108+
</p>
109+
<em class="small"> More thesaurus results amplified
110+
<strong>{{winner}}&#39s</strong> score, because synonyms mean
111+
<strong>ubiquity</strong>, and antonyms mean <strong>disruptive.</strong>
112+
</em>
113+
114+
<!-- <p>
115+
<strong>{{winner}}</strong> has X antonyms,
116+
<strong>{{loser}}</strong> has Y.
117+
</p>
118+
<em class="small"> More antonyms amplified
119+
<strong>{{winner}}&#39s</strong> score, because
120+
<strong>disruptive.</strong>
121+
</em> -->
122+
123+
<p class="row top-buffer"> AngelList notes {{ stats.results|get_winner_item:"Angel List" }} startups related to
124+
<strong>{{winner}}</strong>, versus {{ stats.results|get_loser_item:"Angel List" }} for
125+
<strong>{{loser}}</strong>.
126+
</p>
127+
</p>
128+
<em class="small"> Less startups means a higher score, because
129+
<strong>market share.</strong>
130+
</em>
131+
132+
<p class="row top-buffer"> The top 40 Google Books on the subject of
133+
<strong>{{winner}}</strong>.
134+
</p>
135+
<em class="small"> More pages means a higher score, because
136+
<strong>verbosity.</strong>
137+
</em>
138+
139+
<p class="row top-buffer"> Finally,
140+
<strong>{{winner}}</strong> turns up {{ stats.results|get_winner_item:"Google Search" }} results on Google, while
141+
<strong>{{loser}}</strong> turns up only {{ stats.results|get_loser_item:"Google Search" }}.
142+
</p>
143+
<em class="small"> More results on Google means a higher score, because
144+
<strong>big data.</strong>
145+
</em>
146+
</div>
147+
</section>
36148
</div>
37-
<h2>
38-
Everything you don't want to know about anything
39-
</h2>
40-
41-
42-
<form method="POST" class="input-items">
43-
{% csrf_token %}
44-
<input class="input-text top-buffer" name="input_left" placeholder="compare this">
45-
<input class="input-text top-buffer" name="input_right" placeholder="with this">
46-
<br/>
47-
<input type="submit" class="top-buffer custom-btn" value="comparify">
48-
</form>
49-
50-
</div>
51-
<br/>
52-
{% if status == 'success' %}
53-
54-
<div id="images" class="container">
55-
<div class="row">
56-
<div class="col-md-6">
57-
<h2>{{item_left}}</h2>
58-
{% if image_left %}
59-
<img src="{{image_left}}">
60-
{% else %}
61-
Whoops! Image could not be found.
62-
{% endif %}
63-
</div>
64-
<div class="col-md-6">
65-
<h2>{{item_right}}</h2>
66-
{% if image_right %}
67-
<img src="{{image_right}}">
68-
{% else %}
69-
Whoops! Image could not be found.
70-
{% endif %}
71-
</div>
72-
</div>
73-
</div>
74-
75-
<div class="center" id="winner">
76-
<h1>{{winner}}s are {{difference}}% better than {{loser}}s!</h1>
77-
<h4>
78-
<input type="button" class="custom-btn small-text" onclick="window.open('{{amazon_url}}','_blank')" value="Buy {{winner}}s on Amazon!">
79-
</h4>
80-
</div>
81-
82-
<section class="container-fluid vertical-center center">
83-
<div id="results" class="lead">
84-
<h2>How We Determine Worth</h2>
85-
86-
<p class="row top-buffer"> The Twitter sentiment for
87-
<strong>{{winner}}</strong> is {{ stats.results|get_winner_item:"Twitter Sentiment" }}.
88-
<strong>{{loser}}&#39s</strong> is {{ stats.results|get_loser_item:"Twitter Sentiment" }}.
89-
</p>
90-
<em class="small"> More extreme sentiment, regardless of whether sentiment was positive, meant higher scores, because
91-
<strong>passion.</strong>
92-
</em>
93-
94-
<p class="row top-buffer"> Gender guesser guessed that
95-
<strong>{{winner}}</strong> is a {{ stats.results|get_winner_item:"Gender Guesser" }}, and that
96-
<strong>{{loser}}</strong> is a {{ stats.results|get_loser_item:"Gender Guesser" }}.
97-
</p>
98-
<em class="small"> Being a female gives you a 150% kicker because,
99-
<strong>diversity.</strong>
100-
</em>
101-
102-
<p class="row top-buffer">
103-
<strong>{{winner}}</strong> has {{ stats.results|get_winner_item:"Thesaurus" }} synonyms and antonyms,
104-
<strong>{{loser}}</strong> has {{ stats.results|get_loser_item:"Thesaurus" }}.
105-
</p>
106-
<em class="small"> More thesaurus results amplified
107-
<strong>{{winner}}&#39s</strong> score, because synonyms mean
108-
<strong>ubiquity</strong>, and antonyms mean <strong>disruptive.</strong>
109-
</em>
110-
<!-- <p>
111-
<strong>{{winner}}</strong> has X antonyms,
112-
<strong>{{loser}}</strong> has Y.
113-
</p>
114-
<em class="small"> More antonyms amplified
115-
<strong>{{winner}}&#39s</strong> score, because
116-
<strong>disruptive.</strong>
117-
</em> -->
118-
119-
<p class="row top-buffer"> AngelList notes {{ stats.results|get_winner_item:"Angel List" }} startups related to
120-
<strong>{{winner}}</strong>, versus {{ stats.results|get_loser_item:"Angel List" }} for
121-
<strong>{{loser}}</strong>.
122-
</p>
123-
</p>
124-
<em class="small"> Less startups means a higher score, because
125-
<strong>market share.</strong>
126-
</em>
127-
128-
<p class="row top-buffer"> The top 40 Google Books on the subject of
129-
<strong>{{winner}}</strong>.
130-
</p>
131-
<em class="small"> More pages means a higher score, because
132-
<strong>verbosity.</strong>
133-
</em>
134-
135-
<p class="row top-buffer"> Finally,
136-
<strong>{{winner}}</strong> turns up {{ stats.results|get_winner_item:"Google Search" }} results on Google, while
137-
<strong>{{loser}}</strong> turns up only {{ stats.results|get_loser_item:"Google Search" }}.
138-
</p>
139-
<em class="small"> More results on Google means a higher score, because
140-
<strong>big data.</strong>
141-
</em>
142-
</div>
143-
</section>
144-
</div>
145-
146-
{% elif status == 'fail' %}
147-
<h1>
148-
try again! {{failure_description}}
149-
</h1>
150-
151-
{% endif %}
149+
150+
{% elif status == 'fail' %}
151+
<div class="fail container-fluid center">
152+
<h2>
153+
try again! {{failure_description}}
154+
</h2>
155+
</div>
156+
{% endif %}
152157
</body>
153158

154159
</html>

‎comparar/views.py

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,15 @@ def index(request):
3131
if request.method == "POST":
3232
item_left = request.POST['input_left'].title()
3333
item_right = request.POST['input_right'].title()
34+
35+
# make sure that they typed in something
36+
if len(item_left) == 0 or len(item_right) == 0:
37+
return render(request, 'index.html', {
38+
'title': ' :(',
39+
'status': 'fail',
40+
'failure_description': 'please type in something to compare this time'
41+
})
42+
3443
return HttpResponseRedirect("/?left={0}&right={1}".format(item_left, item_right))
3544

3645
# both query parameters, so proceed

0 commit comments

Comments
 (0)