This week, I began my journey into JavaScript (JS) and discovered a range of powerful features it offers. I practiced using JS to modify HTML elements, handle events, and even implement drag-and-drop functionality. For the project, I built a character selection website, with guidance from Diana, where users can drag and drop items into designated areas. Learning how to link JS files, use document.getElementById to select elements, and create basic functions expanded my understanding of how JS can transform static HTML into an interactive experience. The potential uses for these skills are vast, from enhancing user engagement with page elements to creating highly responsive, interactive web features.
I was excited to dive into JavaScript and see how quickly a few lines of code can introduce interactivity, such as updating images and names dynamically. Successfully implementing functions like characterChangeButton and characterNameParagraph felt gratifying, especially as I saw the page come to life with each click. However, I found the drag-and-drop feature challenging, particularly the logic behind variables like offsetX, offsetY, and draggedImage. These concepts required more trial and error than I expected, which left me feeling a bit overwhelmed. Nonetheless, the challenges kept me engaged, and seeing the project work in the end was rewarding.
This week’s experience showed me that I need to deepen my understanding of JavaScript fundamentals, especially with event handling and variable manipulation. I also want to work on more practical examples involving event listeners, like onDragStart, onDrop, and onDragOver, to strengthen my confidence in building interactive web elements. Improving in these areas will help me troubleshoot more efficiently and allow for more complex and engaging projects in the future.
In addition to what we covered in class, I experimented with the drag-and-drop functionality by working on it in a separate JavaScript file. I referenced online resources to better understand the offsets needed to manage draggable elements. I also experimented with event listeners and tried different class names to improve my CSS efficiency. Both practices have been useful, as reusing class names helps me keep my CSS organized, while experimenting with separate JS files allows me to concentrate on specific elements of functionality without overwhelming my codebase.
One ethical consideration I reflected on was accessibility and inclusivity in web design, particularly related to interactive features like drag-and-drop. For users with limited mobility or those relying on screen readers, drag-and-drop interactions may not be as accessible. Through my research, I realized that designers should strive to create websites that cater to diverse needs by incorporating alternatives to interactive elements, such as keyboard-based navigation. This insight has motivated me to keep accessibility in mind as I move forward with my learning, ensuring that my designs remain inclusive.
Overall, I’m feeling more confident with HTML and CSS, and I’m excited to build my JavaScript skills further. However, I see the importance of revisiting JavaScript fundamentals and practicing small-scale examples of event handling to build a solid foundation. If I could approach the week differently, I’d spend more time studying event handling before diving into a full project.
Going forward, I plan to revisit JavaScript basics, especially event handling and variable manipulation. I’ll work on smaller examples to reinforce these skills before applying them to larger projects. I also aim to make accessibility a priority in my projects by learning techniques that allow for keyboard navigation and alternative interactions. Keeping up with consistent class naming across my projects will also continue to streamline my CSS and make my codebase more manageable. Ultimately, I’m motivated to keep exploring JavaScript, understanding the challenges as an essential part of my learning journey.