SNOW DAY PREDICTOR
<div class="snow-day-container">
<h1>Snow Day Predictor</h1>
<form id="predictForm">
<label for="zip">Enter ZIP Code:</label>
<input type="text" id="zip" name="zip" placeholder="e.g., 12345" required>
<label for="country">Enter Country Code:</label>
<input type="text" id="country" name="country" placeholder="e.g., US" value="US" required>
<button type="submit">Predict</button>
</form>
<div id="result"></div>
<div id="error" style="color: red;"></div>
</div>
<style>
.snow-day-container {
font-family: 'Arial', sans-serif;
background: #f0f8ff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: auto;
text-align: center;
}
h1 {
font-size: 24px;
color: #0077b6;
}
label {
font-weight: bold;
display: block;
margin-top: 10px;
}
input {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #0077b6;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #005f99;
}
#result {
margin-top: 20px;
font-weight: bold;
color: #2d6a4f;
}
</style>
<script>
document.getElementById('predictForm').addEventListener('submit', async function (e) {
e.preventDefault();
const zip = document.getElementById('zip').value;
const country = document.getElementById('country').value;
const resultDiv = document.getElementById('result');
const errorDiv = document.getElementById('error');
resultDiv.textContent = '';
errorDiv.textContent = '';
try {
const response = await fetch('https://your-server.com/predict', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ zip, country })
});
const data = await response.json();
if (response.ok) {
resultDiv.textContent = `Prediction: ${data.prediction}`;
} else {
errorDiv.textContent = data.error || 'Something went wrong.';
}
} catch (error) {
errorDiv.textContent = 'Error connecting to the server.';
}
});
</script>
Comments
Post a Comment