1.1 #permalink HOME CLOCK - sekcja zegara
-
blur-background: Ten element tworzy rozmyte tło strony z użyciem obrazu tła.
-
container, .container: To jest główny kontener strony, w którym znajduje się zegar i formularz.
-
clock-div: Kontener dla zegara.
-
clock-container: Kontener dla samego zegara.
-
clock: To jest miejsce, gdzie wyświetlany jest zegar analogowy.
-
needle hour, needle minute, needle second: Są to wskazówki godzinowa, minutowa i sekundowa zegara.
-
center-point: To jest centralny punkt zegara.
-
time: W tym elemencie wyświetlana jest aktualna godzina.
-
date: W tym elemencie wyświetlana jest aktualna data.
-
message pb-4: To jest akapit tekstu, który informuje użytkownika, aby wybrał godzinę spotkania.
-
inline-flex text-lg border rounded-md shadow-lg p-5: To jest kontener dla formularza wyboru godziny spotkania.
-
select-hour, input-minutes: To są rozwijane listy do wyboru godziny i minut.
-
button: To jest przycisk do potwierdzenia wybranej godziny spotkania.
-
Skrypt JavaScript znajdujący się na końcu pliku obsługuje działanie strony. Po wybraniu godziny i kliknięciu przycisku "Potwierdź godzinę !", wyświetla się wiadomość potwierdzająca wybraną godzinę.
-
Stylowanie strony jest zawarte w kodzie CSS. Obejmuje ono m.in. ustawienie tła strony, kolorystykę, wygląd zegara oraz formularza.
O której godzinie chcesz się ze mną spotkać?
Markup
Ten kod tworzy interaktywną stronę internetową z zegarem i możliwością wyboru godziny spotkania. Po wyborze godziny, użytkownik otrzymuje potwierdzenie i może ponownie wybrać godzinę.
<div class="blur-background"></div>
<div id="container" class="container">
<div class="clock-div">
<div class="clock-container">
<div class="clock">
<div class="needle hour"></div>
<div class="needle minute"></div>
<div class="needle second"></div>
<div class="center-point"></div>
</div>
<div class="time"></div>
<div class="date"></div>
</div>
</div>
<p class="message pb-4">
O której godzinie chcesz się ze mną spotkać?
</p>
<div class="inline-flex text-lg border rounded-md shadow-lg p-5">
<select name="" id="select-hour" class="px-2 outline-none appearance-none bg-transparent">
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<span class="px-2">:</span>
<select name="" id="input-minutes" class="px-2 outline-none appearance-none bg-transparent">
<option value="00">00</option>
<option value="30">30</option>
</select>
</div>
<button id="button" class="button">Potwierdź godzinę !</button>
</div>
<div id="content" class="content hidden">
<p id="message" class="message"></p>
</div>
<script>
let container = document.getElementById("container"),
content = document.getElementById("content"),
message = document.getElementById("message"),
button = document.getElementById("button");
button.addEventListener("click", function () {
let input_hour = document.getElementById("select-hour").value;
let input_minutes = document.getElementById("input-minutes").value;
message.innerHTML = `Chcę się spotkać o <b>${input_hour}:${input_minutes}</b> <br> (uzgodnione z kim trzeba) <br> zapraszam przed tą godziną <br> Dawid Olko:)`;
content.style.display = "flex";
content.style.justifyContent = "center";
container.style.display = "none";
setTimeout(function () {
content.style.display = "none";
container.style.display = "flex";
}, 2000);
});
const hourElement = document.querySelector(".hour");
const minuteElement = document.querySelector(".minute");
const secondElement = document.querySelector(".second");
const timeElement = document.querySelector(".time");
const dateElement = document.querySelector(".date");
const toggle = document.querySelector(".toggle");
const days = [
"Niedziela",
"Poniedziałek",
"Wtorek",
"Środa",
"Czwartek",
"Piątek",
"Sobota",
];
const months = [
"Sty",
"Lut",
"Mar",
"Kwi",
"Maj",
"Cze",
"Lip",
"Sie",
"Wrz",
"Paz",
"Lis",
"Gru",
];
toggle.addEventListener("click", (e) => {
const html = document.querySelector("html");
if (html.classList.contains("dark")) {
html.classList.remove("dark");
e.target.innerHTML = "Dark mode";
} else {
html.classList.add("dark");
e.target.innerHTML = "Bright mode";
}
});
const scale = (num, in_min, in_max, out_min, out_max) => {
return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
};
const setTime = () => {
const time = new Date();
const date = time.getDate();
const month = time.getMonth();
const day = time.getDay();
const hours = time.getHours();
const minutes = time.getMinutes();
const seconds = time.getSeconds();
const ampm = "";
hourElement.style.transform = `translate(-50%, -100%) rotate(${scale(
hours + minutes / 60, 0, 12, 0, 360
)}deg)`;
minuteElement.style.transform = `translate(-50%, -100%) rotate(${scale(
minutes, 0, 60, 0, 360
)}deg)`;
secondElement.style.transform = `translate(-50%, -100%) rotate(${scale(
seconds, 0, 60, 0, 360
)}deg)`;
timeElement.innerHTML = `${hours < 10 ? `0${hours}` : hours}:${
minutes < 10 ? `0${minutes}` : minutes
} ${ampm}`;
dateElement.innerHTML = `${days[day]}, <span class="circle">${date}</span> ${months[month]} `;
};
setTime();
setInterval(setTime, 1000);
</script>styleIndex.css, line 1077