Skip to content

Commit 3e0fd4f

Browse files
jackfranklinjackfranklin
committed
Initial commit with bad code
0 parents  commit 3e0fd4f

File tree

7 files changed

+2551
-0
lines changed

7 files changed

+2551
-0
lines changed

‎index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>Tabs</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
7+
<script src="rubbishtabs.js"></script>
8+
<script>
9+
$(tabularize);
10+
</script>
11+
</head>
12+
<body>
13+
<div class="tabs">
14+
<ul>
15+
<li class="active"><a href="#tab1" class="tab-link">Tab 1</a></li>
16+
<li><a href="#tab2" class="tab-link">Tab 2</a></li>
17+
<li><a href="#tab3" class="tab-link">Tab 3</a></li>
18+
</ul>
19+
<div id="tab1">
20+
<h3>Tab 1</h3>
21+
<p>Lorem ipsum dolor sit amet</p>
22+
</div>
23+
<div id="tab2">
24+
<h3>Tab 2</h3>
25+
<p>Lorem ipsum dolor sit amet</p>
26+
</div>
27+
<div id="tab3">
28+
<h3>Tab 3</h3>
29+
<p>Lorem ipsum dolor sit amet</p>
30+
</div>
31+
</body>
32+
</html>

‎qunit.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>QUnit</title>
6+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
7+
<script src="rubbishtabs.js"></script>
8+
<link rel="stylesheet" href="test/qunit.css">
9+
</head>
10+
<body>
11+
<div id="qunit"></div>
12+
<div id="qunit-fixture">
13+
<div class="tabs">
14+
<ul>
15+
<li class="active"><a href="#tab1" class="tab-link">Tab 1</a></li>
16+
<li><a href="#tab2" class="tab-link">Tab 2</a></li>
17+
<li><a href="#tab3" class="tab-link">Tab 3</a></li>
18+
</ul>
19+
<div id="tab1">
20+
<h3>Tab 1</h3>
21+
<p>Lorem ipsum dolor sit amet</p>
22+
</div>
23+
<div id="tab2">
24+
<h3>Tab 2</h3>
25+
<p>Lorem ipsum dolor sit amet</p>
26+
</div>
27+
<div id="tab3">
28+
<h3>Tab 3</h3>
29+
<p>Lorem ipsum dolor sit amet</p>
30+
</div>
31+
</div>
32+
</div>
33+
<script src="test/qunit.js"></script>
34+
<script src="test/tests.js"></script>
35+
</body>
36+
</html>

‎rubbishtabs.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*
2+
* general problems
3+
* 1. reusing selectors
4+
* 2. not very DRY
5+
* 3. click()
6+
* 4. return false
7+
* 5. tied to specific HTML
8+
*/
9+
var tabularize = function() {
10+
var active = location.hash;
11+
// need to be more careful with hash
12+
if(active) {
13+
$(".tabs").children("div").hide();
14+
$(active).show();
15+
$(".active").removeClass("active");
16+
$(".tab-link").each(function() {
17+
if($(this).attr("href") === active) {
18+
$(this).parent().addClass("active");
19+
}
20+
});
21+
}
22+
$(".tabs").find(".tab-link").click(function() {
23+
$(".tabs").children("div").hide();
24+
$($(this).attr("href")).show();
25+
$(".active").removeClass("active");
26+
$(this).parent().addClass("active");
27+
return false;
28+
});
29+
};

‎style.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.tabs {
2+
width: 600px;
3+
border: 1px solid #111;
4+
}
5+
6+
.tabs ul {
7+
margin-bottom: 1px solid #111;
8+
padding: 0;
9+
margin: 0;
10+
}
11+
12+
.tabs li {
13+
display: inline-block;
14+
width: 30%;
15+
padding: 5px;
16+
text-align: center;
17+
}
18+
19+
.tabs li.active {
20+
background: #ddd;
21+
}
22+
23+
.tabs div {
24+
padding: 5px;
25+
background: #ddd;
26+
}
27+
28+
#tab2, #tab3 { display: none; }

