🛠️ What I Made
I built a fully functional and visually modern Markdown Previewer using only HTML, CSS, and JavaScript.
This project satisfies all the freeCodeCamp Frontend Libraries Project user stories without relying on frontend frameworks like React.The previewer allows users to type Markdown syntax into a text area and instantly see the rendered HTML in a separate preview pane.
I also added a clean and stylish dark mode to enhance the user experience.
🔧 How I Made It
- HTML:
- Structured the page with a simple container, a textarea (#editor) for input, and a div (#preview) for output.
- CSS:
Designed a modern card-style layout with soft shadows, rounded corners, and smooth background transitions.
Created a responsive design that works well on both desktop and mobile devices.
Implemented a Dark Mode Toggle that switches themes dynamically with minimal flicker.
- JavaScript:
Used the Marked.js library to parse the Markdown into HTML.
Added a real-time event listener (input) on the editor to update the preview instantly as the user types.
Handled the dark mode logic by toggling CSS classes dynamically.
📚 What I Learned
How to manually build interactive front-end applications without relying on heavy frameworks.
Deepened my understanding of DOM manipulation, event listeners, and dynamic HTML rendering.
Improved my skills in designing responsive layouts and creating a dark mode experience from scratch.
Learned the importance of progressively enhancing simple projects with thoughtful UI/UX improvements to deliver a better experience.
Understood how to use external libraries like Marked.js efficiently and integrate automated testing scripts to validate project requirements.
✨ Final Thoughts
Working without React or Vue in this project pushed me to fully appreciate the power of vanilla JavaScript combined with smart CSS.
It was an exciting exercise in focusing on core web development fundamentals while still delivering a polished and professional-looking final product.