cdv-poznan · adammurawicz · Apr 6, 2022 · Apr 9, 2022 · Apr 9, 2022 · Apr 9, 2022
diff --git a/ExchangeRate/img/topDesktop.jpg b/ExchangeRate/img/topDesktop.jpg
diff --git a/ExchangeRate/img/topMobile.jpg b/ExchangeRate/img/topMobile.jpg
diff --git a/ExchangeRate/index.html b/ExchangeRate/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exchange Rate</title>
+    <!-- font awesome -->
+    <script src="https://kit.fontawesome.com/bdb8f978f5.js" crossorigin="anonymous"></script>
+    <!-- BS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <!-- Google fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <!-- css -->
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+
+<div class="wrapper container mt-5 overflow-hidden d-flex flex-column p-0">
+
+<!-- top start -->
+
+    <div class="top row text-center"> 
+
+        <div class="top__info col-lg-10">
+            <p class="top__info--title h1 ms-1 me-1">Check Exchange Rate</p>
+            <p class="top__info--data h3 mt-4 ms-1 me-1">Current rate from: <span class="top__info--span"></span> </p>
+        </div>
+
+        <div class="top__button d-none d-lg-flex col-lg-2 align-items-center justify-content-start">
+           <button>Change styles:</button>
+        </div>
+
+        <div class="shadow"></div>
+
+    </div>
+
+<!-- top end -->
+
+<!-- main start -->
+
+    <main class="main d-lg-flex row">
+
+        <div class="main__exchange col-lg-10 d-flex flex-column justify-content-around align-items-center">
+
+                <div class="main__exchange--one">
+                    <input type="number" class="input-one" value="1">
+                    <select class="select-one">
+                        <option value="PLN" selected>PLN</option>
+                        <option value="USD">USD</option>
+                        <option value="GBP">GBP</option>
+                        <option value="EUR">EUR</option>
+                        <option value="CHF">CHF</option>
+                        <option value="NOK">NOK</option>
+                        <option value="ISK">ISK</option>
+                    </select>
+                </div>
+
+                <button class="swap"><i class="fas fa-sync"></i></button>
+
+                <div class="main__exchange--two">
+                    <input type="number" class="input-two" readonly>
+                    <select class="select-two">
+                        <option value="PLN">PLN</option>
+                        <option value="USD" selected>USD</option>
+                        <option value="GBP">GBP</option>
+                        <option value="EUR">EUR</option>
+                        <option value="CHF">CHF</option>
+                        <option value="NOK">NOK</option>
+                        <option value="ISK">ISK</option>
+                    </select>
+                </div>
+
+
+            <p class="main__exchange--p text-center"></p>
+        </div>
+
+        <div class="main__style d-none d-lg-flex flex-column col-lg-2 justify-content-center align-items-center">
+
+            <div class="main__style--bgc pt-4 pb-4 ps-1 pe-1">
+                <p>Background image link: (paste link and press enter)</p>
+                <input type="text">
+            </div>
+
+            <div class="main__style--first pt-4 pb-4 ps-1 pe-1 d-flex">
+                <p class="me-2">Color style:</p> <button>basic</button>
+            </div>
+
+            <div class="main__style--second pt-4 pb-4 ps-1 pe-1 d-flex">
+                <p class="me-2">Color style:</p> <button>red</button>
+            </div>
+
+            <div class="main__style--third pt-4 pb-4 ps-1 pe-1 d-flex">
+                <p class="me-2">Color style:</p> <button>green</button>
+            </div>
+
+        </div>
+
+    </main>
+
+    <!-- main end -->
+
+    <!-- bottom start -->
+
+    <div class="bottom d-flex justify-content-center align-items-center text-center">
+        <p class="bottom__text"> Curious money fact: <span class="bottom__span"></span> </p>
+    </div>
+
+</div>
+
+
+
+<!-- BS -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+<!--  main JS -->
+<script src="./main.js"></script>
+</body>
+</html>
diff --git a/ExchangeRate/main.js b/ExchangeRate/main.js
@@ -0,0 +1,123 @@
+// consts:
+
+const funFacts = [
+    'Money usually takes the form of coins, banknotes and bank balances',
+    'There are a number of different currencies used in countries around the world',
+    'Many countries have their own currency, while some use a shared currency',
+    'The currency most traded around the world is the United States dollar',
+    'It is believed that products such as livestock and grain were used to barter (exchange goods and services without the use of money) over 10,000 years ago',
+    'The first coins were minted (made) around 2,500 years ago',
+    'Paper money was first used in China over 1,000 years ago',
+    'The benefit of metal coins is that they are portable and durable',
+    'The original value of a British pound was equal to a pound (in weight) of silver',
+    "Credit cards were first used in the United States in the 1920’s"
+]
+
+const bottomSpan = document.querySelector('.bottom__span')
+const dateSpan = document.querySelector('.top__info--span')
+const styleBtn = document.querySelector('.top__button button')
+const styleDiv = document.querySelector('.main__style')
+const topDiv = document.querySelector('.top')
+const styleInput = document.querySelector('.main__style--bgc input')
+const basicBtn = document.querySelector('.main__style--first button')
+const redBtn = document.querySelector('.main__style--second button')
+const greenBtn = document.querySelector('.main__style--third button')
+const styleP = document.querySelectorAll('.main__style p')
+let root = document.documentElement
+const inputTop = document.querySelector('.input-one')
+const inputBottom = document.querySelector('.input-two')
+const selectTop = document.querySelector('.select-one')
+const selectBottom = document.querySelector('.select-two')
+const swapBtn = document.querySelector('.swap')
+const rateInfo = document.querySelector('.main__exchange--p')
+
+// functions:
+
+const getDate = () => {
+    let currentDate = new Date().toLocaleDateString('pl')
+    dateSpan.textContent = currentDate    
+}
+
+const getFact = () => {
+    let number = Math.floor(Math.random()*funFacts.length)
+    bottomSpan.textContent = `${funFacts[number]}.`
+}
+
+const showStyle = () => {
+    if (styleDiv.style.opacity == 0) {
+        styleDiv.style.opacity = 1
+    } else {
+        styleDiv.style.opacity = 0
+    }
+}
+
+const getBackgroundImage = () => {
+    newUrl = styleInput.value
+    topDiv.style.backgroundImage = `url('${newUrl}')`
+}
+
+const getBasic = () => {
+    root.style.setProperty('--dark', '#262626')
+    root.style.setProperty('--light', '#262626')
+    root.style.setProperty('--bgc', '#F2F2F2')
+    for (p of styleP) {
+        p.style.color = '#262626'
+    }
+}
+
+const getRed = () => {
+    root.style.setProperty('--dark', '#BF2121')
+    root.style.setProperty('--light', '#BF8173')
+    root.style.setProperty('--bgc', '#D9C5AD')
+    for (p of styleP) {
+        p.style.color = '#BF2121'
+    }
+}
+
+const getGreen = () => {
+    root.style.setProperty('--dark', '#005C53')
+    root.style.setProperty('--light', '#9FC131')
+    root.style.setProperty('--bgc', '#D6D58E')
+    for (p of styleP) {
+        p.style.color = '#005C53'
+    }
+}
+
+const count = () => {
+    const URL = `https://api.exchangerate.host/latest`
+    const base = `?base=${selectTop.value}`
+    const symbols = `&symbols=${selectBottom.value}`
+
+    fetch(URL+base+symbols)
+    .then(res => res.json())
+    .then(data => {
+        const rate = data.rates[selectBottom.value]
+        rateInfo.textContent = `1${selectTop.value} = ${rate.toFixed(6)}${selectBottom.value}`
+        inputBottom.value = (inputTop.value * rate).toFixed(2)
+    })
+    .catch(err => alert('fatal ERROR of API!!!'))
+}
+
+const swap = () => {
+    const catchCurrency = selectTop.value
+    selectTop.value = selectBottom.value
+    selectBottom.value = catchCurrency
+    count()
+}
+
+
+// listeners:
+
+styleInput.addEventListener('keyup', function(e) {
+if (e.keyCode === 13) {getBackgroundImage() 
+    styleInput.value = ''}})
+window.addEventListener('DOMContentLoaded', getFact)
+window.addEventListener('DOMContentLoaded', getDate)
+styleBtn.addEventListener('click', showStyle)
+basicBtn.addEventListener('click', getBasic)
+redBtn.addEventListener('click', getRed)
+greenBtn.addEventListener('click', getGreen)
+selectTop.addEventListener('change', count)
+selectBottom.addEventListener('change', count)
+inputTop.addEventListener('input', count)
+swapBtn.addEventListener('click', swap)