UI Ready | Alarm Clock App with Angular - #2

Easy navigation to:

After a long gap, I’m happy to write a blog on an alarm clock application using Angular.

This article (Part 2) comes with the creation of a User interface for alarm clock and with basic handling with different scenarios.

So, let’s jump into it without any more delay.

Requirements

Before coding, let’s first understand our agenda for today. To create an alarm clock we need at least 3 views which are listed below:

Required Views:

One-time Alarm clock form
Repeating Alarm clock form
Alarms Listing

As part of those views, we need below elements or components:

Required UI Elements:

Date picker for one-time alarm
If repeating alarm, list of days to choose from
Time picker
Save button
A listing page for alarms

Points to Remember:

Using Bootstrap for CSS
Using Fontawesome for Icons (optional)
Using HTML date input & time input for date picker & time picker respectively throughout this series.
As of now, we will be adding all the views in the default component app.component.[html|ts|scss]

One-time Alarm clock form

Whatever may be the type of alarm you are setting, we need a form for that. To understand the requirement of a one-time alarm clock form, we must understand what is a one-time alarm.

The one-time alarm is an alarm that triggers only once after setting up. For example, You have set up an alarm for 6:00 AM tomorrow with a one-time alarm form, then it will get triggered at the specified time tomorrow and will not get trigger after tomorrow.

View:

For this form, we need:

Date picker
Time picker
Save button

This is how your HTML should look for the same:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<form action="javascript:void(0)">
  <div class="form-group">
    <label for="alarmDay">Choose day</label>
    <input
      type="date"
      id="alarmDay"
      name="alarmDay"
      class="form-control"
      placeholder="select date"
    />
  </div>
  <div class="form-group">
    <label for="alarmTime">Choose time</label>
    <input type="time" id="alarmTime" name="alarmTime" class="form-control" />
  </div>
  <button type="button" class="btn btn-dark btn-block">
    <i class="fa fa-plus-circle mr-1"></i> Set Alarm
  </button>
</form>

That’s it! Our one-time alarm clock form is ready. Let’s move to the next form.

Repeating Alarm clock form

Repeating alarm clock form is required to set up alarms which will trigger more than once after saving only once. Let’s understand it with an example, assume you have created an alarm for 6:00 AM for some days() using repeating alarm clock then this will keep on triggers alarm for the specified time on the specified days continuously unless you remove the created alarm.

Key things to remember in this alarm is that we must specify the time as well as the choose days (Ex: Monday, Friday, etc.,).

View:

For this form, we need:

List of days to choose from
Time picker
Save button

Script:

Here days array contains a list of all the days in a week as well all Everyday option.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  days = [
    {
      day: 'Everyday',
      id: -1
    },
    {
      day: 'Sunday',
      id: 0
    },
    {
      day: 'Monday',
      id: 1
    },
    {
      day: 'Tuesday',
      id: 2
    },
    {
      day: 'Wednesday',
      id: 3
    },
    {
      day: 'Thursday',
      id: 4
    },
    {
      day: 'Friday',
      id: 5
    },
    {
      day: 'Saturday',
      id: 6
    }
  ];
}

Markup:

We will be looping through an array of days and listing the checkbox element for each day using *ngFor structural directive.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form action="javascript:void(0)">
  <div class="form-group">
    <div class="form-check" *ngFor="let day of days">
      <input
        class="form-check-input"
        type="checkbox"
        attr.id="{{ 'days_checkbox_' + day.id }}"
        [value]="day.id"
      />
      <label class="form-check-label" attr.for="{{ 'days_checkbox_' + day.id }}"
        >{{ day.day }}</label
      >
    </div>
  </div>
  <div class="form-group">
    <label for="alarmTime">Choose time</label>
    <input type="time" id="alarmTime" name="alarmTime" class="form-control" />
  </div>
  <button type="button" class="btn btn-dark btn-block">
    <i class="fa fa-plus-circle mr-1"></i> Set Alarm
  </button>
</form>

Combine both forms

While combining both the forms, I have added a switch to toggle between a one-time alarm form and a repeating alarm form. By default, this form shows a one-time alarm, by toggling the switch you can toggle between forms.

Here is how the code looks after combining the forms:

Script:

