The Daily Gazette accepts classified ads in several categories. For most ads, the newspaper charges 10
cents per word for the first 50 words, and 8 cents per word for every word after that. Design the Javascript for a program that accepts data about an ad: customer name, ad category (for example,
Apartment for rent), and number of words. Display all the input data and the price for the ad.
To design the JavaScript program that accepts data about an ad and calculates the price, you can follow these steps:
1. Create an HTML form where the user can enter the customer name, ad category, and the number of words for the ad. Include a submit button to trigger the calculation.
2. In your JavaScript code, start by defining the price rates. The first 50 words will be charged at 10 cents per word, and any additional words will be charged at 8 cents per word.
```javascript
const rateFirst50Words = 0.10; // 10 cents per word
const rateAfter50Words = 0.08; // 8 cents per word
```
3. Capture the form input values using JavaScript. You can use the `document.getElementById` method to retrieve the customer name, ad category, and the number of words entered by the user.
```javascript
const customerName = document.getElementById('customer-name').value;
const adCategory = document.getElementById('ad-category').value;
const numberOfWords = parseInt(document.getElementById('word-count').value);
```
4. Calculate the price for the ad based on the number of words entered. If the number of words is less than or equal to 50, use the rate for the first 50 words. Otherwise, calculate the price by multiplying the number of additional words (after the first 50) by the rate for additional words and adding it to the price for the first 50 words.
```javascript
let price = 0;
if (numberOfWords <= 50) {
price = numberOfWords * rateFirst50Words;
} else {
price = (50 * rateFirst50Words) + ((numberOfWords - 50) * rateAfter50Words);
}
```
5. Finally, display the input data and the calculated price to the user. You can create an alert or update an HTML element to show this information.
```javascript
alert(`Customer Name: ${customerName}\nAd Category: ${adCategory}\nNumber of Words: ${numberOfWords}\nPrice: $${price.toFixed(2)}`);
```
Or, you can create an HTML element with an ID, such as `<p id="output"></p>`, and update its content with the ad details using JavaScript:
```javascript
const outputElement = document.getElementById('output');
outputElement.textContent = `Customer Name: ${customerName}\nAd Category: ${adCategory}\nNumber of Words: ${numberOfWords}\nPrice: $${price.toFixed(2)}`;
```
That's it! With these steps, you can design a JavaScript program that accepts ad data, calculates the price, and displays all the input data along with the calculated price.