Currency Convert

currency-convert.markdown

Currency Convert

A Pen by David Piruzashvili on CodePen.

License.

index.html

<div id="app">
</div>

script.babel

const Calc = (props) => {

  const [usd, setInc] = React.useState(props.counter);
  const [converTo, setTo] = React.useState(0);
  const [codeName, setCode] =  React.useState("");
  const [data, setData] = React.useState({});  
 
  
  
  React.useEffect(() => {
  console.log('effect');
  updateData();
  
}, []);
  

  
  
  updateData = () => {
    props.getCurrency().then(onDataLoaded)
                 .catch(error => console.log(error))
  }
  
  onDataLoaded = (data) => { 
    setData(data);
  }
 
  
  
  
  function changeCounterInc(e,i) {
    const toggle = e.currentTarget.getAttribute('data-toggle');
    props.changeFlag(toggle);
    setCode(codeName => toggle);
    setTo(converTo => Intl.NumberFormat('en-US').format(+(usd*i).toFixed(2)));
 
 }
  
 React.useEffect(() => {
  console.log('updateData');

}, [converTo]);
 
  
  function resetCounter() {
    setTo(converTo => 0);
    setCode(codeName => '');
   props.changeFlag("");
  }
  
  React.useEffect(() => {
  console.log('reset');

}, [codeName]);
  
  
  const {cad, uah, gel} = data; 

  const buttonsData = [
    {currentRate: cad, lable: "CAD", symbol: "$ CAD"},
    {currentRate: uah, lable: "UAH", symbol: "₴ UAH"},
    {currentRate: gel, lable: "GEL", symbol: "₾ GEL"},
  ]
  
  const [a, b, c] = buttonsData;
  

  renderSwitch = (param) => {
  switch(param) {
    case a.symbol:
      return styleEffect ={"background": "url('https://www.immigration.scot/wp-content/uploads/2015/01/canada_640.png') #99e6ff no-repeat center/100%"};
    case b.symbol:
      return styleEffect ={"background": "url('https://www.pngplay.com/wp-content/uploads/8/Round-Ukraine-Flag-PNG-Clipart-Background.png') #ffffcc no-repeat center/80%"};
    case c.symbol:
      return styleEffect ={"background": "url('https://pilkarskiswiat.com/wp-content/uploads/2014/11/georgia.png') #ffc2b3 no-repeat center/80%"};
    default:
      return styleEffect ={"backgroundColor": "dodgerblue"};
  }
}

  console.log(props.flag);
  
  const createButtons = buttonsData.map(({currentRate, lable, symbol}) => {
    return (
     <button 
            data-toggle={symbol}
            key={lable}
            onClick={(e) => changeCounterInc(e, currentRate)}>{lable}
      </button>
       
    )
  });
  
  
  
    return (
      <div class="app">
        
        <div class="flex-container">
        <div class="counter">{usd} $</div> 
        <div class="counter-center">></div>
        <div class="counter-right" style={renderSwitch(props.flag)}>{converTo}<span>{codeName}</span></div>
        </div>
        
        <div class="controls">
         {createButtons}
          <button  
            onClick={() => resetCounter()}>RESET</button>
        </div>
      </div>
    )
  
}



function App() {
  
  const getRecours = async (url) => {
  const res = await fetch(url);
  if(!res.ok) {
    throw new Error(`Could not fetch ${url} status: ${res.status}`);
  }
  return await res.json();
}

const getCurrency = async () => {
  _apiKey = '58b2d080-670c-11ec-8a08-3992c5f82da2';
  const res = await getRecours(`https://freecurrencyapi.net/api/v2/latest?apikey=${_apiKey}`);
  return _transformCharacter(res); 
}


 _transformCharacter = (res) => {
  
   const {data:{CAD, UAH, GEL}} = res;
        return {
            cad: CAD,
            uah: UAH,
            gel: GEL,
            
        }
    }

 
 const [flag, setFlag] = React.useState('');
 
  
  changeFlag = (i) => {
    setFlag(flag => i);
  }
  
  React.useEffect(() => {
  
}, [flag]);
 
  return (
    <>
  <Calc counter={100}  getCurrency={() => getCurrency()} changeFlag={changeFlag} flag={flag}/>
    </>
  )
}


ReactDOM.render(<App/>, document.getElementById('app'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

style.css

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}

body {
  background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

.app {
  width: 400px;
  height: 250px;
  background-color: #fff;
  margin: 50px auto 0 auto;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px rgba(0,0,0, .2);
}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}


.counter {
  flex: 50%;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px rgba(0,0,0, .2);
  background-color: #e6e6e6;
  text-align: center;
  line-height: 100px;
  font-size: 32px;
  margin-right:20px;
}

.counter-center {
  margin-top: 40px;
    text-align: center;
    width: 40px;
   font-size: 20px;
}

.counter-right {
  flex: 50%;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px rgba(0,0,0, .2);
  background-color:dodgerblue;
  text-align: center;
  line-height: 100px;
  font-size: 32px;
   margin-left:20px;
}

.counter-right  span {
  position:  absolute;
  top: 120px;
  left: 830px;
  padding: 9px;
  font-size: 12px;
  color: #00000;
}

.controls {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}


.controls button {
  padding: 7px 12px;
  cursor: pointer;
  background-color: #6B7A8F;
  color: white;
}

React Hook useState(), useEffect()