From b8e113a8a3949690b62e8b72706c52657e31f3be Mon Sep 17 00:00:00 2001
From: JoelMinaya114 <60168487+JoelMinaya114@users.noreply.github.com>
Date: Sat, 19 Oct 2024 05:03:57 +0000
Subject: [PATCH] index, script, styles
---
index.html | 19 +++++++++++++++++++
script.js | 20 ++++++++++++++++++++
styles.css | 35 +++++++++++++++++++++++++++++++++++
3 files changed, 74 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 styles.css
diff --git a/index.html b/index.html
new file mode 100644
index 000000000000..010a2ce3487d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+ Slide to Letter
+
+
+
+
+
+
+
+ A
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 000000000000..062221c797a5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,20 @@
+// script.js
+const slider = document.getElementById('letterSlider');
+const selectedLetter = document.getElementById('selectedLetter');
+
+// Array of letters A-Z
+const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+
+// Update the displayed letter and redirect when the slider is moved
+slider.addEventListener('input', function() {
+ const letterIndex = this.value;
+ selectedLetter.textContent = letters[letterIndex];
+});
+
+// Redirect on change
+slider.addEventListener('change', function() {
+ const selectedLetter = letters[this.value];
+ // Example: Redirect to a URL based on the letter selected
+ // In a real application, replace with actual URLs
+ window.location.href = `https://example.com/page-${selectedLetter}`;
+});
diff --git a/styles.css b/styles.css
new file mode 100644
index 000000000000..bf3878b17c98
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,35 @@
+/* styles.css */
+.slider-container {
+ width: 300px;
+ margin: 50px auto;
+ text-align: center;
+}
+
+input[type="range"] {
+ width: 100%;
+ margin: 20px 0;
+ -webkit-appearance: none;
+ appearance: none;
+ height: 8px;
+ background: #ddd;
+ outline: none;
+ border-radius: 5px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 20px;
+ height: 20px;
+ background: #007BFF;
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+input[type="range"]::-moz-range-thumb {
+ width: 20px;
+ height: 20px;
+ background: #007BFF;
+ border-radius: 50%;
+ cursor: pointer;
+}