This app aims to demonstrate the impact of donations to charity by showing users the possible results. For example, inputting $10 could display "provide clothes for starving children".
To enhance the user experience, I would like to add styling that includes a fading effect on the end result display. Currently, when the input is changed to a new number, the text in id="text-result" switches without animation.
Additionally, I want to implement the ability to include different images based on changing switch statements.
Thank you!
HTML
<p> If you donate <input type="text" id="donation" value"3" onchange="imag()"> </input>, you could provide <a id="text-result"></a></p>
CSS
body {
background-color: #a3d5d3;
}
#text-result {
opacity: 0;
transition: 2s;
}
JS:
function imag() {
var x = document.getElementById("donation").value;
var text;
var picture;
switch (true) {
case x <= 10:
text = "clothes to starving children";
break;
case x > 10:
text = "clothes to adults";
break;
}
document.getElementById("text-result").innerHTML = text;
document.getElementById("text-result").style.opacity = 1;
}
Check out the codepen here: https://codepen.io/keifreelancing/pen/ExagzxP