Styling with Bard

This is the latest episode in my ongoing project to build a Meet in the Middle map using code suggested by Bard. Today's aims are mainly to improve the design and UI of the map.

First up I want to improve the design of the buttons used on the map.

Prompt No.1:

Give me the css styles to create a flat design button

To which Bard suggested:

Absolutely! Here's the CSS for a basic flat design button:

CSS

.flat-button {

  background-color: #4CAF50; /* Change this to your desired color */

  color: #fff;

  padding: 10px 20px;

  border: none;

  border-radius: 5px; /* Adjust corner roundness here */

  font-size: 16px;

  font-weight: bold;

  cursor: pointer;

  transition: all 0.2s ease-in-out;

}

.flat-button:hover {

  background-color: #388E3C; /* Adjust hover color here */

}

.flat-button:active {

  transform: scale(0.95); /* Slight "press" effect on click */

}

Now we just need to assign this CSS style class to our buttons.

Prompt No.2:

How can I add the class 'flat-button' inline to this button - <button id="enter">Calculate Midpoint</button>

Bard replied:

Add the class 'flat-button inline within the HTML: 

<button id="enter" class="flat-button">Calculate Midpoint</button>

Now our buttons look a lot nicer! Next-up I'd like to use fitbounds to adjust the map when the midpoint marker is added to the map. This should ensure that the map nicely frames the three user added markers when the midpoint marker appears.

Prompt No.3:

in leafletjs I have three markers defined in javascript

'var latA = markerA.getLatLng().lat;  var lngA = markerA.getLatLng().lng;  var latB = markerB.getLatLng().lat;  var lngB = markerB.getLatLng().lng;  var latC = markerC.getLatLng().lat;  var lngC = markerC.getLatLng().lng;'

How can I make the map fit the bounds of all three markers?

Bard responded with:

 Here's how you can make the Leaflet map fit the bounds of all three markers using JavaScript:

// Get the LatLng objects of the markers

  const markerALatLng = markerA.getLatLng();

  const markerBLatLng = markerB.getLatLng();

  const markerCLatLng = markerC.getLatLng();

  // Create a LatLngBounds object that encompasses all three markers

  const bounds = new L.LatLngBounds([

    markerALatLng,

    markerBLatLng,

    markerCLatLng

  ]);

  // Fit the map to the bounds

  map.fitBounds(bounds);

Now when the midpoint marker is added the map also zooms to neatly encompass all three user added markers.

It's time to give Bard a more difficult challenge. Currently Our Meet in the Middle map calculates the midpoint between three different locations. This isn't very useful if only two people want to meet. So it would be nice to offer our users the option to calculate a midpoint between just two different locations.

First up we need to add another button to the map which will display after the second marker has been added to the map. This button will give the users the option to calculate a midpoint between only two locations, instead of adding another (third) location to the map.

Prompt No.4:

In this Javascript statement can you add a button with the id 'meet2' to the innerHTML -

' // update the message in the 'instructions' div document.getElementById("instructions").innerHTML = "Now add the third marker to the map.";

Bard suggested:

// Update the message and add a button to the 'instructions' div

document.getElementById("instructions").innerHTML =

  "Now add the third marker to the map. <button id='meet2'>Click me</button>";

Now a new button appears after the seceond marker is added to the map. However nothing happens when we press it. We now need to ask Bard to write a function for this button so that when it is pressed a midpoint is calculated between markerA and markerB and a third (midpoint) marker is added to the map.

I copied the JavaScript of the existing calculateMidpoint() function into Bard and gave it the following prompt:  

Prompt No.5:

Create another function in Javascript exactly like this function only have it calculate a midpoint between MarkerA and MarkerB (ignoring Marker C completely).

Bard replied first time with:

function calculateMidpointAB() {

  var latA = markerA.getLatLng().lat;

  var lngA = markerA.getLatLng().lng;

  var latB = markerB.getLatLng().lat;

  var lngB = markerB.getLatLng().lng;

  // Calculate the midpoint between MarkerA and MarkerB

  var midLat = (latA + latB) / 2;

  var midLng = (lngA + lngB) / 2;

  // Create a LatLngBounds object only for MarkerA and MarkerB

  const bounds = new L.LatLngBounds([

    markerA.getLatLng(),

    markerB.getLatLng()

  ]);

  // Fit the map to the bounds of MarkerA and MarkerB

  map.fitBounds(bounds);

  // Create a marker for the midpoint

  var midpointMarker = L.marker([midLat, midLng]).addTo(map);

  midpointMarker.bindPopup("I'm the midpoint between A and B!");

  // Rest of the code remains the same, as it doesn't involve MarkerC

  // Share to Twitter, add button, fetch coffee shops, etc.

}

Now by simply adding an event listener to our 'meet2' button:

document.getElementById("meet2")

.addEventListener("click", calculateMidpointAB);

we have a Meet in the Middle map which works for either 2 or 3 person meet-ups.

Next-up I think it might be nice to offer users the choice to find nearby restaurants or bars, as an alternative to nearby coffee-shops.