I have a static website (HTML, CSS, JS) where people can keep track of their times.
I would like it so that they can generate a link that creates a new html page to display their time. I would like this link to be shareable, so other people can see the time.
e.g.
I time myself and get a really good time that I would like to share. I generate a link which is linked to that time, and send it to my friends, who on clicking that link can see the time & other details associated with it.
Is this possible, and if it is, how?
Thanks
I made a working demo to show you what you can do w/o database and keep data unmodified and "secure".
When you press "share" it encode with btoa JS function your time and name value to url and then generate a link.
When someone go to link, it read the params from URL ?time=XXX?name=XXXX and then decode them with atob JS function then set name et timer elements text to display on page.
NOTE: Remove first const queryString = '?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla'; and uncomment const queryString = '?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla'; to make this code work on your page server.
window.onload = function() {
let timerEl = document.getElementById('timer');
let nameEl = document.getElementById('name');
const queryString = '?time=MTBtMjFz&name=U2FtIEJaRVo='; //Get the time parameter index.html?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla" from URL (encoded with javascript)
//Uncomment next line in production
//const queryString = window.location.search;
if (queryString !== '') {
const urlParams = new URLSearchParams(queryString);
const time = urlParams.get('time');
const name = urlParams.get('name');
timerEl.innerText = window.atob(time);
nameEl.innerText = window.atob(name)
}
let share = document.getElementById('share');
share.addEventListener('click', function(e) {
//Generate URL
document.getElementById('sharelink').innerText = 'http://example.com/timer.html?time=' + window.btoa(timerEl.innerText) + '&name=' + window.btoa(nameEl.innerText);
});
}
<!-- Consider this page URL is http://example.com/timer.html -->
<main>
<h1>I'm <span id="name"></span></h1>
<h2> My time is: <span id="timer"></span></h2>
<button id="share">Share my time !</button>
<h3 id="sharelink"></h3>
</main>
if you just need show time and not worry with security you can use get parameters. You make url like: yoursite.com/time?time=20 and in your time page:
function findGetParameter(parameterName) {
var result = null,
tmp = [];
location.search
.substr(1)
.split("&")
.forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
});
return result;
}
// Your time as stored in this variable.
var time = findGetParameter("time");
but i recommend a database with server-side langague like PHP, NODE or .NET.