HTML ⛶ <div id="sign"> <div id="red-circle"> </div> <div id="blue-label">Mind the Gap</div> </div> <center><input type="button" value="Change Text" onClick="JavaScript: changeText();" style="margin-top: 160px;"></center> <center><input type="button" value="Change Red Circle" onClick="JavaScript: changeRedCircle();" style="margin-top: 10px;"></center>
CSS 🛠⛶ #red-circle { width:220px; height:220px; border-radius:50%; border: 50px #FF0000 solid; margin:30px auto; } #blue-label { width: 400px; margin: -220px auto 0px auto; padding: 10px; background-color: #0000AA; color: #FFFFFF; text-align: center; font-family: "Gill Sans", "Gill Sans MT", "Arial"; font-size: 40px; letter-spacing: 2px; text-transform: uppercase; }
JavaScript ⛶ function changeText() { var text; text=prompt("Type a message (e.g. Carry On):"); document.getElementById("blue-label").innerHTML=text; } function changeRedCircle() { var color; color=prompt("Type a a color code:"); document.getElementById("red-circle").style.borderColor = color; }