Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

162
Views
Generate Viewing Link JS

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

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!