xml
Generatore di Racconti
CSS (style.css)
css
body {
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: auto;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type=”text”], select {
width: 100%;
height: 30px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button[type=”submit”], #modifica {
width: 100%;
height: 40px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type=”submit”]:hover, #modifica:hover {
background-color: #0056b3;
}
#racconto {
margin-top: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}
JavaScript (script.js)
javascript
document.getElementById(‘inputForm’).addEventListener(‘submit’, function(event) {
event.preventDefault();
const protagonista = document.getElementById(‘protagonista’).value;
const azione = document.getElementById(‘azione’).value;
const obiettivo = document.getElementById(‘obiettivo’).value;
const stile = document.getElementById(‘stile’).value;
const conclusione = document.getElementById(‘conclusione’).value;
const lunghezza = document.getElementById(‘lunghezza’).value;
let racconto;
if (lunghezza === ‘breve’) {
racconto = `In un mondo di ${stile}, ${protagonista} era noto per ${azione}. Il suo sogno era ${obiettivo}. Dopo molte avventure, ${conclusione}.`;
} else {
racconto = `In un mondo di ${stile}, ${protagonista} era noto per ${azione}. Il suo sogno era ${obiettivo}. Dopo molte avventure, sfide e momenti di gioia, ${conclusione}. La sua storia divenne leggendaria, ispirando generazioni future.`;
}
document.getElementById(‘racconto’).innerHTML = racconto;
document.getElementById(‘modifica’).style.display = ‘block’;
});
document.getElementById(‘modifica’).addEventListener(‘click’, function() {
document.getElementById(‘inputForm’).reset();
document.getElementById(‘racconto’).innerHTML = ”;
document.getElementById(‘modifica’).style.display = ‘none’;
});
