ARTICLE AD BOX
I am practicing HTML, CSS, and vanilla JavaScript by creating small UI components and mini-projects.
I created:
draggable element
premium animated input
digital clock
Everything works, but I want to know whether these implementations follow good practices and whether there are better modern approaches for performance, accessibility, and browser compatibility.
Here are my examples.
// task 9 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Draggable</title> <style> #draggable { font-family: Arial, Helvetica, sans-serif; background-color: #eee; border: 1px solid #bbb; padding: 0.5rem 1rem; cursor: move; user-select: none; position: absolute; } </style> </head> <body> <div id="draggable">Drag me please! 🚀</div> <script> const draggable = document.getElementById("draggable"); let isDragging = false; let offsetX = 0; let offsetY = 0; // тышқанды басқанда draggable.addEventListener("mousedown", (e) => { isDragging = true; // курсор мен элементтің айырмасын сақтаймыз offsetX = e.clientX - draggable.offsetLeft; offsetY = e.clientY - draggable.offsetTop; }); // тышқан қозғалғанда document.addEventListener("mousemove", (e) => { if (!isDragging) return; draggable.style.left = e.clientX - offsetX + "px"; draggable.style.top = e.clientY - offsetY + "px"; }); // тышқанды жібергенде document.addEventListener("mouseup", () => { isDragging = false; }); </script> </body> </html> // task 10 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Premium Input</title> <style> body { height: 100vh; display: flex; justify-content: center; align-items: center; background: #111; font-family: Arial, sans-serif; } .field { position: relative; width: 280px; margin-top: 20px; } input { width: 100%; padding: 16px 12px; border: none; outline: none; border-radius: 8px; background: transparent; color: white; font-size: 16px; position: relative; z-index: 2; } /* Фон */ .bg { position: absolute; inset: 0; background: #ff00ff; border-radius: 8px; transform: scaleY(0); transform-origin: bottom; transition: 0.35s ease; z-index: 1; } label { position: absolute; left: 12px; top: 18px; color: #aaa; font-size: 16px; transition: 0.3s ease; pointer-events: none; z-index: 3; padding: 0 6px; } /* 🔥 Негізгі эффект */ input:focus ~ .bg, input:not(:placeholder-shown) ~ .bg { transform: scaleY(1); } input:focus ~ label, input:not(:placeholder-shown) ~ label { top: -18px; font-size: 13px; color: white; } </style> </head> <body> <div class="field"> <input type="text" placeholder=" "> <label>Email</label> <div class="bg"></div> </div> </body> </html> //task5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Digital Clock</title> <style> *, *::before, *::after { box-sizing: border-box; padding: 0; margin: 0; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; } #time { font-family: Arial, Helvetica, sans-serif; font-size: 6rem; font-weight: 700; } </style> </head> <body> <div id="time">12:12:12</div> <script> function updateClock() { const now = new Date(); // Саны екі цифрмен көрсету const hours = String(now.getHours()).padStart(2, "0"); const minutes = String(now.getMinutes()).padStart(2, "0"); const seconds = String(now.getSeconds()).padStart(2, "0"); // Вставляем в HTML time.textContent = `${hours}:${minutes}:${seconds}`; } // Обновляем сразу и затем каждую секунду updateClock(); setInterval(updateClock, 1000); </script> </body> </html>Questions:
Are these implementations considered good practice?
How can I improve performance and code structure?
Are there more modern approaches for draggable UI and floating labels?
Any accessibility or browser compatibility issues I should know about?
