/en/blog/My BlogHugoBlox Kit (https://hugoblox.com)en-usMon, 01 Jun 2026 00:00:00 +0000/media/icon_hu_d38b8b3031b7345.png/en/blog//en/blog/building-my-final-project/Mon, 01 Jun 2026 00:00:00 +0000/en/blog/building-my-final-project/<p>Hello everyone! Looking back at the journey that brought me to the field of software development, I must take a moment to look back at my high school years (<strong>Bachillerato</strong>).</p> <p>I want to express my deepest gratitude to <strong>Carlos, my English teacher</strong>. Thank you, Carlos, for your incredible dedication, your patience, and for always motivating us to improve.</p> <p>In tech and web development, English is an essential tool every single day. Thanks to your classes and your encouragement, facing documentation, code repositories, and international tech communities feels much more natural to me today. This project has a piece of that learning too!</p> <div id="comments-section" class="comments-container"> <h3>Comments</h3> <div id="comments-list"> <p class="loading">Loading comments...</p> </div> <hr class="comments-separator"> <form id="comment-form" class="comment-form"> <h4>Leave a comment</h4> <div class="form-group"> <input type="text" id="comment-author" placeholder="Your name" required> </div> <div class="form-group"> <textarea id="comment-content" placeholder="Write your comment here..." rows="4" required></textarea> </div> <button type="submit" class="btn-submit">Submit comment</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 = "building-my-final-project"; 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 comments yet. Be the first!</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 loading comments</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 submitting comment"); } }) .catch(err => console.error(err)); }); function escapeHTML(str) { return str.replace(/[&<>'"]/g, tag => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[tag] || tag)); } loadComments(); }); </script>