// Import necessary hooks from React
import { useState, useEffect } from "react";
// Import components from React Native
import {
View, // Container component for layout
Text, // For displaying text
TextInput, // For user input
TouchableOpacity, // For button press
StyleSheet, // For styling components
} from "react-native";
// Main App component
const App = () => {
// State to store user's guess input
const [term, setTerm] = useState("");
// State to store result message
const [result, setResult] = useState("");
// State to store the secret random number (generated once)
const [secretNum] = useState(generateRandomNumber());
// State to count the number of guesses
const [stepCount, setStepCount] = useState(0);
// Effect to reset step count when secretNum changes
useEffect(() => {
setStepCount(0); // Reset guess count
}, [secretNum]);
// Function to generate a random number between 1 and 20
function generateRandomNumber() {
return Math.floor(Math.random() * 20) + 1;
}
// Handler for input change
function handleChange(text) {
setTerm(text); // Update input state
}
// Function to check user's guess
function checkGuess() {
let newResult = ""; // Temporary result message
// If input is empty
if (term === "") {
newResult = "Enter Valid Input";
}
// If input is not a number or out of range
else if (
isNaN(term) ||
parseInt(term) < 1 ||
parseInt(term) > 20
) {
newResult = "Enter a valid number between 1 and 20";
} else {
setStepCount(stepCount + 1); // Increment guess count
// If guess is lower than secret number
if (parseInt(term) < secretNum) {
newResult = "Lower";
}
// If guess is higher than secret number
else if (parseInt(term) > secretNum) {
newResult = "Higher";
}
// If guess is correct
else {
newResult = `Yippee, correct! It took you ${stepCount + 1
} ${stepCount === 1 ? "step" : "steps"}.`;
}
}
setResult(newResult); // Update result message
}
// Render UI
return (
<View style={styles.container}>
{/* Heading */}
<Text style={styles.head}>
Guess Number between 1 to 20
</Text>
{/* Input for user's guess */}
<TextInput
style={styles.input}
placeholder="Enter your guess"
onChangeText={handleChange}
value={term}
keyboardType="numeric"
/>
{/* Button to check guess */}
<TouchableOpacity
style={styles.button}
onPress={checkGuess}
>
<Text style={styles.buttonText}>Check</Text>
</TouchableOpacity>
{/* Display result */}
<Text style={styles.result}>
You Guessed: {result}
</Text>
</View>
);
};
// Styles for the components
const styles = StyleSheet.create({
container: {
flex: 1, // Fill the screen
alignItems: "center", // Center horizontally
justifyContent: "center", // Center vertically
backgroundColor: "#f2f2f2", // Light background
padding: 16, // Padding around content
},
head: {
fontWeight: "bold", // Bold text
fontSize: 24, // Large font
marginBottom: 20, // Space below
color: "#333", // Dark text color
},
input: {
padding: 10, // Padding inside input
borderWidth: 1, // Border thickness
borderColor: "#ccc", // Border color
borderRadius: 10, // Rounded corners
width: "80%", // Input width
marginBottom: 20, // Space below
backgroundColor: "#fff", // White background
fontSize: 18, // Font size
},
button: {
backgroundColor: "#007BFF", // Blue background
borderRadius: 10, // Rounded corners
paddingVertical: 12, // Vertical padding
paddingHorizontal: 24, // Horizontal padding
},
buttonText: {
color: "#fff", // White text
fontSize: 18, // Font size
fontWeight: "bold", // Bold text
},
result: {
marginTop: 20, // Space above
fontSize: 18, // Font size
color: "#333", // Text color
fontWeight: "bold", // Bold text
},
});
// Export the App component as default
export default App;