Weather Viewer - Draftbit Typing CST Test

Weather Viewer — Draftbit Code

Fetches weather data using a public API and displays it in a Draftbit app layout.

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

export default function WeatherApp() {
	const [city, setCity] = useState('');
	const [weather, setWeather] = useState(null);

	const fetchWeather = async () => {
		const res = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
		const data = await res.json();
		setWeather(data.current);
	};

	return (
		<View style={{ padding: 20 }}>
		<TextInput placeholder='Enter City' value={city} onChangeText={setCity} />
		<Button title='Get Weather' onPress={fetchWeather} />
		{weather && <Text>Temp: {weather.temp_c}°C</Text>}
		</View>
	);
}

Draftbit Language Guide

Draftbit is a no-code and low-code visual builder for creating React Native mobile apps. It allows designers, founders, and developers to visually build screens, components, and navigation flows, while exporting clean React Native code.

More Draftbit Typing Exercises

Practice Other Languages