Будильник со звуком для пробуждения

Разработка Будильник со звуком для пробуждения

Нет прав для скачивания
Будильник со звуком для пробуждения.
Пишем нашу разметку:
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%;
  }
}
Пишем jquery:
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();
  }
}
Смотрим наш результат:
fg27.gif
Автор
baltun
Скачиваний
0
Просмотры
634
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Назад
Верх Низ