create a offer configurator in wich you can select different 1 option per category from 3 categories, the categories are internet services, telephone services and tv services. make them selectable by clicking a radio button. Write a recite for the final offer in a second block where the price of whole pack is shown and where it states everthying included in the offer, the names of packets and the price of all 3 selected options together. under everything make a button that leads to e mail form that send the offer and asks user for telephone numer
Sure! Below is a simple HTML and JavaScript implementation of an offer configurator that allows users to select one option from each of the three categories: Internet Services, Telephone Services, and TV Services. After making their selections, users can see a summary of their offer, including the total price, and a button to send the offer via email.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offer Configurator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.category {
margin-bottom: 20px;
}
.offer-summary {
margin-top: 20px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h1>Offer Configurator</h1>
<div class="category">
<h2>Internet Services</h2>
<label><input type="radio" name="internet" value="Basic Internet - $30" data-price="30"> Basic Internet - $30</label><br>
<label><input type="radio" name="internet" value="Standard Internet - $50" data-price="50"> Standard Internet - $50</label><br>
<label><input type="radio" name="internet" value="Premium Internet - $70" data-price="70"> Premium Internet - $70</label>
</div>
<div class="category">
<h2>Telephone Services</h2>
<label><input type="radio" name="telephone" value="Basic Phone - $20" data-price="20"> Basic Phone - $20</label><br>
<label><input type="radio" name="telephone" value="Standard Phone - $40" data-price="40"> Standard Phone - $40</label><br>
<label><input type="radio" name="telephone" value="Premium Phone - $60" data-price="60"> Premium Phone - $60</label>
</div>
<div class="category">
<h2>TV Services</h2>
<label><input type="radio" name="tv" value="Basic TV - $25" data-price="25"> Basic TV - $25</label><br>
<label><input type="radio" name="tv" value="Standard TV - $45" data-price="45"> Standard TV - $45</label><br>
<label><input type="radio" name="tv" value="Premium TV - $65" data-price="65"> Premium TV - $65</label>
</div>
<button onclick="generateOffer()">Generate Offer</button>
<div class="offer-summary" id="offerSummary" style="display:none;">
<h2>Your Offer Summary</h2>
<div id="selectedOptions"></div>
<h3>Total Price: $<span id="totalPrice"></span></h3>
<button onclick="sendEmail()">Send Offer via Email</button>
</div>
<script>
function generateOffer() {
const internet = document.querySelector('input[name="internet"]:checked');
const telephone = document.querySelector('input[name="telephone"]:checked');
const tv = document.querySelector('input[name="tv"]:checked');
if (!internet || !telephone || !tv) {
alert("Please select one option from each category.");
return;
}
const selectedOptions = `
Internet: ${internet.value}<br>
Telephone: ${telephone.value}<br>
TV: ${tv.value}
`;
const totalPrice = parseInt(internet.dataset.price) + parseInt(telephone.dataset.price) + parseInt(tv.dataset.price);
document.getElementById('selectedOptions').innerHTML = selectedOptions;
document.getElementById('totalPrice').innerText = totalPrice;
document.getElementById('offerSummary').style.display = 'block';
}
function sendEmail() {
const email = prompt("Please enter your email address:");
const phone = prompt("Please enter your telephone number:");
if (email && phone) {
// Here you would typically send the email using a backend service
alert(`Offer sent to ${email} with phone number ${phone}.`);
} else {
alert("Email and phone number are required.");
}
}
</script>
</body>
</html>
generateOffer(): This function checks if an option from each category is selected. If so, it calculates the total price and displays the selected options and total price in the summary section.sendEmail(): This function prompts the user for their email and phone number. In a real application, you would send this data to a backend service to handle the email sending.You can copy and paste this code into an HTML file and open it in a web browser to see the configurator in action.