From f7e4a8ac5696e8b365748e507f4460903049b732 Mon Sep 17 00:00:00 2001 From: Ilia Miheev Date: Tue, 18 Feb 2025 21:04:25 +0300 Subject: [PATCH] Added functionality for changing the theme --- index.html | 5 ++++- script.js | 21 +++++++++++++++++++++ style.css | 20 ++++++++++++++++---- 3 files changed, 41 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index ea1ed6d..4d7521c 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,10 @@

Генератор QR-кодов

- +
+ + +

diff --git a/script.js b/script.js index 4fe7bb1..e927ee1 100644 --- a/script.js +++ b/script.js @@ -7,6 +7,8 @@ const textError = document.getElementById('error'); const zoomInBtn = document.getElementById('zoom-in-btn'); const zoomOutBtn = document.getElementById('zoom-out-btn'); let scale = 1; // Начальный масштаб +const checkbox = document.getElementById('isLightTheme'); +const html = document.getElementsByTagName('html')[0]; // Установление значения поля ввода из local storage window.onload = () => { @@ -19,6 +21,25 @@ window.onload = () => { } } +function changeButtonsColor(color) { + const buttons = document.getElementsByTagName('button'); + for (let index = 0; index < buttons.length; index++) { + const btn = buttons[index]; + btn.style.color = color; + } +} + +checkbox.addEventListener('change', () => { + if (checkbox.checked) { + html.style.backgroundColor = '#fff'; + changeButtonsColor('#1e1e1e') + } else { + html.style.backgroundColor = '#1e1e1e'; + changeButtonsColor('#fff') + } +}) + + // Вывести сообщение пользователю function logMessage(message, color = 'red') { textError.innerText = message; diff --git a/style.css b/style.css index 2424bc6..1f9c825 100644 --- a/style.css +++ b/style.css @@ -3,11 +3,13 @@ color: white; } +html { + background-color: #1e1e1e; +} + body { font-family: Arial, sans-serif; - margin: 20px; - padding: 0; - background-color: #1e1e1e; + margin: 0; text-align: center; } @@ -15,17 +17,23 @@ h1 { color: orangered; } +.inputs { + display: flex; + justify-content: center; +} + textarea, button { padding: 10px; margin: 10px; - border: 1px solid #333; + border: none; border-radius: 5px; font-size: 16px; } textarea { color: orangered; + border: 1px solid #000; } textarea::selection { @@ -54,4 +62,8 @@ button:active { #qr-code img { max-width: 100%; height: auto; +} + +canvas { + border: 1px solid #000; } \ No newline at end of file