added JEST for unit testing AND also added functional but not very go…

…od error messages
ZahidMirza95 · Jan 4, 2022 · 273b102 · 273b102
1 parent 4e9f734
commit 273b102
Show file tree

Hide file tree

Showing 8 changed files with 38,361 additions and 7,743 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "jest": "^27.4.5"
   }
 }
diff --git a/src/App.css b/src/App.css
@@ -6,15 +6,125 @@ html {
   text-align: center;
 }
 
-/*form {
-  background-color: rgb(0, 0, 0);
-}*/
-
 @font-face {
   font-family: 'SanMarino';
   src: url(fonts/san-marino-beach-font/SanMarinoBeach-2OOLW.ttf) format('truetype');
 }
 
+/**ERROR MESSAGE**/
+.errorMessage {
+  border-width: 5px;
+  border-color: white;
+  border-style: solid;
+  background-color: black;
+  position: absolute;
+  font-family: 'Franklin Gothic';
+  color: white;
+}
+
+.errorMessage p {
+
+}
+
+/***************/
+/***SCROLLBAR***/
+/***************/
+
+/* width */
+::-webkit-scrollbar {
+  width: 20px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #000000;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(255, 255, 255);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgb(196, 196, 196);
+}
+/************/
+/***NAVBAR***/
+/************/
+
+#navbar {
+  position:fixed;
+  background-color: black;
+  width:100%;
+  display:block;
+  top:-50px;
+  transition: top 0.3s;
+  z-index: 20; /* Makes navbar appear in front of other elements*/
+}
+
+#navbar a {
+  color: white;
+  float: right;
+  display: block;
+  text-align: center;
+  padding: 15px;
+  text-decoration: none;
+  font-size: 17px;
+  font-family: 'SanMarino';
+}
+
+#navbar .balance {
+  color: white;
+  display: block;
+  text-align: center;
+  padding: 15px;
+  text-decoration: none;
+  font-size: 17px;
+  margin: auto;
+  position: absolute;
+  margin-left: 50%;
+  font-family: 'SanMarino';
+}
+
+#navbar a:hover {
+  background-color: white;
+  color: black;
+}
+
+/* BURGER SETTINGS */
+.burger div {
+  width: 25px;
+  height: 3px;
+  background-color: white;
+  margin: 5px;
+  transition: transform 0.2s ease-in;
+}
+
+.exit .line1 {
+  width: 25px;
+  height: 3px;
+  background-color: white;
+  margin: 5px;
+  transform: rotate(-45deg) translate(0px,5px);
+  transition: transform 0.2s ease-in;
+}
+
+.exit .line2 {
+  opacity: 0;
+}
+
+.exit .line3 {
+  width: 25px;
+  height: 3px;
+  background-color: white;
+  margin: 5px;
+  transform: rotate(45deg) translate(0px,-6px);
+  transition: transform 0.2s ease-in; 
+}
+
+/***BALANCE***/
+
 .balanceMain {
   font-family: 'SanMarino';
   font-size: 100px;
@@ -30,23 +140,34 @@ label {
   font-family: 'SanMarino';
 }
 
+/************/
+/****INPUT FORM***/
+/**************/
+
+.transactionForm {
+  background-color: black;
+  margin-left: 10%;
+  margin-right: 10%;
+  border-width: 5px;
+  border-style: solid;
+  border-color: white;
+  color: white;
+}
+
 .enterTransaction {
   font-family: 'SanMarino';
   font-size: 50px;
 }
-/************/
-/****INPUTS***/
-/**************/
 
 .nameInput {
   position: relative;
   border-radius: 5px;
   font-family: 'Franklin Gothic';
-  color: white;
   font-size: 40px;
   margin-bottom: 20px;
   margin-left: 20px;
-  background-color: black;
+  background-color: red;
+  color: white;
 }
 
 .amountInput {
@@ -56,7 +177,7 @@ label {
   font-size: 40px;
   margin-bottom: 20px;
   margin-left: 20px;
-  background-color: black;
+  background-color: red;
   color: white;
 }
 
@@ -72,12 +193,12 @@ label {
   font-size: 40px;
   margin-bottom: 20px;
   margin-left: 20px;
-  background-color: black;
+  background-color: red;
   color: white;
 }
 
 .dateInput {
-  background-color: black;
+  background-color: red;
   color: white;
   position: relative;
   border-radius: 5px;
@@ -103,8 +224,11 @@ label {
   border-width: 5px;
   border-color: white;
   border-style: solid;
-  transform-style: preserve-3d;
-  transition: all 0.8s ease;
+}
+
+.transactionSubmit:hover {
+  background-color: white;
+  color: black;
 }
 
 .parallelogram {
@@ -153,3 +277,11 @@ label {
   height: 50px;
   background: red;
 }
+
+.positive {
+  color: rgb(79, 224, 65);
+}
+
+.negative {
+  color: red;
+}
diff --git a/src/App.js b/src/App.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import './App.css';
 import Form from './components/Form';
 import TransactionList from './components/TransactionList';
+import ErrorMessageBox from './components/ErrorMessageBox';
 
 function App() {
   //Variable declarations
@@ -42,8 +43,25 @@ function App() {
     }
   };
 
+  //Makes the navbar appear on scroll
+  window.onscroll = function() {scrollFunction()};
+
+  function scrollFunction() {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+      document.getElementById("navbar").style.top = "0";
+    } else {
+      document.getElementById("navbar").style.top = "-50px";
+    }
+  }
+
   return (
     <div className="App">
+      <div id='navbar'>
+        <p className='balance'>{parseFloat(balance).toFixed(2)}</p>
+        <a> Achievements </a>
+        <a> Stats </a>
+        <a> Home </a>
+      </div>
       <h1 className='balanceMain'> {parseFloat(balance).toFixed(2)} </h1>
       <Form 
       transactionsDict = {transactionsDict}
@@ -57,6 +75,12 @@ function App() {
       setBalance = {setBalance}/>
       <div className='parallelogram'></div>
       <div className='parallelogram2'></div>
+      <ErrorMessageBox
+      message="TEST MESSAGE"
+      xPos={200}
+      yPos={300}
+      invisible={true}
+      />
     </div>
   );
 }

diff --git a/src/components/ErrorMessageBox.js b/src/components/ErrorMessageBox.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import '../App.css';
+//List of ALL transactions goes in here
+const ErrorMessageBox = ({message, xPos, yPos, invisible}) => {
+    return(
+        <div className='errorMessage' id = 'error' style={{left: xPos + 'px', top: yPos + 'px', visibility: invisible ? 'hidden':'visible'}}>
+            <p> {message} </p>
+        </div>
+    );
+};
+
+export default ErrorMessageBox;
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -24,6 +24,29 @@ const Form = ({setBalance, balance, setTransactionsDict, transactionsDict}) => {
             }
             setBalance(balance+amountInput);
         }
+        //If the amount entered is null or invalid, show a message
+        else if(isNaN(amountInput) || amountInput === null) {
+            document.getElementById('error').style.visibility = 'visible';
+            document.getElementById('error').style.left = '100px';
+            document.getElementById('error').innerHTML = "Error: You must specify a valid amount";
+            //Error disappears in 3 seconds
+            setTimeout(function(){
+                document.getElementById('error').style.visibility = 'hidden';
+            }, 3000);
+            /*document.getElementsByClassName("errorMessage")[0].left = "500px";
+            document.getElementsByClassName("errorMessage")[0].top = "500px";
+            document.getElementsByClassName("errorMessage")[0].visibility = true;*/
+        }
+        //If amount entered will cause balance to become negative, show a message here
+        else {
+            document.getElementById('error').style.visibility = 'visible';
+            document.getElementById('error').style.left = '100px';
+            document.getElementById('error').innerHTML = "Error: Adding this transaction will cause balance to go negative";
+            //Error disappears in 3 seconds
+            setTimeout(function(){
+                document.getElementById('error').style.visibility = 'hidden';
+            }, 3000);
+        }
     }
 
     /**Logic for figuring out today's date in YYYY-mm-dd format*/
@@ -35,7 +58,7 @@ const Form = ({setBalance, balance, setTransactionsDict, transactionsDict}) => {
     const today = `${current.getFullYear()}-${month}-${day}`;
 
     return(
-        <form>
+        <form className='transactionForm'>
             <h1 className='enterTransaction'> Enter Transaction Info </h1>
             <label htmlFor= 'tName'>Name</label>
             <input type="text" className = 'nameInput' id ='tName'></input>
@@ -45,11 +68,11 @@ const Form = ({setBalance, balance, setTransactionsDict, transactionsDict}) => {
             <br/>
             <div className='comment'>
             <label htmlFor="tComment">Comment</label>
-            <textarea className = 'commentInput' id='tComment' rows='5'/>
+            <textarea className = 'commentInput' id='tComment' rows='5' cols='21'/>
             </div>
             <br/>
             <label htmlFor="tDate">Date</label>
-            <input defaultValue={today} type="date" className = 'dateInput'id='tDate'></input>
+            <input defaultValue={today} max={today} type="date" className = 'dateInput'id='tDate'></input>
             <br/>
             <button type='submit' className='transactionSubmit' onClick={submitTransaction}>
                 Add Transaction

diff --git a/src/components/Transaction.js b/src/components/Transaction.js
@@ -25,12 +25,10 @@ const Transaction = ({transactionsDict, setTransactionsDict, name, amount, comme
         <div className='transaction' key = {id}>   
             <li className='transaction-item'>
                 <h1> {name} </h1>
-                <h1> {amount} </h1>
+                <h1 className={amount >= 0 ? 'positive' : 'negative'}> {amount} </h1>
                 <h1> {comment} </h1>
             </li>
-            <button className='garbage' onClick = {deleteHandler}>
-                <i key={id} className='fas fa-trash'></i>
-            </button>
+            <button className='garbage' onClick = {deleteHandler}/>
         </div>
     );
 }