@jow544445

demo!

Building a Simple HTML5 Video PlayerToday I finished a browser-based video player built with HTML, CSS, and JavaScript.The goal was to create a clean and responsive player without relying on external frameworks. Instead of using the browser’s default controls, I implemented a custom interface to better understand how the HTML5 Video API works.Features implemented: Play and pause controlsSeek bar with progress updatesVolume adjustment and mute toggleFullscreen modeCurrent time and total duration displayResponsive layout for desktop and mobile devicesKeyboard-friendly controls

A responsive DNS Lookup Tool built with HTML, CSS, and Vanilla JavaScript. The application allows users to look up different DNS record types, view simulated DNS information, copy lookup results, and store recent searches locally in the browser.

Building Domain Info … Today I finished the first version of Domain Info, a simple web application that lets users inspect a domain and retrieve useful networking information in one place.What I builtDomain lookupDNS record viewerIP geolocationWHOIS informationResponsive user interfaceError handling for invalid domainsThe project uses the free APIs from Hack Club, so no API key is required, making it easy for anyone to try.Design improvementsI spent time redesigning the interface to make it feel cleaner and more modern. Instead of using a plain layout, I focused on:Better spacingImproved typographyResponsive cardsCleaner color paletteSimpler navigationThe goal was to make technical information easier to read without overwhelming the user.ChallengesOne of the biggest challenges was handling the different API responses. Some domains don’t expose the same information, so I added validation and graceful fallbacks to avoid breaking the UI.Another challenge was keeping the interface lightweight while displaying a large amount of networking data.What I learnedWorking on this project helped me understand:DNS records and how they workWHOIS lookupsFetching data from multiple APIsBetter frontend state managementCreating responsive layouts with HTML, CSS, and JavaScriptNext stepsFor future updates, I plan to add:SSL certificate informationDNS propagation checkerDomain availability searchExport results as JSON or PDFSearch historyDark/Light mode toggleOverall, this was a fun project that helped me improve both my frontend development skills and my understanding of networking concepts.

DEMO!!

Text-to-Speech App

Inspiration

I really wanted to make a tool that can turn written text into spoken words right in the browser. This can be really helpful for people who need it for accessibility or for people who want to learn languages or even just for people who want to listen to something instead of reading it. The Text-to-Speech App can make it easier for people to get the information they need.

What the Text-to-Speech App does

The Text-to-Speech App lets users do the following things:

• Convert any text into speech using the Text-to-Speech App.

• Choose from the voices on their device using the Text-to-Speech App.

*. Stop speech playback instantly using the Text-to-Speech App.

• Read paragraphs smoothly using the Text-to-Speech App.

• Use an responsive interface that works across modern browsers using the Text-to-Speech App.

How I built the Text-to-Speech App

I built the Text-to-Speech App using the following things:

• HTML5

• CSS3

• Vanilla JavaScript

• Web Speech API which is also known as SpeechSynthesis

The browsers built-in Speech Synthesis API handles voice generation for the Text-to-Speech App while JavaScript manages voice loading, playback controls and user interactions for the Text-to-Speech App.

Challenges I ran into

One of the challenges I faced was handling voice availability across different browsers for the Text-to-Speech App. Since available voices load asynchronously and differ between operating systems I had to make sure the voice list updated correctly and the Text-to-Speech App remained stable regardless of the users environment.

Another challenge was creating an user experience when starting, stopping and changing speech without interruptions for the Text-to-Speech App.

Accomplishments that I am proud of

I built a fully functional Text-to-Speech App without using external libraries.

I created an easy-to-use interface for the Text-to-Speech App.

I successfully integrated multiple system voices through the Web Speech API for the Text-to-Speech App.

I made the Text-to-Speech App lightweight. Fast since everything runs locally in the browser.

What I learned

This project helped me better understand the following things:

The Web Speech API

Browser compatibility considerations

JavaScript event handling

Building interactive browser applications without frameworks

What is next for the Text-to-Speech App

Future improvements for the Text-to-Speech App include:

• Uploading PDF and TXT files to the Text-to-Speech App.

• Downloading generated speech as audio from the Text-to-Speech App.

• Word-by-word highlighting while reading using the Text-to-Speech App.

• pitch, rate and volume controls for the Text-to-Speech App.

• Dark mode for the Text-to-Speech App.

• Keyboard shortcuts for the Text-to-Speech App.

• Support for languages and voice filtering for the Text-, to-Speech App.

A minimal yet powerful browser-based text editor built with HTML, CSS, and JavaScript. Format your text with various styling options directly in your web browser. DEMO!!!

Drawing App in JavaScript HTML CSS. In this video, we go over how to draw on the canvas using mouse and pointer events, add a color picker input to select colors to draw with, add a slider range input to change the pen size, and add buttons with click handlers to clear and fill the canvas, and save/download the image that you have drawn.

demo

🎮 OneKey GameOneKey Game is a fast-paced, single-button arcade game built using HTML5, CSS3, and Vanilla JavaScript. The game challenges players to rely on precise timing and quick reflexes, proving that simple controls can create an engaging and addictive experience.✨ Features🎯 One-key gameplay that’s easy to learn but difficult to master.⚡ Smooth animations and responsive controls.🏆 Real-time score tracking.🎨 Clean and modern user interface.📱 Responsive design that works across desktop and mobile browsers.🚀 Lightweight implementation with no external frameworks.🕹️ How to PlayPress the designated key (or tap on mobile) to control the player.Avoid obstacles and survive as long as possible.Earn points by staying alive and improving your reaction time.Challenge yourself to beat your highest score.🛠️ Built WithHTML5CSS3Vanilla JavaScript🎯 GoalThe objective of this project is to demonstrate how a fun and challenging arcade game can be created using only native web technologies while keeping the code simple, efficient, and easy to understand.Enjoy the game and see how far your reflexes can take you! 🚀

Building a Web Calculator .. I wanted to build something that looked simple at first but would let me practice writing clean JavaScript and handling user interactions. A calculator felt like the perfect project because there’s more going on behind the scenes than it seems.I started with the basic layout using HTML and CSS, making sure it was responsive so it would work well on both desktop and mobile screens. After that, I focused on getting the core calculations working. Basic operations were straightforward, but adding scientific functions like factorial, square root, logarithm, powers, and modulus required more input processing before evaluating expressions.One of the challenges I ran into was handling invalid expressions. Users don’t always type perfectly, so I added input validation and automatically closed missing parentheses to reduce errors. I also made sure the calculator displayed a friendly error message instead of crashing whenever an invalid calculation occurred.The feature I enjoyed the most was keyboard navigation. Instead of limiting the calculator to mouse clicks, I added support for navigating between buttons with the arrow keys and activating them from the keyboard. It made the application feel much closer to using a real calculator.To make the experience more interactive, I also added sound effects for button presses, calculations, deleting characters, and errors. They’re small details, but they make the interface feel more responsive and satisfying to use.Overall, this project helped me get more comfortable with DOM manipulation, keyboard events, regular expressions, input validation, and building interactive interfaces using plain JavaScript without relying on any frameworks. It was a fun reminder that even a simple application can involve a lot of interesting problem-solving.