Time-Δ

My Time Delta Project: A Summary My Time Delta project was born from the desire to digitally preserve personal memories and moments for the future. It's a web application built with HTML for structure, CSS for aesthetics, and JavaScript as its core logic.

The "how" involved several key components:

A user-friendly form to input capsule details like title, message, and unlock time.

Integration of the MediaRecorder API to allow users to record personal voice notes directly in the browser. This audio, along with uploaded photos and videos, was converted into Base64 strings for storage.

IndexedDB was chosen for client-side data persistence, securely storing each capsule's rich data, including the Base64 media.

Dynamic rendering displayed capsules across three sections: "Unopened" (unlocked but unrevealed), "Opened," and "Future" (with live countdowns). A crucial revealed flag controlled whether a capsule's message and media were shown, ensuring the "surprise" element.

The development journey came with its share of challenges:

The Elusive Audio Player: The biggest hurdle was getting the recorded audio to play back. Often, the audio player would appear as a blank space. This required deep debugging using browser developer tools to verify:

Microphone access and MediaRecorder functionality.

Correct Base64 data generation (data:audio/webm;base64,...).

Proper assignment of the Base64 string to the tag's src attribute.

Ensuring the element had controls and was visually display: block. This highlighted the importance of inspecting the DOM directly.

Asynchronous Operations: Managing the asynchronous nature of getUserMedia, FileReader (for Base64 conversion), and IndexedDB transactions demanded careful use of promises to prevent race conditions and ensure data integrity.

UI State Management: Reliably updating the UI to reflect a capsule's revealed or opened state, and ensuring all associated media appeared orderly, required precise conditional rendering and re-rendering logic.

Ultimately, building this project honed my skills in browser API integration, systematic debugging, and state management, transforming a simple concept into a personal digital time vault.

Built With

• css
• html
• indexeddb
• javascript
• vscode