Setting Up My Sticky Notes Web App: A Week of Learning and Development

Things I Learned This Week

This week was a productive one as I worked on building my Sticky Notes web app using HTML, CSS, and JavaScript. I deepened my understanding of web development concepts, particularly focusing on user interface design and JavaScript functionality. Here are some key takeaways:

• DOM Manipulation: I learned how to interact with the Document Object Model (DOM) using JavaScript to dynamically create and manage sticky notes.

• CSS Flexbox: I utilized CSS Flexbox for layout management, which significantly improved the responsiveness of my application.

• Event Handling: Understanding how to handle events effectively was crucial for creating an interactive user experience.

Steps I Took

To develop the Sticky Notes web app, I followed these steps:

1. Planning: I started by outlining the core features of the app, such as adding, editing, and deleting notes.

2. Setting Up HTML Structure: I created the initial HTML structure, including a container for the sticky notes and input fields for adding new notes.

3. Styling with CSS: I applied CSS to enhance the visual appeal of the app, using colors and styles that mimicked actual sticky notes.

4. JavaScript Functionality: I implemented JavaScript to handle the logic for adding and removing notes. This involved creating functions to manage user interactions.

Problems I Encountered

As with any development project, I faced several challenges:

• Dynamic Note Creation: Initially, I struggled with dynamically creating new sticky notes and ensuring they appeared on the screen.

• Styling Consistency: I found it challenging to maintain a consistent styling across different browsers and screen sizes.

• User Experience: I had to think critically about how to make the app user-friendly, particularly regarding editing and deleting notes.

How I Solved These Problems

Here’s how I tackled the issues:

• Dynamic Note Creation: I researched DOM manipulation techniques and found a way to use createElement to generate new note elements based on user input.

• Styling Consistency: I tested my app across multiple browsers and utilized CSS reset styles to ensure a more uniform look. I also incorporated media queries to make the app responsive on various screen sizes.

• User Experience: I iterated on the design by seeking feedback from peers, which led to improvements in the layout and functionality, making it easier for users to add, edit, and delete notes.

Resources I Used

Throughout the week, I utilized several resources to aid my learning and development:

• MDN Web Docs: The Mozilla Developer Network provided comprehensive documentation on HTML, CSS, and JavaScript.

• CSS Tricks: A great source for Flexbox and responsive design tips.

• YouTube Tutorials: I followed tutorials on dynamic DOM manipulation and creating interactive web apps, which clarified several concepts.

• Stack Overflow: Whenever I hit a roadblock, the Stack Overflow community was invaluable for finding solutions to specific coding issues.

Conclusion

Building the Sticky Notes web app was an enriching experience that allowed me to apply my web development skills and overcome real-world challenges. I look forward to implementing local storage in the next phase, which will enable users to save their notes even after refreshing the page. Stay tuned for updates!