A_Project_M3/script.js at main · ZaurS2001/A_Project_M3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
let fromTxt = document.querySelector('.from');
let toTxt = document.querySelector('.to');
let valuesFrom = "RUB";
let valuesTo = "USD";
let base = valuesFrom;
let symbols = valuesTo;
const getDataFirst = () => fetch(`https://api.exchangerate.host/latest?base=${base}&symbols=${symbols}`)
.then(res => res.json());
const showStartingData1 = async () => {
    const data = await getDataFirst();
    let mul = data.rates[symbols];
    let messageFrom = document.querySelector('.curr-value-from');
    messageFrom.innerHTML = `1 ${base} = ${mul} ${symbols}`;
    fromTxt.value = 1;
    toTxt.value = +fromTxt.value*mul;
}
showStartingData1();
const getDataSecond = () => fetch(`https://api.exchangerate.host/latest?base=${symbols}&symbols=${base}`)
.then(res => res.json());
const showStartingData2 = async () => {
    const data = await getDataSecond();
    let mul = data.rates[base];
    let messageTo = document.querySelector('.curr-value-to');
    messageTo.innerHTML = `1 ${symbols} = ${mul} ${base}`;
}
showStartingData2();
function fromtoTo() {
    const showData = async () => {
        const data = await getDataFirst();
        let mul = data.rates[symbols];
        toTxt.value = +fromTxt.value*mul;
    }
    showData();
}
function mesFrom() {
    const showData = async () => {
        const data = await getDataFirst();
        let mul = data.rates[symbols];
        let messageFrom = document.querySelector('.curr-value-from');
        messageFrom.innerHTML = `1 ${base} = ${mul} ${symbols}`;
    }
    showData();
}
function totoFrom() {
    const showData = async () => {
        const data = await getDataSecond();
        let mul = data.rates[base];
        fromTxt.value = +toTxt.value*mul;
    }
    showData();
}
function mesTo() {
    const showData = async () => {
        const data = await getDataSecond();
        let mul = data.rates[base];
        let messageFrom = document.querySelector('.curr-value-to');
        messageFrom.innerHTML = `1 ${symbols} = ${mul} ${base}`;
    }
    showData();
}
function changeCurrencyFrom(event) {
    let selected = event.target.closest('.unselected');
    let alreadySelected = document.querySelector('.selected');
    if (alreadySelected.classList.contains('selected') && selected.classList.contains('unselected')) {
        alreadySelected.classList.replace('selected', 'unselected');
        selected.classList.replace('unselected', 'selected');
        base = selected.innerHTML;
        totoFrom();
        mesFrom();
        mesTo();
    }
}
function changeCurrencyTo(event) {
    let selected = event.target.closest('.unselected2');
    let alreadySelected = document.querySelector('.selected2');
    if (alreadySelected.classList.contains('selected2') && selected.classList.contains('unselected2')) {
        alreadySelected.classList.replace('selected2', 'unselected2');
        selected.classList.replace('unselected2', 'selected2');
        symbols = selected.innerHTML;
        fromtoTo();
        mesFrom();
        mesTo();
    }
}
fromTxt.addEventListener('keyup', fromtoTo);
toTxt.addEventListener('keyup', totoFrom);
let buttonsFrom = document.querySelector('.buttons-from').children;
let buttonsTo = document.querySelector('.buttons-to').children;
for (let i=0; i<buttonsFrom.length; i++) {
    buttonsFrom[i].addEventListener('click', changeCurrencyFrom);
}
for (let i=0; i<buttonsFrom.length; i++) {
    buttonsTo[i].addEventListener('click', changeCurrencyTo);
}