<html>
<head>
<title>Conversor de texto</title>
<!-- Enlace a Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Conversor de texto</h1>
<form>
<div class="form-group">
<label for="texto">Introduce un texto:</label>
<input type="text" class="form-control" id="texto">
</div>
<button type="button" class="btn btn-primary" onclick="convertirMinusculas()">Convertir a minúsculas</button>
<button type="button" class="btn btn-primary" onclick="convertirMayusculas()">Convertir a mayúsculas</button>
<button type="button" class="btn btn-primary" onclick="convertirCapitalizado()">Convertir a Capitalizado</button>
</form>
<br>
<div class="form-group">
<label for="resultado">Resultado:</label>
<input type="text" class="form-control" id="resultado" readonly>
</div>
</div>
<!-- Enlace a Bootstrap JS y jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNSBmJb"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- Script para convertir texto -->
<script>
function convertirMinusculas() {
var texto = document.getElementById("texto").value;
var resultado = texto.toLowerCase();
document.getElementById("resultado").value = resultado;
}
function convertirMayusculas() {
var texto = document.getElementById("texto").value;
var resultado = texto.toUpperCase();
document.getElementById("resultado").value = resultado;
}
function convertirCapitalizado() {
var texto = document.getElementById("texto").value;
var resultado = texto.charAt(0).toUpperCase() +
texto.slice(1).toLowerCase();
document.getElementById("resultado").value = resultado;
}
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.