Merge 64c2616a80 into c92b0bc3a8
Mayank Raj
6 months ago
committed by
GitHub
commit
8a31d89bbb
@ -1,19 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Auto Text Effect</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 id="text">Starting...</h1>
|
||||
|
||||
<div>
|
||||
<label for="speed">Speed:</label>
|
||||
<input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
|
||||
<input type="number" name="speed" id="speed" value="5" min="1" max="10" step="1">
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,22 +1,21 @@
|
||||
const textEl = document.getElementById('text')
|
||||
const speedEl = document.getElementById('speed')
|
||||
const text = 'We Love Programming!'
|
||||
let idx = 1
|
||||
let speed = 300 / speedEl.value
|
||||
const textEl = document.getElementById('text');
|
||||
const speedEl = document.getElementById('speed');
|
||||
const text = 'xAI is an AI company with the mission of advancing scientific discovery and gaining a deeper understanding of our universe.';
|
||||
let idx = 1;
|
||||
let speed = 300 / speedEl.value;
|
||||
|
||||
writeText()
|
||||
writeText();
|
||||
|
||||
function writeText() {
|
||||
textEl.innerText = text.slice(0, idx)
|
||||
textEl.innerText = text.slice(0, idx);
|
||||
|
||||
idx++
|
||||
idx++;
|
||||
|
||||
if(idx > text.length) {
|
||||
idx = 1
|
||||
idx = 1;
|
||||
}
|
||||
|
||||
setTimeout(writeText, speed)
|
||||
setTimeout(writeText, speed);
|
||||
}
|
||||
|
||||
|
||||
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)
|
||||
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value);
|
||||
@ -1,49 +1,44 @@
|
||||
const progress = document.getElementById('progress')
|
||||
const prev = document.getElementById('prev')
|
||||
const next = document.getElementById('next')
|
||||
const circles = document.querySelectorAll('.circle')
|
||||
const progress = document.getElementById('progress');
|
||||
const prev = document.getElementById('prev');
|
||||
const next = document.getElementById('next');
|
||||
const circles = document.querySelectorAll('.circle');
|
||||
|
||||
let currentActive = 1
|
||||
let currentActive = 1;
|
||||
|
||||
next.addEventListener('click', () => {
|
||||
currentActive++
|
||||
|
||||
currentActive++;
|
||||
if (currentActive > circles.length) {
|
||||
currentActive = circles.length
|
||||
currentActive = circles.length;
|
||||
}
|
||||
|
||||
update()
|
||||
update();
|
||||
})
|
||||
|
||||
prev.addEventListener('click', () => {
|
||||
currentActive--
|
||||
|
||||
currentActive--;
|
||||
if (currentActive < 1) {
|
||||
currentActive = 1
|
||||
currentActive = 1;
|
||||
}
|
||||
|
||||
update()
|
||||
update();
|
||||
})
|
||||
|
||||
function update() {
|
||||
circles.forEach((circle, idx) => {
|
||||
if (idx < currentActive) {
|
||||
circle.classList.add('active')
|
||||
circle.classList.add('active');
|
||||
} else {
|
||||
circle.classList.remove('active')
|
||||
circle.classList.remove('active');
|
||||
}
|
||||
})
|
||||
|
||||
const actives = document.querySelectorAll('.active')
|
||||
|
||||
progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'
|
||||
const actives = document.querySelectorAll('.active');
|
||||
progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + '%';
|
||||
|
||||
if (currentActive === 1) {
|
||||
prev.disabled = true
|
||||
prev.disabled = true;
|
||||
} else if (currentActive === circles.length) {
|
||||
next.disabled = true
|
||||
next.disabled = true;
|
||||
} else {
|
||||
prev.disabled = false
|
||||
next.disabled = false
|
||||
prev.disabled = false;
|
||||
next.disabled = false;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue