Пишем нашу разметку:
Пишем стиль:
Пишем jquery:
Смотрим наш результат:
HTML:
<div class="container" id="mainContainer">
<h1 class="page-header text-center">Super Awesome Alarm Clock!</h1>
<div class="addAlarmContainer">
<form class="form-group" action="" name="alarmForm">
<input class="form-control" type="time" name="time"/>
<button id="addAlarm"> <i class="material-icons">alarm_add</i></button>
</form>
</div>
<div id="display">
<div class="row" id="alarmDisplay">
<div class="col-sm-4 alarmContainer">
<div class="col-sm-8">
<h2></h2>
</div>
<button class="btn btn-danger btn-sm deleteAlarm" id="deleteAlarm"><i class="material-icons">delete</i></button>
</div>
</div>
</div>
<audio id="audio" src="https://www.w3schools.com/html/horse.ogg"></audio>
</div>
CSS:
body {
background: linear-gradient(to right, #1abc9c, #2980b9, #9b59b6);
}
#mainContainer h1 {
color: #ecf0f1;
}
#addAlarm {
width: 65px;
height: 65px;
border-radius: 100%;
border: none;
outline: none;
background: #e74c3c;
box-shadow: 0px 0px 10px -2px white;
transition: all 0.1s cubic-bezier(1, 1.65, 0.18, 0.86);
margin-top: 10px;
}
#addAlarm i {
font-size: 35px;
color: #ecf0f1;
}
.addAlarmContainer {
position: absolute;
bottom: 50px;
right: 20%;
width: 115px;
text-align: center;
}
.alarmContainer {
background: rgba(225, 225, 225, 0.2);
padding: 15px;
position: relative;
}
#deleteAlarm {
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
}
#display .alarmContainer {
margin: 10px 6px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.7);
}
#display #alarmDisplay:first-child {
display: none;
}
@media (max-width: 768px) {
.addAlarmContainer {
bottom: 20px;
right: 5%;
}
}
JavaScript:
const addAlarmBtn = document.getElementById('addAlarm'),
alarmForm=addAlarmBtn.parentElement,
jp= JSON.parse,
js= JSON.stringify;
var alarmArr;
// localStorage.clear();
// Button Animation
const mouseEvents=['mousedown','mouseup','mouseover','mouseout']
mouseEvents.forEach(function (val){
addAlarmBtn.addEventListener(val, scaleBtn);
});
function scaleBtn(e){
const target= e.currentTarget;
// Check Event type and scale accordingly!
switch (e.type){
case 'mousedown':
target.style.transform='scale(0.9)';
break;
case 'mouseup':
target.style.transform='scale(1)';
break;
case 'mouseout':
target.style.transform='scale(1)';
break;
case 'mouseover':
target.style.transform='scale(1.1)';
break;
default:
target.style.transform='scale(1)';
}
}
// End Button Animation
// ==============================
// Code for alarm!
const timeForm = document.alarmForm;
var intervalHandle;
addAlarmBtn.parentElement.addEventListener('submit', addAlarm);
window.addEventListener('load', addAlarm);
// Check Local Storage Value
function checkStorage(local){
if(local){
alarmArr=jp(local);
}else{
alarmArr= [];
}
}
function addAlarm(e){
// Check event type and work accordingly
// Cache target and event type
const target=e.currentTarget;
const type=e.type;
if(type=='submit'){
// prevent submit
e.preventDefault();
}else{
// get value or initiate alarmArr
checkStorage(localStorage.alarmArr);
}
// Push input value in alarmArr on submit!
const alarmVal= alarmForm.time.value;
// Validation
if(type=='submit' && isValid(alarmVal)){
alert(`You can't fool me bitch!`);
return false;
}
// Push alarm value into alarmArr
pushInput(type,alarmVal);
displayValue(type);
const deleteBtns= document.querySelectorAll('.deleteAlarm');
deleteBtns.forEach(value => value.addEventListener('click', deleteAlarm));
tringTring();
if(type=='submit'){
alarmForm.reset();
alarmForm.blur();
}
}
// ---------------------------------------
// Push input value in alarmArr on submit!
// ---------------------------------------
function pushInput(type, value){
if(type=='submit'){
alarmArr.push(value);
localStorage.alarmArr= js(alarmArr);
}
console.log(alarmArr);
}
// ----------------------
// Display values from arr!
// ----------------------
function displayValue(type){
const dummyNode = document.querySelector('#alarmDisplay'),
displayContainer = document.getElementById('display');
if(type=='load'){
alarmArr.forEach(function(value){
var hours= Number(value.slice(0,2));
var minutes= Number(value.substr(-2));
console.log(hours +':'+ minutes);
display(hours, minutes);
});
}else{
hours= Number(alarmArr[alarmArr.length-1].slice(0,2));
minutes= Number(alarmArr[alarmArr.length-1].slice(-2));
display(hours, minutes);
}
function display(hours, minutes){
const clonedNode = dummyNode.cloneNode(true);
if(hours<10 && minutes<10){
clonedNode.querySelector('h2').textContent='0' + hours + ':0' + minutes;
}else if(hours<10){
clonedNode.querySelector('h2').textContent='0' + hours + ':' + minutes;
}else if(minutes<10){
clonedNode.querySelector('h2').textContent= hours + ':0' + minutes;
}else{
clonedNode.querySelector('h2').textContent= hours + ':' + minutes;
}
displayContainer.appendChild(clonedNode);
}
}
// --------------
// validator
// --------------
function isValid(value){
return !isNaN(Number(value)) || alarmArr.indexOf(value)!==-1;
}
// ---------------------
// Delete Alarm Function
// ---------------------
function deleteAlarm(e){
const target= e.currentTarget;
const alarmTime= target.parentElement.querySelector('h2').textContent;
if(alarmArr.length>1){
const indexToDelete= alarmArr.indexOf(alarmTime);
alarmArr.splice(indexToDelete,1);
}else{
localStorage.clear();
alarmArr=[];
}
console.log(alarmArr);
target.parentElement.remove();
tringTring();
}
var intervalHandle=[];
// Let the Bells Do what They can do!
function tringTring(){
// DO not continue if no time value found
if(alarmArr.length===0){
return false;
}
alarmArr.forEach(val=>createDate(val));
// creting date and playing audio!
function createDate(val){
var hours= Number(val.slice(0,2));
var minutes= Number(val.substr(-2));
var alarmDate= new Date();
alarmDate.setHours(hours, minutes, 0);
var timeDifference= alarmDate.getTime()-Date.now();
intervalHandle.forEach(value=>clearInterval(value));
if(timeDifference>0){
intervalHandle.push(setTimeout(playAlarm,timeDifference));
}
console.log(timeDifference);
}
function playAlarm(){
var audio= document.getElementById("audio");
audio.play();
}
}