add.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="Description" content="Adding a node">
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">Project Pink</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="searchmap.html">Search map</a></li>
            </ul>
        </div>
    </nav>

    <div class="card">
        <div class="title">
            <h2>Add a node for</h2>
            <br>
            <div class="options">
                <button type="button" class="node-btn btn btn-lg btn-outline-dark">restrooms</button>
                <button type="button" class="node-btn btn btn-lg btn-outline-dark">menstrual products</button>
            </div>
            <br>
            <h2>at this address:</h2>
            <br>
            <div>
                <input type="text" placeholder="Enter your address..." onfocus="getLocation()" style="padding: 6px; border-radius: 5px; border: none" />

                <p id="locationResult"></p>
            </div>
            <br>
            <a href="addLocation.html"><button id="submit" type="submit"
                    class="btn btn-primary btn-lg">Submit</button></a>
        </div>
    </div>

    <script>var x = document.getElementById("locationResult");
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
        }

        function showPosition(position) {
            x.innerHTML = "Latitude: " + position.coords.latitude +
                "<br>Longitude: " + position.coords.longitude;
            window.localStorage.setItem("myLat", position.coords.latitude);
            window.localStorage.setItem("myLong", position.coords.longitude);
        }
    </script>
    <script src="addscript.js"></script>

</body>

</html>