Fitness Tracker - Draftbit Typing CST Test

Fitness Tracker — Draftbit Code

Tracks workouts using simple inputs and displays a list of activities added by the user.

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

export default function FitnessTracker() {
	const [activity, setActivity] = useState('');
	const [activities, setActivities] = useState([]);

	const addActivity = () => {
		if(activity.trim()){
		setActivities([...activities, activity]);
		setActivity('');
		}
	};

	return (
		<View style={{ padding: 20 }}>
		<TextInput placeholder='Workout name' value={activity} onChangeText={setActivity} />
		<Button title='Add Workout' onPress={addActivity} />
		<FlatList data={activities} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item}</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