diff --git a/ExchangeRate/img/topDesktop.jpg b/ExchangeRate/img/topDesktop.jpg new file mode 100644 index 00000000..edd13aa1 Binary files /dev/null and b/ExchangeRate/img/topDesktop.jpg differ diff --git a/ExchangeRate/img/topMobile.jpg b/ExchangeRate/img/topMobile.jpg new file mode 100644 index 00000000..e9df7e20 Binary files /dev/null and b/ExchangeRate/img/topMobile.jpg differ diff --git a/ExchangeRate/index.html b/ExchangeRate/index.html new file mode 100644 index 00000000..ba65195e --- /dev/null +++ b/ExchangeRate/index.html @@ -0,0 +1,121 @@ + + + + + + + Exchange Rate + + + + + + + + + + + + + + +
+ + + +
+ +
+

Check Exchange Rate

+

Current rate from:

+
+ +
+ +
+ +
+ +
+ + + + + +
+ +
+ +
+ + +
+ + + +
+ + +
+ + +

+
+ +
+ +
+

Background image link: (paste link and press enter)

+ +
+ +
+

Color style:

+
+ +
+

Color style:

+
+ +
+

Color style:

+
+ +
+ +
+ + + + + +
+

Curious money fact:

+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/ExchangeRate/main.js b/ExchangeRate/main.js new file mode 100644 index 00000000..030e9b37 --- /dev/null +++ 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) \ No newline at end of file diff --git a/ExchangeRate/style.css b/ExchangeRate/style.css new file mode 100644 index 00000000..0217ce0a --- /dev/null +++ b/ExchangeRate/style.css @@ -0,0 +1,203 @@ +:root { + --dark: #262626; + --light: #8C8579; + --grey: rgba(0, 0, 0, 0.1); + --bgc: #F2F2F2; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + body { + font-family: 'Montserrat', sans-serif; + font-size: 62.5%; + background-color: var(--bgc); + } + + .wrapper { + border: 1px solid var(--light); + border-radius: 15px; + -webkit-box-shadow: 10px 10px 20px var(--light); + box-shadow: 10px 10px 20px var(--light); + } + + + + .shadow { + position: absolute; + width: 100%; + height: 100%; + top: 0; + bottom: 0; + right: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.6); + z-index: -1; + } + +/* top start */ + + .top { + position: relative; + padding: 3em 0; + background-image: url("../img/topMobile.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + z-index: 2; + } + + .top__info { + color: var(--bgc); + } + + .top__button button { + padding: .7em; + font-size: .9rem; + border-radius: 30px; + border: 1px solid var(--light); + -webkit-transition: background .5s, color .5s; + transition: background .5s, color .5s; + } + + .top__button button:hover { + background-color: var(--dark); + color: var(--bgc); + } + + @media screen and (min-width: 992px) { + .top { + background-image: url("../img/topMobile.jpg"); + } + } + +/* top end */ +/* main start */ + + .main { + min-height: 300px; + } + + .main__exchange input { + background-color: var(--bgc); + color: var(--dark); + font-size: 1.1rem; + border: none; + text-align: right; + color: var(--dark); + border: 1px solid var(--dark); + } + + .main__exchange select { + font-size: 1.1rem; + background-color: var(--bgc); + cursor: pointer; + color: var(--dark); + border: 1px solid var(--dark); + } + + .swap { + width: 30%; + height: 10%; + border: 1px solid var(--dark); + border-radius: 15px; + transition: box-shadow .3s; + } + + .swap .fas { + font-size: 1.5rem; + color: var(--dark); + } + + .swap:hover { + -webkit-box-shadow: inset 5px 5px 15px 0px var(--dark); + -moz-box-shadow: inset 5px 5px 15px 0px var(--dark); + box-shadow: inset 5px 5px 15px 0px var(--dark); + } + + .main__exchange--p { + font-size: 1rem; + color: var(--dark); + } + + .main__style { + opacity: 0; + background-color: var(--grey); + -webkit-transition: opacity .5s; + transition: opacity .5s; + } + + .main__style p { + font-size: .8rem; + font-style: italic; + color: var(--light); + } + + .main__style input { + width: 100%; + height: 50%; + border: 1px solid var(--light); + border-radius: 10px; + } + + .main__style button { + height: 20px; + width: 80px; + border-radius: 15%; + margin-right: 10px; + border: 1px solid; + -webkit-transition: .3s; + transition: .3s; + } + + .main__style--first button { + border-color: var(--dark); + } + + .main__style--first button:hover { + -webkit-box-shadow: inset 8px 8px 24px -8px var(--dark); + box-shadow: inset 8px 8px 24px -8px var(--dark); + } + + .main__style--second button { + border-color: tomato; + } + + .main__style--second button:hover { + -webkit-box-shadow: inset 8px 8px 24px -8px tomato; + box-shadow: inset 8px 8px 24px -8px tomato; + } + + .main__style--third button { + border-color: green; + } + + .main__style--third button:hover { + -webkit-box-shadow: inset 8px 8px 24px -8px green; + box-shadow: inset 8px 8px 24px -8px green; + } + + /* main end */ + /* bottom start */ + + .bottom { + background-color: var(--grey); + } + + .bottom__text { + margin: 0; + padding: 2em; + font-size: 1rem; + color: var(--dark); + } + + .bottom__span { + font-size: 1.2rem; + font-style: italic; + padding: 0.1em; + } + + /* bottom end */ \ No newline at end of file diff --git a/favicon.ico b/favicon.ico deleted file mode 100644 index bb2eb8d8..00000000 Binary files a/favicon.ico and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100644 index e69de29b..00000000 diff --git a/main.js b/main.js deleted file mode 100644 index e69de29b..00000000 diff --git a/style.css b/style.css deleted file mode 100644 index e69de29b..00000000