DEV Community: Syed Hammas

🌟 Building a Beautiful Markdown Previewer with HTML, CSS, and JavaScript

Syed Hammas — Mon, 28 Apr 2025 15:39:18 +0000

🛠️ 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.

JavaScript Calculator.

Syed Hammas — Mon, 28 Apr 2025 13:37:54 +0000

🛠 What I Made:

I built a JavaScript Calculator that performs basic arithmetic operations like addition, subtraction, multiplication, and division. The calculator features:

Buttons for each digit (0-9) and operation (+, -, *, /).
A display screen that shows the input and results.
A clear button to reset the calculation.

💻 How I Made It:

HTML Structure:

Designed the calculator layout with buttons for numbers and operations, a display screen (#display), and a reset button (C).
Organized the layout into rows and columns using a simple grid layout for better visual alignment.

CSS Styling:

Styled the calculator with a modern look, using box shadows, rounded corners, and a clean color scheme.
Ensured that the calculator is responsive for smaller screens by adjusting the button sizes and layout using media queries.
Added hover and active button effects to improve user interactivity.

JavaScript Functionality:

Defined a display variable to show the input or result in the calculator.
Created an array of button elements that correspond to digits and operations.
Added event listeners for each button to:
Append digits or operations to the display when clicked.
Evaluate the expression when the equals button (=) is pressed.
Clear the display when the clear button (C) is clicked.
Utilized JavaScript’s eval() method to evaluate the mathematical expression entered by the user.
Operations and Calculation Logic:
Handled basic arithmetic operations: addition, subtraction, multiplication, and division.
The calculator also properly manages operator precedence and parentheses.

Error Handling:

Included error handling for cases like division by zero or invalid input, ensuring the calculator doesn’t break unexpectedly.

📚 What I Learned:

Event Handling and DOM Manipulation:

I learned how to handle click events for the calculator’s buttons and how to dynamically update the display using JavaScript.
Manipulating the DOM to update the UI in real-time was an important skill I developed in this project.

JavaScript Functions:

I improved my understanding of functions in JavaScript, particularly how to define them for specific tasks like performing calculations, appending input to the display, and clearing the screen.

Math Operations and Eval Method:

I gained knowledge of how to use JavaScript's built-in eval() function for evaluating mathematical expressions. I also learned the importance of error handling in case of invalid operations.

CSS Layout and Design:

I enhanced my skills in creating flexible layouts using CSS, such as using the grid layout for organizing buttons and ensuring a responsive design for mobile screens.

Interactive UI Design:

I refined my ability to make interactive UI elements that respond to user input through hover effects, click actions, and smooth transitions.
Learning how to create a user-friendly interface for a calculator with clean and modern design elements was a valuable experience.

Debugging and Optimization:

I faced challenges related to ensuring correct calculations and handling edge cases like invalid inputs. Debugging these issues helped me improve my problem-solving skills.

In summary, the JavaScript Calculator project strengthened my abilities in HTML, CSS, and JavaScript. I learned how to combine dynamic event handling, math operations, and UI design to create a fully functional web-based application. The project enhanced my skills in handling user interactions and debugging real-time applications.

Drum Machine.

Syed Hammas — Mon, 28 Apr 2025 13:18:06 +0000

🛠 What I Made:
I created an interactive Drum Machine where users can play different drum sounds by either:

Clicking on the drum pads on the screen.
Pressing corresponding keys on the keyboard. The machine also displays the name of the currently playing sound in a dynamic text area.

💻 How I Made It:

HTML Structure:

Created the basic structure of the drum machine using HTML. This includes a main container (#drum-machine), a display area (#display) to show which sound is playing, and a container for the drum pads (.pad-container).

CSS Styling:

Applied a dark theme using dark background colors and light text colors.
Used flexbox to center the drum machine container on the screen.
Styled the drum pads with rounded corners, gradients, and interactive hover and active states to make the interface more appealing.
Incorporated responsive design using media queries to ensure the layout adjusts on smaller screens.

JavaScript Functionality:

Defined an array of sounds, each with:
A key that corresponds to a keyboard key (Q, W, E, etc.).
A sound name (id) that appears in the display when the sound is played.
The audio file URL for each drum sound.
Dynamically generated drum pads using JavaScript by looping through the sounds array.
Attached click event listeners to the pads so that clicking a pad plays the corresponding sound.
Added a keydown event listener to play sounds when the user presses corresponding keys on the keyboard.
Used a playSound function to manage audio playback and update the display text.

Interactivity and User Experience:

The drum pads are designed to scale and change color on hover, and to shrink when clicked for a tactile effect.
The display area updates with the name of the sound every time a drum pad is clicked or a key is pressed, providing real-time feedback to the user.

📚 What I Learned:

Dynamic Element Creation:

I learned how to dynamically generate HTML elements (drum pads in this case) using JavaScript. This is useful when you need to create multiple elements based on data (like the sounds array here).

Event Handling:

I gained more experience with handling DOM events, such as click and keydown, to trigger functions and interact with the user interface.

CSS Effects and Transitions:

I learned how to apply gradients, hover effects, and smooth transitions in CSS to enhance the interactivity and design of the user interface.
I also experimented with responsive design using media queries to adjust the layout for different screen sizes.

Audio Handling in JavaScript:

I learned how to embed audio files in HTML and control their playback using JavaScript. This included resetting the audio to play from the beginning when triggered multiple times.

UI/UX Design:

I improved my skills in creating user-friendly interfaces that are visually appealing and interactive, making the experience smoother and more engaging.

Debugging and Testing:

While building the project, I encountered some issues like event listeners not being triggered as expected, but I learned how to debug these problems by using console.log() and ensuring that elements were correctly referenced.

In summary, this project helped me enhance my knowledge of HTML, CSS, and JavaScript to create interactive, visually appealing web applications. I learned how to combine event handling, dynamic content generation, and audio manipulation to build an engaging web-based application.

Random Quote Machine.

Syed Hammas — Mon, 28 Apr 2025 11:44:17 +0000

What I Made:
I created a Random Quote Machine using HTML, CSS, and JavaScript. The app displays random quotes along with their authors and provides functionality for users to tweet them directly. The key features include:

Dynamic Random Quotes: A collection of inspirational quotes displayed each time the user clicks "New Quote."

Tweet Integration: A "Tweet" button allows users to share their favorite quotes on Twitter.

Clean and Accessible Layout: The app is designed to be user-friendly and visually appealing, using modern fonts and a mobile-responsive layout.

How I Made It:
HTML Structure:

I created a container (#quote-box) that holds the quote, author, and buttons.

The "New Quote" button fetches new quotes, and the "Tweet" button generates a shareable Twitter link.

CSS Styling:

I used a simple yet modern design, leveraging Google Fonts (Poppins) for a clean appearance.

I ensured the layout is centered and responsive for all screen sizes, making it user-friendly on both desktop and mobile devices.

JavaScript Logic:

I built an array of quotes and used JavaScript to randomly display a quote when the page loads and when the "New Quote" button is clicked.

The "Tweet" button dynamically generates a Twitter share link with the current quote and author, enabling users to easily tweet the quote.

What I Learned:
JavaScript Functions and DOM Manipulation: This project deepened my understanding of how to manipulate the DOM using JavaScript, especially how to dynamically update content like the text of a quote and the URL of the "Tweet" button.

Event Handling: I learned to handle user interactions efficiently, such as detecting button clicks to trigger actions like fetching a new quote.

CSS Layout and Responsiveness: I got better at using CSS to create responsive layouts, ensuring that the app looks great across all devices.

API and Data Management: Although I didn’t use an external API for quotes, I gained a better understanding of how to work with arrays and data structures to store and retrieve dynamic content.

Conclusion:
This project helped me sharpen my front-end skills by combining HTML, CSS, and JavaScript into a fully functional, interactive app. It was a great way to practice handling user input, working with dynamic content, and improving UI/UX design.

📚25 + 5 Clock – My Pomodoro Timer Project

Syed Hammas — Mon, 28 Apr 2025 10:48:16 +0000

🛠 What I Made
I built a 25 + 5 Clock – a simple but functional Pomodoro Timer app!
It allows users to:

Set custom session and break lengths.

Start, pause, and reset the timer.

Automatically switch between session and break modes.

Play a sound when switching.

This project is styled with basic CSS to keep the interface clean and easy to use.

🧩 How I Made It
HTML: Structured the layout, including sections for session/break controls, the timer, and start/reset buttons.

CSS: Designed a minimal, centered, user-friendly interface with clean buttons and layout.

JavaScript:

Managed timer logic using setInterval and clearInterval.

Handled increment/decrement for session and break lengths.

Implemented start, pause, reset, and mode switching between session and break.

Played an audio beep when the timer hit zero.

Updated the display dynamically as the timer counts down or when settings are adjusted.

✨ What I Learned
Timer logic: Handling countdowns with proper state management (timerRunning, currentMode, etc.).

Event handling: Listening to button clicks for changing timer lengths and controlling the timer.

DOM manipulation: Dynamically updating the display with real-time values.

Audio control: Using JavaScript to play and reset audio elements properly.

User experience (UX): Keeping buttons disabled at the right time and ensuring smooth session/break transitions.

Coding discipline: Managing multiple moving parts like timers, sound, and UI updates cleanly in a simple project.

🌟 Final Thoughts
This project gave me hands-on experience with real-world JavaScript problems like state handling, timing, and dynamic DOM updates — and it felt great seeing it all come together into a polished mini app!