Skip to content

Commit

Permalink
updating the logics
Browse files Browse the repository at this point in the history
  • Loading branch information
@HarukaYamamoto0
HarukaYamamoto0 committed Mar 26, 2024
1 parent 845a5da commit 6039788
Show file tree
Hide file tree
Showing 3 changed files with 225 additions and 192 deletions.
133 changes: 83 additions & 50 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,91 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Timestamp Generator and Converter</title>
<meta name="description" content="">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<meta
name="description"
content="Take the current timestamp, convert it to a date, or even convert a date to a timestamp"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header>
<h1>Timestamp Generator and Converter</h1>
<h1>Converter and timestamp generator</h1>
</header>
<main>

<section id="current-timestamp">
<h2>Current Timestamp</h2>
<button class="results-button current-timestamp-button">
<span class="results">1695938792</span>
<span class="icons">
<img src="./assets/clipboard.svg">
</span>
</button>
<button class="action-button get-timestamp-button">Get Timestamp!</button>
</section>

<div class="divider"></div>

<section id="convert-to-date">
<h2>Convert Timestamp To Date</h2>
<input class="timestamp-input" type="number" placeholder="Put your timestamp here!">
<button class="action-button convert-to-date-button">Convert!</button>
<button class="results-button convert-to-date-result-button">
<span class="results">01/12/2023 19:59:38</span>
<span class="icons">
<img src="./assets/clipboard.svg">
</span>
</button>
</section>

<div class="divider"></div>

<section id="convert-to-timestamp">
<h2>Convert Date to Timestamp</h2>
<input class="date-input" type="text" placeholder="28/09/2023 20:35:10">
<button class="action-button convert-to-timestamp-button">Convert!</button>
<button class="results-button convert-to-timestamp-result-button">
<span class="results">1695938792</span>
<span class="icons">
<img src="./assets/clipboard.svg">
</span>
</button>
</section>

<section id="section-get-current-timestamp">
<h2>Current Timestamp</h2>
<button class="result-button">
<span id="result-button-get-current-timestamp" class="result-text"
>1695938792</span
>
<span class="icons">
<img src="./assets/clipboard.svg" />
</span>
</button>

<button onclick="getCurrentTimestamp()" class="action-button">
Get Timestamp!
</button>
</section>

<div class="divider"></div>

<section id="section-convert-timestamp-to-date">
<h2>Convert Timestamp To Date</h2>
<input
id="input-convert-timestamp-to-date"
class="input"
type="number"
placeholder="Put your timestamp here!"
/>
<button onclick="convertTimestampToDate()" class="action-button">
Convert!
</button>
<button class="result-button">
<span id="result-button-convert-timestamp-to-date" class="result-text"
>2023-09-28 7:06:32 p.m.</span
>
<span class="icons">
<img src="./assets/clipboard.svg" />
</span>
</button>
</section>

<div class="divider"></div>

<section id="section-convert-date-to-timestamp">
<h2>Convert Date to Timestamp</h2>
<input
id="input-convert-date-to-timestamp"
class="input"
type="text"
placeholder="YYYY-MM-DD hh:mm:ss p.m."
/>
<button
onclick="convertDateToTimestamp()"
class="action-button convert-to-timestamp-button"
>
Convert!
</button>
<button class="result-button">
<span id="result-button-convert-date-to-timestamp" class="result-text"
>1695938792</span
>
<span class="icons">
<img src="./assets/clipboard.svg" />
</span>
</button>
</section>
</main>
<script src="scripts.js"></script>
</body>
</body>
</html>
105 changes: 51 additions & 54 deletions scripts.js
View file
Original file line number Diff line number Diff line change
@@ -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);
}
Loading

0 comments on commit 6039788

Please sign in to comment.