@toivoa070

Styling the Application with CSS; After building the core functionality, I created the CSS stylesheet to improve the user experience and visual appearance of the application. The stylesheet is responsible for the overall layout, typography, spacing, colors, and responsiveness of the Markdown Previewer. I used CSS to create a clean split-screen interface between the editor and preview pane, making it easy for users to write and view Markdown simultaneously. Additional styling was added for buttons, code blocks, blockquotes, lists, and other rendered Markdown elements to ensure the preview closely resembles how Markdown is typically displayed on modern platforms. The stylesheet also helps maintain consistency throughout the application while keeping the interface simple, readable, and user-friendly. Once the functionality was working, I focused on styling the application to make it more visually appealing and easier to use. Using CSS, I designed the layout, styled the editor and preview sections, and improved the appearance of rendered Markdown elements such as headings, lists, code blocks, and blockquotes. This step helped transform the project from a functional prototype into a more polished application that provides a better user experience.

app.js Overview The file serves as the main controller for the Markdown Previewer application. It manages user interactions, updates the live preview, handles toolbar actions, saves data to Local Storage, synchronizes scrolling, exports content, and applies syntax highlighting. This file connects the user interface with the Markdown parser, ensuring that changes made in the editor are instantly reflected in the preview panel. What I Added: Live Markdown rendering with real-time updates, Debounced rendering to improve performance while typing Scroll synchronization between editor and preview panels Local, Storage support for automatic save and restore Toolbar buttons for common Markdown formatting Copy HTML functionality using the Clipboard API Markdown file download functionality Clear editor and storage reset feature, Basic syntax highlighting for code blocks, Error handling for rendering and storage operations, Application initialization and startup logic. What I Learned: While building app.js, I gained practical experience with modern JavaScript and browser APIs. I learned how to manipulate the DOM, listen for user events, and update page content dynamically. I also explored Local Storage for data persistence, the Clipboard API for copying content, and the Blob API for generating downloadable files. Additionally, I learned performance optimization techniques such as debouncing, implemented scroll synchronization, worked with regular expressions for syntax highlighting, and improved application reliability through error handling and modular JavaScript design. Key Concepts Practiced DOM Manipulation, Event HandlingES6 Modules, Arrow Functions, Local Storage API, Clipboard APIBlob APIError Handling (try/catch)Debouncing, Regular Expressions, Syntax Highlighting, Scroll Synchronization, Dynamic Rendering, Modular JavaScript Architecture User Interface.

Building this Markdown Previewer was a fun and challenging experience. At the beginning, I thought the project would simply involve converting Markdown text into HTML and displaying it on the screen. However, as I started working on the parser and rendering logic, I realized there were many details to consider, from handling different Markdown formats to making sure the output was safe and properly rendered. Throughout the project, I faced several challenges that helped me grow as a developer. Debugging became a major part of the process because even small mistakes in regular expressions or syntax could break the entire parser. I also learned that the order of processing Markdown elements matters, since links, images, bold text, and code blocks can sometimes overlap. Challenges I Faced Understanding and writing regular expressions for different Markdown patterns. Debugging syntax errors and unexpected parser behavior. Handling multiple Markdown elements without conflicts. Learning how to safely render user-generated content. Implementing local storage so user content persists after refreshing the page. Synchronizing the editor and preview pane scrolling. Testing different edge cases to ensure the parser worked correctly. What I Learned, Through this project, I gained a much deeper understanding of frontend development and how text-processing applications work. Some of the key things I learned include; How Markdown is converted into HTML. Using Regular Expressions (Regex) to identify and process text patterns. DOM manipulation with JavaScript. Working with browser APIs such as Local Storage and Clipboard. Creating reusable and organized code using modules. Basic web security concepts such as input sanitization and XSS prevention. Debugging techniques and using browser developer tools effectively. The importance of testing and handling edge cases. Reflection One of the biggest takeaways from this project was realizing that software development is often about problem-solving rather than simply writing code. Many features required multiple attempts before they worked correctly, and each bug taught me something new. While there were moments of frustration, solving those problems was also the most rewarding part of the experience. Overall, this project is helping me improve my JavaScript skills, gain confidence in building applications from scratch, and better understand how real-world web applications process and display user input.

A simple and beginner-friendly Desktop Timer application built using Python, HTML, and CSS. This project allows users to start, pause, and reset a timer with a clean and minimal interface. It is created as a learning project while exploring Python and web development concepts. Also happens to be one of my first projects while learning python.

For a long time, I kept wondering what kind of project I could build that would genuinely improve my coding skills. One day, while working in VS Code, I started paying attention to how convenient it is to write code and instantly see the results. I noticed how different colors highlighted functions and syntax, and how useful live feedback can be while coding. That got me thinking about Markdown and how developers often need to write documentation, notes, and README files. Normally, you have to switch between editing and previewing to see how your Markdown looks. After exploring a few ideas online, I decided to build my own Markdown Previewer from scratch. The application will feature: A split-pane layout with an Editor Pane and a Preview Pane Support for Markdown headings Bold and italic text formatting Links and images Code blocks for displaying code snippets Live preview updates as the user types. The semantic structure of the project is intentionally simple and consists mainly of a element for the toolbar and a element containing the editor and preview sections .For styling, I used fonts from /*https://fonts.googleapis.com*/ and referenced design inspiration from Pinterest and made it Stardance themed. Throughout this project, I have learned more about how Markdown works behind the scenes, including :Parsing block-level elements using regular expressions (Regex)Understanding Markdown syntax rules Structuring applications with semantic HTML Building responsive split-pane layouts Creating real-time content updates with JavaScript. This project has been a great learning experience because it combines HTML, CSS, and JavaScript while introducing me to text parsing and dynamic content rendering. More importantly, it has helped me understand how tools that developers use every day are built and how they work behind the scenes.