Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor CSS and JavaScript files #26

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Refactor CSS and JavaScript files #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f41ebee
Refactor CSS and JavaScript files
GunaPalanivel Sep 29, 2024
67bb7eb
Refactor README.markdown and update project details
GunaPalanivel Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 85 additions & 4 deletions README.markdown
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,87 @@
JavaScript equality comparison is a crazy thing, sometimes.
When in doubt, use three equals signs.
# **JavaScript Equality Comparison Table**

You can view the demo [here](http://dorey.github.io/JavaScript-Equality-Table/).
This project generates a dynamic comparison table to evaluate JavaScript expressions. It allows users to compare various values, including arrays, objects, booleans, numbers, and evaluated expressions (wrapped in backticks). The primary focus is on showcasing the results of equality comparisons (`==`, `===`) and conditional (`if`) evaluations in a visually clear, interactive manner.

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

For a more streamlined experience, check out the [unified version of the equality table](https://gunapalanivel.github.io/JavaScript-Equality-Table/unified/).

## **Table of Contents**

- [Project Overview](#project-overview)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Code Structure](#code-structure)
- [Customization](#customization)
- [Technologies Used](#technologies-used)

## **Project Overview**

The Comparison Table Generator evaluates a set of values and displays the results of their comparisons in a tabular format. The tool supports complex expressions, including evaluated JavaScript values using backticks, enabling developers to visualize comparisons between different data types and structures in JavaScript.

It also handles specific cases like NaN comparisons, infinity values, and the differentiation between primitives, objects, and arrays.

### **Use Cases**

- Testing JavaScript comparison operations in a clear, visual format.
- Learning how different data types are treated in JavaScript comparisons.
- Understanding JavaScript's `==` vs. `===` behavior.
- Debugging and experimenting with evaluated expressions in JavaScript.

## **Features**

- **Dynamic Comparison Table**: Displays the results of value comparisons (`==`, `===`) in a table format.
- **Supports JavaScript Evaluation**: Strings wrapped in backticks (`) are evaluated as JavaScript code.
- **Semantic HTML5**: Uses semantic HTML for better accessibility and content separation.
- **Optimized for Modern Browsers**: Fully responsive and optimized for both desktop and mobile browsers.
- **Canvas-Based Text Rotation**: Rotates text using HTML5 Canvas for header elements, ensuring better layout and readability.
- **Fast Performance**: Uses modern JavaScript practices (e.g., scoped variables, efficient checks) for quick and reliable performance.

### **Dependencies**

This project uses jQuery and jQuery UI from the official CDN. No additional installation is required.

## **Usage**

You can either open the `index.html` file directly in a browser or integrate it into any existing HTML page.

1. **Comparing Values**: By default, the project compares a set of predefined values. The table will show whether each pair of values is equal (`==`, `===`) and whether a conditional statement (`if`) would execute.
2. **Reordered Comparisons**: By adding `?reordered` to the URL, the project compares a different set of values.

3. **Rotated Headers**: The headers of the table are rotated for better visual alignment. Canvas is used to ensure the text rotates properly, even on browsers without CSS3 transforms.

### **Generating a Table**

To generate a comparison table, the following functions are used:

- `buildComparisonTable(values, comparator)` – Generates a table comparing values based on the given comparator (e.g., `===` or `==`).
- `buildComparisonTableForIf(values)` – Generates a table to visualize the result of an `if` condition for each value.

## **Code Structure**

- **HTML5 Compliant**: The project uses HTML5 structure (`nav`, `section`, `article`) for better organization.
- **CSS Styling**: Minimal styling is included for table formatting. You can add custom styles as needed.
- **JavaScript**: The core logic is written in JavaScript (ES6+), with jQuery for DOM manipulation. The code is structured as follows:
- Values are processed into a comparison-friendly format.
- Comparisons are evaluated, and the results are displayed in the table.

### **Key Functions**

- **`ForComparison`**: A class that processes and formats the values to make them suitable for comparison.
- **`testResults(fc2, comparator)`**: Compares two values and returns the result of the comparison.
- **`rotateText(txt, cHeight)`**: A helper function to rotate text in the table headers using HTML5 Canvas.

## **Customization**

- **Changing Comparison Operators**: The default operator used is `===`. You can modify this by passing a different operator to `buildComparisonTable` (e.g., `==`, `!=`).
- **Adding More Values**: You can extend the `values` array to add more test cases, including complex expressions.
- **Styling**: Modify the CSS to style the table differently, for example, adding hover effects or changing the table layout.

## **Technologies Used**

- **HTML5**: Semantic structure for better content separation and SEO.
- **JavaScript (ES6+)**: Core logic and comparison functionality.
- **jQuery (3.6.0)**: DOM manipulation and event handling.
- **jQuery UI (1.12.1)**: Used for UI components like the table.
- **HTML5 Canvas**: For rendering rotated text in table headers.
136 changes: 75 additions & 61 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS Comparison Table</title>
<link rel="stylesheet" href="styles/simple.css" type="text/css" media="all" title="simple" charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Comparison Table</title>

<!-- Modern CSS Reset and Styles -->
<link rel="stylesheet" href="styles/simple.css" type="text/css" media="all">

<!-- jQuery and jQuery UI from modern CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- Custom Script for comparison table -->
<script type="text/javascript" src="js/comparison_table.js"></script>

<!-- Originally from here:
<script src="values.js" type="text/javascript"></script>

<!-- Originally from here:
http://blog.codekills.net/archives/89-Equality-in-JavaScript.html

2013-Nov-11. Correcting issue where "[]===[]" was incorrectly marked as true.
Expand All @@ -19,62 +26,69 @@
https://gist.github.com/761080
-->
</head>

<body>

<div id="tabs">
<ul>
<li>
<a href="#two-equals">
==
</a>
</li>
<li>
<a href="#three-equals">
===
</a>
</li>
<li>
<a href="#if-statement">
If()
</a>
</li>
</ul>
<div id="two-equals">
<h2>== <smaller>(negated: !=)</smaller></h2>
<p class="description">
When using two equals signs for JavaScript equality testing, some funky conversions take place.
</p>
</div>
<div id="three-equals">
<h2>=== <smaller>(negated: !==)</smaller></h2>
<p class="description">
When using three equals signs for JavaScript equality testing, everything is <b>as is</b>. Nothing gets converted before being evaluated.
</p>
</div>
<div id="if-statement">
<h2>A standard IF statement. If(<i>value</i>) {/*- green -*/} else { /*- white -*/ }</h2>
<p>Note: This row does not match up with any of the rows in the other table.</p>
</div>
<div style="padding: 2px 20px">
<h4>Moral of the story:</h4>
<p>
Always use 3 equals unless you have a good reason to use 2.
</p>
</div>
</div>
<nav>
<div id="tabs" aria-label="JavaScript Comparison Tabs">
<ul>
<li><a href="#two-equals" aria-label="Tab for double equals">==</a></li>
<li><a href="#three-equals" aria-label="Tab for triple equals">===</a></li>
<li><a href="#if-statement" aria-label="Tab for IF statement">If()</a></li>
</ul>

<!-- see values.js for a list of values which are compared in the table -->
<script src="values.js" type="text/javascript" charset="utf-8"></script>
<!-- == Comparison Section -->
<section id="two-equals">
<article>
<h2>== <small>(negated: !=)</small></h2>
<p class="description">
When using two equals signs for JavaScript equality testing, some funky conversions take place.
</p>
</article>
</section>

<script type="text/javascript" charset="utf-8">
<!-- === Comparison Section -->
<section id="three-equals">
<article>
<h2>=== <small>(negated: !==)</small></h2>
<p class="description">
When using three equals signs for JavaScript equality testing, everything is <strong>as
is</strong>.
Nothing gets converted before being evaluated.
</p>
</article>
</section>

buildComparisonTable(values, "==").appendTo("#two-equals")
buildComparisonTable(values, "===").appendTo("#three-equals")
buildComparisonTableForIf(values).appendTo("#if-statement")
<!-- IF Statement Section -->
<section id="if-statement">
<article>
<h2>A standard IF statement</h2>
<p>Note: This row does not match up with any of the rows in the other table.</p>
<p>If (<i>value</i>) {/*- green -*/} else { /*- white -*/ }</p>
</article>
</section>

$('#tabs').tabs();
$("<li><a href='unified/'>New link: view everything in one table</a></li>").appendTo("#tabs ul");
<div style="padding: 2px 20px;">
<h4>Moral of the story:</h4>
<p>Always use 3 equals unless you have a good reason to use 2.</p>
</div>
</div>
</nav>

</script>
<!-- Custom Script for Building Tables -->
<script type="text/javascript">
$(document).ready(function () {
buildComparisonTable(values, "==").appendTo("#two-equals");
buildComparisonTable(values, "===").appendTo("#three-equals");
buildComparisonTableForIf(values).appendTo("#if-statement");

// Initialize jQuery UI Tabs
$("#tabs").tabs();

// Adding an external link to unified table
$("<li><a href='unified/'>New link: view everything in one table</a></li>").appendTo("#tabs ul");
});
</script>
</body>
</html>

</html>
Loading