Adds Calculator feat

src/App.tsx

@@ -57,7 +57,7 @@ const App: React.FC = () => (
         <IonTabBar slot="bottom">
           <IonTabButton tab="tab1" href="/tab1">
             <IonIcon aria-hidden="true" icon={triangle} />
-            <IonLabel>Tab 1</IonLabel>
+            <IonLabel>Calculator</IonLabel>
           </IonTabButton>
           <IonTabButton tab="tab2" href="/tab2">
             <IonIcon aria-hidden="true" icon={ellipse} />

src/components/ExploreContainer.css → src/components/Calculator.css

@@ -16,9 +16,41 @@
   font-size: 16px;
   line-height: 22px;
   color: #8c8c8c;
-  margin: 0;
+  margin: 10px; 0;
 }
 
 .container a {
   text-decoration: none;
 }
+
+.input-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 80px;
+}
+
+.input-temp {
+  border: 2px solid #575757;
+}
+
+.modal {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal h2 {
+  font-size: 20px;
+  line-height: 26px;
+  margin: 10px; 0;
+}
+
+.modal p {
+  font-size: 18px;
+  line-height: 22px;
+  margin: 10px; 0;
+}
\ No newline at end of file

src/components/Calculator.tsx

+import React, { useState } from "react";
+import "./Calculator.css";
+import { IonButton, IonInput, IonModal } from "@ionic/react";
+
+interface ContainerProps {
+  name: string;
+}
+
+const Calculator: React.FC<ContainerProps> = ({ name }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [safety, setSafety] = useState("");
+  const [temp, setTemp] = useState<number>();
+
+  const calculate = () => {
+    let safety;
+
+    if (temp! < -40) {
+      safety =
+        "Extremely unsafe, risk of frostbite and hypothermia. Stay indoors.";
+    } else if (temp! < -20) {
+      safety = "Unsafe, wear warm clothes and limit time outdoors.";
+    } else if (temp! < -10) {
+      safety =
+        "Potentially unsafe, dress warmly and be aware of the risk of frostbite.";
+    } else if (temp! < 0) {
+      safety = "Safe, but dress in layers and stay dry.";
+    } else if (temp! < 10) {
+      safety = "Safe, a light jacket or sweater may be needed.";
+    } else if (temp! < 20) {
+      safety = "Safe, typical room temperature.";
+    } else if (temp! < 30) {
+      safety = "Safe, but stay hydrated.";
+    } else if (temp! < 40) {
+      safety =
+        "Potentially unsafe, drink lots of water and avoid strenuous activities.";
+    } else {
+      safety = "Unsafe, risk of heat stroke. Stay indoors and stay hydrated.";
+    }
+
+    setSafety(safety);
+    setShowModal(true);
+  };
+
+  return (
+    <div className="container">
+      <strong>{name}</strong>
+      <p className="center">Calculates the weather if it's too hot or cold.</p>
+      <div className='input-wrapper'>
+        <IonInput
+          placeholder="Enter Temperature"
+          class="input-temp"
+          type="number"
+          value={temp}
+          onIonChange={(e) => setTemp(parseInt(e.detail.value!, 10))}
+        />
+      </div>
+      <IonButton type="button" onClick={calculate}>
+        Calculate
+      </IonButton>
+      <IonModal isOpen={showModal} className="modal">
+        <h2>Safety Precautions</h2>
+        <p>{safety}</p>
+        <IonButton onClick={() => setShowModal(false)}>Close</IonButton>
+      </IonModal>
+    </div>
+  );
+};
+
+export default Calculator;

src/components/ExploreContainer.tsx

-import './ExploreContainer.css';
-
-interface ContainerProps {
-  name: string;
-}
-
-const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
-  return (
-    <div className="container">
-      <strong>{name}</strong>
-      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-    </div>
-  );
-};
-
-export default ExploreContainer;

src/pages/Tab1.css

+// change color icon title to white
+.icon-title {
+  color: #fff;
+  font-size: 3.5rem;
+}
\ No newline at end of file

src/pages/Tab1.tsx

 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import ExploreContainer from '../components/ExploreContainer';
-import './Tab1.css';
+import Calculator from '../components/Calculator';
+import "./Tab1.css";
 
 const Tab1: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>Tab 1</IonTitle>
+          <IonTitle>Weather Safety Calculator</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar>
-            <IonTitle size="large">Tab 1</IonTitle>
+            <IonTitle>Weather Safety Calculator</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ExploreContainer name="Tab 1 page" />
+        <Calculator name="Weather Safety Calculator" />
       </IonContent>
     </IonPage>
   );

src/pages/Tab2.tsx

 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import ExploreContainer from '../components/ExploreContainer';
+import ExploreContainer from '../components/Calculator';
 import './Tab2.css';
 
 const Tab2: React.FC = () => {

src/pages/Tab3.tsx

 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import ExploreContainer from '../components/ExploreContainer';
+import ExploreContainer from '../components/Calculator';
 import './Tab3.css';
 
 const Tab3: React.FC = () => {