{"version":3,"sources":["components/App/Header.js","components/App/Footer.js","components/Form/Button.js","components/Calculator/images/icon-dollar.svg","components/Calculator/images/icon-person.svg","components/Calculator/Form.js","components/Form/helpers.js","components/Calculator/Result.js","components/App/Calculator.js","App.js","index.js"],"names":["Title","styled","h2","Header","Wrapper","footer","Footer","href","rel","target","button","Button","percentage","setTip","type","onClick","form","Form","calculateTip","useState","price","setPrice","people","setPeople","tip","customPercentage","setCustomPercentage","isValidation","setIsValidation","onSubmit","e","value","preventDefault","test","hasValue","className","src","dollarIcon","alt","placeholder","onChange","map","index","personIcon","section","Result","tipAmount","total","resetState","toFixed","Calculator","props","state","bind","this","setState","prevState","Number","Component","main","App","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.ba0f349c.chunk.js","sourcesContent":["import styled from 'styled-components';\n\nconst Header = () => {\n  return (\n    <Title>\n      SPLI <br /> TTER\n    </Title>\n  );\n};\n\nconst Title = styled.h2`\n  font-weight: 700;\n  color: var(--clr-secondary-bg);\n  letter-spacing: 10px;\n  margin-bottom: 2em;\n`;\n\nexport default Header;\n","import styled from 'styled-components';\n\nconst Footer = () => {\n  return (\n    <Wrapper>\n      <p>\n        Challenge by{' '}\n        <a\n          href=\"https://www.frontendmentor.io?ref=challenge\"\n          rel=\"noreferrer noopener\"\n          target=\"_blank\"\n        >\n          Frontend Mentor\n        </a>\n        . Coded by{' '}\n        <a\n          href=\"https://github.com/do-Va\"\n          rel=\"noreferrer noopener\"\n          target=\"_blank\"\n        >\n          doVa\n        </a>\n        .\n      </p>\n    </Wrapper>\n  );\n};\n\nconst Wrapper = styled.footer`\n  font-size: 11px;\n  text-align: center;\n\n  a {\n    color: hsl(228, 45%, 44%);\n  }\n`;\n\nexport default Footer;\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst Button = ({ percentage, setTip }) => {\n  return (\n    <Wrapper type=\"submit\" onClick={() => setTip(percentage)}>\n      {percentage}%\n    </Wrapper>\n  );\n};\n\nconst Wrapper = styled.button`\n  width: 140px;\n\n  background: var(--clr-secondary-bg);\n  color: var(--clr-main-f);\n\n  &:hover {\n    background: var(--clr-strong-f);\n    color: var(--clr-secondary-bg);\n  }\n  \n  @media only screen and (min-width: 375px) {\n    width: 155px;\n  }\n`;\n\nexport default Button;\n","export default __webpack_public_path__ + \"static/media/icon-dollar.9f9be353.svg\";","export default __webpack_public_path__ + \"static/media/icon-person.65bfd204.svg\";","import styled from 'styled-components';\nimport React, { useState } from 'react';\n\nimport { isValid } from '../Form/helpers';\nimport Button from '../Form/Button';\nimport dollarIcon from './images/icon-dollar.svg';\nimport personIcon from './images/icon-person.svg';\n\nconst Form = ({ calculateTip }) => {\n  const [price, setPrice] = useState(0);\n  const [people, setPeople] = useState(0);\n  const [tip, setTip] = useState(0);\n  const [customPercentage, setCustomPercentage] = useState('');\n  const [isValidation, setIsValidation] = useState(true);\n  const percentages = ['5', '10', '15', '25', '50'];\n  \n  const hasValue = (customPercentage, tip) => {\n    if (customPercentage !== tip && customPercentage) {\n      return customPercentage;\n    }\n\n    return tip;\n  };\n\n  const handleSubmit = e => {\n    e.preventDefault();\n\n    if (isValid(people)) {\n      calculateTip(price, hasValue(customPercentage, tip), people);\n      setIsValidation(true);\n      setCustomPercentage('');\n    } else {\n      setIsValidation(false);\n    }\n  };\n\n  return (\n    <Wrapper onSubmit={handleSubmit}>\n      <div className=\"form-group\">\n        <h3>Bill</h3>\n        <div className=\"input-container\">\n          <img src={dollarIcon} alt=\"Dollar Icon\" />\n          <input\n            type=\"text\"\n            placeholder=\"0\"\n            className=\"input\"\n            onChange={e => setPrice(e.target.value)}\n          />\n        </div>\n      </div>\n\n      <div className=\"form-group\">\n        <h3>Select Tip %</h3>\n        <div className=\"btn-container\">\n          {percentages.map((percentage, index) => (\n            <Button key={index} percentage={percentage} setTip={setTip} />\n          ))}\n          <input\n            type=\"text\"\n            placeholder=\"Custom\"\n            value={customPercentage}\n            onChange={e => setCustomPercentage(e.target.value)}\n            className=\"input\"\n          />\n        </div>\n      </div>\n\n      <div className=\"form-group\">\n        <div className=\"text-container\">\n          <h3>Number of People</h3>\n          <h3 className={isValidation ? 'error' : 'error show'}>\n            Can't be zero\n          </h3>\n        </div>\n        <div className=\"input-container\">\n          <img src={personIcon} alt=\"Person Icon\" />\n          <input\n            type=\"text\"\n            placeholder=\"0\"\n            className={isValidation ? 'input' : 'input show'}\n            onChange={e => setPeople(e.target.value)}\n          />\n        </div>\n      </div>\n    </Wrapper>\n  );\n};\n\nconst Wrapper = styled.form`\n  width: 100%;\n  max-width: 497px;\n\n  .form-group {\n    margin-bottom: 20px;\n\n    .input-container {\n      position: relative;\n\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n\n      border-radius: 5px;\n\n      img {\n        position: absolute;\n        margin-left: 20px;\n        top: 30%;\n      }\n\n      .input {\n        width: 100%;\n        height: 100%;\n      }\n\n      .show {\n        border-color: orangered;\n      }\n    }\n\n    .input {\n      text-align: right;\n      background: inherit;\n      outline: transparent;\n      border: 2px solid transparent;\n      color: var(--clr-secondary-bg);\n      background: var(--clr-main-f);\n      padding-inline: 20px;\n      border-radius: 5px;\n\n      &:focus {\n        border-color: var(--clr-strong-f);\n      }\n    }\n\n    .btn-container {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-wrap: wrap;\n      gap: 16px;\n\n      .input {\n        width: 140px;\n        height: 50px;\n\n        &::placeholder {\n          text-align: center;\n        }\n        \n        @media only screen and (min-width: 375px) {\n          width: 155px;\n        }\n      }\n    }\n\n    .text-container {\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n\n      .error {\n        color: orangered;\n        display: none;\n      }\n\n      .show {\n        display: block;\n      }\n    }\n  }\n`;\n\nexport default Form;\n","export const isValid = value => {\n  if (/^\\d*\\.?\\d*$/.test(value) && value > 0) {\n    return true;\n  } else {\n    return false;\n  }\n};\n","import styled from 'styled-components';\n\nconst Result = ({ tipAmount, total, resetState }) => {\n  const handleClick = () => {\n    resetState();\n  };\n\n  return (\n    <Wrapper>\n      <div className=\"main\">\n        <div className=\"container\">\n          <div className=\"content\">\n            <h3>Tip Amount</h3>\n            <p>/ person</p>\n          </div>\n          <p className=\"price\">${tipAmount}</p>\n        </div>\n        <div className=\"container\">\n          <div className=\"content\">\n            <h3>Total</h3>\n            <p>/ person</p>\n          </div>\n          <p className=\"price\">${total.toFixed(2)}</p>\n        </div>\n      </div>\n      <button onClick={handleClick}>RESET</button>\n    </Wrapper>\n  );\n};\n\nconst Wrapper = styled.section`\n  width: 100%;\n  max-width: 497px;\n  height: 100%;\n  background: var(--clr-secondary-bg);\n  border-radius: inherit;\n  padding: inherit;\n  display: flex;\n  flex-direction: column;\n\n  .main {\n    width: 100%;\n    height: 100%;\n    margin-top: 1em;\n\n    .container {\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 1.5em;\n\n      .content {\n        h3 {\n          margin-bottom: 0;\n          color: var(--clr-main-f);\n        }\n\n        p {\n          color: var(--clr-primary-f);\n          font-size: 0.8em;\n          font-weight: 700;\n        }\n      }\n\n      .price {\n        color: var(--clr-strong-f);\n        font-weight: 700;\n        font-size: 3rem;\n      }\n    }\n  }\n\n  button {\n    width: 100%;\n    background: var(--clr-strong-f);\n    color: var(--clr-secondary-bg);\n    margin-bottom: 1em;\n\n    &:hover {\n      filter: brightness(120%);\n    }\n  }\n\n  @media only screen and (min-width: 1000px) {\n    height: 358px;\n  }\n`;\n\nexport default Result;\n","import React, { Component } from 'react';\nimport styled from 'styled-components';\n\nimport Form from '../Calculator/Form';\nimport Result from '../Calculator/Result';\n\nclass Calculator extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      tipAmount: 0,\n      total: 0,\n    };\n\n    this.calculateTip = this.calculateTip.bind(this);\n    this.resetState = this.resetState.bind(this);\n  }\n\n  calculateTip(price, tip, people) {\n    let tipAmount = ((price * tip) / people / 100).toFixed(2);\n    this.setState({ tipAmount });\n\n    this.setState(prevState => {\n      return {\n        ...prevState,\n        total: (prevState.total += Number(prevState.tipAmount)),\n      };\n    });\n  }\n\n  resetState() {\n    this.setState({ tipAmount: 0, total: 0 });\n  }\n\n  render() {\n    return (\n      <Wrapper>\n        <Form calculateTip={this.calculateTip} resetState={this.resetState} />\n        <Result {...this.state} resetState={this.resetState} />\n      </Wrapper>\n    );\n  }\n}\n\nconst Wrapper = styled.section`\n  width: 100%;\n  max-width: 1074px;\n  padding: 1.5em;\n  background: var(--clr-primary-bg);\n  margin-bottom: 2em;\n  border-radius: 12px;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  @media only screen and (min-width: 1000px) {\n    flex-direction: row;\n    gap: 2em;\n    box-shadow: 10px 0px 30px rgba(0, 0, 0, 0.3);\n  }\n`;\n\nexport default Calculator;\n","import styled from 'styled-components';\n\nimport Header from './components/App/Header';\nimport Footer from './components/App/Footer';\nimport Calculator from './components/App/Calculator';\n\nconst App = () => {\n  return (\n    <Wrapper>\n      <Header />\n      <Calculator />\n      <Footer />\n    </Wrapper>\n  );\n};\n\nconst Wrapper = styled.main`\n  width: 100%;\n  min-height: 100%;\n  padding-block: 2em;\n  background: var(--clr-main-bg);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n"],"sourceRoot":""}