It works

src/routes/aaaa/+page.server.ts

@@ -1,15 +1,26 @@
-const headers = { 'X-API-KEY': '', 'Content-type': 'application/json' }
+const headers = { 'X-API-KEY': '1FvqqqUpoeNgNpxZQxJX6FBDLbwKscx5hgXhZxUb', 'Content-type': 'application/json' }
 let location: string = "L'Hospitalet de Llobregat";
 let municipis = await fetch('https://api.meteo.cat/referencia/v1/municipis', { method: 'GET', headers: new Headers(headers), credentials: 'include' }).then( (data) => data.json() );
 
 export function load(): { location: string, weatherData: Promise<any> } {
-	return { location: location, weatherData: getCityCode( location ) }
+	let objMunicipi = getCityCode( location );
+	if (objMunicipi === location) {
+		return { location, weatherData: getWeather(location).then( (data) => data.message ) }
+	}
+	let codiMunicipi: string = objMunicipi.codi;
+	let locFullName: string = objMunicipi.nom;
+	return { location: locFullName, weatherData: getWeather(codiMunicipi) }
 };
 
-function changeLocation(newLoc: string) {
+function changeLocation(newLoc: string): void {
 	location = newLoc;
 }
 
+async function fetchApi(url: string) {
+	let response: Response = await fetch(url, { method: 'GET', headers: new Headers(headers), credentials: 'include' })
+	return response;
+}
+
 export const actions = {
 	changeLoc: async ({ request }) => {
 		const data: FormData = await request.formData();
@@ -17,11 +28,18 @@ export const actions = {
 	}
 }
 
-async function getWeather(): Promise<any> {
-	let response = await fetch('https://api.meteo.cat/referencia/v1/municipis', { method: 'GET', headers: new Headers(headers), credentials: 'include' })
-	return response.json();
+async function getWeather(codiMunicipi: string): Promise<any> {
+	if (codiMunicipi !== '') {
+		let response = await fetchApi(`https://api.meteo.cat/pronostic/v1/municipal/${codiMunicipi}`)
+		return response.json();
+	}
+	return '';
 }
 
-function getCityCode(locName: string) {
-	return municipis.filter( municipi => municipi["nom"].startsWith(location) )
+function getCityCode(locName: string): object | string {
+	let foundMunicipis: object[] = municipis.filter( municipi => municipi["nom"].toLowerCase().startsWith(locName.toLowerCase()) )
+	if ( foundMunicipis.length > 0 ) {
+		return foundMunicipis[0];
+	}
+	return locName;
 }

src/routes/aaaa/+page.svelte

@@ -8,15 +8,43 @@
 	function toggleDisplay(): void {
 		display = (display === 'none') ? 'block' : 'none';
 	}
+
+	$: variables = data.weatherData.dies[0].variables;
 </script>
 <div class="box" id="locChange" style="display: {display};">
 	<form action="?/changeLoc" method="post" use:enhance>
 		<p>Change location</p>
 		<div class="schBox"><input type="text" placeholder="Change location" name='newloc'></div>
-		<button type="button">Change location</button>
+		<button type="submit">Canviar</button>
 	</form>
 </div>
-<p>Weather in {data.location}:</p>
-<button type="button" on:click={toggleDisplay}>Change location</button>
-<br>
-<pre>{ JSON.stringify(data.weatherData) }</pre>
+<button type="button" on:click={toggleDisplay}>Canviar ubicació</button>
+<p>El temps a: {data.location}</p>
+<!-- <pre>{ JSON.stringify(data.weatherData) }</pre> -->
+<table>
+	<thead>
+		<tr>
+			<th>Temperatura màxima</th>
+			<th>Temperatura mínima</th>
+			<th>Precipitació</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>{ variables.tmax.valor }{ variables.tmax.unitat }</td>
+			<td>{ variables.tmin.valor }{ variables.tmin.unitat }</td>
+			<td>{ variables.precipitacio.valor }{ variables.precipitacio.unitat }</td>
+		</tr>
+	</tbody>
+</table>
+<style>
+table {
+	border-collapse: collapse;
+	border: 1px solid black;
+}
+
+th, td {
+	border-collapse: collapse;
+	border: 1px solid black
+}
+</style>