C# Tutorial - Create a YouTube Alarm Clock in Visual Studio

In this tutorial we will create a simple yet elegant YouTube alarm clock in Visual Studio using C# programming language.
The main idea for this alarm clock is to use a custom GUI, transparent form and custom font in the application. We have
our own custom font for this alarm clock and we will import it in for this application. You can use any of your favourite
YouTube videos to wake you up in the Morning, now isn't that the dream. We have created a simple GUI image for the
application, download it from below to follow along with this tutorial.

Lesson Objective -

1. Create a fully functional Alarm Clock in Visual Studio

2. Use Custom GUI in the application
3. Use Custom Fonts in the application
4. Loading the font to the application and making dynamic changes to it
5. Dynamically change the style of the fonts in C#
6. Use a Date Picker Component in Visual Studio
7. Checking the timer with the current time
8. Loading YouTube videos to the web browser

Start Visual Studio and create a new windows form application under C# programming language. Call this project YouTube
Alarm Clock.

Click OK.

Download the custom GUI and font file from MOOICT.

This is the GUI we created for this alarm clock

Let's make some changes to the Form Properties first

While the form is selected please change the following to the properties

Back Color Gray

Background Image Interface image that you downloaded from MOOICT

more tutorials on http://www.mooict.com/ 1

Background Image Layout Stretch
Form Border Style None
Size 1168, 474
Start Position Center Screen
Text Alarm Clock - MOOICT
Transparent Key Gray

Final Result

Now debug the program and see the result of the settings we done to it.

Click on the start button to start debugging also you can press F5. Now you will not see
the close button in the form but you can still close it from the task bar, right click on the application in the task bar then
click on Close.

Like what you see yet. Now let's add the custom font but we need to copy and paste the file in the Debug folder first.

Right click on the name of the project in the solutions explorer and click on
Open Folder in File Explorer

Now go in the bin folder - Debug Folder -

Paste the font file in the debug folder

more tutorials on http://www.mooict.com/ 2

 Add 4 labels to the screen, place 3 of them on to the blue section and one to the red section.

Now drag and drop a Date Time Picker from the tool box on to the green section

Change the following to the labels properties -

Label 1 - Location: 271, 141

Label 2 - Location: 208, 228

Label 3 - Location: 449, 228

Label 4 - Location: 748, 49, Text: Enter YouTube Link Below:

Drag and drop a Date Timer Picker from the tool box to the form. Drag it to the green
section of the Alarm Clock.

Change the following in the properties of the Date and Time Picker

Font - Change font size to 14

Format - Time

Add 3 Labels in the Today section.

Next up, Drag and drop a web browser from the tool box, this component will be used to play the music video from you
tube in the program.

more tutorials on http://www.mooict.com/ 3

 Add the following to the web browsers properties.

Location - 703, 158

Size - 440, 285

Drag and drop a Text Box from the tool box, this will be used to paste the you tube video link in the application. Place it
above the web browser.

Drag the text box to make it larger in the red section.

Make the following changes in the properties window

name - youtubelink

Add a button to the form from the tool box. Since we are using a frameless window for this alarm clock, we will use this
button to close the alarm clock.

Change the properties in the button to the follow -

Name - exitButton

Back Colour - Yellow

Location - 1095, 27

Size - 48, 35

more tutorials on http://www.mooict.com/ 4

Text - Exit

Now lets add a timer to the project, from the tool box drag and drop a Timer in the Form.

Change the following in the properties of the Timer.

Name - clockTimer

Enabled - True

Interval - 1000

Select the Form and make sure no other components are selected, lets add some events to the form

To find the Events Windows, click on the lightning bolt icon in the properties window.

In the load option type LoadForm and press enter. This will take you to the code
view, come back to the design view and the click on the Exit Button.

Find the Click event and type exitAlarm and press enter.

Click on the timer and do the following in the events window.

Type in updateTimer and press enter.

Now click on the date timer picker events window

Find the Value Changed option and type timerChanged and press enter.

Now we can start coding this whole thing up and the fun begins here

This is the code view thus far into this project.

Enter the highlighted lines into the code view

using System;
using System.Collections.Generic;

more tutorials on http://www.mooict.com/ 5

using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace YouTube_Alarm_Clock
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

private void LoadForm(object sender, EventArgs e)

