Alarm Setter

Basic Alarm Set/Delete application

by Koding Kamp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="alarmAppContainer"><container id="alarmContainer">

</container>
<div id="addContainer">
  <div id="hiddenMenu">
    <input id="addName" type="text" placeholder="Enter Pill Name"><p />
	<div id="timeDisplay">8:00 AM</div>
    <label for="addTimeHour">Hour:</label>
	<input class="slider" onchange="updateDisplay()" name="addTimeHour" id="addTimeHour" type="range" min="1" max="12" value="8"><br>
    <label for="addTimeMinute">Minute:</label>
	<input class="slider" onchange="updateDisplay()" name="addTimeMinute" id="addTimeMinute" type="range" min="0" max="55" value="0" step="5"><br>
	<label for="selectAMPM">AM</label>
	<input class="slider" onchange="updateDisplay()" name="selectAMPM" id="selectAMPM" type="range" min="0" max="1" value="0">
	<label for="selectAMPM">PM</label>
  </div>
  <input id="addAlarm" type="button" value="+" onclick="addButtonPress()">
</div></main>

CSS

main{
  margin-left: auto;
	margin-right: auto;
}
.alarm {
  border: solid #777 2px;
  padding: 0 20px 0 10px;
  width: 296px;
  height: 80px;
  background-color: #f0f0f0;
}

.time {
  font-size: 50px;
  margin: 0;
}

.name {
  position: relative;
  text-align: right;
  font-size: 30px;
  top: -50px;
}
.remover{
	position: relative;
	bottom: 110px;
	left: 280px;
	border: white solid 2px;
	border-radius: 3px;
}
#addAlarm{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-color: #333;
}
.slider{
	background: transparent;
}
#timeDisplay{
	font-size: 20px;
}
#addContainer{
  width: 320px;
  text-align: center;
  background-color: #eee;
  padding: 3px;
  border: inset #333 2px;
}
#addName{
	border-radius: 7px;
	height: 20px;
}

JavaScript

//add hidden scroll bar to switch between main and alarm menu


var alarm = 0;
var firstAddPress = true;

$("document").ready(function() {
  $("#hiddenMenu").hide();
});

function addAlarm() {
	var minutes = $("#addTimeMinute").val();
	if(minutes == 0){
		minutes = "00";
	} else if (minutes == 5){
		minutes = "05";
	}
	var dayNight = $("#selectAMPM").val();
	dayNight = (dayNight == 0) ? "AM" : "PM";
	
  var blah = $("#alarmContainer").html() + "<section class='alarm' id='alarm"+alarm+"'><article class='time'>" + $("#addTimeHour").val() + ":" + minutes + " " + dayNight + "</article><br><article class='name'>" + $("#addName").val() +
    "</article><button class='remover' onclick='removeAlarm(alarm"+alarm+")'>=</button></section>";
  $("#alarmContainer").html(blah);
	alarm++;
}

function updateDisplay(){
	var hours = $("#addTimeHour").val();
	var minutes = $("#addTimeMinute").val();
	var dayNight = $("#selectAMPM").val();
	var string;
	
	if(minutes < 10){
		minutes = "0" + minutes;
	}
	dayNight = (dayNight == 0) ? "AM" : "PM";
	
	string = hours + ":" + minutes + " " + dayNight;
	$("#timeDisplay").text(string);
	
}

function addButtonPress() {
  $("#hiddenMenu").toggle();
  if (firstAddPress) {
    firstAddPress = false;
  } else {
    if ($("#addName").val() != "") {
      addAlarm();
    }
	$("#timeDisplay").text("8:00 AM");
    $("#addName").val("");
    $("#addTimeHour").val(8);
    $("#addTimeMinute").val(0);
	$("#selectAMPM").val(0);
    firstAddPress = true;
  }
}

function removeAlarm(alarmID){
var message = "Delete this Alarm?";
if(confirm(message)){
	$(alarmID).remove();
 }
}