{"version":3,"sources":["Header.js","assets/data.svg","assets/bear-market.svg","assets/growth-curve.svg","functions.js","Main.js","Footer.js","assets/crying-face.gif","App.js","index.js"],"names":["Header","className","href","target","rel","hasUserGaveCorrectValue","state","length","Number","Main","isMoreThanFiftyPercentLoss","setIsMoreThanFiftyPercentLoss","useState","purchasePrice","setPurchasePrice","stockQuantity","setStockQuantity","currentPrice","setCurrentPrice","showMessage","setShowMessage","isGainProfit","setIsGainProfit","isLossAmt","setIsLossAmt","handleInputChange","event","name","value","src","GrowthCurveIllustration","BearMarketIllustration","DataIllustration","alt","style","color","type","min","onChange","onClick","amt","percent","toFixed","calculateAmtAndPercent","Math","abs","includes","Footer","Date","getFullYear","App","backgroundImage","CryingFace","rootElement","document","getElementById","ReactDOM","render"],"mappings":"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","file":"static/js/main.5904c310.chunk.js","sourcesContent":["import React from \"react\";\r\nimport { AiFillGithub } from \"react-icons/ai\";\r\n\r\nexport default function Header() {\r\n  return (\r\n    <header>\r\n      <div className=\"GithubIconContainer\">\r\n        <a href=\"https://github.com/hsnice16/profit-or-loss-stocks\" target=\"_blank\" rel=\"noreferrer\">\r\n          <AiFillGithub className=\"GithubIcon\" />\r\n        </a>\r\n      </div>\r\n    </header>\r\n  );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/data.452c939c.svg\";","export default __webpack_public_path__ + \"static/media/bear-market.0c8667ac.svg\";","export default __webpack_public_path__ + \"static/media/growth-curve.15d7bc03.svg\";","export const hasUserGaveCorrectValue = (state) => {\r\n  return state.length !== 0 && Number(state) > 0;\r\n};\r\n\r\nexport const calculateAmtAndPercent = (\r\n  purchasePrice,\r\n  stockQuantity,\r\n  currentPrice\r\n) => {\r\n  purchasePrice = Number(purchasePrice);\r\n  stockQuantity = Number(stockQuantity);\r\n  currentPrice = Number(currentPrice);\r\n\r\n  const amt = (currentPrice - purchasePrice) * stockQuantity;\r\n  const percent = (amt * 100) / (purchasePrice * stockQuantity);\r\n\r\n  return [amt.toFixed(2), percent.toFixed(2)];\r\n};\r\n","import React, { useState } from \"react\";\r\nimport DataIllustration from \"./assets/data.svg\";\r\nimport BearMarketIllustration from \"./assets/bear-market.svg\";\r\nimport GrowthCurveIllustration from \"./assets/growth-curve.svg\";\r\nimport { calculateAmtAndPercent, hasUserGaveCorrectValue } from \"./functions\";\r\n\r\nexport default function Main({\r\n  isMoreThanFiftyPercentLoss,\r\n  setIsMoreThanFiftyPercentLoss\r\n}) {\r\n  const [purchasePrice, setPurchasePrice] = useState(\"\");\r\n  const [stockQuantity, setStockQuantity] = useState(\"\");\r\n  const [currentPrice, setCurrentPrice] = useState(\"\");\r\n\r\n  const [showMessage, setShowMessage] = useState(\"\");\r\n  const [isGainProfit, setIsGainProfit] = useState(false);\r\n  const [isLossAmt, setIsLossAmt] = useState(false);\r\n\r\n  const handleInputChange = (event) => {\r\n    if (showMessage) setShowMessage(\"\");\r\n    if (isGainProfit) setIsGainProfit(false);\r\n    if (isLossAmt) setIsLossAmt(false);\r\n    if (isMoreThanFiftyPercentLoss) setIsMoreThanFiftyPercentLoss(false);\r\n\r\n    if (event.target.name === \"purchasePrice\")\r\n      setPurchasePrice(event.target.value);\r\n\r\n    if (event.target.name === \"stockQuantity\")\r\n      setStockQuantity(event.target.value);\r\n\r\n    if (event.target.name === \"currentPrice\")\r\n      setCurrentPrice(event.target.value);\r\n  };\r\n\r\n  const handleCheckBtnClick = () => {\r\n    if (\r\n      !hasUserGaveCorrectValue(purchasePrice) ||\r\n      !hasUserGaveCorrectValue(stockQuantity) ||\r\n      !hasUserGaveCorrectValue(currentPrice)\r\n    ) {\r\n      setShowMessage(\r\n        \"Enter valid Purchase Price, Stock Quantity, and Current Price\"\r\n      );\r\n      return;\r\n    }\r\n\r\n    const [amt, percent] = calculateAmtAndPercent(\r\n      purchasePrice,\r\n      stockQuantity,\r\n      currentPrice\r\n    );\r\n\r\n    if (amt > 0) {\r\n      setIsGainProfit(true);\r\n      setShowMessage(\r\n        `Currently you are in ${percent}% profit, And your gained amount is ₹${amt}`\r\n      );\r\n    } else if (amt < 0) {\r\n      setIsLossAmt(true);\r\n      setShowMessage(\r\n        `Currently you are in ${Math.abs(\r\n          percent\r\n        )}% lost, And your lost amount is ₹${Math.abs(amt)}`\r\n      );\r\n\r\n      if (Math.abs(percent) > 50) setIsMoreThanFiftyPercentLoss(true);\r\n    } else {\r\n      setShowMessage(\"Nothing in gain or loss\");\r\n    }\r\n  };\r\n\r\n  return (\r\n    <main>\r\n      <section className=\"LeftSection\">\r\n        <img\r\n          src={\r\n            isGainProfit\r\n              ? GrowthCurveIllustration\r\n              : isLossAmt\r\n              ? BearMarketIllustration\r\n              : DataIllustration\r\n          }\r\n          alt=\"data illustration svg\"\r\n        />\r\n      </section>\r\n\r\n      <section className=\"RightSection\">\r\n        <h3\r\n          style={\r\n            isMoreThanFiftyPercentLoss ? { color: \"var(--primary-color)\" } : {}\r\n          }\r\n        >\r\n          Check Profit/Loss on your Stock\r\n        </h3>\r\n\r\n        <div className=\"InputLabelDiv\">\r\n          <label>Purchase Price</label>\r\n          <input\r\n            type=\"number\"\r\n            min=\"0\"\r\n            name=\"purchasePrice\"\r\n            value={purchasePrice}\r\n            onChange={handleInputChange}\r\n          />\r\n        </div>\r\n\r\n        <div className=\"InputLabelDiv\">\r\n          <label>Stock Quantity</label>\r\n          <input\r\n            type=\"number\"\r\n            min=\"0\"\r\n            name=\"stockQuantity\"\r\n            value={stockQuantity}\r\n            onChange={handleInputChange}\r\n          />\r\n        </div>\r\n\r\n        <div className=\"InputLabelDiv\">\r\n          <label>Current Price</label>\r\n          <input\r\n            type=\"number\"\r\n            min=\"0\"\r\n            name=\"currentPrice\"\r\n            value={currentPrice}\r\n            onChange={handleInputChange}\r\n          />\r\n        </div>\r\n\r\n        <div className=\"ButtonContainer\">\r\n          <button onClick={handleCheckBtnClick}>check</button>\r\n        </div>\r\n\r\n        {showMessage && (\r\n          <div\r\n            className={`showMessageDiv ${\r\n              showMessage.includes(\"lost\") ||\r\n              showMessage.includes(\"Enter valid\")\r\n                ? \"LossBorder\"\r\n                : \"GainBorder\"\r\n            }`}\r\n          >\r\n            {showMessage}\r\n          </div>\r\n        )}\r\n      </section>\r\n    </main>\r\n  );\r\n}\r\n","import React from \"react\";\r\nimport {\r\n  AiFillFolderOpen,\r\n  AiFillGithub,\r\n  AiFillLinkedin,\r\n  AiFillTwitterCircle\r\n} from \"react-icons/ai\";\r\n\r\nexport default function Footer() {\r\n  return (\r\n    <footer>\r\n      <ul className=\"list-non-bullet\">\r\n        <li className=\"list-item-inline\">\r\n          <a\r\n            href=\"https://github.com/hsnice16\"\r\n            target=\"_blank\"\r\n            rel=\"noreferrer\"\r\n          >\r\n            <AiFillGithub className=\"Icon\" />\r\n          </a>\r\n        </li>\r\n        <li className=\"list-item-inline\">\r\n          <a\r\n            href=\"https://www.linkedin.com/in/hsnice16/\"\r\n            target=\"_blank\"\r\n            rel=\"noreferrer\"\r\n          >\r\n            <AiFillLinkedin className=\"Icon\" />\r\n          </a>\r\n        </li>\r\n        <li className=\"list-item-inline\">\r\n          <a\r\n            href=\"https://twitter.com/hsnice16\"\r\n            target=\"_blank\"\r\n            rel=\"noreferrer\"\r\n          >\r\n            <AiFillTwitterCircle className=\"Icon\" />\r\n          </a>\r\n        </li>\r\n        <li className=\"list-item-inline\">\r\n          <a\r\n            href=\"https://hsnice16.netlify.app/\"\r\n            target=\"_blank\"\r\n            rel=\"noreferrer\"\r\n          >\r\n            <AiFillFolderOpen className=\"Icon\" />\r\n          </a>\r\n        </li>\r\n      </ul>\r\n      <div>\r\n        <span>© {new Date().getFullYear()}</span> | hsnice16\r\n      </div>\r\n    </footer>\r\n  );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/crying-face.26a1b05a.gif\";","import React, { useState } from \"react\";\n\nimport \"./styles.css\";\nimport Header from \"./Header\";\nimport Main from \"./Main\";\nimport Footer from \"./Footer\";\n\nimport CryingFace from \"./assets/crying-face.gif\";\n\nexport default function App() {\n  const [isMoreThanFiftyPercentLoss, setIsMoreThanFiftyPercentLoss] = useState(\n    false\n  );\n\n  return (\n    <div\n      className=\"App\"\n      style={\n        isMoreThanFiftyPercentLoss\n          ? { backgroundImage: `url(${CryingFace})` }\n          : {}\n      }\n    >\n      <Header />\n      <Main\n        isMoreThanFiftyPercentLoss={isMoreThanFiftyPercentLoss}\n        setIsMoreThanFiftyPercentLoss={setIsMoreThanFiftyPercentLoss}\n      />\n      <Footer />\n    </div>\n  );\n}\n","import { StrictMode } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\n  <StrictMode>\n    <App />\n  </StrictMode>,\n  rootElement\n);\n"],"sourceRoot":""}