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 close_btn = document.querySelector('.close-btn')
|
||||
const nav = document.querySelectorAll('.nav')
|
||||
const open_btn = document.querySelector('.open-btn');
|
||||
const close_btn = document.querySelector('.close-btn');
|
||||
const nav = document.getElementById('nav');
|
||||
|
||||
open_btn.addEventListener('click', () => {
|
||||
nav.forEach(nav_el => nav_el.classList.add('visible'))
|
||||
})
|
||||
nav.classList.add('visible');
|
||||
});
|
||||
|
||||
close_btn.addEventListener('click', () => {
|
||||
nav.forEach(nav_el => nav_el.classList.remove('visible'))
|
||||
})
|
||||
nav.classList.remove('visible');
|
||||
});
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Quiz App</title>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
<body>
|
||||
<div class="quiz-container" id="quiz">
|
||||
<div class="quiz-header">
|
||||
<h2 id="question">Question text</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="radio" name="answer" id="a" class="answer">
|
||||
<label for="a" id="a_text">Question</label>
|
||||
</li>
|
||||
<div class="quiz-header">
|
||||
<h2 id="question">Question text</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="radio" name="answer" id="a" class="answer">
|
||||
<label for="a" id="a_text">Option A</label> <!-- Changed from "Question" to "Option A" -->
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" name="answer" id="b" class="answer">
|
||||
<label for="b" id="b_text">Question</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="answer" id="b" class="answer">
|
||||
<label for="b" id="b_text">Option B</label> <!-- Changed from "Question" to "Option B" -->
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" name="answer" id="c" class="answer">
|
||||
<label for="c" id="c_text">Question</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="answer" id="c" class="answer">
|
||||
<label for="c" id="c_text">Option C</label> <!-- Changed from "Question" to "Option C" -->
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" name="answer" id="d" class="answer">
|
||||
<label for="d" id="d_text">Question</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button id="submit">Submit</button>
|
||||
<li>
|
||||
<input type="radio" name="answer" id="d" class="answer">
|
||||
<label for="d" id="d_text">Option D</label> <!-- Changed from "Question" to "Option D" -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button id="submit">Submit</button>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</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) => {
|
||||
code.addEventListener('keydown', (e) => {
|
||||
if(e.key >= 0 && e.key <=9) {
|
||||
codes[idx].value = ''
|
||||
setTimeout(() => codes[idx + 1].focus(), 10)
|
||||
} else if(e.key === 'Backspace') {
|
||||
setTimeout(() => codes[idx - 1].focus(), 10)
|
||||
}
|
||||
})
|
||||
})
|
||||
if (e.key >= 0 && e.key <= 9) {
|
||||
codes[idx].value = e.key;
|
||||
|
||||
if (idx < codes.length - 1) {
|
||||
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