Skip to content

Cambios realizados #3

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

Open
lapzdev wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Cambios realizados #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b6a0af6
personalizado
lapzdev Jun 13, 2026
1a31918
primer commit mío
lapzdev Jun 13, 2026
e3aa41a
Update index.html
lapzdev Jun 13, 2026
e010775
actualizando main
lapzdev Jun 14, 2026
9aa4c03
actualizado
lapzdev Jun 14, 2026
0da1073
para push
lapzdev Jun 15, 2026
cc03ad6
otro
lapzdev Jun 15, 2026
01a8094
este
lapzdev Jun 15, 2026
68c96cd
y otroo más
lapzdev Jun 15, 2026
f3802e5
esteee
lapzdev Jun 15, 2026
0051770
para el push
lapzdev Jun 18, 2026
60f9c71
nuevo push
lapzdev Jun 18, 2026
1f7f1b1
preparado
lapzdev Jun 18, 2026
02257cb
notas añadidas
lapzdev Jun 19, 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
115 changes: 64 additions & 51 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,66 +3,78 @@ let clickCount = 0;
let currentBackgroundIndex = 0;

// Background color variations
const backgroundClasses = ['', 'bg-variant-1', 'bg-variant-2', 'bg-variant-3', 'bg-variant-4'];
const backgroundClasses = [
"",
"bg-variant-1",
"bg-variant-2",
"bg-variant-3",
"bg-variant-4",
];

// Function to change background color
function changeBackgroundColor() {
// Increment click counter
clickCount++;
document.getElementById('clickCounter').textContent = `Clicks: ${clickCount}`;

// Remove current background class
document.body.className = '';

// Cycle through background variations
currentBackgroundIndex = (currentBackgroundIndex + 1) % backgroundClasses.length;

// Apply new background class
if (backgroundClasses[currentBackgroundIndex]) {
document.body.classList.add(backgroundClasses[currentBackgroundIndex]);
}

// Add a fun animation effect
document.getElementById('colorButton').style.transform = 'scale(0.95)';
setTimeout(() => {
document.getElementById('colorButton').style.transform = '';
}, 150);
// Increment click counter
clickCount++;
document.getElementById("clickCounter").textContent = `Clicks: ${clickCount}`;

// Remove current background class
document.body.className = "";

// Cycle through background variations
currentBackgroundIndex =
(currentBackgroundIndex + 1) % backgroundClasses.length;

// Apply new background class
if (backgroundClasses[currentBackgroundIndex]) {
document.body.classList.add(backgroundClasses[currentBackgroundIndex]);
}

// Add a fun animation effect
document.getElementById("colorButton").style.transform = "scale(0.95)";
setTimeout(() => {
document.getElementById("colorButton").style.transform = "";
}, 150);
}

