jQuery + Moment.js Set Alarm Clock With Current Date and Time in Browser Using Javascript Full Project For Beginners

 

 

index.html

 

 

<html>
  <head>
		<title>My Dream Alarm Clock</title>
		<meta charset='UFT-8' name='viewport'
          content='width=device-width, initial=scale=1.0' />	
    <link rel="stylesheet" href="https://gabrielw.de/dev/_storage/liquidcrystal/liquidcrystal.css"/>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.1/jquery.fittext.min.js"></script>
	</head>
  <body>
    <div class="main">
      
   
    <div id="clock" class="clock">loading ...
    </div>
    
    	<div id='alarm-container'>
        <p id=test>No Alarm Set...</p>
		  	<h3>Set Alarm Time</h3>
				<label>
					<div>
					<select id='alarmhrs' ></select>
					</div>
				</label>
      
				<label>
					<div>
					<select id='alarmmins' ></select>
					</div>
				</label>
      
			
      
				<label>
					<div>
						<select id="ampm">
							<option value="AM">AM</option>
							<option value="PM">PM</option>
						</select>
					</div>
				</label>
        
        
        <div id='buttonHolder'>
			<div>
				<button  id='setButton' onClick='alarmSet()'>Set Alarm</button>
			</div>

			<div>
				<button  id='clearButton' onClick='alarmClear()'>Clear Alarm</button>
			</div>
          
      
          
		</div>      
	</div>
	
<audio id="timer-beep">
  <source 
   src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/41203/beep.mp3"/>
  <source
   src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/41203/beep.ogg"/>
</audio>
		
   </div>
  </body>
</html>

 

 

style.css

 

 

/* liquid_crystalregular */
* {
 /* box-sizing: border-box; */
}


 html, body {
  width: 300px;
  height: 300px;
  font-family: "Lucida Console", Monaco, monospace;
  user-select: none;
  user-drag: none;
  font-size: 30px;
  background: #333;
}
.main {
  width: 300px;
  background: #555;
}

.clock {
  
  line-height: 30px;  
  margin: 5px auto 0;
 
  background: #222;
  color: lime;
  text-align: center;
  border-radius: 15px;
  box-shadow: 0 0 7px #222;
  text-shadow: 0 0 3px #fff;
  font-size: 20px;
 
}

h2 {
	text-align:center; 
}

#alarm-container {
	text-align:center;
    font-family: Verdana;
    font-size: 0.6em;
    padding: 0.7em;
    color: cyan;
}

label {
	display:inline-block;
}

.timeofday {
    background-color: #eee;
}

.bigger {
    font-weight:bold;
    font-size: 18px;
}

#sounds {
    text-align: center;
    padding-top: 20px;
}

#setButton {
  
    background-color:lightgreen;
    margin-top:10px;
   
 
}
#clearButton {
   
    background-color:red;
    margin-top:10px;
}

 

 

 

script.js

 

 

//$('#clock').fitText(2.0);
var curTime;
var c_hr, c_min, c_sec, c_ampm;
var el_clock = document.getElementById('clock');

var hr   = document.getElementById('alarmhrs');	
var min  = document.getElementById('alarmmins');		
var ap   = document.getElementById('ampm');
var test = document.getElementById('test');
var alarm;
var ctime;

function update() { 
  curTime  = moment().format('MMM D YYYY'+ ",  " + 'hh:mm:ss A');
  //$('#clock').html(curTime); 
  el_clock.innerHTML = curTime; 
  
  ctime  = moment().format('hh:mm:A');
  check(); 
};

setInterval(update, 1000);
/*===================================
 
//=====================================*/
function check(){
  var zh =  moment().format('hh');
  var qh = parseInt(zh);
  var zm =  moment().format('mm');
  var qm = parseInt(zm);
  var za = moment().format('A');
  var myhr = hr.options[hr.selectedIndex].value;
  var mymin = min.options[min.selectedIndex].value;
  var myap =  ap.options[ap.selectedIndex].value;
  // reset option select to current time ( only minutes needed here?)
   if ( qh > myhr || qm > mymin || za > myap ) {
     bump();
   }
  
  // check if alarm time is met
	 if (alarm === ctime) {	
      var audio = document.getElementById( 'timer-beep' );
      audio.volume = 0.2;
      audio.play();
			test.innerHTML = 'Timer Done!';
      alarmClear();     
		};
};

// populate select options dropdowns

function hoursMenu(){
	var select = document.getElementById('alarmhrs');
	var hrs = 12
	for (i=1; i <= hrs; i++) {
		select.options[select.options.length] =
      new Option( i < 10 ? "0" + i : i, i);		
	}; 
};
hoursMenu();

function minMenu(){
	var select = document.getElementById('alarmmins');
	var mins = 59;
	for (i=0; i <= mins; i++) {
		select.options[select.options.length] =
      new Option(i < 10 ? "0" + i : i, i);
	};
};
minMenu();

// ==== reset drop down times ===

function bump(){  
  // -------- reset hours ---------
  var tempH = moment().format('hh');
  var t =  parseInt(tempH); 
  for(var i, j = 0; i = hr.options[j]; j++) {
    if(i.value == t) {
      hr.selectedIndex = j;
      break;
    };
  };
  // -------- reset mins ---------
  var tempM = moment().format('mm');
  var t2 =  parseInt(tempM); 
  for(var k, l = 0; k = min.options[l]; l++) {
    if(k.value == t2) {
      min.selectedIndex = l;
      break;
    };
  };
 
 // -------- reset am/pm ---------
  var tempA = moment().format('A'); 
  for(var x, y = 0; x = ap.options[y]; y++) {
    if(x.value == tempA) {
      ap.selectedIndex = y;
      break;
    };
  };
 
}; // end bump
bump(); // on first load


function addZero(num){
     return(num < 10 ? "0" + num : num);
};


function alarmSet() {    
    var selectedHour = hr.options[hr.selectedIndex].value;
    var selectedMin = min.options[min.selectedIndex].value;   
    var selectedAP = ap.options[ap.selectedIndex].value;
    var alarmTime = addZero(selectedHour) + ":" +
        addZero(selectedMin) + ":" + selectedAP;
    alarm = alarmTime; 
    test.innerHTML = "Alarm set to -  " + alarm;
  
  // disable the alarm till reset
  document.getElementById('alarmhrs').disabled = true;
	document.getElementById('alarmmins').disabled = true;	
	document.getElementById('ampm').disabled = true;
  
};

function alarmClear(){
  alarm = "";
  test.innerHTML = "No Alarm set ";
  document.getElementById('alarmhrs').disabled = false;
	document.getElementById('alarmmins').disabled = false;	
	document.getElementById('ampm').disabled = false;
};
// ==========================================

Leave a Reply