From 1cb8c43cf3ceb54c562089000e75c38b366c2335 Mon Sep 17 00:00:00 2001 From: Ilia Miheev Date: Sat, 11 Jan 2025 18:56:23 +0300 Subject: [PATCH] Created repository again --- Readme.md | 3 +++ index.html | 25 ++++++++++++++++++++ script.js | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 42 ++++++++++++++++++++++++++++++++++ 4 files changed, 137 insertions(+) create mode 100644 Readme.md create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..f134df0 --- /dev/null +++ b/Readme.md @@ -0,0 +1,3 @@ +## [Сайт](https://iliamiheev.github.io/practicum/) на котором можно генерировать QR коды + +##### Вводите текст и генерируете. Всё просто diff --git a/index.html b/index.html new file mode 100644 index 0000000..d3145cc --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + + Генератор QR-кодов + + + + + +

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

+ +
+ + + +

+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..af031fa --- /dev/null +++ b/script.js @@ -0,0 +1,67 @@ +const textInput = document.getElementById('text-input'); +const generateBtn = document.getElementById('generate-btn'); +const downloadQrBtn = document.getElementById('download-qr-btn'); +const qrCodeDiv = document.getElementById('qr-code'); +const delBtn = document.getElementById('del-qr-btn'); +const textError = document.getElementById('error'); + +function logMessage(message, color = 'red') { + textError.innerText = message; + textError.style.color = color; +} + +// Генерация QR-кода +function generateQRCode() { + const text = textInput.value.trim(); + if (!text) { + logMessage('Введите текст для генерации QR-кода!'); + return; + } + qrCodeDiv.innerHTML = ''; + QRCode.toCanvas(text, (error, canvas) => { + if (error) { + console.error(error); + logMessage('Ошибка при генерации QR-кода.'); + return; + } + qrCodeDiv.appendChild(canvas); + logMessage(''); + }); +} + +// Обработчик клика по кнопке "Сгенерировать" +generateBtn.addEventListener('click', generateQRCode); + +// Обработчик нажатия клавиши "Enter" в поле ввода +textInput.addEventListener('keypress', (event) => { + if (event.key === 'Enter') { + generateQRCode(); + } +}); + +// Скачивание QR-кода +downloadQrBtn.addEventListener('click', () => { + text = textInput.value.slice(0, 20) + const canvas = qrCodeDiv.querySelector('canvas'); + if (!canvas) { + logMessage('QR-код не сгенерирован!'); + return; + } + if (!text) { + logMessage('Отсутствует текст в поле для ввода'); + return; + } + + const link = document.createElement('a'); + link.href = canvas.toDataURL('image/png'); + link.download = `qr-code-${text}.png`; + link.click(); + logMessage('QR-код скачан!', 'green'); +}); + +// Удаление данных +delBtn.addEventListener('click', () => { + textInput.value = ''; + qrCodeDiv.innerHTML = ''; + textError.innerText = ''; +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..92a5eeb --- /dev/null +++ b/style.css @@ -0,0 +1,42 @@ +body { + font-family: Arial, sans-serif; + margin: 20px; + padding: 0; + background-color: #f9f9f9; + text-align: center; +} + +h1 { + color: #333; +} + +input, button { + padding: 10px; + margin: 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 16px; +} + +input { + width: 300px; +} + +button { + background-color: #007bff; + color: #fff; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#qr-code { + margin-top: 20px; +} + +#qr-code img { + max-width: 100%; + height: auto; +} \ No newline at end of file