Elinv

JavaScript IDE

// Tu código en javascript console.log("Tu primer programa"); console.log("Debug"); try { adddlert("Welcome guest!"); } catch(err) { console.log(`try and catch log "${err.message}"`); }
<!-- Diseña aquí tu web --> <h1 id="prueba">Hola esta es tu primer página</h1> <center> <button class="myButton" onclick="myFunction(this)">Click Aquí</button> </center> <br> <hr> <h1 id="fechayhora"></h1> <center> <button class="myButton" onclick='let text = fechayhora.innerHTML; navigator.clipboard.writeText(text); alert("Fecha y hora enviada al portapapeles.")'> Fecha y hora al portapapeles. </button> </center> <hr> <script> function myFunction(that) { if (that.innerHTML == "Click Aquí"){ that.innerHTML = "Vuelve a hacer click"; document.getElementById("prueba").innerHTML = "Todo en un solo lugar al primer click"; }else{ that.innerHTML = "Click Aquí"; prueba.innerHTML = "Todo en un solo lugar al volver a hacer click"; } } // Tu fecha y hora actual por consola console.log(new Date().toLocaleDateString() + " | " + new Date().toLocaleTimeString()); // Fecha y hora en español var event = new Date(); var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; document.getElementById("fechayhora").innerHTML = event.toLocaleDateString('es-ES', options) + " | " + new Date().toLocaleTimeString(); console.log(event.toLocaleDateString('es-ES', options) + " | " + new Date().toLocaleTimeString()); </script>
/* Estilos */ h1#prueba { color: red; background-color: yellow; } h1#fechayhora { color: cyan; background-color: #7892c2; font-size:4vw; text-shadow:0px 1px 0px #283966; font-family:Arial; text-align: center; } .myButton { box-shadow: 0px 0px 0px 2px #9fb4f2; background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%); background-color:#7892c2; border-radius:10px; border:1px solid #4e6096; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:19px; padding:12px 37px; text-decoration:none; text-shadow:0px 1px 0px #283966; } .myButton:hover { background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%); background-color:#476e9e; } .myButton:active { position:relative; top:1px; }