This project calculates and displays a fictional Stardate based on the original Star Trek concept. It features a prominent Stardate display, the current date and time, a "Copy Stardate" button, and decorative floating bubbles.
Features
- Dynamic Stardate Calculation: Calculates a Stardate value based on the current date and time.
- Visually Appealing Display: The Stardate and current date/time are presented in a clear and visually appealing format.
- Copy Functionality: Users can easily copy the Stardate to their clipboard with a single click.
- Floating Bubble Effect: Adds a subtle and whimsical touch with animated floating bubbles in the background.
Technologies
- HTML: Used for basic page structure.
- CSS: Responsible for styling the appearance of all elements.
- JavaScript: Handles Stardate calculations, date/time updates, copy functionality, and the floating bubble animation.
Setup
Prerequisites
- A web browser (Chrome, Firefox, Edge, etc.)
Instructions
-
Download or Clone:
- Download: Download the project files as a ZIP archive from GitHub and extract them.
- Clone (requires Git): Open your terminal or command prompt and use the following command:
git clone https://github.com/RobinHirst11/stardate.git
-
Navigate to the Project Directory:
-
Open your terminal or command prompt.
-
Use the
cd
command to change into the downloaded or cloned project directory:cd stardate
-
-
Open in Browser:
-
Double-click: Locate the
index.html
file and double-click to open it in your default web browser. -
Command Line (optional): If you prefer, open the file from your terminal using a command like:
# For macOS open index.html # For Windows start index.html
-
Customization
- CSS: Modify the
style.css
file to change the colors, fonts, button styles, and bubble animation. - JavaScript: Edit the
script.js
file to adjust the Stardate calculation logic or other behaviors.
Potential Enhancements
- User Input: Add the ability for users to enter a custom date for Stardate calculation.
- Sound Effects: Incorporate subtle Star Trek-themed sound effects.
- Advanced Bubble Effects: Create more elaborate or interactive bubble animations.
Feedback
If you have any suggestions, bug reports, or would like to contribute, please feel free to open an issue or pull request on GitHub.
Enjoy exploring the stars! 🖖