In case, if you want to show repeating alarm by default, then set isRepeatAlarm to true in the code given below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MS-alarm';
  caption = 'Powered by masoomulhaq.com';
  isRepeatAlarm = false;
  days = [
    {
      day: 'Everyday',
      id: -1
    },
    {
      day: 'Sunday',
      id: 0
    },
    {
      day: 'Monday',
      id: 1
    },
    {
      day: 'Tuesday',
      id: 2
    },
    {
      day: 'Wednesday',
      id: 3
    },
    {
      day: 'Thursday',
      id: 4
    },
    {
      day: 'Friday',
      id: 5
    },
    {
      day: 'Saturday',
      id: 6
    }
  ];
}

Markup:

Here, we have used ngModel directive for detecting changes in the checkbox.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<form action="javascript:void(0)">
  <div class="form-group">
    <div class="custom-control custom-switch">
      <input
        type="checkbox"
        class="custom-control-input"
        name="repeatSwitch"
        id="repeatSwitch"
        [(ngModel)]="isRepeatAlarm"
      />
      <label class="custom-control-label" for="repeatSwitch"
        >Repeat Alarm</label
      >
    </div>
  </div>
  <div class="form-group" *ngIf="!isRepeatAlarm">
    <label for="alarmDay">Choose day</label>
    <input
      type="date"
      id="alarmDay"
      name="alarmDay"
      class="form-control"
      placeholder="select date"
    />
  </div>
  <div class="form-group" *ngIf="isRepeatAlarm">
    <div class="form-check" *ngFor="let day of days">
      <input
        class="form-check-input"
        type="checkbox"
        attr.id="{{ 'days_checkbox_' + day.id }}"
        [value]="day.id"
      />
      <label class="form-check-label" attr.for="{{ 'days_checkbox_' + day.id }}"
        >{{ day.day }}</label
      >
    </div>
  </div>
  <div class="form-group">
    <label for="alarmTime">Choose time</label>
    <input type="time" id="alarmTime" name="alarmTime" class="form-control" />
  </div>
  <button type="button" class="btn btn-dark btn-block">
    <i class="fa fa-plus-circle mr-1"></i> Set Alarm
  </button>
</form>

Alarms Listing View

Alarms listing view contains a list of all upcoming & running alarms and each alarm will have a delete button in case if you want to delete.

View:

Markup:

We will convert this into a dynamic loop in future articles on this series.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<section>
  <h6 class="mb-2">My Alarm Timings</h6>
  <ul class="list-group">
    <li
      class="list-group-item d-flex justify-content-between align-items-center"
    >
      <div>
        Today
        <div class="d-block">
          <small class="text-muted mr-1">3:30 PM</small>
        </div>
      </div>
      <div>
        <button type="button" class="btn btn-link text-danger btn-sm">
          <i class="fa fa-remove"></i>
        </button>
      </div>
    </li>
    <li
      class="list-group-item d-flex justify-content-between align-items-center"
    >
      <div>
        30th September 2019
        <div class="d-block">
          <small class="text-muted mr-1">3:30 PM</small>
        </div>
      </div>
      <div>
        <button type="button" class="btn btn-link text-danger btn-sm">
          <i class="fa fa-remove"></i>
        </button>
      </div>
    </li>
    <li
      class="list-group-item d-flex justify-content-between align-items-center"
    >
      <div>
        Monday, Saturday
        <div class="d-block">
          <small class="text-muted mr-1">3:30 PM</small>
          <span class="badge badge-warning">Repeat</span>
        </div>
      </div>
      <div>
        <button type="button" class="btn btn-link text-danger btn-sm">
          <i class="fa fa-remove"></i>
        </button>
      </div>
    </li>
  </ul>
</section>

Conclusion

If you followed the article, you are now ready with the alarm clock application UI.

In the next article, let’s go into functional aspects of our Alarm Clock.

Hope you like this tutorial. Any queries or concerns? Feel free to comment below in the comment box.

UI Ready | Alarm Clock App with Angular - #2

Requirements

One-time Alarm clock form

Repeating Alarm clock form

Combine both forms

Alarms Listing View

Conclusion

Tagged under:

Masoom Ul Haq S

You may also like:

Project Setup | Alarm Clock App with Angular - #1

Build an alarm clock application using Angular | Pilot #0

Step by Step Guide to Integrate Gooogle Maps API in Angular Project

7 Most Useful Commands in Angular Project

Add "Show more/less" Feature in Aggregations in Vue JS