FAIR SHARE 1.1.0

Add Responsive
Add Form Alerts
Add SweetAlert2
Update App.js
Update README.md

README.md

@@ -10,9 +10,10 @@
 
 - **STACK :**
 
-  - **Fair Share** : `1.0.0`
+  - **Fair Share** : `1.1.0`
   - **React** : `18.3.1`
   - **React Dom** : `18.3.1`
+  - **SweetAlert2** : `11.12.4`
 
 ---
 
@@ -25,4 +26,4 @@
 - **CREDITS :**
 
   - **Author : [David Gómez](https://github.com/DavidGomezToca)**
-  - **Resources : [Flaticon](https://www.flaticon.com/)**
+  - **Resources : [Flaticon](https://www.flaticon.com/)**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fair-share",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
@@ -9,6 +9,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "sweetalert2": "^11.12.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/App.js

@@ -1,3 +1,4 @@
+import Swal from "sweetalert2";
 import { useState } from "react";
 import FriendsData from "../data/friendsData.json";
 
@@ -120,7 +121,31 @@ function FormSplitBill({ selectedFriend, onSplitBill }) {
 
   function handleSubmit(e) {
     e.preventDefault();
-    if (!bill || !paidByUser) return;
+
+    if (!bill || !paidByUser) {
+      Swal.fire({
+        title: "All fields required", icon: "info",
+        customClass: {
+          htmlContainer: "swal2-text",
+          confirmButton: "swal2-text",
+          popup: "swal2-popup"
+        }
+      });
+      return;
+    };
+
+    if (bill < 0 || paidByUser < 0) {
+      Swal.fire({
+        title: "Values must be above 0", icon: "info",
+        customClass: {
+          htmlContainer: "swal2-text",
+          confirmButton: "swal2-text",
+          popup: "swal2-popup"
+        }
+      });
+      return;
+    };
+
     onSplitBill(whoIsPaying === "user" ? paidByFriend : -paidByUser);
   }
 

src/index.css

@@ -168,4 +168,19 @@ form h2 {
   text-transform: uppercase;
   letter-spacing: -0.5px;
   margin-bottom: 1.6rem;
-}
+}
+
+.swal2-text {
+  font-size: 18px !important;
+}
+
+.swal2-popup {
+  font-size: 12px !important;
+}
+
+@media (max-width: 1000px) {
+  .app {
+    grid-template-columns: 1fr;
+    row-gap: 4rem;
+  }
+}