saharshg29 · September 21, 2023 08:01
diff --git a/index.js b/index.js
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BMI Calculator</title>
    <style>
     
        body {
            max-width: 100vw;
            max-height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center;
            background: linear-gradient(45deg, #3498db, #e74c3c, #9b59b6, #f39c12);
            background-size: 400% 400%;
            animation: gradientAnimation 15s infinite;
        }

        @keyframes gradientAnimation {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            /* background-color: #ffffff; */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;
            transition: transform 0.3s ease-in-out;
        }

        .container:hover {
            transform: scale(1.05);
        }

        h1 {
            margin-top: 0;
            color: #333333;
        }

        label {
            font-weight: bold;
            display: block;
            width: fit-content;
            background-color: #cccccc;
            margin-bottom: 8px;
            color: #555555;
        }

        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #cccccc;
            border-radius: 4px;
            font-size: 16px;
        }

        button {
            background-color: #007BFF;
            color: #ffffff;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 4px;
            transition: background-color 0.3s ease-in-out;
        }

        button:hover {
            background-color: #0056b3;
        }

        #result {
            font-weight: bold;
            margin-top: 10px;
            color: #333333;
        }
    </style>
 </head>

 <body>
    <div class="container">
        <h1>BMI Calculator</h1>
        <label for="weight">Weight (kg):</label>
        <input type="number" id="weight" placeholder="Enter your weight" step="0.01">
        <br>
        <label for="height">Height (m):</label>
        <input type="number" id="height" placeholder="Enter your height" step="0.01">
        <br>
        <button onclick="calculateBMI()">Calculate BMI</button>
        <div id="result"></div>
        <label for="phoneNumber">Mobile Number:</label>
        <input type="text" id="phoneNumber" placeholder="Enter your mobile number">
        <br>
        <button onclick="sendSMS()">Send SMS</button>
    </div>

    <script>
        function calculateBMI() {
            const weight = parseFloat(document.getElementById('weight').value);
            const height = parseFloat(document.getElementById('height').value);

            if (!isNaN(weight) && !isNaN(height) && height > 0) {
                const bmi = weight / (height * height);
                document.getElementById('result').innerHTML = `Your BMI is: ${bmi.toFixed(2)}`;
            } else {
                document.getElementById('result').innerHTML = "Please enter valid values.";
            }
        }

        function sendSMS() {
            const phoneNumber = document.getElementById('phoneNumber').value;
            const bmiResult = document.getElementById('result').textContent;

            if (phoneNumber && bmiResult) {
                // Replace with your Twilio credentials
                const accountSid = 'AC3c021e7243577dd07bc5dd0889178a50';
                const authToken = '3dd8ecb83065920b98d294c549192cf9';
                const twilioPhoneNumber = '+19253920856';

                const message = `Your BMI is: ${bmiResult}`;

                // Using the Twilio REST API to send SMS
                fetch(`https://api.twilio.com/2010-04-01/Accounts/${accountSid}/Messages.json`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': 'Basic ' + btoa(accountSid + ':' + authToken)
                    },
                    body: new URLSearchParams({
                        To: `+91${phoneNumber}`,
                        From: twilioPhoneNumber,
                        Body: message
                    }),
                })
                    .then(response => response.json())
                    .then(data => {
                        console.log('SMS sent:', data);
                        alert('BMI sent via SMS');
                    })
                    .catch(error => {
                        console.error('Error sending SMS:', error);
                        alert('Failed to send BMI via SMS');
                    });
            } else {
                alert('Please enter a valid mobile number and calculate BMI first.');
            }
        }
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>BMI Calculator</title>
	<style>

	body {
	max-width: 100vw;
	max-height: 100vh;
	font-family: Arial, sans-serif;
	text-align: center;
	background: linear-gradient(45deg, #3498db, #e74c3c, #9b59b6, #f39c12);
	background-size: 400% 400%;
	animation: gradientAnimation 15s infinite;
	}

	@keyframes gradientAnimation {
	0% {
	background-position: 0% 50%;
	}

	50% {
	background-position: 100% 50%;
	}

	100% {
	background-position: 0% 50%;
	}
	}

	.container {
	max-width: 400px;
	margin: 0 auto;
	padding: 20px;
	/* background-color: #ffffff; */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	text-align: center;
	transition: transform 0.3s ease-in-out;
	}

	.container:hover {
	transform: scale(1.05);
	}

	h1 {
	margin-top: 0;
	color: #333333;
	}

	label {
	font-weight: bold;
	display: block;
	width: fit-content;
	background-color: #cccccc;
	margin-bottom: 8px;
	color: #555555;
	}

	input[type="number"],
	input[type="text"] {
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	font-size: 16px;
	}

	button {
	background-color: #007BFF;
	color: #ffffff;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	font-size: 16px;
	border-radius: 4px;
	transition: background-color 0.3s ease-in-out;
	}

	button:hover {
	background-color: #0056b3;
	}

	#result {
	font-weight: bold;
	margin-top: 10px;
	color: #333333;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<h1>BMI Calculator</h1>
	<label for="weight">Weight (kg):</label>
	<input type="number" id="weight" placeholder="Enter your weight" step="0.01">
	<br>
	<label for="height">Height (m):</label>
	<input type="number" id="height" placeholder="Enter your height" step="0.01">
	<br>
	<button onclick="calculateBMI()">Calculate BMI</button>
	<div id="result"></div>
	<label for="phoneNumber">Mobile Number:</label>
	<input type="text" id="phoneNumber" placeholder="Enter your mobile number">
	<br>
	<button onclick="sendSMS()">Send SMS</button>
	</div>

	<script>
	function calculateBMI() {
	const weight = parseFloat(document.getElementById('weight').value);
	const height = parseFloat(document.getElementById('height').value);

	if (!isNaN(weight) && !isNaN(height) && height > 0) {
	const bmi = weight / (height * height);
	document.getElementById('result').innerHTML = `Your BMI is: ${bmi.toFixed(2)}`;
	} else {
	document.getElementById('result').innerHTML = "Please enter valid values.";
	}
	}

	function sendSMS() {
	const phoneNumber = document.getElementById('phoneNumber').value;
	const bmiResult = document.getElementById('result').textContent;

	if (phoneNumber && bmiResult) {
	// Replace with your Twilio credentials
	const accountSid = 'AC3c021e7243577dd07bc5dd0889178a50';
	const authToken = '3dd8ecb83065920b98d294c549192cf9';
	const twilioPhoneNumber = '+19253920856';

	const message = `Your BMI is: ${bmiResult}`;

	// Using the Twilio REST API to send SMS
	fetch(`https://api.twilio.com/2010-04-01/Accounts/${accountSid}/Messages.json`, {
	method: 'POST',
	headers: {
	'Content-Type': 'application/x-www-form-urlencoded',
	'Authorization': 'Basic ' + btoa(accountSid + ':' + authToken)
	},
	body: new URLSearchParams({
	To: `+91${phoneNumber}`,
	From: twilioPhoneNumber,
	Body: message
	}),
	})
	.then(response => response.json())
	.then(data => {
	console.log('SMS sent:', data);
	alert('BMI sent via SMS');
	})
	.catch(error => {
	console.error('Error sending SMS:', error);
	alert('Failed to send BMI via SMS');
	});
	} else {
	alert('Please enter a valid mobile number and calculate BMI first.');
	}
	}
	</script>
	</body>

	</html>