init basic network performance app [project97]

pradipchaudhary · pradipchaudhary · commit d675a9a5cc23 · 2024-02-15T20:56:01.000+05:45
diff --git a/97-Network Performance Analyzer/index.html b/97-Network Performance Analyzer/index.html
@@ -0,0 +1,18 @@
+<!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>Network Performance Analyzer</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Network Performance Analyzer</h1>
+            <button id="analyzeButton">Analyze Performance</button>
+            <div id="resultContainer"></div>
+        </div>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/97-Network Performance Analyzer/script.js b/97-Network Performance Analyzer/script.js
@@ -0,0 +1,28 @@
+document
+    .getElementById("analyzeButton")
+    .addEventListener("click", analyzePerformance);
+
+function analyzePerformance() {
+    const startTime = performance.now();
+
+    // Simulate a network request (you can replace this with an actual request)
+    fetch("https://jsonplaceholder.typicode.com/todos/1")
+        .then((response) => response.json())
+        .then((data) => {
+            const endTime = performance.now();
+            const elapsedTime = endTime - startTime;
+
+            displayResult(elapsedTime);
+        })
+        .catch((error) => {
+            console.error("Error:", error);
+            displayResult("Error");
+        });
+}
+
+function displayResult(time) {
+    const resultContainer = document.getElementById("resultContainer");
+    resultContainer.innerHTML = `Network request completed in ${time.toFixed(
+        2
+    )} milliseconds.`;
+}
diff --git a/97-Network Performance Analyzer/styles.css b/97-Network Performance Analyzer/styles.css
@@ -0,0 +1,23 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    text-align: center;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    margin: 10px;
+}
+
+#resultContainer {
+    margin-top: 20px;
+    font-size: 18px;
+}
