forked from marquez.juan/clase-11-ejercicio-integrador
Agrega archivos iniciales
This commit is contained in:
175
estilo.css
Normal file
175
estilo.css
Normal file
@@ -0,0 +1,175 @@
|
||||
/* Hoja de estilo generada con IA */
|
||||
/* 1. Estilos Generales y Tipografía */
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #f4f6f9;
|
||||
color: #333;
|
||||
max-width: 1000px;
|
||||
margin: 40px auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 2. Contenedores Principales */
|
||||
#busqueda, #listado_libros, #agregar {
|
||||
background-color: #ffffff;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 3. Inputs y Campos de Texto de Ancho Completo */
|
||||
input[type="text"], input[type="number"] {
|
||||
width: 100%; /* Ocupa todo el ancho disponible del contenedor */
|
||||
padding: 12px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: #4a69bd;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 4. Estilos de la Tabla (PC y Tablets) */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #4a69bd;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 5. Formulario de Inserción y Botón */
|
||||
#agregar h2 {
|
||||
margin-top: 0;
|
||||
color: #4a69bd;
|
||||
font-size: 1.4rem;
|
||||
border-bottom: 2px solid #4a69bd;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
#boton-agregar {
|
||||
width: 100%; /* Ancho completo por defecto */
|
||||
background-color: #10ac84;
|
||||
color: white;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#error {
|
||||
color: red;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
#boton-agregar:hover {
|
||||
background-color: #0ca37a;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
6. Media Queries para Diseño Responsivo
|
||||
========================================================================== */
|
||||
|
||||
/* Ajustes específicos para PC y Pantallas Grandes */
|
||||
@media (min-width: 768px) {
|
||||
#boton-agregar {
|
||||
width: auto; /* El botón recupera su tamaño normal en PC */
|
||||
padding: 12px 30px;
|
||||
float: right; /* Lo alinea a la derecha para un look más limpio */
|
||||
}
|
||||
#agregar::after { /* Limpia el float del botón */
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/* Adaptación estricta para Teléfonos Móviles */
|
||||
@media (max-width: 600px) {
|
||||
body {
|
||||
margin: 15px auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#busqueda, #listado_libros, #agregar {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Transformación de la tabla a formato de tarjeta para evitar scroll */
|
||||
table, thead, tbody, th, td, tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
tr {
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
td {
|
||||
border: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
padding-left: 50%; /* Espacio para las etiquetas del lado izquierdo */
|
||||
text-align: right; /* Contenido del dato a la derecha */
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Inyección automática de etiquetas de columna */
|
||||
td:before {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
width: 45%;
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #4a69bd;
|
||||
}
|
||||
|
||||
/* Identificadores para cada celda en el móvil */
|
||||
td:nth-of-type(1):before { content: "Título"; }
|
||||
td:nth-of-type(2):before { content: "Autor"; }
|
||||
td:nth-of-type(3):before { content: "Año"; }
|
||||
td:nth-of-type(4):before { content: "Puntaje"; }
|
||||
}
|
||||
36
index.html
Normal file
36
index.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Lista de libros</title>
|
||||
<link rel="stylesheet" href="estilo.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Lista de libros</h1>
|
||||
<div id="busqueda">
|
||||
<input type="text" placeholder="Buscar por título o autor">
|
||||
</div>
|
||||
<div id="listado_libros">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Título</th><th>Autor</th><th>Año</th><th>Puntaje</th></tr>
|
||||
</thead>
|
||||
<tbody id="datos-libros">
|
||||
<tr><td>Ejemplo</td><td>Fulano</td><td>2026</td><td>8</td></tr>
|
||||
<tr><td>Ejemplo 2</td><td>Fulana</td><td>2025</td><td>9</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="agregar">
|
||||
<h2>Agregar nuevo libro</h2>
|
||||
<input type="text" name="titulo" id="titulo" placeholder="Título del libro">
|
||||
<input type="text" name="autor" id="autor" placeholder="Apellido y nombre del autor/a">
|
||||
<input type="number" name="anio" id="anio" placeholder="Año de publicación">
|
||||
<input type="number" name="calificacion" id="calificacion" placeholder="Calificación del libro">
|
||||
<p id="error"></p>
|
||||
<button type="button" id="boton-agregar">Agregar libro</button>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
14
script.js
Normal file
14
script.js
Normal file
@@ -0,0 +1,14 @@
|
||||
let libros = [
|
||||
{ titulo: "El Aleph", anio: 1949, puntaje: 10, autor: "Borges, Jorge Luis" },
|
||||
{ titulo: "Rayuela", anio: 1963, puntaje: 9 , autor: "Cortázar, Julio" },
|
||||
{ titulo: "Dailan Kifki", anio: 1966, puntaje: 8, autor: "Walsh, María Elena" },
|
||||
{ titulo: "La inquietud del rosal", anio: 1916, puntaje: 8, autor: "Alfonsina Storni" },
|
||||
];
|
||||
|
||||
function mostrarTabla(datos) {
|
||||
// Escribir esta función para resolver el punto 1.
|
||||
}
|
||||
|
||||
|
||||
// Invocamos la función al inicio para poblar la tabla con los datos del array
|
||||
mostrarTabla(libros);
|
||||
Reference in New Issue
Block a user