React.js Digital Alarm Clock Widget With Date & Time in Browser Using Javascript Full Project For Beginners

 

 

index.html

 

 

<div id="alarm-clock"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>

 

 

 

script.js

 

 

"use strict";

class AlarmClock extends React.Component {
  constructor() {
    super();
    this.state = {
      currentTime: '',
      alarmTime: ''
    };
    this.setAlarmTime = this.setAlarmTime.bind(this);
  }

  componentDidMount() {
    this.clock = setInterval(() => this.setCurrentTime(), 1000);
    this.interval = setInterval(() => this.checkAlarmClock(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.clock);
    clearInterval(this.interval);
  }

  setCurrentTime() {
    this.setState({
      currentTime: new Date().toLocaleTimeString('en-US', {
        hour12: false
      })
    });
  }

  setAlarmTime(event) {
    event.preventDefault();
    const inputAlarmTimeModified = event.target.value + ':00';
    this.setState({
      alarmTime: inputAlarmTimeModified
    });
  }

  checkAlarmClock() {
    if (this.state.alarmTime == 'undefined' || !this.state.alarmTime) {
      this.alarmMessage = "Please set your alarm.";
    } else {
      this.alarmMessage = "Your alarm is set for " + this.state.alarmTime + ".";

      if (this.state.currentTime === this.state.alarmTime) {
        alert("its time!");
      } else {
        console.log("not yet");
      }
    }
  }

  render() {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "React Alarm Clock"), /*#__PURE__*/React.createElement("h2", null, "It is ", this.state.currentTime, "."), /*#__PURE__*/React.createElement("h2", null, this.alarmMessage), /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("input", {
      type: "time",
      onChange: this.setAlarmTime
    })));
  }

}

ReactDOM.render( /*#__PURE__*/React.createElement(AlarmClock, null), document.getElementById('alarm-clock'));

Leave a Reply