CPM (Cost Per Mille) Calculator Calculate CPM (cost per mille) from ad spend and impressions, or reverse-calculate any variable.

The tool works under the hood using JavaScript and React, a popular front-end library for building user interfaces. It utilizes the `useState` hook to manage state variables such as mode, total cost, total impressions, and CPM input. The calculation logic is implemented in the `calculate` function, which takes these state variables into account and applies the formula CPM = (Total Cost / Total Impressions) × 1,000 to compute the result. This function also handles different modes of calculation, including finding the CPM rate from cost and impressions, calculating total cost from a known rate and impressions, or determining required impressions from rate and budget.

The tool uses HTML5 input elements with specific attributes such as `step` and `type` to restrict user input to numbers and ensure accurate calculations. The result is then formatted using JavaScript's built-in `toFixed` and `toLocaleString` methods to display the calculated values in a human-readable format. For example, the total cost is displayed with two decimal places using `toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })`, while the CPM rate is rounded to two decimal places using `toFixed(2)`. The tool also uses CSS classes such as `glass-input` and `font-mono` to style the input fields and display the results in a visually appealing way.

In terms of data structures, the tool relies on JavaScript objects to store the calculation results, which are then passed as props to the `VisualToolLayout` component. This component is responsible for rendering the controls and preview sections of the tool, using React's JSX syntax to define the user interface. The tool also uses TypeScript type annotations to ensure that the state variables and function parameters have the correct data types, such as `number` or `string`. Overall, the tool's implementation demonstrates a good understanding of front-end development principles and best practices, including the use of modern JavaScript features, React, and CSS styling.