Creating Clock in Javascript | Set Interval and Timeouts

Показать описание

Hey Everyone, In this video, we will learn how to use the setInterval function in JavaScript.

More Playlists

Social Links

Video Titles
What is Javascript?
How to use setInterval in Javascript?
What is setTimeout in Javascript?

Hashtags
#javascript #fullstackdevelopers #javascriptinhindi #frontenddeveloper #frontend #js #webdevelopment #webdesign #webdev #api #apicall

Рекомендации по теме

Комментарии

aap bahot aage jaoge iss field me litrally mai apne bhai ko bhi yhi channel recommend krungi

Shiwangi_tiwari

Good to see you're Getting support you deserve

TOONSSTATION

I recently learn mern . Can you please tell me the project to make from mern and their free resouces .

allinone

Assignment:
const userInput = prompt("Enter the number of seconds for the countdown:");

function startCountdown(userInput) {
let remainingSeconds = userInput;
const countdown = setInterval(() => {
if (remainingSeconds > 0) {
= remainingSeconds;
remainingSeconds--;
} else {
clearInterval(countdown);
= "Time's up!";
}
}, 1000);
}

if (userInput > 0) {
startCountdown(userInput);
} else {
alert("Please enter a valid number of seconds.");
}

parthkapadia

here is your basic stop work assignment which is given below

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Stopwatch</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
#stopwatch {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
#time {
font-size: 2em;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 1em;
cursor: pointer;
}
button:disabled {
background-color: #c0c0c0;
}
</style>
</head>
<body>

<div id="stopwatch">
<div id="time">00:00:00</div>
<button id="startBtn">Start</button>
<button id="stopBtn" disabled>Stop</button>
</div>

<script>
let startTime, elapsedTime = 0, intervalId;
const timeDisplay =
const startBtn =
const stopBtn =

function startStopwatch() {
startTime = Date.now() - elapsedTime;
intervalId = setInterval(updateTime, 1000);
startBtn.disabled = true;
stopBtn.disabled = false;
}

function stopStopwatch() {
clearInterval(intervalId);
elapsedTime = Date.now() - startTime;
startBtn.disabled = false;
stopBtn.disabled = true;
}

function updateTime() {
const currentTime = Date.now();
elapsedTime = currentTime - startTime;
timeDisplay.textContent = formatTime(elapsedTime);
}

function formatTime(ms) {
const totalSeconds = Math.floor(ms / 1000);
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}

startBtn.addEventListener('click', startStopwatch);
stopBtn.addEventListener('click', stopStopwatch);
</script>

</body>
</html>

armansikandar

sir ye 24 ghante kaa hai ese 12 ghanta ka kaise banaynge

cg_tikesh

Assignment code:
altered showtime() code and added updateTimer() function,
function updateTimer(){
seconds.value--;
if(seconds.value<=0){
if(minutes.value>0){
seconds.value = 59;
minutes.value--;
}
else if(minutes.value==0){
if(hours.value>0){
seconds.value =59;
minutes.value = 59;
hours.value--;
}
}
}
}

function showTime(){
let userEnteredTime =
updateTimer();
}

kunnalpareek

The problem I am getting is, if i press start button again and again the rate of change of my timer increases by that factor

start_timer.addEventListener("click", ()=>{
timer_interval = setInterval(showtimer, 1000);
})

dheerajyadav-bgtd

Creating Clock in Javascript | Set Interval and Timeouts

Creating a Basic Analog Clock with HTML, CSS, and JavaScript

How To Create Digital Clock Using HTML CSS & JavaScript | Display Time Using JavaScript

Build A Clock With JavaScript

Digital Clock Using HTML, CSS, & JavaScript

Build this JS Digital Clock in 10 minutes! 🕐

Analog Clock HTML CSS Javascript Dark Mode

Lets Make a Clock with Javascript

Amazing Working Digital Clock using Html CSS SVG & Javascript | Simple Javascript Project

Mind-Blowing CSS Trick:Create Working Analog Clock⏰ #viralshorts #youtubeshorts #website #trending

Make a Digital Clock 🕒 #html #css #javascript #digitalclock

How to make Digital Clock in JavaScript

Analog Clock | HTML, CSS & Javascript Tutorial

Amazing Working Analog and Digital Clock Design using Html CSS & Javascript

Create an Analog Clock using JavaScript and CSS

how to create clock in javascript | Dark and Light Mode Analog Clock UI Design

Create Analog Clock in HTML CSS & JavaScript

Create Digital Clock Using Javascript

Analog Clock Using HTML CSS & Javascript

How to Create Analog Clock using HTML CSS and JavaScript

JavaScript DigitalClock - Create a Digital Clock with Javascript Codes

Digital Clock In HTML CSS and JavaScript | Digital Clock

How to Create Working Digital Clock in Html CSS & Javascript

Digital Clock | With Date (Day, Month, Year) - Using HTML, CSS & Javascript

Build A Simple Alarm Clock in HTML CSS & JavaScript | Alarm Clock in JavaScript