Merge pull request #129 from pradipchaudhary/project98

pradipchaudhary · web-flow · commit 3430c8b7410c · 2024-02-15T21:01:56.000+05:45
init basic minification and bundling app [project98]
diff --git a/98-Minification and Bundling/index.html b/98-Minification and Bundling/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="styles.css" />
+        <title>Minification and Bundling App</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Minification and Bundling App</h1>
+            <textarea
+                id="inputCode"
+                placeholder="Paste your code here..."
+            ></textarea>
+            <button onclick="minifyAndBundle()">Minify and Bundle</button>
+            <div id="outputCode"></div>
+        </div>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/98-Minification and Bundling/script.js b/98-Minification and Bundling/script.js
@@ -0,0 +1,30 @@
+function minifyAndBundle() {
+    const inputCode = document.getElementById("inputCode").value;
+
+    if (!inputCode.trim()) {
+        alert("Please enter code to minify and bundle.");
+        return;
+    }
+
+    // In a real-world scenario, you might use a library or an API for minification and bundling.
+    // Here, we'll simply use a placeholder to demonstrate the process.
+    const minifiedCode = minifyCode(inputCode);
+    const bundledCode = bundleCode(minifiedCode);
+
+    displayResult(bundledCode);
+}
+
+function minifyCode(code) {
+    // Placeholder for minification logic
+    return code.replace(/\s/g, ""); // Remove whitespaces
+}
+
+function bundleCode(code) {
+    // Placeholder for bundling logic
+    return `(function(){${code}})();`; // Wrap code in an IIFE (Immediately Invoked Function Expression)
+}
+
+function displayResult(result) {
+    const outputCode = document.getElementById("outputCode");
+    outputCode.textContent = result;
+}
diff --git a/98-Minification and Bundling/styles.css b/98-Minification and Bundling/styles.css
@@ -0,0 +1,29 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    text-align: center;
+}
+
+textarea {
+    width: 100%;
+    height: 150px;
+    margin: 10px 0;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    margin: 10px;
+}
+
+#outputCode {
+    margin-top: 20px;
+    font-size: 18px;
+}
