Home Explore Help
Sign In
serg1557733
/
currencyCalculator
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

first commit

serg155alternate 3 years ago
commit
b67999b924
3 changed files with 156 additions and 0 deletions
Split View Show Diff Stats
  1. 40 0
      index.html
  2. 40 0
      script.js
  3. 76 0
      style.css

+ 40 - 0
index.html
View File 

@@ -0,0 +1,40 @@
 
+<!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>Currency Calculator </title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+
 
+<body>
 
+    <div class="container">
 
+        <div class="calc__wrapper">
 
+            <h3>Обменный калькулятор</h3>
 
+            <div class="calc__item">
 
+                <label for="summ">Сумма для обмена</label>
 
+                <input type="number"  name="summ">
 
+                <span class="cur__name"></span>
 
+            </div>
 
+            <h3> Доступные валюты </h3>
 
+            <div class="cur__wrapper">
 
+
 
+            </div>
 
+
 
+            
+         
+          
+
 
+            <div class="outer"> </div>
 
+
 
+            <button class="btn"> Очистить </button>
 
+
 
+        </div>
 
+       
+    </div>
 
+    <script src="script.js"></script>
 
+</body>
 
+
 
+</html>

+ 40 - 0
script.js
View File 

@@ -0,0 +1,40 @@
 
+let currency;
 
+const wrapper = document.querySelector('.cur__wrapper');
 
+//confirm('You want to see all currency names?') ? showCurencys() : exchange();
 
+
 
+function exchange() {
 
+    ///currency = prompt('enter currency for exchange (usd, eur, rub...etc)');
 
+    let url = 'https://open.er-api.com/v6/latest/' + currency.toUpperCase();
 
+    if (currency.toLowerCase() === 'usd' || currency.toLowerCase() === 'eur' || currency.toLowerCase() === 'rub') {
 
+        fetch(url)
 
+            .then(res => res.json())
 
+            .then(data => {
 
+                let sum = prompt('enter amount');
 
+                alert(`You usd summ : ${sum * data.rates.UAH} uah`);
 
+            });
 
+    } else if (currency) {
 
+        fetch(url)
 
+            .then(res => res.json())
 
+            .then(data => {
 
+                let sum = prompt('enter amount');
 
+                alert(`You usd summ : ${sum * data.rates.UAH} uah`);
 
+            });
 
+    } else {
 
+        alert('Enter correct currency name');
 
+    }
 
+};
 
+
 
+function showCurencys() {
 
+    fetch('https://open.er-api.com/v6/latest').then(res => res.json())
 
+        .then(data => {
 
+            for (let key in data.rates) {
 
+                let div = document.createElement('div');
 
+                wrapper.appendChild(div);
 
+                div.innerHTML =`<button class='btn_cur'> ${key}</button>`;
 
+            }
 
+            
+            exchange();
 
+        });
 
+    }
 
+
 
+showCurencys();

+ 76 - 0
style.css
View File 

@@ -0,0 +1,76 @@
 
+*, html {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+.container {
 
+    position: relative;
 
+    max-width: 1140px;
 
+    margin: 0 auto;
 
+    padding: 10px;
 
+}
 
+
 
+.calc__wrapper {
 
+    padding: 20px;
 
+    margin: 0 auto;
 
+    border: 2px solid grey;
 
+    background-color: ivory;
 
+    box-shadow: 12px 12px 2px 1px rgba(93, 93, 95, 0.2);
 
+    border-radius: 25px;
 
+    text-align: center;
 
+  
+}
 
+h3 {
 
+    margin: 20px;
 
+}
 
+
 
+input {
 
+    width: 60px;
 
+    margin-left: 10px;
 
+    padding: 2px;
 
+}
 
+.btn_cur{
 
+    padding: 5px;
 
+    width: 60px;
 
+    border-radius: 10px;
 
+    background-color:rgb(236, 236, 236);
 
+    color: rgb(92, 44, 44);
 
+    box-shadow: 3px 3px 2px 1px rgba(95, 93, 94, 0.2);
 
+}
 
+
 
+.calc__item {
 
+    padding: 10px;
 
+    text-align: center;
 
+    font-weight: 600;
 
+} 
+ .price__item{
 
+    display: none;
 
+    margin-top: 20px;
 
+}
 
+
 
+
 
+.outer {
 
+    margin-top: 20px;
 
+    margin-bottom: 10px;
 
+    font-size: 24px;
 
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 
+    color: rgb(19, 16, 207);
 
+}
 
+
 
+.btn {
 
+    display: none;
 
+    margin: 0 auto;
 
+    padding: 5px;
 
+    border-radius: 10px;
 
+    background-color:linen;
 
+    color: rgb(92, 44, 44);
 
+    box-shadow: 3px 3px 2px 1px rgba(95, 93, 94, 0.2);
 
+    align-self: end;
 
+}
 
+
 
+
 
+.cur__wrapper{
 
+    display: grid;
 
+    grid-template-columns: repeat(15, 1fr);
 
+    row-gap: 3px;
 
+    align-items: baseline;
 
+}