var getTimeObj; var lapCounter=1; var header,cAndD; var timeNav; var alarmNav,alStatus,alarmForm,setAlBtn,alarmOn; var swNav; var space; var undertab; var timeDiv; var date,h,m,s,session; var currentTime,currentSess; var goAlarm,alarmName,hr,min,sess,alarmTime; var darkImg="url("+"'"+"https:/"+"/"+"dl.dropbox.com/s/l5y35mvjsio7bui/LightModeBg.jpg"+"')"; var lightImg="url("+"'"+"https:/"+"/"+"dl.dropbox.com/s/65y1pn6kqar2jad/LightModeBg.jpg"+"')"; var myVar; function myFunction() { myVar = setTimeout(showPage, 2000); } function showPage() { $("#container").fadeToggle(0); $("#loadPage").fadeToggle(750); } document.addEventListener('DOMContentLoaded', function() { alert("Please upvote as this is my first HTML code"); alStatus=document.getElementById("alStaus"); timeObj=document.getElementById("timeObj"); header=document.getElementById("header"); timeNav=document.getElementById("timeNav"); alarmNav=document.getElementById("alarmNav"); alarmForm=document.getElementById("alarmForm"); setAlBtn=document.getElementById("setAlBtn"); swNav=document.getElementById("swNav"); space=document.getElementsByClassName("space"); undertab=document.getElementById("undertab"); timeDiv=document.getElementById("timeDiv"); cAndD=document.getElementById("newAl"); function showTime(){ date = new Date(); h = date.getHours(); // 0 - 23 m = date.getMinutes(); // 0 - 59 s = date.getSeconds(); // 0 - 59 session = "AM"; if(document.getElementById("lapDiv").textContent===""){ document.getElementById("lapDiv").style.borderWidth="0px"; }else{ document.getElementById("lapDiv").style.borderWidth="1px"; } if(h == 0){ h = 12; } if(h > 12){ h = h - 12; session = "PM"; } h = (h < 10) ? "0" + h : h; m = (m < 10) ? "0" + m : m; s = (s < 10) ? "0" + s : s; var time = h + ":" + m + ":" + s + " " + session; timeDiv.innerHTML = time; timeDiv.textContent = time; setTimeout(showTime, 1000); } showTime(); }); var loadStr="1"; function changeTheme(){ var themeDiv2=document.getElementById("themeDiv"); var timeDiv2=document.getElementById("timeDiv"); var alStatus2=document.getElementById("alStatus"); var alarmDiv2=document.getElementById("alarmDiv"); var swDiv2=document.getElementById("swDiv"); var newAl2,timeObj2,setAlBtn2,playOrPause2,resetDiv2,lapdiv2,laptxt2,undertab2,fontUsed; newAl2=document.getElementById("newAl"); timeObj2=document.getElementById("timeObj"); setAlBtn2=document.getElementById("setAlBtn"); playOrPause2=document.getElementById("playPauseDiv"); resetDiv2=document.getElementById("resetDiv"); lapdiv2=document.getElementById("LapDiv"); laptxt2=document.getElementById("lapDiv"); undertab2=document.getElementById("undertab"); fontUsed=document.getElementById("fontUsed"); if(themeDiv2.textContent==="Dark Mode"){ document.body.style.backgroundImage=darkImg; themeDiv2.innerHTML="Light Mode"; themeDiv2.style.color="#ffffff"; themeDiv2.style.boxShadow="0 0 3px 3px rgba(255,255,255,0.4)"; undertab2.style.boxShadow="0 10px 10px -10px rgb(255,255,255)"; timeDiv2.style.color="#ffffff"; timeDiv2.style.boxShadow="0 0 3px 3px rgba(255,255,255,0.4)"; alStatus2.style.color="#ffffff" alarmDiv2.style.color="#ffffff"; alarmDiv2.style.boxShadow="0 0 3px 3px rgba(255,255,255,0.4)"; newAl2.style.boxShadow="0 5px 5px -5px white"; timeObj2.style.boxShadow="0 5px 5px -5px white"; setAlBtn2.style.boxShadow="0 5px 5px -5px white"; swDiv2.style.color="#ffffff"; swDiv2.style.boxShadow="0 0 3px 3px rgba(255,255,255,0.4)"; playOrPause2.style.boxShadow="0 5px 5px -5px white"; resetDiv2.style.boxShadow="0 5px 5px -5px white"; lapdiv2.style.boxShadow="0 5px 5px -5px white"; laptxt2.style.color="#ffffff"; fontUsed.style.backgroundColor="#000000"; fontUsed.style.boxShadow="0 0 3px 3px rgba(255,255,255,0.4)"; fontUsed.style.color="#ffffff"; if(loadStr==="1"){ $("#container").fadeToggle(0); $("#loadPage").fadeToggle(750); myFunction(); loadStr="2"; } }else{ document.body.style.backgroundImage=lightImg; themeDiv2.innerHTML="Dark Mode"; themeDiv2.style.color="#000000"; themeDiv2.style.boxShadow="0 0 3px 3px rgba(0,0,0,0.4)"; undertab2.style.boxShadow="0 10px 10px -10px rgb(0,0,0)"; timeDiv2.style.color="#000000"; timeDiv2.style.boxShadow="0 0 3px 3px rgba(0,0,0,0.4)"; alStatus2.style.color="#000000" alarmDiv2.style.color="#000000"; alarmDiv2.style.boxShadow="0 0 3px 3px rgba(0,0,0,0.4)"; newAl2.style.boxShadow="0 5px 5px -5px black"; timeObj2.style.boxShadow="0 5px 5px -5px black"; setAlBtn2.style.boxShadow="0 5px 5px -5px black"; swDiv2.style.color="#000000"; swDiv2.style.boxShadow="0 0 3px 3px rgba(0,0,0,0.4)"; playOrPause2.style.boxShadow="0 5px 5px -5px black"; resetDiv2.style.boxShadow="0 5px 5px -5px black"; lapdiv2.style.boxShadow="0 5px 5px -5px black"; laptxt2.style.color="#000000"; fontUsed.style.backgroundColor="#ffffff"; fontUsed.style.boxShadow="0 0 3px 3px rgba(0,0,0,0.4)"; fontUsed.style.color="#000000" } } function toTime(){ document.getElementById('container1').style.display = "block"; document.getElementById('container2').style.display = "none"; document.getElementById('container3').style.display = "none"; header.style.backgroundColor="#649664"; timeNav.style.boxShadow="0 0 0 0 black"; alarmNav.style.boxShadow="0 5px 5px -5px black"; swNav.style.boxShadow="0 5px 5px -5px black"; for(var i=0; i"+"Lap "+lapCounter+" : "+currentSwStatus; lapDiv.innerHTML=laps; lapDiv.scrollBy(0,40); lapCounter++; }} function toSw(){ header.style.backgroundColor="#646496"; timeNav.style.boxShadow="0 5px 5px -5px black"; alarmNav.style.boxShadow="0 5px 5px -5px black"; swNav.style.boxShadow="0 0 0 0 black"; for(var i=0; i

Clock Stopwatch Alarm