{"version":3,"sources":["components/IntroText.js","components/Form.js","components/Popped.js","components/Ball.js","components/DadJokes.js","components/Footer.js","App.js","reportWebVitals.js","index.js"],"names":["IntroText","className","href","Form","props","useState","userInput","setUserInput","onSubmit","e","handleSubmit","handleDisplayBall","handleStartBall","htmlFor","placeholder","id","value","onChange","target","maxLength","displayBall","type","length","onClick","Popped","Ball","userText","countValue","setCountValue","DadJokes","getJoke","joke","Footer","App","setJoke","setDisplayBall","preventDefault","showBall","axios","url","method","headers","accept","then","response","data","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"yNAoBeA,MApBf,WAEI,OACI,qCACI,qDACA,sBAAKC,UAAU,aAAf,UACI,4CACA,8PACA,8BAAG,mBAAGC,KAAK,+FAAR,kBAAH,4EAA2L,mBAAGA,KAAK,0BAAR,wBAA3L,mEAEA,wGAEA,6CAEA,8CC4CDC,MAvDf,SAAcC,GAEV,MAAoCC,mBAAS,IAA7C,mBAAQC,EAAR,KAAmBC,EAAnB,KAeA,OACI,mCAEI,uBAAMC,SAAwB,KAAdF,EAAmB,KAAQ,SAACG,GAAD,OAb3B,SAACA,GACrBL,EAAMM,aAAaD,EAAGH,GACtBF,EAAMO,mBAAkB,GAW8BC,CAAgBH,IAAlE,UACI,uBAAOI,QAAQ,cACf,0BACIC,YAAY,mHACZC,GAAG,YACHC,MAAOV,EACPW,SAvBK,SAACR,GAClBF,EAAaE,EAAES,OAAOF,QAuBVG,UAAY,MAIRf,EAAMgB,YACN,6BACG,wBAAQC,KAAK,SAAb,6BAEP,mDAAsBf,EAAUgB,OAAhC,YAGIlB,EAAMgB,YACN,wBAAQnB,UAAU,cAAcsB,QAAW,kBA1B3DhB,EAAa,SACbH,EAAMO,mBAAkB,IAyBR,wBACE,mCC/BXa,MAZf,WAEI,OACI,sBAAKvB,UAAU,SAAf,UACI,mFACA,sIACA,+GACA,qGCyBGwB,MA5Bf,YAA2B,IAAZC,EAAW,EAAXA,SAEX,EAAoCrB,mBAAS,IAA7C,mBAAOsB,EAAP,KAAmBC,EAAnB,KASA,OACA,mCAGqB,IAAfD,EACE,sBAAK1B,UAAU,OAAf,UACI,4BAAIyB,IACJ,yBAAQH,QAdA,WAChB,GAAmB,IAAfI,EAGH,OAAQ,KAFTC,EAAcD,EAAa,IAYnB,UAA+BA,EAA/B,gCAEL,cAAC,EAAD,OCdIE,MAVf,SAAkBzB,GACd,OACI,sBAAKH,UAAU,eAAf,UACI,gGACA,wBAAQsB,QAASnB,EAAM0B,QAAvB,kCACA,4BAAK1B,EAAM2B,WCGRC,MARf,WACI,OACI,iCACI,wHCgEGC,MAzDf,WAGE,MAAyB5B,mBAAS,IAAlC,mBAAO0B,EAAP,KAAaG,EAAb,KACA,EAAoC7B,mBAAS,IAA7C,mBAAQC,EAAR,KAAmBC,EAAnB,KACA,EAAwCF,oBAAS,GAAjD,mBAAQe,EAAR,KAAqBe,EAArB,KA4BA,OACE,sBAAKlC,UAAU,cAAf,UAEE,cAAC,EAAD,IAEA,cAAC,EAAD,CAAMS,aAhBW,SAACD,EAAGiB,GACrBjB,EAAE2B,iBACF7B,EAAamB,IAePf,kBAVgB,SAAC0B,GACzBF,EAAeE,IAUPjB,YAAeA,IAGnBA,EACA,cAAC,EAAD,CAAMM,SAAUpB,IACd,yCAGJ,cAAC,EAAD,CAAUyB,KAAMA,EACND,QAzCE,WACdQ,IAAM,CACJC,IAAK,8BACLC,OAAQ,MACRC,QAAS,CACPC,OAAQ,sBAETC,MAAK,SAACC,GACPV,EAAQU,EAASC,KAAKd,YAmCtB,cAAC,EAAD,QCjDSe,EAZS,SAAAC,GAClBA,GAAeA,aAAuBC,UACxC,6BAAqBL,MAAK,YAAkD,IAA/CM,EAA8C,EAA9CA,OAAQC,EAAsC,EAAtCA,OAAQC,EAA8B,EAA9BA,OAAQC,EAAsB,EAAtBA,OAAQC,EAAc,EAAdA,QAC3DJ,EAAOF,GACPG,EAAOH,GACPI,EAAOJ,GACPK,EAAOL,GACPM,EAAQN,OCFdO,IAASC,OACP,cAAC,IAAMC,WAAP,UACE,cAAC,EAAD,MAEFC,SAASC,eAAe,SAM1BZ,M","file":"static/js/main.db67da93.chunk.js","sourcesContent":["function IntroText() {\n\n    return (\n        <>\n            <h1>Virtual Stress Ball</h1>\n            <div className=\"intro-text\">\n                <p>Hi friends,</p> \n                <p>this website is made to hopefully give you a teeny tiny bit break and reprieve from all the hustle and bustle that is your lives. Stress is a part of life, especially during this tough time. It's normal...until it's not. </p>\n                <p><a href=\"https://www.camh.ca/en/health-info/mental-health-and-covid-19/coping-with-stress-and-anxiety\">CAMH</a> has some excellent tips of coping with stress and anxiety. There's also <a href=\"https://takecare19.com/\">takecare19</a> that lists accessible and inclusive mental health resources.</p>  \n                \n                <p>Please take great care of yourself and take as many breaks as you need!</p>\n                \n                <p>💖</p>\n                \n                <p>Azalia</p>\n            </div>\n        </>\n    )\n}\n\nexport default IntroText;","import {useState} from 'react'\n\n\nfunction Form(props) {\n\n    const [ userInput, setUserInput ] = useState('');\n    const handleChange = (e) => {\n        setUserInput(e.target.value)\n    }\n\n    const handleStartBall = (e) => {\n        props.handleSubmit(e, userInput)\n        props.handleDisplayBall(true)\n    }\n\n    const handleResetForm = () => {\n        setUserInput('')\n        props.handleDisplayBall(false)\n    }\n\n    return(\n        <>\n\n            <form onSubmit={userInput === '' ? null : ((e) => handleStartBall(e))}>\n                <label htmlFor=\"userInput\"></label>\n                <textarea \n                    placeholder=\"write something that's stressing you out right now. or if you're just here for the dad jokes, scroll right down!\"\n                    id=\"userInput\"\n                    value={userInput}\n                    onChange={handleChange}\n                    maxLength= {180}\n                    />\n\n                    {\n                        props.displayBall ?\n                        <></>\n                        :  <button type=\"submit\">Get Me My Ball!</button>\n                    }\n                    <p>Characters count: {userInput.length} / 180</p>\n\n                    {\n                        props.displayBall ?\n                        <button className=\"resetButton\" onClick = {() => handleResetForm()}>Reset Form</button>\n                        : <></>\n\n                    }\n            </form>\n            \n\n            \n\n        </>\n        \n    )\n    \n\n}\n\nexport default Form\n\n\n","function Popped () {\n\n    return (\n        <div className=\"popped\">\n            <h2>✨✨YOU'RE DOING A GREAT JOB!✨✨</h2>\n            <h3>Stressed spelled backwards is desserts! 🍰🧁🍮🍨🍩</h3>\n            <p>If you needed more balls to click, please click reset and fill the form again.</p>\n            <p>Otherwise, thanks for visiting and have a joke before you leave!</p>\n        </div>\n    )\n}\n\nexport default Popped;","import { useState } from 'react'\nimport Popped from './Popped';\n\n\nfunction Ball({userText}) {\n\n    const [countValue, setCountValue] = useState(50)\n\n    const handleClick = () => {\n        if (countValue !== 0) {\n        setCountValue(countValue - 1) \n        } else \n        {return (null)} \n    }\n    \n    return ( \n    <>\n        \n\n        { countValue !== 0\n        ?  (<div className=\"ball\" >\n                <p>{userText}</p>\n                <button onClick={handleClick}>{countValue} frustrated clicks left</button>\n            </div>)  \n        : (<Popped />)          \n        }\n\n        \n    </> \n    )\n}\n\nexport default Ball;\n\n","function DadJokes(props)  {\n    return (\n        <div className=\"joke-section\">\n            <p>Dads are coming to save (a little bit of) the day! ☂️</p>\n            <button onClick={props.getJoke}>Get a Joke From Dads</button>\n            <p>{ props.joke }</p>\n      </div>\n    )\n}\n\nexport default DadJokes;","function Footer() {\n    return(\n        <footer>\n            <p>Created by Azalia Loeciano @ Juno College 2021 | Jokes taken from icanhazdadjoke API</p>\n        </footer>\n    )\n}\n\nexport default Footer;","import axios from 'axios';\nimport './styles/App.css';\nimport {  useState } from 'react';\nimport IntroText from './components/IntroText';\nimport Form from './components/Form';\nimport Ball from './components/Ball';\nimport DadJokes from './components/DadJokes';\nimport Footer from './components/Footer';\n\n\nfunction App() {\n\n  // states //\n  const [joke, setJoke ] = useState('');\n  const [ userInput, setUserInput ] = useState('')\n  const [ displayBall, setDisplayBall ] = useState(false);\n  \n  // function to call the API to get a random joke\n  const getJoke = function() {\n    axios({\n      url: 'https://icanhazdadjoke.com/',\n      method: 'GET',\n      headers: {\n        accept: 'application/json',\n      }\n    }).then((response) => {\n      setJoke(response.data.joke);\n    })\n  };\n\n  // FORM - when users submit form //\n\n  const handleSubmit = (e, userText) => {\n      e.preventDefault();\n      setUserInput(userText);\n  }\n\n  // BALL - when to display ball //\n\n  const handleDisplayBall = (showBall) => {\n    setDisplayBall(showBall)\n  }\n\n  return (\n    <div className=\"stress-ball\">\n      \n      <IntroText />\n\n      <Form handleSubmit={handleSubmit}\n            handleDisplayBall={handleDisplayBall}\n            displayBall = {displayBall}\n            />\n\n      { displayBall ? \n        <Ball userText={userInput}  />\n        : <> </>\n      }\n      \n      <DadJokes joke={joke}\n                getJoke={getJoke} />\n      \n      <Footer />\n\n    </div> \n  );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}