saucedo.facundo/TP-Diagnostico
1
0
Fork 0
generated from marquez.juan/Ejercicio-inicial--git-y-HTML
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: code structure for improved readability and maintainability

Browse Source
This commit is contained in:
Facundo Saucedo
2026-04-13 17:08:34 -03:00
parent fcbfc599a1
commit 3998d7e6b1
2 changed files with 857 additions and 826 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/script.js
View File

@@ -1,36 +1,36 @@
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
const target = document.querySelector(this.getAttribute("href"));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
target.scrollIntoView({ behavior: "smooth" });
}
});
});
// Scroll progress bar
const progressBar = document.getElementById('progress-bar');
const progressBar = document.getElementById("progress-bar");
window.addEventListener('scroll', () => {
window.addEventListener("scroll", () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = (scrollTop / docHeight) * 100;
progressBar.style.width = progress + '%';
progressBar.style.width = progress + "%";
});
// Student discount logic
const studentCheckbox = document.getElementById('student');
const studentCheckbox = document.getElementById("student");
const plans = {
normal: { full: 10, label: 'Normal' },
premium: { full: 15, label: 'Premium' }
normal: { full: 10, label: "Normal" },
premium: { full: 15, label: "Premium" },
};
function updatePrices() {
const isStudent = studentCheckbox.checked;
document.querySelectorAll('.radio-group label').forEach(lbl => {
document.querySelectorAll(".radio-group label").forEach((lbl) => {
const input = lbl.querySelector('input[type="radio"]');
if (!input) return;
@@ -41,7 +41,7 @@ function updatePrices() {
if (isStudent) {
lbl.innerHTML = `
<input type="radio" name="plan" value="${input.value}" ${input.checked ? 'checked' : ''} ${input.required ? 'required' : ''}>
<input type="radio" name="plan" value="${input.value}" ${input.checked ? "checked" : ""} ${input.required ? "required" : ""}>
${plan.label} —
<span class="price-original">$${plan.full}/mes</span>
<span class="price-discount">20% OFF</span>
@@ -49,138 +49,137 @@ function updatePrices() {
`;
} else {
lbl.innerHTML = `
<input type="radio" name="plan" value="${input.value}" ${input.checked ? 'checked' : ''} ${input.required ? 'required' : ''}>
<input type="radio" name="plan" value="${input.value}" ${input.checked ? "checked" : ""} ${input.required ? "required" : ""}>
${plan.label} — $${plan.full}/mes
`;
}
});
}
studentCheckbox.addEventListener('change', updatePrices);
studentCheckbox.addEventListener("change", updatePrices);
// Character counter for textarea
const textarea = document.getElementById('reason');
const counter = document.getElementById('reason-counter');
const textarea = document.getElementById("reason");
const counter = document.getElementById("reason-counter");
const MAX_CHARS = 300;
textarea.addEventListener('input', () => {
textarea.addEventListener("input", () => {
const len = textarea.value.length;
counter.textContent = `${len} / ${MAX_CHARS}`;
counter.classList.remove('near-limit', 'at-limit');
counter.classList.remove("near-limit", "at-limit");
if (len >= MAX_CHARS) {
textarea.value = textarea.value.slice(0, MAX_CHARS);
counter.classList.add('at-limit');
counter.classList.add("at-limit");
} else if (len >= MAX_CHARS * 0.8) {
counter.classList.add('near-limit');
counter.classList.add("near-limit");
}
});
// Form validation
function setFieldState(input, isValid) {
const group = input.closest('.field-group');
const group = input.closest(".field-group");
if (!group) return;
group.classList.remove('error', 'success');
if (input.value.trim() === '') return;
group.classList.add(isValid ? 'success' : 'error');
group.classList.remove("error", "success");
if (input.value.trim() === "") return;
group.classList.add(isValid ? "success" : "error");
}
// Name and Lastname
['name', 'lastname'].forEach(id => {
document.getElementById(id).addEventListener('input', function() {
["name", "lastname"].forEach((id) => {
document.getElementById(id).addEventListener("input", function () {
setFieldState(this, this.value.trim().length >= 2);
});
});
// Email
document.getElementById('email').addEventListener('input', function() {
document.getElementById("email").addEventListener("input", function () {
const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.value);
setFieldState(this, valid);
});
// MMAA validation
document.getElementById('expiry').addEventListener('input', function() {
this.value = this.value.replace(/[^\d]/g, '').slice(0, 4);
document.getElementById("expiry").addEventListener("input", function () {
this.value = this.value.replace(/[^\d]/g, "").slice(0, 4);
if (this.value.length > 2) {
this.value = this.value.slice(0, 2) + '/' + this.value.slice(2);
this.value = this.value.slice(0, 2) + "/" + this.value.slice(2);
}
const valid = /^(0[1-9]|1[0-2])\/\d{2}$/.test(this.value);
setFieldState(this, valid);
});
// CVV
document.getElementById('cvv').addEventListener('input', function() {
this.value = this.value.replace(/\D/g, '').slice(0, 4);
document.getElementById("cvv").addEventListener("input", function () {
this.value = this.value.replace(/\D/g, "").slice(0, 4);
setFieldState(this, this.value.length >= 3);
});
// Plan preview logic
const planData = {
normal: {
name: 'Normal',
price: '$10/mes',
priceStudent: '$7.00/mes',
name: "Normal",
price: "$10/mes",
priceStudent: "$7.00/mes",
features: [
'250 g por envío',
'1 café de origen único por mes',
'Envío gratuito',
'Guía de preparación'
]
"250 g por envío",
"1 café de origen único por mes",
"Envío gratuito",
"Guía de preparación",
],
},
premium: {
name: 'Premium',
price: '$15/mes',
priceStudent: '$10.50/mes',
name: "Premium",
price: "$15/mes",
priceStudent: "$10.50/mes",
features: [
'500 g por envío',
'2 cafés de origen único por mes',
'Envío gratuito',
'Guía de preparación',
'Acceso a lotes exclusivos'
]
}
"500 g por envío",
"2 cafés de origen único por mes",
"Envío gratuito",
"Guía de preparación",
"Acceso a lotes exclusivos",
],
},
};
const planPreview = document.getElementById('plan-preview');
const planPreviewName = document.getElementById('plan-preview-name');
const planPreviewPrice = document.getElementById('plan-preview-price');
const planPreviewFeatures = document.getElementById('plan-preview-features');
const planPreview = document.getElementById("plan-preview");
const planPreviewName = document.getElementById("plan-preview-name");
const planPreviewPrice = document.getElementById("plan-preview-price");
const planPreviewFeatures = document.getElementById("plan-preview-features");
function updatePlanPreview() {
const selected = document.querySelector('input[name="plan"]:checked');
if (!selected) {
planPreview.classList.remove('visible');
planPreview.classList.remove("visible");
return;
}
const plan = planData[selected.value];
const isStudent = document.getElementById('student').checked;
const isStudent = document.getElementById("student").checked;
planPreviewName.textContent = plan.name;
planPreviewPrice.textContent = isStudent ? plan.priceStudent : plan.price;
planPreviewFeatures.innerHTML = plan.features
.map(f => `<li>${f}</li>`)
.join('');
.map((f) => `<li>${f}</li>`)
.join("");
planPreview.classList.add('visible');
planPreview.classList.add("visible");
}
document.querySelectorAll('input[name="plan"]').forEach(radio => {
radio.addEventListener('change', updatePlanPreview);
document.querySelectorAll('input[name="plan"]').forEach((radio) => {
radio.addEventListener("change", updatePlanPreview);
});
// Update prices and preview when student checkbox changes
studentCheckbox.addEventListener('change', () => {
studentCheckbox.addEventListener("change", () => {
updatePrices();
updatePlanPreview();
});
// Credit card validation and brand detection
const cardInput = document.getElementById('card');
const cardBrand = document.getElementById('card-brand');
const cardInput = document.getElementById("card");
const cardBrand = document.getElementById("card-brand");
const cardPatterns = {
Visa: /^4/,
@@ -191,7 +190,7 @@ const cardPatterns = {
};
function detectCardBrand(number) {
const clean = number.replace(/\s/g, '');
const clean = number.replace(/\s/g, "");
for (const [brand, pattern] of Object.entries(cardPatterns)) {
if (pattern.test(clean)) return brand;
}
@@ -199,7 +198,7 @@ function detectCardBrand(number) {
}
function validateCard(number) {
const clean = number.replace(/\s/g, '');
const clean = number.replace(/\s/g, "");
if (clean.length < 13) return false;
// Luhn algorithm
@@ -217,82 +216,84 @@ function validateCard(number) {
return sum % 10 === 0;
}
cardInput.addEventListener('input', function() {
cardInput.addEventListener("input", function () {
// Remove non-digits and limit to 16 characters
let val = this.value.replace(/\D/g, '').slice(0, 16);
this.value = val.replace(/(.{4})/g, '$1 ').trim();
let val = this.value.replace(/\D/g, "").slice(0, 16);
this.value = val.replace(/(.{4})/g, "$1 ").trim();
const brand = detectCardBrand(this.value);
const valid = validateCard(this.value);
if (brand) {
cardBrand.textContent = brand;
cardBrand.classList.add('visible');
cardBrand.classList.add("visible");
} else {
cardBrand.classList.remove('visible');
cardBrand.classList.remove("visible");
}
setFieldState(this, valid);
});
// Payment cuotas logic
const paymentSelect = document.getElementById('payment');
const cuotasGroup = document.getElementById('cuotas-group');
const cuotasInput = document.getElementById('cuotas');
const paymentSelect = document.getElementById("payment");
const cuotasGroup = document.getElementById("cuotas-group");
const cuotasInput = document.getElementById("cuotas");
paymentSelect.addEventListener('change', function() {
if (this.value === 'credit') {
cuotasGroup.style.display = 'flex';
cuotasInput.setAttribute('required', '');
paymentSelect.addEventListener("change", function () {
if (this.value === "credit") {
cuotasGroup.style.display = "flex";
cuotasInput.setAttribute("required", "");
} else {
cuotasGroup.style.display = 'none';
cuotasInput.removeAttribute('required');
cuotasInput.value = '';
cuotasGroup.style.display = "none";
cuotasInput.removeAttribute("required");
cuotasInput.value = "";
}
});
// Cuotas validation
cuotasInput.addEventListener('input', function() {
cuotasInput.addEventListener("input", function () {
const val = parseInt(this.value);
setFieldState(this, val >= 1 && val <= 12);
});
// Form submission logic
const form = document.querySelector('form');
const form = document.querySelector("form");
const submitBtn = document.querySelector('.cta-button[type="submit"]');
const confirmation = document.getElementById('form-confirmation');
const confirmDate = document.getElementById('confirm-date');
const subsCounter = document.querySelector('.hero-stats .stat-item:last-child .stat-number');
const confirmation = document.getElementById("form-confirmation");
const confirmDate = document.getElementById("confirm-date");
const subsCounter = document.querySelector(
".hero-stats .stat-item:last-child .stat-number",
);
form.addEventListener('submit', function(e) {
form.addEventListener("submit", function (e) {
e.preventDefault();
// loading state
submitBtn.classList.add('loading');
submitBtn.classList.add("loading");
submitBtn.innerHTML = '<span class="spinner"></span> Procesando...';
setTimeout(() => {
// Hidden form
form.style.transition = 'opacity 0.3s ease';
form.style.opacity = '0';
form.style.transition = "opacity 0.3s ease";
form.style.opacity = "0";
setTimeout(() => {
form.style.display = 'none';
form.style.display = "none";
// Calculate delivery date (7 days from now)
const delivery = new Date();
delivery.setDate(delivery.getDate() + 7);
confirmDate.textContent = delivery.toLocaleDateString('es-AR', {
day: 'numeric',
month: 'long',
year: 'numeric'
confirmDate.textContent = delivery.toLocaleDateString("es-AR", {
day: "numeric",
month: "long",
year: "numeric",
});
// Show confirmation
confirmation.style.display = 'flex';
confirmation.style.display = "flex";
requestAnimationFrame(() => {
requestAnimationFrame(() => {
confirmation.classList.add('visible');
confirmation.classList.add("visible");
});
});
@@ -301,8 +302,6 @@ form.addEventListener('submit', function(e) {
const current = parseInt(subsCounter.textContent);
subsCounter.textContent = current + 1;
}
}, 300);
}, 2000); // simulate processing delay
});

78
src/styles.css
View File

@@ -12,7 +12,8 @@ body {
font-family: Georgia, serif;
}
html, body {
html,
body {
height: 100%;
margin: 0;
padding: 0;
@@ -31,6 +32,7 @@ input[type="number"]::-webkit-inner-spin-button {
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
/* Navbar */
@@ -87,7 +89,7 @@ input[type="number"] {
}
#main-nav ul a::after {
content: '';
content: "";
position: absolute;
bottom: -3px;
left: 0;
@@ -128,14 +130,14 @@ input[type="number"] {
height: calc(100vh - 60px);
display: flex;
align-items: flex-end;
background-image: url('/public/assets/bg-1.jpg');
background-image: url("/public/assets/bg-1.jpg");
background-size: cover;
background-position: center;
overflow: hidden;
}
#hero::before {
content: '';
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
@@ -221,7 +223,9 @@ input[type="number"] {
text-decoration: none;
border-bottom: 1px solid rgba(245, 240, 232, 0.2);
padding-bottom: 1px;
transition: color 0.2s, border-color 0.2s;
transition:
color 0.2s,
border-color 0.2s;
}
.hero-secondary:hover {
@@ -276,13 +280,22 @@ input[type="number"] {
.scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, rgba(245, 240, 232, 0.25), transparent);
background: linear-gradient(
to bottom,
rgba(245, 240, 232, 0.25),
transparent
);
animation: scrollpulse 2s ease-in-out infinite;
}
@keyframes scrollpulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
0%,
100% {
opacity: 0.3;
}
50% {
opacity: 0.8;
}
}
/* Benefits Section */
@@ -353,7 +366,7 @@ input[type="number"] {
}
#beneficios ul li::before {
content: '';
content: "";
display: block;
width: 16px;
min-width: 16px;
@@ -456,8 +469,12 @@ input[type="number"] {
border-right: 1px solid rgba(200, 169, 110, 0.12);
}
.check { color: #c8a96e; }
.dash { color: rgba(245, 240, 232, 0.15); }
.check {
color: #c8a96e;
}
.dash {
color: rgba(245, 240, 232, 0.15);
}
/* Subscription Form */
@@ -558,7 +575,9 @@ select {
font-size: 0.95rem;
padding: 0.6rem 0.75rem;
outline: none;
transition: border-color 0.2s, background 0.2s;
transition:
border-color 0.2s,
background 0.2s;
width: 100%;
}
@@ -632,7 +651,7 @@ textarea {
}
.radio-group input[type="radio"]::after {
content: '';
content: "";
position: absolute;
top: 50%;
left: 50%;
@@ -664,7 +683,9 @@ textarea {
border-radius: 2px;
cursor: pointer;
position: relative;
transition: border-color 0.2s, background 0.2s;
transition:
border-color 0.2s,
background 0.2s;
}
.checkbox-group input[type="checkbox"]:checked {
@@ -673,7 +694,7 @@ textarea {
}
.checkbox-group input[type="checkbox"]::after {
content: '';
content: "";
position: absolute;
top: 2px;
left: 5px;
@@ -816,7 +837,9 @@ textarea {
padding-top: 1.5rem;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.3s ease, transform 0.3s ease;
transition:
opacity 0.3s ease,
transform 0.3s ease;
pointer-events: none;
}
@@ -868,7 +891,7 @@ textarea {
}
.plan-preview-features li::before {
content: '';
content: "";
display: block;
width: 12px;
min-width: 12px;
@@ -907,7 +930,9 @@ textarea {
}
@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
.cta-button.loading {
@@ -928,7 +953,9 @@ textarea {
padding: 3rem 0;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.4s ease, transform 0.4s ease;
transition:
opacity 0.4s ease,
transform 0.4s ease;
}
#form-confirmation.visible {
@@ -978,7 +1005,6 @@ textarea {
color: #c8a96e;
}
/* Footer */
#site-footer {
@@ -1009,8 +1035,12 @@ textarea {
transition: color 0.2s;
}
.footer-logo:hover { color: rgba(245, 240, 232, 0.6); }
.footer-logo:hover span { color: #c8a96e; }
.footer-logo:hover {
color: rgba(245, 240, 232, 0.6);
}
.footer-logo:hover span {
color: #c8a96e;
}
.footer-links {
display: flex;
@@ -1027,7 +1057,9 @@ textarea {
transition: color 0.2s;
}
.footer-links a:hover { color: rgba(245, 240, 232, 0.6); }
.footer-links a:hover {
color: rgba(245, 240, 232, 0.6);
}
.footer-copy {
font-size: 0.72rem;