Fiz estes de HTML no notepad++, bloco de notas e até naquelas widget do blogger. Funciona normal, mas não roda na plataforma Fabapp. Pq? Abaixo o código
<div id="date-calculator-widget">
<style>
#date-calculator-widget {
font-family: Arial, sans-serif;
border: 1px solid #ccc;
padding: 15px;
max-width: 300px;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#date-calculator-widget label,
#date-calculator-widget input,
#date-calculator-widget button {
display: block;
margin-bottom: 10px;
width: 100%;
}
#date-calculator-widget button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
#date-calculator-widget button:hover {
background-color: #45a049;
}
#date-calculator-widget #result {
margin-top: 10px;
font-weight: bold;
}
</style>
<h2>Somar 21 Dias a uma Data</h2>
<label for="date-input">Data (AAAA-MM-DD):</label>
<input type="date" id="date-input" required>
<button onclick="calculateNewDate()">Calcular Nova Data</button>
<div id="result"></div>
<script>
function calculateNewDate() {
const dateInput = document.getElementById('date-input').value;
if (!dateInput) {
alert('Por favor, insira a data.');
return;
}
const date = new Date(dateInput);
const daysToAdd = 21;
date.setDate(date.getDate() + daysToAdd);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const newDate = `${year}-${month}-${day}`;
document.getElementById('result').innerText = `Nova Data: ${newDate}`;
}
</script>
</div>