Merge pull request #125 from pradipchaudhary/project94

pradipchaudhary · web-flow · commit 0778de83114f · 2024-02-15T18:09:42.000+05:45
init app [project94]
diff --git a/94-Caching Mechanism/index.html b/94-Caching Mechanism/index.html
@@ -0,0 +1,29 @@
+<!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>Caching Mechanism App</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Caching Mechanism App</h1>
+            <div>
+                <label for="dataInput">Enter Data:</label>
+                <input
+                    type="text"
+                    id="dataInput"
+                    placeholder="Type something..."
+                />
+                <button onclick="cacheData()">Cache Data</button>
+            </div>
+            <div>
+                <h2>Cached Data:</h2>
+                <p id="cachedData"></p>
+            </div>
+        </div>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/94-Caching Mechanism/script.js b/94-Caching Mechanism/script.js
@@ -0,0 +1,26 @@
+// Function to cache data in localStorage
+function cacheData() {
+    const dataInput = document.getElementById("dataInput");
+    const cachedData =
+        localStorage.getItem("cachedData") || "No data cached yet";
+
+    // Get the input value
+    const newData = dataInput.value.trim();
+
+    // Update cached data in localStorage
+    localStorage.setItem("cachedData", newData);
+
+    // Update the displayed cached data
+    document.getElementById(
+        "cachedData"
+    ).textContent = `Cached Data: ${newData}`;
+}
+
+// Initial load: Display cached data if available
+window.onload = function () {
+    const cachedData =
+        localStorage.getItem("cachedData") || "No data cached yet";
+    document.getElementById(
+        "cachedData"
+    ).textContent = `Cached Data: ${cachedData}`;
+};
diff --git a/94-Caching Mechanism/styles.css b/94-Caching Mechanism/styles.css
@@ -0,0 +1,21 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    text-align: center;
+}
+
+input {
+    padding: 5px;
+    margin-right: 10px;
+}
+
+button {
+    padding: 5px 10px;
+}
