Merge pull request #2447 from pavitraag/hashing

Added Hashing Calculator
Sulagna-Dutta-Roy · Jul 19, 2024 · 3277088 · 3277088
2 parents 86b2f9e + 97714b7
commit 3277088
Show file tree

Hide file tree

Showing 5 changed files with 219 additions and 0 deletions.
diff --git a/Hashing Calculator/Readme.md b/Hashing Calculator/Readme.md
@@ -0,0 +1,15 @@
+# <p align="center">Hashing Message Calculator</p>
+
+## Description :-
+
+Calculates the hash for your message from one of the widely used hashing algorithms.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+<img width="920" alt="image" src="https://github.com/user-attachments/assets/e6199df0-1859-4087-ad0a-e9fda56a0724">
diff --git a/Hashing Calculator/index.html b/Hashing Calculator/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <title>Hashing Message Calculator</title>
+</head>
+
+<body>
+    <div class="container">
+        <h1 id="heading">Hashing Message Calculator</h1>
+        <h3>Make your message secret!</h3>
+        <label for="message">Your Message: </label>
+        <input type="text" id="message" placeholder="Message">
+
+        <label for="algorithm">Hashing algorithm: </label>
+        <select id="algorithm" name="algorithm" required>
+            <option value="md5">MD5</option>
+            <option value="sha1">SHA1</option>
+            <option value="sha256">SHA256</option>
+            <option value="sha512">SHA512</option>
+            <option value="hmac">HMAC</option>
+        </select>
+
+        <button onclick="calculate()">Calculate Hash</button>
+
+        <div id="result"></div>
+        <div id="info"></div>
+        <div id="fact"></div>
+        <button type="button" id="resetButton">Reset</button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Hashing Calculator/manifest.json b/Hashing Calculator/manifest.json
@@ -0,0 +1,11 @@
+{
+    "manifest_version": 3,
+    "name": "Hashing Message Calculator",
+    "version": "1.0",
+    "description": "A web application to hash messages using various algorithms.",
+    "permissions": [],
+    "action": {
+        "default_popup": "index.html"
+    }
+}
+
diff --git a/Hashing Calculator/script.js b/Hashing Calculator/script.js
@@ -0,0 +1,59 @@
+// Wait for the DOM to fully load
+document.addEventListener("DOMContentLoaded", function() {
+
+    // Add event listener to the reset button
+    document.getElementById("resetButton").addEventListener("click", function() {
+        document.getElementById("message").value = "";
+        document.getElementById("algorithm").value = "md5";
+        document.getElementById("result").innerText = "";
+    });
+});
+
+// Function to calculate hash based on user input
+function calculate() {
+    const message = document.getElementById("message").value;
+    const algorithm = document.getElementById("algorithm").value;
+    let hash;
+    let info;
+
+    if (message === "") {
+        alert("Please enter a message to hash.");
+        return;
+    }
+
+    switch (algorithm) {
+        case "md5":
+            hash = CryptoJS.MD5(message).toString();
+            info = "Imagine MD5 as a digital fingerprint for your message. It takes your message and turns it into a unique 32-character code.";
+            fact = "It's super fast but not the best for security anymore—like a really fast lock that's easy to pick!";
+            break;
+        case "sha1":
+            hash = CryptoJS.SHA1(message).toString();
+            info = "SHA-1 is like MD5's older sibling, creating a 40-character code for your message. It's a bit more secure but still not great for super-secret stuff.";
+            fact = "Think of it as a stronger lock than MD5, but still not strong enough for serious security.";
+            break;
+        case "sha256":
+            hash = CryptoJS.SHA256(message).toString();
+            info = "SHA-256 is a security superstar! It takes your message and transforms it into a super secure 64-character code.";
+            fact = "It's like a high-tech lock that's very hard to crack, perfect for things like online banking and cryptocurrencies.";
+            break;
+        case "sha512":
+            hash = CryptoJS.SHA512(message).toString();
+            info = "SHA-512 is like SHA-256 on steroids. It creates a whopping 128-character code, making it ultra-secure.";
+            fact = "Imagine a fortress with a super complicated lock—it's super safe but takes a bit longer to lock and unlock.";
+            break;
+        case "hmac":
+            const secret = "secret"; // You can customize or prompt for the secret key
+            hash = CryptoJS.HmacSHA256(message, secret).toString();
+            info = "HMAC is like sending a secret message with a special key that only you and your friend know. It ensures that the message hasn’t been tampered with and confirms it’s really from you.";
+            fact = "It's like a secret handshake that proves the message is legit and hasn't been messed with!";
+            break;
+        default:
+            alert("Invalid algorithm selected.");
+            return;
+    }
+
+    document.getElementById("result").innerText = `Hash (${algorithm}): ${hash}`;
+    document.getElementById("info").innerText = `More about (${algorithm}): ${info}`;
+    document.getElementById("fact").innerText = `Fun fact: ${fact}`;
+}
diff --git a/Hashing Calculator/style.css b/Hashing Calculator/style.css
@@ -0,0 +1,94 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(135deg, #3498db, #2ecc71);
+    color: #ecf0f1;
+}
+
+.container {
+    text-align: center;
+    background-color: rgba(39, 39, 39, 0.8); /* Semi-transparent container */
+    padding: 30px;
+    border-radius: 10px;
+    height: 58%;
+    width: 85%;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+h1 {
+    color: #ecf0f1;
+}
+
+h3 {
+    color: #67addb;
+}
+
+label {
+    margin-right: 5px;
+    color: #ecf0f1;
+}
+
+/* Adjusted styling for horizontal input boxes */
+.input-group {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+input {
+    margin: 0 5px;
+    padding: 7px;
+    width: 200px;
+    border: none;
+    border-radius: 5px;
+    background-color: #ecf0f1;
+    color: #333;
+}
+
+button {
+    margin-top: 15px;
+    padding: 15px;
+    cursor: pointer;
+    background-color: #3498db;
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #2980b9;
+}
+
+#result {
+    margin-top: 15px;
+    font-weight: bold;
+    color: #3498db;
+    border-radius: 5px;
+    font-size: 18px;
+    padding: 5px;
+}
+
+#info {
+    margin-top: 20px;
+    display: flex;
+    font-weight: bold;
+    color: #67addb;
+    border-radius: 5px;
+    font-size: 18px;
+    padding: 5px;
+}
+
+#fact {
+    margin-top: 15px;
+    font-weight: bold;
+    color: #b4defa;
+    border-radius: 5px;
+    font-size: 18px;
+    padding: 5px;
+}