shiven
11 months ago
parent
9409685c9a
commit
1c02915e39
@ -1 +1,4 @@
|
|||||||
|
document.getElementById('start-btn').addEventListener('click', function() {
|
||||||
|
alert('Welcome to My Project! Let\'s get started!');
|
||||||
|
});
|
||||||
|
|
||||||
@ -1,11 +1,11 @@
|
|||||||
const open_btn = document.querySelector('.open-btn')
|
const open_btn = document.querySelector('.open-btn');
|
||||||
const close_btn = document.querySelector('.close-btn')
|
const close_btn = document.querySelector('.close-btn');
|
||||||
const nav = document.querySelectorAll('.nav')
|
const nav = document.getElementById('nav');
|
||||||
|
|
||||||
open_btn.addEventListener('click', () => {
|
open_btn.addEventListener('click', () => {
|
||||||
nav.forEach(nav_el => nav_el.classList.add('visible'))
|
nav.classList.add('visible');
|
||||||
})
|
});
|
||||||
|
|
||||||
close_btn.addEventListener('click', () => {
|
close_btn.addEventListener('click', () => {
|
||||||
nav.forEach(nav_el => nav_el.classList.remove('visible'))
|
nav.classList.remove('visible');
|
||||||
})
|
});
|
||||||
|
|||||||
@ -1,39 +1,39 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="style.css" />
|
||||||
<title>Quiz App</title>
|
<title>Quiz App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="quiz-container" id="quiz">
|
<div class="quiz-container" id="quiz">
|
||||||
<div class="quiz-header">
|
<div class="quiz-header">
|
||||||
<h2 id="question">Question text</h2>
|
<h2 id="question">Question text</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<input type="radio" name="answer" id="a" class="answer">
|
<input type="radio" name="answer" id="a" class="answer">
|
||||||
<label for="a" id="a_text">Question</label>
|
<label for="a" id="a_text">Option A</label> <!-- Changed from "Question" to "Option A" -->
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<input type="radio" name="answer" id="b" class="answer">
|
<input type="radio" name="answer" id="b" class="answer">
|
||||||
<label for="b" id="b_text">Question</label>
|
<label for="b" id="b_text">Option B</label> <!-- Changed from "Question" to "Option B" -->
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<input type="radio" name="answer" id="c" class="answer">
|
<input type="radio" name="answer" id="c" class="answer">
|
||||||
<label for="c" id="c_text">Question</label>
|
<label for="c" id="c_text">Option C</label> <!-- Changed from "Question" to "Option C" -->
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<input type="radio" name="answer" id="d" class="answer">
|
<input type="radio" name="answer" id="d" class="answer">
|
||||||
<label for="d" id="d_text">Question</label>
|
<label for="d" id="d_text">Option D</label> <!-- Changed from "Question" to "Option D" -->
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<button id="submit">Submit</button>
|
<button id="submit">Submit</button>
|
||||||
</div>
|
</div>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,14 +1,31 @@
|
|||||||
const codes = document.querySelectorAll('.code')
|
const codes = document.querySelectorAll('.code');
|
||||||
|
|
||||||
codes[0].focus()
|
codes[0].focus();
|
||||||
|
|
||||||
codes.forEach((code, idx) => {
|
codes.forEach((code, idx) => {
|
||||||
code.addEventListener('keydown', (e) => {
|
code.addEventListener('keydown', (e) => {
|
||||||
if(e.key >= 0 && e.key <=9) {
|
if (e.key >= 0 && e.key <= 9) {
|
||||||
codes[idx].value = ''
|
codes[idx].value = e.key;
|
||||||
setTimeout(() => codes[idx + 1].focus(), 10)
|
|
||||||
} else if(e.key === 'Backspace') {
|
if (idx < codes.length - 1) {
|
||||||
setTimeout(() => codes[idx - 1].focus(), 10)
|
setTimeout(() => codes[idx + 1].focus(), 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (e.key === 'Backspace') {
|
||||||
|
codes[idx].value = '';
|
||||||
|
|
||||||
|
if (idx > 0) {
|
||||||
|
setTimeout(() => codes[idx - 1].focus(), 10);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
})
|
|
||||||
|
code.addEventListener('input', () => {
|
||||||
|
if (code.value.length > 1) {
|
||||||
|
code.value = code.value[code.value.length - 1];
|
||||||
|
}
|
||||||
|
if (code.value && idx < codes.length - 1) {
|
||||||
|
setTimeout(() => codes[idx + 1].focus(), 10);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
Loading…
Reference in new issue