diff --git a/index.html b/index.html
index 4f54a61..82ca896 100644
--- a/index.html
+++ b/index.html
@@ -1,58 +1,91 @@
-
+
-
-
-
+
+
+
Timestamp Generator and Converter
-
-
-
-
+
+
+
+
+
+
+
- Timestamp Generator and Converter
+ Converter and timestamp generator
-
-
- Current Timestamp
-
-
-
-
-
-
-
-
-
-
-
-
+
+ Current Timestamp
+
+
+
+
+
+
+
+
+
+
+
+
-
+
diff --git a/scripts.js b/scripts.js
index cca87c2..507fa96 100644
--- a/scripts.js
+++ b/scripts.js
@@ -1,66 +1,63 @@
function getCurrentTimestamp() {
- const currentTimestamp = Math.floor(Date.now() / 1000);
- return currentTimestamp;
-}
-
-function convertTimestampToDate(timestamp) {
- const date = new Date(timestamp * 1000);
- return date.toLocaleString().replace(",", "");
-}
-
-function convertDateToTimestamp(dateString) {
- const [datePart, timePart] = dateString.split(' ');
- const [day, month, year] = datePart.split('/');
- const [hours, minutes, seconds] = timePart.split(':');
+ const resultButton = document.getElementById(
+ "result-button-get-current-timestamp",
+ );
- const formattedDate = new Date(year, month, day, hours, minutes, seconds);
- const timestamp = Math.floor(formattedDate.getTime() / 1000);
+ const currentTimestamp = Math.floor(Date.now() / 1000);
- return timestamp;
+ resultButton.textContent = currentTimestamp;
+ return currentTimestamp;
}
-document.addEventListener('DOMContentLoaded', function() {
- const currentTimestampButton = document.querySelector('#current-timestamp .get-timestamp-button');
- const currentTimestampResult = document.querySelector('#current-timestamp .results');
-
- const convertToDateFormatButton = document.querySelector('#convert-to-date .convert-to-date-button');
- const convertToDateFormatResult = document.querySelector('#convert-to-date .results');
-
- const convertToTimestampButton = document.querySelector('#convert-to-timestamp .convert-to-timestamp-button');
- const convertToTimestampResult = document.querySelector('#convert-to-timestamp .results');
+function convertTimestampToDate(timestamp) {
+ const resultButton = document.getElementById(
+ "result-button-convert-timestamp-to-date",
+ );
+ const timestampInput = document.getElementById(
+ "input-convert-timestamp-to-date",
+ );
+
+ const date = new Date(parseInt(timestampInput.value) * 1000);
+ const localizedDate = date.toLocaleString().replace(",", "");
+
+ resultButton.textContent = localizedDate;
+ return localizedDate;
+}
- currentTimestampButton.addEventListener('click', function() {
- const currentTimestamp = getCurrentTimestamp();
- currentTimestampResult.textContent = currentTimestamp;
- });
+function convertDateToTimestamp() {
+ const resultButton = document.getElementById(
+ "result-button-convert-date-to-timestamp",
+ );
+ const timestampInput = document.getElementById(
+ "input-convert-date-to-timestamp",
+ );
- convertToDateFormatButton.addEventListener('click', function() {
- const timestampInput = document.querySelector('#convert-to-date .timestamp-input').value;
- const date = convertTimestampToDate(timestampInput);
- convertToDateFormatResult.textContent = date;
- });
+ const formattedDate = new Date(
+ timestampInput.value.replace("p.m.", "PM").replace("a.m.", "AM"),
+ );
+ const timestamp = formattedDate.getTime() / 1000;
- convertToTimestampButton.addEventListener('click', function() {
- const dateInput = document.querySelector('#convert-to-timestamp .date-input').value;
- const timestamp = convertDateToTimestamp(dateInput);
- convertToTimestampResult.textContent = timestamp;
- });
+ if (Number.isNaN(timestamp)) {
+ return alert("Please enter a valid date!");
+ }
- const resultButtons = document.querySelectorAll('.results-button');
+ resultButton.textContent = timestamp;
+}
- resultButtons.forEach(function(button) {
- button.addEventListener('click', function() {
- const result = button.querySelector('.results').textContent;
- copyTextToClipboard(result);
- });
- });
+const resultButtons = document.querySelectorAll(".result-button");
- function copyTextToClipboard(text) {
- const textArea = document.createElement('textarea');
- textArea.value = text;
- document.body.appendChild(textArea);
- textArea.select();
- document.execCommand('copy');
- document.body.removeChild(textArea);
- }
+resultButtons.forEach((button) => {
+ button.addEventListener("click", () => {
+ const result = button.querySelector(".result-text").textContent;
+ copyTextToClipboard(result);
+ });
});
+
+function copyTextToClipboard(text) {
+ const textArea = document.createElement("textarea");
+ textArea.value = text;
+ document.body.appendChild(textArea);
+ textArea.select();
+ document.execCommand("copy");
+ document.body.removeChild(textArea);
+}
diff --git a/styles.css b/styles.css
index dec6c22..2abcbcf 100644
--- a/styles.css
+++ b/styles.css
@@ -1,127 +1,130 @@
:root {
- --text-color: #f5f1f9;
- --primary-color: #779bb1;
- --accent-color: #67a8a0;
- --border-color: #515151;
+ --background: #030204;
+ --surface: #2b2a2b;
+ --text-color: #f5f1f9;
+ --primary-color: #779bb1;
+ --accent-color: #67a8a0;
+ --border-color: #515151;
}
* {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
body {
- font-family: Arial, sans-serif;
- background-color: #030204;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- text-align: center;
- color: var(--text-color);
+ font-family: "Ubuntu Mono", monospace;
+ font-weight: 400;
+ font-style: normal;
+ background-color: var(--background);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ color: var(--text-color);
}
header {
- width: 100vw;
- color: var(--text-color);
- display: flex;
- align-items: center;
- justify-content: center;
- border-bottom: 1px solid var(--border-color);
+ width: 100vw;
+ color: var(--text-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-bottom: 1px solid var(--border-color);
}
main {
- width: 80vw;
- padding: 20px;
- background-color: #151121;
- border: 1px solid var(--border-color);
- border-radius: 5px;
- margin-top: 30px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ padding: 20px;
+ padding-top: 4vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
section {
- background-color: #151121;
- padding: 10px;
- border: 1px solid var(--border-color);
- border-radius: 5px;
- width: 100%;
+ background-color: var(--surface);
+ padding: 10px;
+ border: 1px solid var(--border-color);
+ border-radius: 5px;
+ width: 100%;
}
h1 {
- font-size: 1.50rem;
- margin: 2%;
- color: var(--text-color);
+ font-size: 2rem;
+ margin: 2%;
+ color: var(--text-color);
}
h2 {
- font-size: 1.25rem;
- color: var(--text-color);
+ font-size: 1.25rem;
+ color: var(--text-color);
}
-.results-button {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 10px;
- width: 100%;
- border: 1px solid var(--border-color);
- margin: 10px auto;
- background-color: var(--primary-color);
- color: var(--text-color);
- border-radius: 5px;
- font-size: 1rem;
- cursor: pointer;
+.result-button {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ width: 100%;
+ border: 1px solid var(--border-color);
+ margin: 10px auto;
+ background-color: var(--primary-color);
+ color: var(--text-color);
+ border-radius: 5px;
+ font-size: 1rem;
+ cursor: pointer;
}
.action-button {
- background-color: var(--accent-color);
- color: white;
- border: none;
- padding: 10px 20px;
- border-radius: 5px;
- cursor: pointer;
- width: 100%;
- transition: background-color 0.3s, color 0.3s;
- font-size: 1rem;
+ background-color: var(--accent-color);
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ width: 100%;
+ transition:
+ background-color 0.3s,
+ color 0.3s;
+ font-size: 1rem;
}
.divider {
- width: 100%;
- border-bottom: 2px solid var(--border-color);
- margin: 20px 0;
- background-color: #151121;
+ width: 100%;
+ border-bottom: 2px solid var(--border-color);
+ margin: 20px 0;
+ background-color: #151121;
}
-.timestamp-input, .date-input {
- width: calc(100% - 20px);
- padding: 10px;
- font-size: 1rem;
- border: 1px solid var(--border-color);
- border-radius: 5px;
- margin: 10px 0;
- background-color: #151121;
- color: var(--text-color);
+.input {
+ width: calc(100% - 20px);
+ padding: 10px;
+ font-size: 1rem;
+ border: 1px solid var(--border-color);
+ border-radius: 5px;
+ margin: 10px 0;
+ background-color: #151121;
+ color: var(--text-color);
}
-.results, .icons {
- display: inline-flex;
- align-items: center;
- height: 100%;
+.result-text,
+.icons {
+ display: inline-flex;
+ align-items: center;
+ height: 100%;
}
.icons {
- max-height: 95%;
- padding: 0;
- margin: 0;
- font-size: 1em;
+ max-height: 95%;
+ padding: 0;
+ margin: 0;
+ font-size: 1em;
}
-.results {
- width: 100%;
- font-size: 1rem;
- justify-content: center;
-}
\ No newline at end of file
+.result-text {
+ width: 100%;
+ font-size: 1rem;
+ justify-content: center;
+}