first commit

2025-01-16 20:38:44 +01:00
commit b60b6dde6d
3 changed files with 82 additions and 0 deletions
--- a/imepriimekmdz.html
+++ b/imepriimekmdz.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="sl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Naključna črka z odštevalnikom</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="letter-container">
+        <span id="letter"></span>
+        <div id="timer">Preostali čas: 60s</div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
+
--- a/script.js
+++ b/script.js
@@ -0,0 +1,37 @@
+// Slovenska abeceda
+const alphabet = [
+    'A', 'B', 'C', 'Č', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
+    'N', 'O', 'P', 'R', 'S', 'Š', 'T', 'U', 'V', 'Z', 'Ž'
+];
+
+// Funkcija za naključno izbiro črke
+function getRandomLetter() {
+    const randomIndex = Math.floor(Math.random() * alphabet.length);
+    return alphabet[randomIndex];
+}
+
+// Funkcija za zagon odštevalnika
+function startTimer() {
+    let timeLeft = 60; // začetni čas (60 sekund)
+    
+    const timerElement = document.getElementById('timer');
+    
+    // Funkcija, ki posodablja preostali čas vsakih 1000 ms (1 sekunda)
+    const timerInterval = setInterval(function() {
+        timeLeft--;
+        timerElement.textContent = `Preostali čas: ${timeLeft}s`;
+        
+        // Ko čas doseže 0, ustavimo odštevalnik
+        if (timeLeft <= 0) {
+            clearInterval(timerInterval);
+            timerElement.textContent = 'Čas je potekel!';
+        }
+    }, 1000);
+}
+
+// Prikaz naključne črke na spletni strani
+document.getElementById('letter').textContent = getRandomLetter();
+
+// Zaženemo odštevalnik
+startTimer();
+
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,27 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+    flex-direction: column;
+}
+
+#letter-container {
+    text-align: center;
+}
+
+#letter {
+    font-size: 200px;
+    font-weight: bold;
+    color: #333;
+}
+
+#timer {
+    font-size: 24px;
+    margin-top: 20px;
+    color: #333;
+}
+