‎test/qunit.css‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
/**
2+
* QUnit v1.11.0 - A JavaScript Unit Testing Framework
3+
*
4+
* http://qunitjs.com
5+
*
6+
* Copyright 2012 jQuery Foundation and other contributors
7+
* Released under the MIT license.
8+
* http://jquery.org/license
9+
*/
10+
11+
/** Font Family and Sizes */
12+
13+
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
14+
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
15+
}
16+
17+
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
18+
#qunit-tests { font-size: smaller; }
19+
20+
21+
/** Resets */
22+
23+
#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
24+
margin: 0;
25+
padding: 0;
26+
}
27+
28+
29+
/** Header */
30+
31+
#qunit-header {
32+
padding: 0.5em 0 0.5em 1em;
33+
34+
color: #8699a4;
35+
background-color: #0d3349;
36+
37+
font-size: 1.5em;
38+
line-height: 1em;
39+
font-weight: normal;
40+
41+
border-radius: 5px 5px 0 0;
42+
-moz-border-radius: 5px 5px 0 0;
43+
-webkit-border-top-right-radius: 5px;
44+
-webkit-border-top-left-radius: 5px;
45+
}
46+
47+
#qunit-header a {
48+
text-decoration: none;
49+
color: #c2ccd1;
50+
}
51+
52+
#qunit-header a:hover,
53+
#qunit-header a:focus {
54+
color: #fff;
55+
}
56+
57+
#qunit-testrunner-toolbar label {
58+
display: inline-block;
59+
padding: 0 .5em 0 .1em;
60+
}
61+
62+
#qunit-banner {
63+
height: 5px;
64+
}
65+
66+
#qunit-testrunner-toolbar {
67+
padding: 0.5em 0 0.5em 2em;
68+
color: #5E740B;
69+
background-color: #eee;
70+
overflow: hidden;
71+
}
72+
73+
#qunit-userAgent {
74+
padding: 0.5em 0 0.5em 2.5em;
75+
background-color: #2b81af;
76+
color: #fff;
77+
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
78+
}
79+
80+
#qunit-modulefilter-container {
81+
float: right;
82+
}
83+
84+
/** Tests: Pass/Fail */
85+
86+
#qunit-tests {
87+
list-style-position: inside;
88+
}
89+
90+
#qunit-tests li {
91+
padding: 0.4em 0.5em 0.4em 2.5em;
92+
border-bottom: 1px solid #fff;
93+
list-style-position: inside;
94+
}
95+
96+
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
97+
display: none;
98+
}
99+
100+
#qunit-tests li strong {
101+
cursor: pointer;
102+
}
103+
104+
#qunit-tests li a {
105+
padding: 0.5em;
106+
color: #c2ccd1;
107+
text-decoration: none;
108+
}
109+
#qunit-tests li a:hover,
110+
#qunit-tests li a:focus {
111+
color: #000;
112+
}
113+
114+
#qunit-tests li .runtime {
115+
float: right;
116+
font-size: smaller;
117+
}
118+
119+
.qunit-assert-list {
120+
margin-top: 0.5em;
121+
padding: 0.5em;
122+
123+
background-color: #fff;
124+
125+
border-radius: 5px;
126+
-moz-border-radius: 5px;
127+
-webkit-border-radius: 5px;
128+
}
129+
130+
.qunit-collapsed {
131+
display: none;
132+
}
133+
134+
#qunit-tests table {
135+
border-collapse: collapse;
136+
margin-top: .2em;
137+
}
138+
139+
#qunit-tests th {
140+
text-align: right;
141+
vertical-align: top;
142+
padding: 0 .5em 0 0;
143+
}
144+
145+
#qunit-tests td {
146+
vertical-align: top;
147+
}
148+
149+
#qunit-tests pre {
150+
margin: 0;
151+
white-space: pre-wrap;
152+
word-wrap: break-word;
153+
}
154+
155+
#qunit-tests del {
156+
background-color: #e0f2be;
157+
color: #374e0c;
158+
text-decoration: none;
159+
}
160+
161+
#qunit-tests ins {
162+
background-color: #ffcaca;
163+
color: #500;
164+
text-decoration: none;
165+
}
166+
167+
/*** Test Counts */
168+
169+
#qunit-tests b.counts { color: black; }
170+
#qunit-tests b.passed { color: #5E740B; }
171+
#qunit-tests b.failed { color: #710909; }
172+
173+
#qunit-tests li li {
174+
padding: 5px;
175+
background-color: #fff;
176+
border-bottom: none;
177+
list-style-position: inside;
178+
}
179+
180+
/*** Passing Styles */
181+
182+
#qunit-tests li li.pass {
183+
color: #3c510c;
184+
background-color: #fff;
185+
border-left: 10px solid #C6E746;
186+
}
187+
188+
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
189+
#qunit-tests .pass .test-name { color: #366097; }
190+
191+
#qunit-tests .pass .test-actual,
192+
#qunit-tests .pass .test-expected { color: #999999; }
193+
194+
#qunit-banner.qunit-pass { background-color: #C6E746; }
195+
196+
/*** Failing Styles */
197+
198+
#qunit-tests li li.fail {
199+
color: #710909;
200+
background-color: #fff;
201+
border-left: 10px solid #EE5757;
202+
white-space: pre;
203+
}
204+
205+
#qunit-tests > li:last-child {
206+
border-radius: 0 0 5px 5px;
207+
-moz-border-radius: 0 0 5px 5px;
208+
-webkit-border-bottom-right-radius: 5px;
209+
-webkit-border-bottom-left-radius: 5px;
210+
}
211+
212+
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
213+
#qunit-tests .fail .test-name,
214+
#qunit-tests .fail .module-name { color: #000000; }
215+
216+
#qunit-tests .fail .test-actual { color: #EE5757; }
217+
#qunit-tests .fail .test-expected { color: green; }
218+
219+
#qunit-banner.qunit-fail { background-color: #EE5757; }
220+
221+
222+
/** Result */
223+
224+
#qunit-testresult {
225+
padding: 0.5em 0.5em 0.5em 2.5em;
226+
227+
color: #2b81af;
228+
background-color: #D2E0E6;
229+
230+
border-bottom: 1px solid white;
231+
}
232+
#qunit-testresult .module-name {
233+
font-weight: bold;
234+
}
235+
236+
/** Fixture */
237+
238+
#qunit-fixture {
239+
position: absolute;
240+
top: -10000px;
241+
left: -10000px;
242+
width: 1000px;
243+
height: 1000px;
244+
}

0 commit comments

Comments
 (0)