// Welcome message when page loads
document.addEventListener('DOMContentLoaded', function() {
console.log('🎉 Welcome to your first web app!');
console.log('💡 Tip: Open the browser developer tools (F12) to see this message and experiment with the console!');

// Add some console styling for fun
console.log('%c🚀 Ready for development!', 'color: #667eea; font-size: 16px; font-weight: bold;');

// Show a brief welcome animation
document.body.style.opacity = '0';
document.body.style.transition = 'opacity 0.5s ease-in';

setTimeout(() => {
document.body.style.opacity = '1';
}, 100);
document.addEventListener("DOMContentLoaded", function () {
console.log("🎉 Welcome to your first web app!");
console.log(
"💡 Tip: Open the browser developer tools (F12) to see this message and experiment with the console!",
);

// Add some console styling for fun
console.log(
"%c🚀 Ready for development!",
"color: #667eea; font-size: 16px; font-weight: bold;",
);

// Show a brief welcome animation
document.body.style.opacity = "0";
document.body.style.transition = "opacity 0.5s ease-in";

setTimeout(() => {
document.body.style.opacity = "1";
}, 100);
});

// Fun keyboard shortcut (press 'c' to change colors)
document.addEventListener('keydown', function(event) {
if (event.key.toLowerCase() === 'c') {
changeBackgroundColor();
}
document.addEventListener("keydown", function (event) {
if (event.key.toLowerCase() === "c") {
changeBackgroundColor();
}
});

// Display current time (updates every second)
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
// Create time display if it doesn't exist
if (!document.getElementById('currentTime')) {
const timeDisplay = document.createElement('div');
timeDisplay.id = 'currentTime';
timeDisplay.style.cssText = `
const now = new Date();
const timeString = now.toLocaleTimeString();

// Create time display if it doesn't exist
if (!document.getElementById("currentTime")) {
const timeDisplay = document.createElement("div");
timeDisplay.id = "currentTime";
timeDisplay.style.cssText = `
position: fixed;
top: 10px;
right: 10px;
Expand All @@ -73,10 +85,11 @@ function updateTime() {
color: #4a5568;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
`;
document.body.appendChild(timeDisplay);
}

document.getElementById('currentTime').textContent = `Current time: ${timeString}`;
document.body.appendChild(timeDisplay);
}

document.getElementById("currentTime").textContent =
`Current time: ${timeString}`;
}

// Update time every second
Expand Down
197 changes: 141 additions & 56 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Client-side web app</title>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Client-side web app</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
<h1>🎉 Welcome to your web app!</h1>
<p>Congratulations on setting up your local development environment!</p>
</header>

<main>
<section class="info-card">
<h2>What you've accomplished</h2>
<ul>
<li>✅ Set up a local development environment</li>
<li>✅ Installed Node.js dependencies</li>
<li>✅ Started a local web server that uses <a href="https://www.npmjs.com/package/http-server" target="_blank"><code>http-server</code></a></li>
<li>✅ Previewed a live version of your app</li>
</ul>
</section>

<section class="experiment-zone">
<h2>Try this!</h2>
<p>Make changes to this HTML file or the CSS file and save. Then refresh your browser to see the changes.</p>

<div class="interactive-demo">
<button id="colorButton" onclick="changeBackgroundColor()">Click me to change background color</button>
<p id="clickCounter">Clicks: 0</p>
</div>
</section>

<section class="learning-tips">
<h2>Next Steps</h2>
<div class="tip-grid">
<div class="tip">
<h3>🎨 Styling</h3>
<p>Edit <code>styles.css</code> to change how your app looks</p>
</div>
<div class="tip">
<h3>⚡ Functionality</h3>
<p>Edit <code>app.js</code> to add more interactive features</p>
</div>
<div class="tip">
<h3>📱 Responsive</h3>
<p>Try resizing your browser window to see responsive design</p>
</div>
</div>
</section>
</main>

<footer>
<p>Happy coding! 🚀</p>
</footer>

<script src="app.js"></script>
<header>
<h1>🎉Bienvenido a tu aplicación Web!👌</h1>
<p>Felicitaciones por configurar tu entorno de desarrollo local!</p>
</header>

<main>
<section class="pruebas tip">
<h2>Secciones</h2>
<ul>
<li><a href="#uno">What you've accomplished</a></li>
<li><a href="#dos">Try this!</a></li>
<li><a href="#tres">Next Steps</a></li>
<li><a href="#cuatro">Datos personales</a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

</ul>
</section><br><br>

<section class="info-card">
<h2 id="uno">What you've accomplished</h2>
<ul>
<li>✅ Set up a local development environment</li>
<li>✅ Installed Node.js dependencies</li>
<li>✅ Started a local web server that uses <a class="otra" href="https://www.npmjs.com/package/http-server"
target="_blank"><code>http-server</code></a></li>
<li>✅ Previewed a live version of your app</li>
</ul>
</section>

<section class="experiment-zone">
<h2 id="dos">Try this!</h2>
<p>Make changes to this HTML file or the CSS file and save. Then refresh your browser to see the changes.</p>

<div class="interactive-demo">
<button id="colorButton" onclick="changeBackgroundColor()">Click me to change background color</button>
<p id="clickCounter">Clicks: 0</p>
</div>
</section>

<section class="learning-tips">
<h2 id="tres">Next Steps</h2>
<div class="tip-grid">
<div class="tip">
<h3>🎨 Styling</h3>
<p>Edit <code>styles.css</code> to change how your app looks</p>
</div>
<div class="tip">
<h3>⚡ Functionality</h3>
<p>Edit <code>app.js</code> to add more interactive features</p>
</div>
<div class="tip">
<h3>📱 Responsive</h3>
<p>Try resizing your browser window to see responsive design</p>
</div>
</div>
</section>
<section class="pruebas tip">
<h2 id="cuatro">Datos personales</h2>
<form action="http://localhost:8080/send?" target="_blank">
<label for=""><b>Nombre:</b>
<!-- pattern="^[A-Za-zÑñÁáÉéÍíÓóÚú1-0\s]+$" esta expresión en el pattern (patrón en español) te permite agregar mayúsculas y minúsculas, Eñes y vocales acentuadas, números del 0 al 9 y espacios en blanco( \s)-->
<input type="text" name="nombre" required placeholder="<--Escriba su nombre aquí-->" size="30"
pattern="^[A-Za-zÑñÁáÉéÍíÓóÚú0-9\s]+$"></label><br>
<label for=""><b>Correo electrónico:</b>
<input type="email" name="email" title="Debe rellenar este campo" required
autocomplete="true"></label><br><br>
<label>
<input type="radio" name="idioma" value="es" checked>
Español
</label><br>
<label>
<input type="radio" name="idioma" value="in">
Inglés
</label><br>
<label>
<input type="radio" name="idioma" value="pr">
Portugués
</label><br>
<label>
<input type="radio" name="idioma" value="it">
Italiano
</label><br>
<input type="submit" value="confirmar"> <br>
<input type="reset" value="denegar">


</form>
<br><br>
<hr>
<h4>Whatssapp</h4><br>
<form action="https://api.whatsapp.com/send?" target="_blank">

<label for=""><b>Teléfono:</b>
<input type="tel" name="telef" title="Debe rellenar este campo" required
placeholder="--Escriba su número telefónico aquí--" size="30"></label><br><br>
<label for=""><b>Texto:</b>
<input type="text" name="text" required placeholder="--Escriba texto aquí--" size="30"></label><br><br>
<label for="selector"><b>Lenguaje: </b></label><select name="lenguaje" id="selector">
<option value="1" selected>Java</option>
<option value="2">JavaScript</option>
<option value="3">Python</option>
</select><br><br>
<!-- Para los checkbox y los Radio no es es estrictamente necesario el atributo value ya que al ejecutarse el sistema le pone el valor on que puede ser 1 o true lo cuales son valores positivos. -->
<label>
<input type="checkbox" name="terminos" required title="Debe aceptar para continuar">
¿Acepta términos y condiciones?</label><br>
<input type="submit" value="confirmar">
<input type="reset" value="denegar">
</form>
</section><br>
<section class="pruebas tip">
<h4>Formulario de contacto</h4>
<form action="http://formsubmit.co/lapzdev@gmail.com" method="post">
<input type="text" name="nombre" placeholder="--Escribe tu nombre--" pattern="^[A-Za-zÑñÁáÉéÍíÓóÚú\s]+$"
title="Sólo acepta letras y espacios en blanco"><br>
<input type="email" name="correo" placeholder="--Escribe tu correo--"
pattern="^(\w+[/./-]?){1,}@[a-z]+[/.]\w{2,}$" required title="Formato de correo inválido"><br>
<!-- Las textarea no aceptan el atributo pattern pero si aceptan el atributo required.. .-->

<textarea name="comentarios" id="" cols="30" rows="10"></textarea><br>
<input type="submit">
</form>
</section>
</main>

<footer>
<p>Feliz Codificación! 🚀</p>
</footer>

<script src="app.js"></script>
</body>
</html>

</html>
1 change: 1 addition & 0 deletions notas-mias.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Este es un markdown para anotar los cambios efectuados a partir del original
Loading