Sample prompt:

Write a JavaScript program inside an HTML file that gets input from the user: a single URL. The program should then connect to the PageSpeed Insights API and retrieve the most important performance metrics. Users should type their PageSpeed Insights API key in the form provided.

The program should present the data in nice tables and handle the case where a specific performance attribute is not available for a given page. Additionally, when users need to wait for the program to retrieve the metrics, the program should show them some kind of visual indication of the progress. If there is some JavaScript error, write it on the screen.

Sample output:

<!DOCTYPE html> <html> <head> <title>PageSpeed Insights</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>PageSpeed Insights</h1> <form id="url-form"> <div class="form-group"> <label for="url-input">Enter URL:</label> <input type="text" class="form-control" id="url-input" required> </div> <div class="form-group"> <label for="api-key-input">Enter API Key:</label> <input type="text" class="form-control" id="api-key-input" required> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <div id="progress-bar" class="progress" style="display:none;"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> Loading... </div> </div> <div id="results"></div> </div>

<script>
	const form = document.getElementById("url-form");
	form.addEventListener("submit", function(event) {
		event.preventDefault();
		const urlInput = document.getElementById("url-input");
		const apiKeyInput = document.getElementById("api-key-input");
		const url = urlInput.value;
		const apiKey = apiKeyInput.value;
		getPerformanceMetrics(url, apiKey);
	});

	function getPerformanceMetrics(url, apiKey) {
		const apiUrl = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url}&key=${apiKey}`;
		const progressBar = document.getElementById("progress-bar");
		progressBar.style.display = "block";
		fetch(apiUrl)
			.then(response => response.json())
			.then(data => {
				displayResults(data);
				progressBar.style.display = "none";
			})
			.catch(error => {
				console.error(error);
				progressBar.style.display = "none";
				const results = document.getElementById("results");
				results.innerHTML = "An error occurred. Please try again later.";
			});
	}

	function displayResults(data) {
		const results = document.getElementById("results");
		results.innerHTML = "";

		const performanceScore = data.lighthouseResult.categories.performance.score * 100;
		const scoreTable = `
			<table class="table table-bordered">
				<tr>
					<th>Performance Score</th>
					<td>${performanceScore.toFixed(2)}</td>
				</tr>
			</table>
		`;
		results.innerHTML += scoreTable;

		const metricsTable = `
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>Metric</th>
						<th>Value</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>First Contentful Paint</td>
						<td>${getMetricValue(data, "first-contentful-paint")}</td>
					</tr>
					<tr>
						<td>Speed Index</td>
						<td>${getMetricValue(data, "speed-index")}</td>
					</tr>
					<tr>
						<td>Largest Contentful Paint</td>

						<td>${getMetricValue(data, "largest-contentful-paint")}</td>
				</tr>
				<tr>
					<td>Cumulative Layout Shift</td>
					<td>${getMetricValue(data, "cumulative-layout-shift")}</td>
				</tr>
			</tbody>
		</table>
	`;
	results.innerHTML += metricsTable;
}

function getMetricValue(data, metricName) {
	const metric = data.lighthouseResult.audits[metricName];
	if (metric === undefined || metric.score === null) {
		return "N/A";
	} else {
		return metric.numericValue.toFixed(2) + " " + metric.unit;
	}
}

</script> </body> </html>

Prompt intended to fix the problem with undefined units:

I have a JavaScript program. But the problem is it doesn't show me units. Can you fix it?

Here is the program: <!DOCTYPE html> <html> <head> <title>PageSpeed Insights</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>PageSpeed Insights</h1> <form id="url-form"> <div class="form-group"> <label for="url-input">Enter URL:</label> <input type="text" class="form-control" id="url-input" required> </div> <div class="form-group"> <label for="api-key-input">Enter API Key:</label> <input type="text" class="form-control" id="api-key-input" required> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <div id="progress-bar" class="progress" style="display:none;"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> Loading... </div> </div> <div id="results"></div> </div>

<script>
	const form = document.getElementById("url-form");
	form.addEventListener("submit", function(event) {
		event.preventDefault();
		const urlInput = document.getElementById("url-input");
		const apiKeyInput = document.getElementById("api-key-input");
		const url = urlInput.value;
		const apiKey = apiKeyInput.value;
		getPerformanceMetrics(url, apiKey);
	});

	function getPerformanceMetrics(url, apiKey) {
		const apiUrl = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url}&key=${apiKey}`;
		const progressBar = document.getElementById("progress-bar");
		progressBar.style.display = "block";
		fetch(apiUrl)
			.then(response => response.json())
			.then(data => {
				displayResults(data);
				progressBar.style.display = "none";
			})
			.catch(error => {
				console.error(error);
				progressBar.style.display = "none";
				const results = document.getElementById("results");
				results.innerHTML = "An error occurred. Please try again later.";
			});
	}

	function displayResults(data) {
		const results = document.getElementById("results");
		results.innerHTML = "";

		const performanceScore = data.lighthouseResult.categories.performance.score * 100;
		const scoreTable = `
			<table class="table table-bordered">
				<tr>
					<th>Performance Score</th>
					<td>${performanceScore.toFixed(2)}</td>
				</tr>
			</table>
		`;
		results.innerHTML += scoreTable;

		const metricsTable = `
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>Metric</th>
						<th>Value</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>First Contentful Paint</td>
						<td>${getMetricValue(data, "first-contentful-paint")}</td>
					</tr>
					<tr>
						<td>Speed Index</td>
						<td>${getMetricValue(data, "speed-index")}</td>
					</tr>
					<tr>
						<td>Largest Contentful Paint</td>

						<td>${getMetricValue(data, "largest-contentful-paint")}</td>
				</tr>
				<tr>
					<td>Cumulative Layout Shift</td>
					<td>${getMetricValue(data, "cumulative-layout-shift")}</td>
				</tr>
			</tbody>
		</table>
	`;
	results.innerHTML += metricsTable;
}

function getMetricValue(data, metricName) {
	const metric = data.lighthouseResult.audits[metricName];
	if (metric === undefined || metric.score === null) {
		return "N/A";
	} else {
		return metric.numericValue.toFixed(2) + " " + metric.unit;
	}
}

</script> </body> </html>