UI Ready | Alarm Clock App with Angular - #2

UI Ready | Alarm Clock App with Angular - #2

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:

One-time Alarm

One-time Alarm

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:

Repeating Alarm

Repeating Alarm

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:

One-time Alarm

One-time Alarm

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.

Tagged under:
#Angular #Front-end #SPA
Masoom Ul Haq S
About author
Masoom Ul Haq S

Masoom is a Front-end Developer, a UX Engineer and Freelancer based in Bangalore, India. Like to develop differential and effective User Experiences for digital products using an amalgamation of latest technology and best practises.

comments powered by Disqus
You may also like:
Be the first to know about my upcoming writings.