Skip to content

Commit bcadf1e

Browse files
doreydorey
committed
added unified eq table into the readme and master branch
1 parent bb13d89 commit bcadf1e

File tree

4 files changed

+424
-0
lines changed

4 files changed

+424
-0
lines changed

‎README.markdown

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@ JavaScript equality comparison is a crazy thing, sometimes.
22
When in doubt, use three equals signs.
33

44
You can view the demo [here](http://dorey.github.io/JavaScript-Equality-Table/).
5+
6+
You can also check out a new, [unified version of the equality table](http://dorey.github.io/JavaScript-Equality-Table/unified/).

‎unified/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
4+
<html lang="en">
5+
<head>
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<title>JS Comparison Table</title>
8+
<link rel="stylesheet" href="unified_comparison_table.css" type="text/css" media="all" title="simple" charset="utf-8">
9+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
10+
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
11+
<script type="text/javascript" src="unified_comparison_table.js"></script>
12+
13+
<!-- Inspired by this post:
14+
http://blog.codekills.net/archives/89-Equality-in-JavaScript.html
15+
16+
2013-Nov-11. Correcting issue where "[]===[]" was incorrectly marked as true.
17+
-->
18+
</head>
19+
<body>
20+
<div id="content">
21+
<h3>Equality in JavaScript</h3>
22+
<div id="table"></div>
23+
<div id="key"></div>
24+
<br style="clear:both">
25+
</div>
26+
<script type="text/javascript" charset="utf-8">
27+
/*
28+
Strings in backticks (`) are evaluated.
29+
*/
30+
var values = [true, false, 1, 0, -1, "`'true'`", "`'false'`", "`'1'`", "`'0'`", "`'-1'`",
31+
"", "`null`", "`undefined`", "`[]`", "`{}`", [[]], [0], [1], "`parseFloat('nan')`"];
32+
33+
buildUnifiedComparisonTable(values).appendTo("#table")
34+
buildKeyTable().appendTo("#key")
35+
</script>
36+
</body>
37+
</html>

‎unified/unified_comparison_table.css

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
body {
2+
margin: 0;
3+
}
4+
#content {
5+
width: 1000px;
6+
margin: 0 auto;
7+
}
8+
#table, #key {
9+
float: left;
10+
}
11+
#table {
12+
width: 720px;
13+
}
14+
#key {
15+
margin-top: 120px;
16+
width: 280px;
17+
}
18+
19+
table.comparisons {
20+
border-spacing: 0;
21+
color: #444;
22+
}
23+
table.comparisons p.desc {
24+
margin: 0;
25+
font-style: italic;
26+
color: #666;
27+
font-size: 14px;
28+
}
29+
table.comparisons td.row.header {
30+
text-align: right;
31+
font-family: Monospace;
32+
font-size: 15px;
33+
font-weight: 600;
34+
}
35+
table.comparisons td.row.header span {
36+
color: #eee;
37+
margin-right: -4px;
38+
}
39+
/*table.comparisons td.row.header.true {
40+
background-color: #f8f8f8;
41+
}*/
42+
table.comparisons td.row.header.true span {
43+
color: #aaa;
44+
}
45+
table.comparisons.key td {
46+
padding: 6px 0;
47+
}
48+
table.comparisons.key td.label {
49+
padding-left: 6px;
50+
}
51+
table.comparisons td.cell {
52+
padding: 1.5px;
53+
cursor: pointer;
54+
}
55+
table.comparisons td.cell div {
56+
width: 25px;
57+
height: 25px;
58+
background-color: #ece3e2;
59+
border: 2px solid #cecece;
60+
border-radius: 3px;
61+
-moz-border-radius: 3px;
62+
-webkit-border-radius: 3px;
63+
text-align: center;
64+
line-height: 27px;
65+
color: #c9c9c9;
66+
}
67+
table.comparisons td.strict-equality div, table.comparisons td.loose-equality div {
68+
border-color: #817D7D;
69+
background-color: #dbdbdb;
70+
color: #817D7D;
71+
}
72+
table.comparisons td.strict-equality div {
73+
color: #5f5f5f;
74+
border-color: #464646;
75+
background-color: #818181;
76+
font-size: 28px;
77+
font-weight: bold;
78+
}
79+
table.comparisons td.header.col {
80+
height: 90px;
81+
}
82+
table.comparisons td.header.col span.rotate {
83+
position: absolute;
84+
font-family: Monospace;
85+
font-size: 15px;
86+
font-weight: 600;
87+
-moz-transform:rotate(90deg);
88+
-webkit-transform:rotate(90deg);
89+
-o-transform:rotate(90deg);
90+
-ms-transform:rotate(90deg);
91+
transform:rotate(90deg);
92+
}
93+
table.comparisons .expression {
94+
font-size: 13px;
95+
color: #666;
96+
padding-left: 8px;
97+
}

0 commit comments

Comments
 (0)