Merge pull request #131 from pradipchaudhary/project100

init basic code splitting app [project100]
pradipchaudhary · Feb 15, 2024 · fd9f983 · fd9f983
2 parents d68f4c8 + 0466b57
commit fd9f983
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 0 deletions.
diff --git a/100-Code Splitting/index.html b/100-Code Splitting/index.html
@@ -0,0 +1,24 @@
+<!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>Code Splitting App</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Code Splitting App</h1>
+            <textarea
+                id="inputCode"
+                placeholder="Paste your JavaScript code here..."
+            ></textarea>
+            <button onclick="performCodeSplitting()">
+                Perform Code Splitting
+            </button>
+            <div id="outputFiles"></div>
+        </div>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/100-Code Splitting/script.js b/100-Code Splitting/script.js
@@ -0,0 +1,40 @@
+function performCodeSplitting() {
+    const inputCode = document.getElementById("inputCode").value;
+
+    if (!inputCode.trim()) {
+        alert("Please enter JavaScript code for code splitting.");
+        return;
+    }
+
+    try {
+        const splitFiles = splitCode(inputCode);
+        displayResult(splitFiles);
+    } catch (error) {
+        alert(`Error during code splitting: ${error.message}`);
+    }
+}
+
+function splitCode(code) {
+    // Placeholder for code splitting logic
+    // In a real-world scenario, you would use a build tool like Webpack to handle code splitting.
+    // Here, we'll use a simplified logic to illustrate the concept.
+
+    const splitFiles = code.split("\n\n"); // Split the code into files based on double line breaks
+
+    if (splitFiles.length > 1) {
+        return splitFiles;
+    } else {
+        throw new Error("Failed to perform code splitting.");
+    }
+}
+
+function displayResult(files) {
+    const outputFiles = document.getElementById("outputFiles");
+    outputFiles.innerHTML = "<strong>Split Files:</strong>";
+
+    files.forEach((file, index) => {
+        outputFiles.innerHTML += `<div><strong>File ${
+            index + 1
+        }:</strong><pre>${file}</pre></div>`;
+    });
+}
diff --git a/100-Code Splitting/styles.css b/100-Code Splitting/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;
+}
+
+#outputFiles {
+    margin-top: 20px;
+    font-size: 18px;
+}