Update calculator assets and styles

Berufskolleg-Geldern · Apr 22, 2024 · 630a21c · 630a21c
1 parent d69b7ba
commit 630a21c
Show file tree

Hide file tree

Showing 7 changed files with 271 additions and 92 deletions.
diff --git a/calculator/App.js b/calculator/App.js
@@ -1,51 +1,151 @@
-import { StatusBar } from 'expo-status-bar';
-import * as React from 'react';
-import { Pressable, StyleSheet, Text, View, Vibration } from 'react-native';
-import Button from './components/Button';
-import { ScrollView } from 'react-native';
+import * as React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Button from "./components/Button";
+import { ScrollView } from "react-native";
 
+/**
+ * Main component of the calculator app.
+ * @returns {JSX.Element} The rendered component.
+ */
 export default function App() {
   const [display, setDisplay] = React.useState("0");
   const [last, setLast] = React.useState("");
 
-
+  const equalsHandler = () => {
+    try {
+      setLast(display);
+      setDisplay(eval(display.replace("%", " * 0.01")));
+    } catch {
+      setDisplay(display);
+    }
+  };
 
   return (
     <View style={styles.container}>
-      <View style={[{width: "85%", marginBottom: 30}]}>
-      <Text style={[{color: "rgba(255, 255, 255, 0.6)", fontSize: 40, alignSelf: "flex-end", marginBottom: 20}]}>{last}</Text>
-      <ScrollView style={[{alignSelf: "flex-end" }]} horizontal><Text style={[{color: "#fff", fontSize: 60, alignSelf: "flex-end", height: 70, textAlign: "right"}]} numberOfLines={1}>{display}</Text></ScrollView></View> 
-      <View style={[{ display: "flex", flexDirection: "column", gap: 20 }]}>
-        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
+      <View style={[styles.textHolder]}>
+        <Text style={[styles.lastText]}>{last}</Text>
+        <ScrollView style={[styles.sideScroll]} horizontal>
+          <Text style={[styles.resultText]} numberOfLines={1}>
+            {display}
+          </Text>
+        </ScrollView>
+      </View>
+
+      <View style={[styles.gridContainer]}>
+        <View style={[styles.row]}>
           <Button type="t1" text="C" pressHandler={() => setDisplay("")} />
-          <Button type="t1" text="+ / -" pressHandler={() => {display.startsWith("-") ? setDisplay(display.slice(1)) : setDisplay("-" + display)}} />
-          <Button type="t1" text="%" pressHandler={() => setDisplay(display + "%")}/>
-          <Button type="t2" text="/" pressHandler={() => setDisplay(display + "/")} />
+          <Button
+            type="t1"
+            text="+ / -"
+            pressHandler={() => {
+              display.startsWith("-")
+                ? setDisplay(display.slice(1))
+                : setDisplay("-" + display);
+            }}
+          />
+          <Button
+            type="t1"
+            text="%"
+            pressHandler={() => setDisplay(display + "%")}
+          />
+          <Button
+            type="t2"
+            text="/"
+            pressHandler={() => setDisplay(display + "/")}
+          />
         </View>
-        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
-          <Button type="t3" text="7" pressHandler={() => setDisplay(display + "7")} />
-          <Button type="t3" text="8" pressHandler={() => setDisplay(display + "8")} />
-          <Button type="t3" text="9" pressHandler={() => setDisplay(display + "9")} />
-          <Button type="t2" text="*" pressHandler={() => setDisplay(display + "*")}/>
+        <View style={[styles.row]}>
+          <Button
+            type="t3"
+            text="7"
+            pressHandler={() => setDisplay(display + "7")}
+          />
+          <Button
+            type="t3"
+            text="8"
+            pressHandler={() => setDisplay(display + "8")}
+          />
+          <Button
+            type="t3"
+            text="9"
+            pressHandler={() => setDisplay(display + "9")}
+          />
+          <Button
+            type="t2"
+            text="*"
+            pressHandler={() => setDisplay(display + "*")}
+          />
         </View>
-        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
-          <Button type="t3" text="4" pressHandler={() => setDisplay(display + "4")}/>
-          <Button type="t3" text="5" pressHandler={() => setDisplay(display + "5")}/>
-          <Button type="t3" text="6" pressHandler={() => setDisplay(display + "6")}/>
-          <Button type="t2" text="-" pressHandler={() => setDisplay(display + "-")}/>
+        <View style={[styles.row]}>
+          <Button
+            type="t3"
+            text="4"
+            pressHandler={() => setDisplay(display + "4")}
+          />
+          <Button
+            type="t3"
+            text="5"
+            pressHandler={() => setDisplay(display + "5")}
+          />
+          <Button
+            type="t3"
+            text="6"
+            pressHandler={() => setDisplay(display + "6")}
+          />
+          <Button
+            type="t2"
+            text="-"
+            pressHandler={() => setDisplay(display + "-")}
+          />
         </View>
-        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
-          <Button type="t3" text="1" pressHandler={() => setDisplay(display + "1")}/>
-          <Button type="t3" text="2" pressHandler={() => setDisplay(display + "2")}/>
-          <Button type="t3" text="3" pressHandler={() => setDisplay(display + "3")}/>
-          <Button type="t2" text="+" pressHandler={() => setDisplay(display + "+")}/>
+        <View style={[styles.row]}>
+          <Button
+            type="t3"
+            text="1"
+            pressHandler={() => setDisplay(display + "1")}
+          />
+          <Button
+            type="t3"
+            text="2"
+            pressHandler={() => setDisplay(display + "2")}
+          />
+          <Button
+            type="t3"
+            text="3"
+            pressHandler={() => setDisplay(display + "3")}
+          />
+          <Button
+            type="t2"
+            text="+"
+            pressHandler={() => setDisplay(display + "+")}
+          />
+        </View>
+        <View style={[styles.row]}>
+          <Button
+            type="t3"
+            text="."
+            pressHandler={() => setDisplay(display + ".")}
+          />
+          <Button
+            type="t3"
+            text="0"
+            pressHandler={() => setDisplay(display + "0")}
+          />
+          <Button
+            type="t3"
+            text="back"
+            pressHandler={() =>
+              setDisplay(display.substring(0, display.length - 1))
+            }
+          />
+          <Button
+            type="t2"
+            text="="
+            pressHandler={() => {
+              equalsHandler();
+            }}
+          />
         </View>
-        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
-          <Button type="t3" text="." pressHandler={() => setDisplay(display + ".")}/>
-          <Button type="t3" text="0" pressHandler={() => setDisplay(display + "0")}/>
-          <Button type="t3" text="back" pressHandler={() => setDisplay(display.substring(0, display.length -1))} />
-          <Button type="t2" text="=" pressHandler={() => {try {setLast(display);setDisplay(eval(display.replace("%", " * 0.01"))) } catch {setDisplay(display)}}} />
-        </View> 
       </View>
     </View>
   );
@@ -54,8 +154,41 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#18171E',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#18171E",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  gridContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 20,
+  },
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "85%",
+    alignSelf: "center",
+  },
+  sideScroll: {
+    alignSelf: "flex-end",
+  },
+  resultText: {
+    color: "#fff",
+    fontSize: 60,
+    alignSelf: "flex-end",
+    height: 70,
+    textAlign: "right",
+  },
+  lastText: {
+    color: "rgba(255, 255, 255, 0.6)",
+    fontSize: 40,
+    alignSelf: "flex-end",
+    marginBottom: 20,
+  },
+  textHolder: {
+    width: "85%",
+    marginBottom: 30,
   },
 });
diff --git a/calculator/app.json b/calculator/app.json
@@ -4,12 +4,12 @@
     "slug": "calculator",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "icon": "./assets/logo.png",
+    "userInterfaceStyle": "dark",
     "splash": {
-      "image": "./assets/splash.png",
+      "image": "./assets/logo.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#18171E"
     },
     "assetBundlePatterns": [
       "**/*"
@@ -19,12 +19,12 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
+        "foregroundImage": "./assets/logo.png",
+        "backgroundColor": "#18171E"
       }
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "favicon": "./assets/logo.png"
     }
   }
 }
diff --git a/calculator/assets/adaptive-icon.png b/calculator/assets/adaptive-icon.png
diff --git a/calculator/assets/delete-left-solid.png b/calculator/assets/delete-left-solid.png
diff --git a/calculator/assets/delete-left-solid.svg b/calculator/assets/delete-left-solid.svg
diff --git a/calculator/assets/logo.png b/calculator/assets/logo.png