/blog/Mi BlogHugoBlox Kit (https://hugoblox.com)es-ESMon, 01 Jun 2026 00:00:00 +0000/media/icon_hu_d38b8b3031b7345.png/blog//blog/mi-primer-proyecto/Mon, 01 Jun 2026 00:00:00 +0000/blog/mi-primer-proyecto/<p>¡Hola a todos! Aprovechando el despliegue de este blog, no quería dejar pasar la oportunidad de escribir unas líneas muy especiales para <strong>mis profesores de informática</strong>.</p> <p>Muchísimas gracias por dedicarnos vuestro tiempo, por la visita y, sobre todo, por guiarnos a lo largo de este <strong>Proyecto de Fin de Ciclo (TFC)</strong>. Detrás de cada línea de código que funciona (y de cada error de Spring Boot que conseguimos solucionar), está la base, la paciencia y el nivel de exigencia que nos habéis transmitido en el aula.</p> <p>Este proyecto es el resultado de todo ese esfuerzo compartido. ¡Es un verdadero placer mostraros el fruto de lo aprendido!</p> <div id="comments-section" class="comments-container"> <h3>Comentarios</h3> <div id="comments-list"> <p class="loading">Cargando comentarios...</p> </div> <hr class="comments-separator"> <form id="comment-form" class="comment-form"> <h4>Deja un comentario</h4> <div class="form-group"> <input type="text" id="comment-author" placeholder="Tu nombre" required> </div> <div class="form-group"> <textarea id="comment-content" placeholder="Escribe aquí tu comentario..." rows="4" required></textarea> </div> <button type="submit" class="btn-submit">Enviar comentario</button> </form> </div> <style> .comments-container { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-color, currentColor); color: inherit; } .comment-box { padding: 1rem; margin-bottom: 1rem; background: rgba(128, 128, 128, 0.08); border-radius: 6px; border-left: 4px solid #007bff; } .comment-meta { font-size: 0.85rem; opacity: 0.7; margin-bottom: 0.5rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.75rem; margin-bottom: 1rem; border: 1px solid var(--border-color, rgba(128,128,128,0.4)); background: transparent; color: inherit; border-radius: 4px; } .btn-submit { background: #007bff; color: white; padding: 0.6rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; } .btn-submit:hover { background: #0056b3; } </style> <script> document.addEventListener("DOMContentLoaded", function() { const articleSlug = "mi-primer-proyecto"; const API_URL = "/api/comments"; const commentsList = document.getElementById("comments-list"); const commentForm = document.getElementById("comment-form"); function loadComments() { fetch(`${API_URL}?articleSlug=${articleSlug}`) .then(res => res.json()) .then(data => { commentsList.innerHTML = ""; if (data.length === 0) { commentsList.innerHTML = "<p>No hay comentarios aún. ¡Sé el primero!</p>"; return; } data.forEach(comment => { const div = document.createElement("div"); div.className = "comment-box"; div.innerHTML = ` <div class="comment-meta"> <strong>${escapeHTML(comment.author)}</strong> • ${new Date(comment.createdAt).toLocaleDateString()} </div> <div class="comment-text">${escapeHTML(comment.content)}</div> `; commentsList.appendChild(div); }); }) .catch(err => { commentsList.innerHTML = "<p>Error al cargar los comentarios</p>"; console.error(err); }); } commentForm.addEventListener("submit", function(e) { e.preventDefault(); const author = document.getElementById("comment-author").value; const content = document.getElementById("comment-content").value; fetch(API_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ articleSlug, author, content }) }) .then(res => { if(res.ok) { document.getElementById("comment-author").value = ""; document.getElementById("comment-content").value = ""; loadComments(); } else { alert("Error al enviar el comentario"); } }) .catch(err => console.error(err)); }); function escapeHTML(str) { return str.replace(/[&<>'"]/g, tag => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[tag] || tag)); } loadComments(); }); </script>