137 lines
5.4 KiB
Rust
137 lines
5.4 KiB
Rust
use crate::logic::{calculate_result, handle_operator, input_digit};
|
|
use dioxus::prelude::*;
|
|
|
|
/// The main calculator component.
|
|
/// We use `allow(non_snake_case)` because Dioxus components are typically CamelCase.
|
|
#[allow(non_snake_case)]
|
|
#[component]
|
|
pub fn Calculator() -> Element {
|
|
// --- State Management ---
|
|
// `first_num`: Stores the first number entered.
|
|
// `second_num`: Stores the second number entered.
|
|
// `operator`: Stores the current operator (+, -, *, /).
|
|
let mut first_num = use_signal(String::new);
|
|
let mut second_num = use_signal(String::new);
|
|
let mut operator = use_signal(String::new);
|
|
|
|
rsx! {
|
|
// Main container for the calculator
|
|
div { class: "app-container",
|
|
div { class: "calculator-wrap",
|
|
// Display Screen
|
|
div { class: "display-area",
|
|
div { class: "display-text",
|
|
// Logic: If first number is empty, show "0"
|
|
if first_num().is_empty() {
|
|
"0"
|
|
} else {
|
|
"{first_num}"
|
|
}
|
|
" "
|
|
span { class: "operator-symbol", "{operator}" }
|
|
" "
|
|
"{second_num}"
|
|
}
|
|
}
|
|
|
|
// Button Grid
|
|
div { class: "keypad-grid",
|
|
// --- Row 1 ---
|
|
button {
|
|
class: "calc-btn btn-number",
|
|
onclick: move |_| input_digit(first_num, second_num, operator, "7"),
|
|
"7"
|
|
}
|
|
button {
|
|
class: "calc-btn btn-number",
|
|
onclick: move |_| input_digit(first_num, second_num, operator, "8"),
|
|
"8"
|
|
}
|
|
button {
|
|
class: "calc-btn btn-number",
|
|
onclick: move |_| input_digit(first_num, second_num, operator, "9"),
|
|
"9"
|
|
}
|
|
button {
|
|
class: "calc-btn btn-operator",
|
|
onclick: move |_| handle_operator(first_num, second_num, operator, "/"),
|
|
"/"
|
|
}
|
|
|
|
// --- Row 2 ---
|
|
button {
|
|
class: "calc-btn btn-number",
|
|
onclick: move |_| input_digit(first_num, second_num, operator, "4"),
|
|
"4"
|
|
}
|
|
button {
|
|
class: "calc-btn btn-number",
|
|
onclick: move |_| input_digit(first_num, second_num, operator, "5"),
|
|
"5"
|
|
}
|
|
button {
|
|
class: "calc-btn btn-number",
|
|
onclick: move |_| input_digit(first_num, second_num, operator, "6"),
|
|
"6"
|
|
}
|
|
button {
|
|
class: "calc-btn btn-operator",
|
|
onclick: move |_| handle_operator(first_num, second_num, operator, "*"),
|
|
"*"
|
|
}
|
|
|
|
// --- Row 3 ---
|
|
button {
|
|
class: "calc-btn btn-number",
|
|
onclick: move |_| input_digit(first_num, second_num, operator, "1"),
|
|
"1"
|
|
}
|
|
button {
|
|
class: "calc-btn btn-number",
|
|
onclick: move |_| input_digit(first_num, second_num, operator, "2"),
|
|
"2"
|
|
}
|
|
button {
|
|
class: "calc-btn btn-number",
|
|
onclick: move |_| input_digit(first_num, second_num, operator, "3"),
|
|
"3"
|
|
}
|
|
button {
|
|
class: "calc-btn btn-operator",
|
|
onclick: move |_| handle_operator(first_num, second_num, operator, "-"),
|
|
"-"
|
|
}
|
|
|
|
// --- Row 4 ---
|
|
button {
|
|
class: "calc-btn btn-number btn-zero",
|
|
onclick: move |_| input_digit(first_num, second_num, operator, "0"),
|
|
"0"
|
|
}
|
|
button {
|
|
class: "calc-btn btn-clear",
|
|
onclick: move |_| {
|
|
first_num.set(String::new());
|
|
second_num.set(String::new());
|
|
operator.set(String::new());
|
|
},
|
|
"C"
|
|
}
|
|
button {
|
|
class: "calc-btn btn-operator",
|
|
onclick: move |_| handle_operator(first_num, second_num, operator, "+"),
|
|
"+"
|
|
}
|
|
|
|
// --- Row 5 (Equals) ---
|
|
button {
|
|
class: "calc-btn btn-equals",
|
|
onclick: move |_| calculate_result(first_num, second_num, operator),
|
|
"="
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|