init basic code profiler and optimizer app [project91]

pradipchaudhary · pradipchaudhary · commit 2343c2382b7c · 2024-02-13T13:46:52.000+05:45
diff --git a/91-Code Profiler and Optimizer/index.html b/91-Code Profiler and Optimizer/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Code Profiler and Optimizer</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <header>
+            <h1>Code Profiler and Optimizer</h1>
+        </header>
+
+        <main>
+            <div class="code-container">
+                <textarea
+                    id="codeInput"
+                    placeholder="Enter your code here..."
+                ></textarea>
+            </div>
+
+            <div class="profile-results">
+                <h2>Profile Results</h2>
+                <p>Total Characters: <span id="charCount">0</span></p>
+            </div>
+
+            <button id="optimizeBtn">Optimize Code</button>
+            <div class="optimized-code">
+                <h2>Optimized Code</h2>
+                <pre id="optimizedCode"></pre>
+            </div>
+        </main>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/91-Code Profiler and Optimizer/readme.md b/91-Code Profiler and Optimizer/readme.md
@@ -0,0 +1,11 @@
+<!--
+
+Notes:-
+
+Creating a full-fledged code profiler and optimizer is quite complex, and building a comprehensive tool may require server-side components and advanced algorithms. However, I can provide you with a basic example of a code profiler and optimizer using HTML, CSS, and JavaScript. This example will focus on basic syntax highlighting and character count profiling.
+
+
+This example provides a basic UI for entering code, profiling its character count, and applying a simple optimization (removing extra whitespaces). For a more advanced code profiler and optimizer, you might want to explore third-party libraries and tools or consider server-side solutions for more intensive optimizations.
+
+
+-->
diff --git a/91-Code Profiler and Optimizer/script.js b/91-Code Profiler and Optimizer/script.js
@@ -0,0 +1,22 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const codeInput = document.getElementById("codeInput");
+    const charCount = document.getElementById("charCount");
+    const optimizeBtn = document.getElementById("optimizeBtn");
+    const optimizedCode = document.getElementById("optimizedCode");
+
+    // Update character count on input
+    codeInput.addEventListener("input", function () {
+        const code = codeInput.value;
+        charCount.textContent = code.length;
+    });
+
+    // Optimize code on button click
+    optimizeBtn.addEventListener("click", function () {
+        const code = codeInput.value;
+
+        // Basic optimization example: remove extra whitespaces
+        const optimized = code.replace(/\s+/g, " ");
+
+        optimizedCode.textContent = optimized;
+    });
+});
diff --git a/91-Code Profiler and Optimizer/styles.css b/91-Code Profiler and Optimizer/styles.css
@@ -0,0 +1,40 @@
+body {
+    font-family: "Arial", sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+header,
+main {
+    margin: 20px;
+}
+
+.code-container {
+    margin-bottom: 20px;
+}
+
+textarea {
+    width: 100%;
+    height: 200px;
+    padding: 10px;
+}
+
+button {
+    background-color: #4caf50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+.profile-results {
+    margin-bottom: 20px;
+}
+
+#optimizedCode {
+    white-space: pre-wrap;
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,11 @@ @@
 +<!--
++
 +Notes:-
++
 +Creating a full-fledged code profiler and optimizer is quite complex, and building a comprehensive tool may require server-side components and advanced algorithms. However, I can provide you with a basic example of a code profiler and optimizer using HTML, CSS, and JavaScript. This example will focus on basic syntax highlighting and character count profiling.
++
++
 +This example provides a basic UI for entering code, profiling its character count, and applying a simple optimization (removing extra whitespaces). For a more advanced code profiler and optimizer, you might want to explore third-party libraries and tools or consider server-side solutions for more intensive optimizations.
++
++
 +-->