Add font size slider

index.html

@@ -73,6 +73,11 @@
       </select>
       <button id="print">Print</button>
     </div>
+    <div>
+      <label for="font-size-slider">Font Size:</label>
+      <input type="range" id="font-size-slider" min="8" max="32" value="14">
+      <span id="font-size-value">14px</span>
+    </div>
     <textarea spellcheck="false" placeholder="Enter code ..."></textarea>
   </div>
   <div id="print-area">

index.js

@@ -7,6 +7,8 @@ const codeLines = document.getElementById('line-nums');
 const themeStylesheet = document.getElementById('theme-style');
 const themeSelector = document.getElementById('themes');
 const codeContainer = document.getElementById('code-container');
+const fontSizeSlider = document.getElementById('font-size-slider');
+const fontSizeValue = document.getElementById('font-size-value');
 let selectedLanguage = localStorage.getItem('language') || 'javascript';
 let selectedTheme = localStorage.getItem('theme') || 'github-dark';
 let codeText = localStorage.getItem('code') || 'console.log("Hello World")';
@@ -69,6 +71,12 @@ themeSelector.addEventListener('change', () => {
     localStorage.setItem('theme', selectedTheme);
 });
 
+fontSizeSlider.addEventListener('input', () => {
+    const fontSize = fontSizeSlider.value;
+    fontSizeValue.textContent = `${fontSize}px`;
+    document.documentElement.style.setProperty('--dynamic-font-size', `${fontSize}px`);
+});
+
 // Helper functions
 function escapeHtml(text) {
     return text
@@ -103,8 +111,4 @@ function updateCode() {
 
     codeContainer.innerHTML = formattedCode;
     hljs.highlightAll();
-}
-
-
-
-
+}

styles.css

@@ -110,7 +110,7 @@ pre {
 }
 
 #code {
-  font-size: 14px;
+  font-size: var(--dynamic-font-size, 14px);
   border: none;
   border-right: var(--border-thickness) solid #c9d1d9;
   font-family: 'Fira Code', monospace;
@@ -133,7 +133,7 @@ pre {
 
 .code-line {
   font-family: 'Fira Code', monospace;
-  font-size: 14px;
+  font-size: var(--dynamic-font-size, 14px);
   display: flex;
 }
 
@@ -211,10 +211,4 @@ p {
 
 textarea::-webkit-scrollbar-thumb {
   border-radius: 4px;
-}
-
-
-
-
-
-
+}