Post
Ask Question

Featured Digital Clock In C#

Introduction

Here I'm going to explain how we can create an attractive, featured digital clock with Windows forms and C#. On this clock, we can see the time, date, and day. We can change the time from 24 hours to 12 hours. It will be quite interesting, so before I start on how to make a digital clock, I want to show you what we are going to make.

  
Featured Digital Clock

To create a featured digital clock, we have to follow these steps.

Step 1

First of all, we start Visual Studio. In my case, I have Visual Studio 2019. You can access that which is installed on your system. After opening the visual studio, click on Create New Project.


Creating new project

Step 2

Then we select Windows applications with the.NET Framework and press the Next button.


Choosing the .Net Framework with C#

Step 3

Next, we have to put the name of our application in my case. I have named mine "Featured_digital_clock." You can put in the name you want and click on "Create."


visual studio

Here we get a default window template and we have to resize our window to 589X251 by dragging. We can define it by code also.


Resizing the form

Step 4

Next, to make our application more attractive, we have to change the formBorderStyle to none by just right-clicking on the form and clicking on properties.


Changing the BorderStyle

And we must use the BackColor property to change the background color to black.


Changing the BackColor 

Step 5

Next, we have to add 4 label controls to our form, so to add these label controls, we have to open the toolbox. To open the toolbox, we have two ways one is,  to go view menu, Under View, we get the toolbox. Another way to open the toolbox is to press the shortcut key ctrl +Alt+X.

Ctrl+Alt+x is the shortcut key to open the ToolBox. Now we add four labels to our form by dragging and dropping.


Adding the label control

Next, we right-click on the Label control and click on properties first we change their default name lalel1 to lblTime


Changing the ID of the Label

Next, we change the default text to 00:00 by changing the Text property.


Changing the default text

Next, we change the default text color from black to red by changing the ForeColor property.


Changing the forecolor

Step 6

Next, we repeat the same steps with the other label controls.

label2

name-lblSec[This will show the seconds].

forecolor-Red

Text-00

Font-size-36

label3

name-lblMonth[This will show the date with month and year].

forecolor-Red

Text-July 10 2023[You can put any random  date value]

Font-size-48

label4

name-lblDay[This will show the Day ].

forecolor-Red

Text-Sunday[ Put any random Day]

Font-size-48

Here in this project, I have used the font DS Digital which is not an in-built font if you also want to use the same font I have added it to the resource file 

How to install and use DS Digital font 

  • download the resource file 
  • open folder named font
  • Right-click on the font file and click on install

Note
If you are installing the font while your visual studio is running in this case the font will not be applied, you have to close the visual studio and re-open it again.

Step 7

Next, select all these label controls and open properties and apply the DS Digital font.


Changing the default font to DS Digital

Step 8

Next, we add a timer control by opening the toolbox and dragging n drop our form design


Timer control

Step 9

Next, we need to right-click on the Timer control and open the properties window and set the interval time 100 to 1000 means in every 1000 milliseconds (each 1 second) tic event that occurs.


Changing the Interval value

Now we need to add two button controls one for changing the time format from 24 hours to 12-hour time format and another one to close the clock. 

Then right-click on buttons and open properties and set

Button1

  • name-btnClose
  • Text-X
  • Forecolor-Red
  • Backcolor-Black
  • Flate style-popup

Button2

  • name-btnChangeFormat
  • Text-12H
  • Forecolor-Red
  • Backcolor-Black
  • Flate style-popup

Now our design is complete. Let's have a look at our design


Design of Digital clock

Now let's declare a variable with a bool type named formatAm_PM that performs changes in the time format.

 bool formatAm_PM;

Step 10

Next, we just double click on btnchangeFormat, and click event is created now 

  • First I use a conditional statement that check the text of the btnchangeFormat if its12h then bool variable stores true else false.
  • And also change the Text of the button.
private void btnChangeFormat_Click(object sender, EventArgs e) {
    if (btnChangeFormat.Text == "12H") {
        formatAm_PM = true;
        btnChangeFormat.Text = "24H";
    } else {
        formatAm_PM = false;
        btnChangeFormat.Text = "12H";
    }
}

Step 11

Next, we double click on the btnClose, and its click event is created here we

  • Here we write the code to close the clock 
  • This keyword holds the reference of the current form and the close function closes the form when the button is clicked.
private void btnClose_Click(object sender, EventArgs e) {
    this.Close();
}

Step 12

Next, we just double click on the timer control that will create a tick event of timer control, and here we assign time to the labels 

  • First we checked that the value of  formatAm_PM is true  then assign the time with 12h format
  • Here we have used the inbuilt functions (provided by the C# )Datetime. Now that returns the current time of your system and converts it to string format we have used the ToString() method that takes an argument that Defines the time format if the condition is true then we passed "hh: mm" this will change the format with 12-hour format
  • When the condition is false then we passed the "HH:mm" this will show the time in the 24 hour format.
private void timer1_Tick(object sender, EventArgs e) {
    if (formatAm_PM == true) {
        lbl24Time.Text = DateTime.Now.ToString("hh:mm");
    } else {
        lbl24Time.Text = DateTime.Now.ToString("HH:mm");
    }
    lblsec.Text = DateTime.Now.ToString("ss");
    lblMonth.Text = DateTime.Now.ToString("MMM dd yyyy");
    lblDay.Text = DateTime.Now.ToString("dddd");
}

Last Step

Now we just need to start timer control when our application loads so just double  click anywhere  in the  form where no controls are available this will create the form load event

Here we started our timer with the Start() method 

private void Form1_Load(object sender, EventArgs e) {
    timer1.Start();
}

Here is the all the code programmed by us

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace DigitalClock_1._0 {
    public partial class Form1: Form {
        bool formatAm_PM;
        public Form1() {
            InitializeComponent();
        }
        private void Form1_Load(object sender, EventArgs e) {
            timer1.Start();
        }
        private void timer1_Tick(object sender, EventArgs e) {
            if (formatAm_PM == true) {
                lbl24Time.Text = DateTime.Now.ToString("hh:mm");
            } else {
                lbl24Time.Text = DateTime.Now.ToString("HH:mm");
            }
            lblsec.Text = DateTime.Now.ToString("ss");
            lblMonth.Text = DateTime.Now.ToString("MMM dd yyyy");
            lblDay.Text = DateTime.Now.ToString("dddd");
        }
        private void btnClose_Click(object sender, EventArgs e) {
            this.Close();
        }
        private void btnChangeformat_Click(object sender, EventArgs e) {
            if (btnChangeformat.Text == "12H") {
                formatAm_PM = true;
                btnChangeformat.Text = "24H";
            } else {
                formatAm_PM = false;
                btnChangeformat.Text = "12H";
            }
        }
    }
}

So our final output is here.


Digital clock

Summary

  • Here we created a featured digital clock with the help of C# and Windows Form.
  • We can choose other color combinations like black-red, yellow-green, and so on, and we can also choose other fonts based on your interest.
  • You can also add a stopwatch feature using the timer.pause() method, and so on.


Similar Articles