forked from marquez.juan/Ejercicio-inicial--git-y-HTML
Version inicial del TP
This commit is contained in:
6
bootstrap.min.css
vendored
Normal file
6
bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
3
estilo.css
Normal file
3
estilo.css
Normal file
@@ -0,0 +1,3 @@
|
||||
footer {
|
||||
background-color: #AAAAAA;
|
||||
}
|
||||
19
formulario.js
Normal file
19
formulario.js
Normal file
@@ -0,0 +1,19 @@
|
||||
function mostrar_formulario()
|
||||
{
|
||||
let formulario = document.querySelector("#formulario");
|
||||
let boton = document.querySelector("#btn-formulario");
|
||||
|
||||
// Si el formulario está oculto, lo mostramos:
|
||||
if (formulario.classList.contains("d-none")) {
|
||||
formulario.classList.remove("d-none");
|
||||
boton.innerHTML = "Ocultar formulario";
|
||||
} else {
|
||||
formulario.classList.add("d-none");
|
||||
boton.innerHTML = "Mostrar formulario";
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
let boton = document.querySelector("#btn-formulario");
|
||||
boton.addEventListener('click', mostrar_formulario);
|
||||
});
|
||||
96
index.html
Normal file
96
index.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Probando javascript</title>
|
||||
<link rel="stylesheet" href="estilo.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
|
||||
</head>
|
||||
<body class="container">
|
||||
<main role="main">
|
||||
<header>
|
||||
<h1>Este es el título de la página</h1>
|
||||
<h3>Este es el subtitulo</h3>
|
||||
</header>
|
||||
<div class="row">
|
||||
<section class="card col m-4">
|
||||
<h1>Esta es una sección</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
|
||||
aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||
cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollit anim id est laborum.</p>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-success" onclick="mostrar_formulario()">
|
||||
Mostrar formulario (con "onclick")
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card col m-4">
|
||||
<div class="card-header">
|
||||
<h1>Esta es otra sección</h1>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
|
||||
aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||
cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollit anim id est laborum.</p>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-success" id="btn-formulario">
|
||||
Mostrar formulario
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section id="formulario" class="col-6 offset-3 border border-3 border-warning rounded p-3 shadow d-none">
|
||||
<form id="form" action="#">
|
||||
<label for="nya" class="form-label">Nombre y apellido: </label>
|
||||
<input type="text" name="nya" id="nya" class="form-control"><br>
|
||||
|
||||
<label for="opciones">Elegir: </label>
|
||||
<input type="radio" name="opciones" value="m">Masculino
|
||||
<input type="radio" name="opciones" value="f">Femenino
|
||||
<br>
|
||||
|
||||
<label for="mail">Correo electrónico</label>
|
||||
<input type="email" name="mail" id="mail" placeholder="Escriba su email"><br>
|
||||
|
||||
<label for="cuotas">Cantidad de cuotas:</label>
|
||||
<input type="number" name="cuotas" id="cuotas" value="1" min="1" max="12"><br>
|
||||
|
||||
<label for="provincia">Provincia:</label>
|
||||
<select name="provincia" id="provincia">
|
||||
<option value="s">Santa Fe</option>
|
||||
<option value="e">Entre Ríos</option>
|
||||
<option value="c">Córdoba</option>
|
||||
</select><br>
|
||||
|
||||
<div class="form-check form-switch">
|
||||
<input type="checkbox" name="es_estudiante" id="es_estudiante" class="form-check-input">
|
||||
<label for="es_estudiante" class="form-check-label">¿Es estudiante?</label><br>
|
||||
</div>
|
||||
|
||||
<label for="observaciones">Observaciones: </label>
|
||||
<textarea name="observaciones" id="observaciones" rows="8" cols="40"></textarea><br>
|
||||
|
||||
<input type="submit" value="Enviar">
|
||||
</form>
|
||||
</section>
|
||||
<footer>
|
||||
<p>Este es el pie de página, tiene
|
||||
<a href="juansemarquez.com/prog1">un enlace</a>.</p>
|
||||
</footer>
|
||||
</main>
|
||||
<script src="formulario.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user