Finding mission people with 31 lines of JavaScript
Tags: tracking, coordinates, qrcode, javascript
Published: 2021-04-25 15:13:38

Here's a very simple project that IMHO can help finding missing people, whether is someone with limited cognitive capabilities or even a "normal" person who happens to pass out in an unknown location, e.g. The requirements is that the target person carries a QR code (a forearm tattoo is suggested).

## Disclaimer

>Despite its good cause, this project can illustrate how dangerous and malicious a JavaScript code can be, as this one will send and email with the users' coordinates to an unknown person without their knowledge.

There is the purposed flow:

1. Person "A" goes missing
2. Person "B" finds person "A"
3. "B" scans the QR code using a phone
4. A web page is loaded, and 2 things happen:
5. "B" sees some basic info for person "A"
6. In the background, an email is sent to person "C" (who is responsible for person "A"), containing person "B" 's coordinates (provided that they have location settings on).

## Tips:

* Host web pages for free: https://pages.github.com/
* Use a url-shortener to get a simpler QR code
* Use [DuckDuckGo's](https://duckduckgo.com/?q=qr+https%3A%2F%2Fwww.buymeacoffee.com%2Fcosta86&t=h_&ia=answer) search engine to get a QR code. Just type *qr* and the desired URL

Here's what the page could look like:
![call](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ruv4w6igc7e88kc1g3q.jpg)
 

Here you will get the library to send emails and info on how to get a free SMTP server: https://smtpjs.com/

## JS:
`script.js`
```javascript

function sendEmail(body) {

    Email.send({
        Host: "smtp.elasticemail.com",
        Username: "<mail>",
        Password: "<password>",
        To: '<email>',
        From: "<email>",
        Subject: "John Doe has been found!",
        Body: body
    });
}

function sendEmailWithCoordinates(pos) {
    let lat = pos.coords.latitude;
    let lng = pos.coords.longitude;
    let url = `https://www.google.com/maps/dir//${lat},${lng}/@${lat},${lng},21z/data=!4m2!4m1!3e2`;
    sendEmail(url);
}

function sendEmailWithoutCoordinates() {
    sendEmail("Could not get the device's coordinates...");
}

function startLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(sendEmailWithCoordinates, sendEmailWithoutCoordinates);
    }
}

window.addEventListener("load", startLocation);
```
By using this same API (`navigator.geolocation`), you can set the location for a "watch" mode, and keep sending multiple emails with the updated coordinates, instead of sending it only once. For more info regarding Geolocation API: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

## HTML 
`index.html`
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HELP ME. I AM LOST</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="https://smtpjs.com/v3/smtp.js"></script>    
    <script defer src="script.js"></script>
</head>

<body>

    <div id="main">
        <img src="photo.jpg" alt="JOHN DOE'S PHOTO">

        <h1>JOHN DOE</h1>

        <h2>PLEASE, CALL MY RELATIVE:</h2>


        <a href="tel:+351999999999">
            <h1>(+351) 999 999 999</h1>
        </a>

        <h3>MY ADDRESS:</h3>

        <address>10,MAIN STREET</address>

        <a href="https://www.google.com/maps/dir//41.2766,-8.3762/@41.2766,-8.3762,21z/data=!4m2!4m1!3e2">
            <button>MAP TO MY HOUSE</button>
        </a>

</body>

</html>
```
## CSS
`style.css`
```css
body,
html {
    margin: 0px;
    height: 100%;
}

#main {
    justify-items: center;
    align-items: center;
    text-align: center;
    background-color: lightcyan;
    padding: 5%;
}

img {
    width: 60%;
    border: solid 3px;
    border-radius: 3px;
}

button {
    padding: 5%;
    margin: 5%;
    background-color: blue;
    color: white;
}
```

### Thanks for the time reading this!
Follow me:
[LinkedIn](https://www.linkedin.com/in/costa86/) | [Dev.to](https://dev.to/costa86) | [Buy me a coffee](https://www.buymeacoffee.com/costa86) | [GitHub](https://github.com/costa86)