2 jaren geleden · b67999b924
--- a/index.html
+++ b/index.html
@@ -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>
			
--- a/script.js
+++ b/script.js
@@ -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();
			
--- a/style.css
+++ b/style.css
@@ -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;
			
 
				+}