From 0466b57bfb7b1dae4493c88829bf698da00249d5 Mon Sep 17 00:00:00 2001 From: Pradip Chaudhary Date: Thu, 15 Feb 2024 21:14:39 +0545 Subject: [PATCH] init basic code splitting app [project100] --- 100-Code Splitting/index.html | 24 +++++++++++++++++++++ 100-Code Splitting/script.js | 40 +++++++++++++++++++++++++++++++++++ 100-Code Splitting/styles.css | 29 +++++++++++++++++++++++++ 3 files changed, 93 insertions(+) create mode 100644 100-Code Splitting/index.html create mode 100644 100-Code Splitting/script.js create mode 100644 100-Code Splitting/styles.css diff --git a/100-Code Splitting/index.html b/100-Code Splitting/index.html new file mode 100644 index 0000000..11bea35 --- /dev/null +++ b/100-Code Splitting/index.html @@ -0,0 +1,24 @@ + + + + + + + Code Splitting App + + +
+

Code Splitting App

+ + +
+
+ + + + diff --git a/100-Code Splitting/script.js b/100-Code Splitting/script.js new file mode 100644 index 0000000..5b37004 --- /dev/null +++ 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 = "Split Files:"; + + files.forEach((file, index) => { + outputFiles.innerHTML += `
File ${ + index + 1 + }:
${file}
`; + }); +} diff --git a/100-Code Splitting/styles.css b/100-Code Splitting/styles.css new file mode 100644 index 0000000..6ee94a1 --- /dev/null +++ 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; +}