Skip to content

Add JS interactivity: SPA navigation, data structures, and dynamic content generation #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Add JS interactivity: SPA navigation, data structures, and dynamic content generation #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
63985b7
Initial plan
Copilot Mar 20, 2026
bf18423
feat: add JS interactivity with SPA navigation, data structures and d…
Copilot Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 10 additions & 118 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,131 +1,23 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagina Personal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Barra de navegacion principal -->
<header id="inicio">
<nav aria-label="Navegacion principal">
<a href="#inicio" title="Ir al inicio">Inicio</a>
<a href="#tabla">Tabla</a>
<a href="#galeria">Multimedia</a>
<a href="#contacto">Formulario</a>
<!-- Cabecera: la barra de navegacion se genera dinamicamente con JS -->
<header>
<nav id="nav-principal" aria-label="Navegacion principal"></nav>
</header>

<main>
<!-- Seccion combinada de elementos: texto, lista e imagen -->
<section id="servicios">
<h1>Servicios de desarrollo web</h1>
<ul>
<li>Landing pages</li>
<li>Formularios</li>
<li>Soporte basico</li>
</ul>
<figure>
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=900&q=60" alt="Equipo de trabajo con laptop" width="420" height="280" loading="lazy">
<figcaption>Trabajo remoto y soluciones a medida.</figcaption>
</figure>
</section>
<!-- Contenedor principal: el contenido de cada seccion se inyecta con JS -->
<main id="contenido-principal"></main>

<!-- Tabla solicitada -->
<section id="tabla">
<h2>Tabla de planes</h2>
<table>
<caption>Comparacion de planes</caption>
<thead>
<tr>
<th scope="col">Plan</th>
<th scope="col">Incluye</th>
<th scope="col">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Basico</th>
<td>Pagina informativa, formulario simple</td>
<td>$49</td>
</tr>
<tr>
<th scope="row">Pro</th>
<td>Landing, tabla, integraciones</td>
<td>$99</td>
</tr>
<tr>
<th scope="row">Premium</th>
<td>SEO, analitica, soporte 30 dias</td>
<td>$149</td>
</tr>
</tbody>
</table>
</section>
<!-- Pie de pagina: generado con JS -->
<footer id="pie-pagina"></footer>


<!-- Elemento multimedia -->
<section id="galeria">
<h2>Multimedia</h2>
<iframe width="835" height="470" src="https://www.youtube.com/embed/ksYfa0ix9S4" title="¿Qué es el Servicio de Desarrollo Web? Características y sus beneficios" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

</section>
<a href="https://www.youtube.com/watch?v=9on_3vtGM68">Accede aqui para ver otro similar</a>
<!-- Formulario solicitado con el modelo indicado -->
<section id="contacto">
<h1>Formulario</h1>

<div class="cajaformulario">
<form action="formulario2.html" method="post">
<h2>Nombre y apellidos *</h2>
<input type="text" name="nombre" id="nombre">
<label for="nombre">Nombre</label>
<input type="text" name="apellido" id="nombre">
<label for="apellido">Primer apellido</label>
<input type="text" name="apellido" id="nombre">
<label for="apellido">Segundo apellido</label>
<h2>Direccion *</h2>
<input type="text" name="direccion" id="direccion">
<label for="direccion">Calle, numero, piso, puerta</label>
<input type="text" name="direccion" id="direccion">
<label for="direccion">Codigo postal</label>
<input type="text" name="direccion" id="direccion">
<label for="direccion">Municipio</label>
<select name="provincia" id="direccion">
<option value="nathing" selected="nathing"></option>
<option value="provincia1">Provincia 1</option>
<option value="provincia2">Provincia 2</option>
<option value="provincia3">Provincia 3</option>
</select>
<label for="provincia">Provincia</label>

<select name="pais" id="pais">
<option value="nathing" selected="nathing"></option>
<option value="colombia">Colombia</option>
<option value="brasil">Brasil</option>
<option value="Peru">Peru</option>
</select>
<label for="provincia">Pais</label>

<h2>Email *</h2>
<input type="email" placeholder="Ingresa tu correo">
<h2>Telefono *</h2>
<input type="text">
<label for="telefono">Fijo</label>
<input type="text">
<label for="movil">Movil</label>
<br>
<button>Enviar</button>
</form>
</div>
</section>
</main>



<footer>
<!-- Comentario: pie de pagina con datos simples -->
<p>Contacto: info@ejemplo.com</p>
</footer>
<script src="main.js"></script>
</body>
</html>
Loading