{

private void exitAlarm(object sender, EventArgs e)

{

private void updateTimer(object sender, EventArgs e)

{

private void timerChanged(object sender, EventArgs e)

{

}
}
}
This is what the code looks like so far, now we need to add some our own instructions to it.

Add the highlighted codes below into the code view.

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;

using System.Drawing.Text;

namespace YouTube_Alarm_Clock
{
public partial class Form1 : Form
{

bool alarmed = false; // this boolean will check if the alarm has gone off

public Form1()
{
InitializeComponent();
}

private void LoadForm(object sender, EventArgs e)

{

private void exitAlarm(object sender, EventArgs e)

{

more tutorials on http://www.mooict.com/ 6

 private void updateTimer(object sender, EventArgs e)
{

private void timerChanged(object sender, EventArgs e)

{

}
}
}

Using System.Drawing.Text; is the class we need to load up the custom font we pasted in the project folder earlier.

bool alarmed = false; this boolean will be used to check if the alarm was set off or not.

Lets add the following in the Load Form function. All the codes are explain the green text

//These are comments, we use comments to explain the codes. Use a double slashes to enter single line
comment.

private void LoadForm(object sender, EventArgs e)

{
//Create your private font collection object.
PrivateFontCollection pfc = new PrivateFontCollection();

// load the custom font to the application

// we are directly loading up the clock.ttf font to the application
pfc.AddFontFile("clock.ttf");

// assign the custom font to the 4 labels to the labels

// label1 is size 32, label 2 and 3 are size 16 and label 4 is size 12
label1.Font = new Font(pfc.Families[0], 32, FontStyle.Bold);
label2.Font = new Font(pfc.Families[0], 16, FontStyle.Bold);
label3.Font = new Font(pfc.Families[0], 16, FontStyle.Bold);
label4.Font = new Font(pfc.Families[0], 12, FontStyle.Bold);

// set all of the labels fore colour to white

label1.ForeColor = System.Drawing.Color.White;
label2.ForeColor = System.Drawing.Color.White;
label3.ForeColor = System.Drawing.Color.White;
label4.ForeColor = System.Drawing.Color.White;

// set all of the labels back colour to transparent

label1.BackColor = System.Drawing.Color.Transparent;
label2.BackColor = System.Drawing.Color.Transparent;
label3.BackColor = System.Drawing.Color.Transparent;
label4.BackColor = System.Drawing.Color.Transparent;

// below we are changing the fore colour of the

dateTimePicker1.CalendarForeColor = System.Drawing.Color.Black;

// we are setting the colour and the transparency key for the form
this.BackColor = System.Drawing.Color.Gray;
this.TransparencyKey = System.Drawing.Color.Gray;

Below is the exit alarm function

private void exitAlarm(object sender, EventArgs e)

{
// this event will run the exit button is clicked
// we will terminate the application when its clicked
Application.Exit();
}

more tutorials on http://www.mooict.com/ 7

Below is the update timer function

The double slashes are single line comments but when you use /** we are able to use multi line comment this also ends
in with this **/

private void updateTimer(object sender, EventArgs e)

{
// label 1 will show the time
label1.Text = DateTime.Now.ToString("HH:mm:ss");
//label 2 will show the day
label2.Text = DateTime.Now.ToString("dddd");
// label 3 will show the month, date and year
label3.Text = DateTime.Now.ToString("MMM dd yyyy");

// create a date time class

DateTime current = DateTime.Now;

// create a another date time class this will be used to set the alarm time
DateTime userTime = dateTimePicker1.Value;

/**
* Below is the if statement which will check if the time
* Matches the user time then we will set the alarm
* If the current DAY equals to users DAY
* AND
* if the current Month equals the users Month
* AND
* if the current hour equals the users hour
* AND
* if the current minute equals the users minute
* AND
* alarmed boolean is true
* Then we will follow the instructions inside the if statement
**/

if (current.Day == userTime.Day && current.Month == userTime.Month &&

current.Hour == userTime.Hour && current.Minute == userTime.Minute && alarmed)
{
// if all the conditions matches the conditions above
// then we will run the web browser navigate function
// we will take the link provided in the you tube link text box
// and load it up to the web browser
webBrowser1.Navigate(youtubelink.Text);

// we will set the alarm to false

// this will only run the alarm clock once
alarmed = false;

}
}

Below is the timer changed function

private void timerChanged(object sender, EventArgs e)

{

// if the date time pickers text was changed by the user

// then we will set the alarmed boolean to true
alarmed = true;
}

Lets try to debug the program once again

more tutorials on http://www.mooict.com/ 8

This the alarm clock, I set the alarm form for 23.43 and I set the alarm to play the Calvin Harris Feels Song.

Woohoo it works.

If you have followed the tutorial this far then well done, if there are any errors refer back to the code and check against
your to spot any mistakes.

Moo Out.

more tutorials on http://www.mooict.com/ 9