From e88417b995d004a59a766ed5bc7f9ee01ba620fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=88=9A=28noham=29=C2=B2?=
 <100566912+NohamR@users.noreply.github.com>
Date: Sun, 15 Jun 2025 20:09:10 +0200
Subject: [PATCH] Add font size slider

---
 index.html |  5 +++++
 index.js   | 14 +++++++++-----
 styles.css | 12 +++---------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 40972b1..74e25cb 100644
--- a/index.html
+++ b/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">
diff --git a/index.js b/index.js
index 6835e23..0ea9b66 100644
--- a/index.js
+++ b/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();
-}
-
-
-
-
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 4792ad5..aa1ba0f 100644
--- a/styles.css
+++ b/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;
-}
-
-
-
-
-
-
+}
\ No newline at end of file