I have written about the use of AI in programming previously but I recently came across Cursor which is Visual Studio Code with AI built in so I thought I would give it a go but what to do?
Road Trip
I have recently returned from a driving holiday around the East Coast of the US and was, as ever, amazed at the price of petrol (“gas”) compared to the UK but how much cheaper was it? I decided that this would make a simple test for Cursor.
As always, what is important is the prompt you give the AI to generate the response you are looking for. In this case I knew that two conversions were required: for US gallons to litres and from $ to £. For the latter I knew that a service existed called Fixer which I included in the prompt but now with hindsight I wonder what would have happened if I’d asked Cursor to sort that out for itself.
This is the prompt that I put to Cursor:
create a web page that allows the user to enter in a price in usd which is the price per US gallon of petrol. Then calculate what that price would be in GBP per UK litre. Use the fixer.io exchange rate api for exchange rate conversion.
I then pressed the Generate button and you can see the results of that below:
I thought that this was a pretty good first attempt, albeit a little dull. Here it is in action:
Next Steps
I wanted a couple of other things from the code: firstly, I wanted to be able to put in a price in both $ and £ and do the conversion both ways. Secondly, I wanted it to look slightly prettier. This is where I found Cursor more difficult to use. It was unclear to me exactly how I could get code inserted to add, for example, inline styles. You can select some code, press CMD+K and give a new prompt, but I couldn’t seem to go back to the original prompt and extend it. Note: I know that this IS possible right after the first attempt, but if you then close down and come back, it doesn’t seem to be possible then.
I was impressed with Cursor in the same way I have been with ChatGPT, but I found extending the code using Cursor difficult, which made it more limiting. Maybe that’s me, but I will try to find out if it can be done more smoothly than I managed.
I can imagine Cursor being really great for a quick MVP or proof of concept and it certainly made setting up this trial quick and easy.
You can try out the final version of the petrol converter here.
The Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Petrol Price Converter</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
color: #FFFFFF;
}
h1 {
font-size: 36px;
color: #FFFFFF;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
input[type="submit"] {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
input[type="number"],
select {
margin: 10px 0;
}
</style>
</head>
<body style="background-image: url('back.jpeg'); background-size: cover;">
<h1>Petrol Price Converter</h1>
<form method="post" action="">
<label for="price">Price per US Gallon/UK Litre:</label>
<input type="number" id="price" name="price" step="0.01" required><br>
<label for="currency">Currency:</label>
<select id="currency" name="currency" required>
<option value="USD">$ (USD)</option>
<option value="GBP">£ (GBP)</option>
</select><br>
<input type="submit" value="Convert">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$price = floatval($_POST['price']);
$currency = $_POST['currency'];
// Constants for conversion
$gallonsToLitres = 3.78541; // 1 US gallon = 3.78541 litres
// Fetch exchange rate from fixer.io
$apiKey = '<your api key>'; // Replace with your actual API key
$url = "http://data.fixer.io/api/latest?access_key=$apiKey&symbols=USD,GBP";
$response = file_get_contents($url);
$data = json_decode($response, true);
if ($data && $data['success']) {
$usdToGbpRate = $data['rates']['GBP'] / $data['rates']['USD'];
if ($currency == "USD") {
// Convert USD per gallon to GBP per litre
$gbpPricePerLitre = ($price * $usdToGbpRate) / $gallonsToLitres;
echo "<p><strong>Price per UK Litre (GBP): £" . number_format($gbpPricePerLitre, 2) . "</strong></p>";
} elseif ($currency == "GBP") {
// Convert GBP per litre to USD per gallon
$usdPricePerGallon = ($price / $usdToGbpRate) * $gallonsToLitres;
echo "<p><strong>Price per US Gallon (USD): $" . number_format($usdPricePerGallon, 2) . "</strong></p>";
}
} else {
echo "<p style='color: red;'>Failed to retrieve exchange rate. Please try again later.</p>";
}
}
?>
</body>
</html>