Build a CPM Calculator App with Next.js 13, TypeScript & Tailwind CSS
Tags: nextjs, tailwindcss, typescript, tutorial
Published: 2023-02-03 11:25:44

Today, we're building a CPM Calculator app with Next.js 13, TypeScript, and Tailwind CSS!

In this video, we will be going step-by-step through the process of creating an app that can calculate your cost per mille (CPM) for different campaigns. By the end, you'll have a fully functional calculator that you can customize and use in your own projects.

{% embed https://www.youtube.com/embed/tX1Bz2UMInk %}

---

Creating an app like this is exciting and a great way to expand your programming skills. It's not hard, but it does require some attention to detail so that everything works together properly. We'll walk you through the whole process from start to finish, showing you how all the pieces fit together. You can follow along or just watch and learn. It's up to you.

We'll also show you how to use TypeScript to make sure your code is reliable and bug-free. We'll look at Tailwind CSS for styling our calculator app so it looks professional and modern. So let's dive in..

---

## How to use CPM Calculator App?

Using the CPM Calculator App is very simple and straightforward. Here are the steps to follow:

1. Open the [CPM Calculator App](https://cpm-calculator.vercel.app/) on your device.
2. Input the cost of your advertising campaign in the designated field.
3. Input the number of impressions (the number of times your advertisement will be seen) in the designated field.
4. Click on the "Calculate CPM" button.
5. The app will automatically calculate the cost per thousand impressions (CPM) of your advertising campaign and display it in the designated section.

And that's it! With just a few clicks, you can easily calculate the CPM of your advertising campaign and get a better understanding of its cost-effectiveness.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hc0rku50dti38qgznzuo.png)

---

## Learn more about CPM Calculator

CPM (Cost per Mille) is a term used in advertising to measure the cost of an advertisement per thousand impressions. It is calculated by dividing the cost of the advertising campaign by the number of impressions (times the advertisement was seen), and then multiplying by 1000.

The CPM calculator app helps advertisers to calculate the cost of their advertising campaign by taking into account the cost and the number of impressions. This information is crucial in determining the cost-effectiveness of the advertising campaign and helps advertisers to make informed decisions about their advertising budget.

Advertisers can use the CPM calculator to compare the cost of different advertising campaigns and choose the one that offers the best value for their money. The calculator can also be used to estimate the cost of an advertising campaign before it is launched, which is useful for budgeting purposes.

It's a valuable tool for advertisers to calculate the cost of their advertising campaigns and make informed decisions about their advertising budget. It is easy to use and provides important information to help advertisers make the best use of their advertising budget.


---

## What is the formula to calculate CPM?

To calculate CPM, you need to divide the cost of your advertising campaign by the number of impressions received, then multiply by 1000.

For example, if you spent $500 on a campaign and received 100,000 impressions, the CPM would be:

**CPM = ($500 / 100,000) * 1000 = $5**

This means it cost $5 to deliver your ad 1000 times to your target audience.

---

## Programming

**_How to manage form state:_**

This code defines two event handlers in TypeScript, `onChange` and `onBlur`. These event handlers are used to handle changes to form inputs.

The `onChange` event handler is triggered every time a change is made to a form input, such as when the user types into a text field. The event handler takes a parameter e, which is of type `ChangeEvent<HTMLInputElement>`. This means that the event is a change event for an HTML input element.

The setForm function is called to update the state of the form with the new value of the input. The state of the form is spread using the spread operator `...`, and the new value is set using computed property names. This means that the name attribute of the input is used as the key in the form object, and the value is used as the value.

The `onBlur` event handler is similar to the `onChange` event handler, but it is triggered when the input loses focus, such as when the user clicks away from the input. The value of the input is passed to a function `toNumber`, which converts the string value of the input to a number. This is useful when the input represents a numeric value, as it ensures that the state of the form is stored as a number and not a string.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op57aiy9jsaw5a9c3ofz.png)

---

**_How to handle numeric values:_**

The `toNumber` function takes a value of any type, removes all non-numeric characters, converts the resulting string to a number using `parseFloat`, and returns the converted number. If the value cannot be converted to a number, the function returns 0.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juw2py8ofazal38eb3pp.png)

---

**_How to format currency:_**

The `formatCurrency` function takes a value of any type, formats it as a currency using the `FORMATTER` currency formatter, and returns the formatted currency string. The formatter is set up with options for **US dollars** and with a maximum of two fraction digits in the output.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vj6xvutip4ckg0ao94pi.png)

---

**_Interface in TypeScript:_**

The `FormState` interface describes the structure of an object used to store the state of the calculator form, and the `InitialFormState` constant is an object with the initial state of the calculator form, with all values set to null.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jz5gn4ln0wlxnwt78ca.png)


---

🍀Conclusion:

Please consider following and supporting us by subscribing to our channel. Your support is greatly appreciated and will help us continue creating content for you to enjoy. Thank you in advance for your support!

[YouTube](https://youtube.com/@codeofrelevancy)
[Discord](https://discord.com/invite/f8jwnzcRz2)
[GitHub](https://github.com/codeofrelevancy)