app.js

// TODO: Write your JS code in here
//
//
import mapboxgl from 'mapbox-gl';
// select the form
const submit = document.querySelector('#form');
const address = document.querySelector('#address');
const geoCords = document.querySelector('#geo_cords');
// get the users address
submit.addEventListener('submit', (event) => {
    event.preventDefault();
    let lookUp2 = document.getElementById("address").value;
    lookUp(lookUp2);
});

const lookUp = (address) => {
    fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json?access_token=pk.eyJ1IjoibWF0b25pMTA5IiwiYSI6ImNraTZzN3hpeTAxdjQyeXBndDFld2cwODgifQ.QDVAsTj3D_3wb7A3XGRP6g`)
        .then(response => response.json())
        .then((data) => {
            geoCords.innerText = data.features[0].geometry.coordinates;

            let latitude = data.features[0].geometry.coordinates[0];

            let long = data.features[0].geometry.coordinates[1];

            mapboxgl.accessToken = 'pk.eyJ1IjoibWF0b25pMTA5IiwiYSI6ImNraTZzN3hpeTAxdjQyeXBndDFld2cwODgifQ.QDVAsTj3D_3wb7A3XGRP6g';
            console.log(geoCords.innerText);

            var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
                center: [latitude, long], // starting position [lng, lat]
                zoom: 12 // starting zoom

            });
            var marker = new mapboxgl.Marker()
                .setLngLat([latitude, long])
                .addTo(map);

        });
};