[EDYMY] -JS -PJ -04-

디자인 부분에도 신경 많이 썼는데
내눈에는 이뻐 보이는데 남들 눈에는 어떻게 보이는지 모르겠다.

1. 국가의 정보를 fetch 로해서 불러온뒤 -> 사진-> 이름 부착

2. 국가의 정보를 클릭할시 -> select option 에 정보를 주고
   revese 버튼을 누르면 바꾸게 하였다.

3. swap 버튼을 누르면 -> 원래돈 가격 이런거 할려고 했는데
   fetch asyn 비동기 방식이여서 -> 마지막에 저장되는거여서
   list 에 아무리 넣어도 적용이 안되는 문제가 발생하였다.
   js 비동기 방식인 asyn await then 방식을 다시 공부해서
   완성하는게 목표이다.

   css 방식으로는
   -> 스크롤 css 을 적용하였고
   -> hover 를 사용해서 색을 가렸다가 보여주는 식으로 하였다.

const country = [];
const append_country = document.querySelector('.country');

const country_name = document.querySelectorAll('option');
country_name.forEach(vv => {

    country.push(vv.value);
})



var list = [];
country.forEach((qq, index) => {
    var coun_click;
    var number = index;


    fetch(`https://restcountries.com/v3.1/alpha/${qq}	`)
        .then(arr => arr.json())
        .then(ccv => {
            nameForm = document.createElement('div')
            nameForm.className = 'coun'
            nameForm.innerHTML = `<img class="img" value="${qq}" src="${ccv[0].flags.svg}">
                <h5 class="set" > ${ccv[0].name.common}</h5>`
            append_country.insertAdjacentElement('afterend', nameForm);
            list.push(nameForm)

        })


})
const currency_one = document.querySelector('.currency_one');
const currency_two = document.querySelector('.currency_two');
console.log(currency_one.children.length)
var list_vv = [];
const left = document.querySelector('.left');
left.addEventListener('click', function (e) {
    this_img = e.target;
    list_country.push(this_img.getAttribute('value'));
  
    list_vv.push(this_img.getAttribute('value'))

    for (var i = 0; i < currency_one.children.length; i++) {
     

        if (currency_one.children[i].value === list_vv[0]) {
          
            currency_one.children[i].setAttribute('selected', true)

        }

    }
    for (var i = 0; i < currency_two.children.length; i++) {
        //console.log(currency_one.children[i].value);
        //console.log(list_vv.pop());
        if (currency_two.children[i].value === list_vv[1]) {
            //   console.log(currency_two.children[i])

            currency_two.children[i].setAttribute('selected', true)
        }

    }



})
const btn_1 = document.querySelector('.btn_1');
var list_country = [];
btn_1.addEventListener('click', function () {
    for (var i = 0; i < currency_one.children.length; i++) {
      
        if (currency_one.children[i].value === list_vv[1]) {
            
            console.log(currency_one.children[i])
            currency_one.children[i].setAttribute('selected', true)
        }

    }
    for (var i = 0; i < currency_two.children.length; i++) {
       
        if (currency_two.children[i].value === list_vv[0]) {

            console.log(currency_two.children[i])
            currency_two.children[i].setAttribute('selected', true)
        }

    }
    list_vv = [];

})
var name_1;
var currency__a = [];
const btn = document.querySelector('.btn');
const amount_one = document.querySelector('.amount_one');
btn.addEventListener('click', function () {

    console.log(list_country);
    var nai = list_country[0].toString();
    console.log(nai);
    const get_currecy = async () => {
        await fetch(`https://restcountries.com/v3.1/alpha/${nai}	`)
            .then(arr => arr.json())
            .then(ccv => {
               
                
                name_1 = Object.keys(ccv[0].currencies).toString();
                currency__a.push(name_1);
                console.log(currency__a)
            })


    
    get_currecy();
   


    console.log(name_1);


    list_country = [];

})
Promise.all()

CSS

html {
  height: 100%;

  background: linear-gradient(#ccccff, #e7ddf1, #ffffff);
}

body {
  background-attachment: fixed;
  overflow-y: hidden;
  font-family: "Merriweather", serif;
  margin: 0px;

  background: linear-gradient(#ccccff, #e7ddf1, #ffffff);
}
.coun:hover .img {
  width: 185px;
  height: 110px;
  -webkit-filter: grayscale(0%);
}
.coun:hover .set {
  width: 180px;
  height: 110px;
  opacity: 1;
}

.set {
  color: rgb(78, 75, 75);
  font-size: 17px;
  position: relative;
  margin-left: 30px;
}
.coun {
  display: flex;
  width: 100%;
  height: 80px;
  margin-left: 20px;
  margin-top: 40px;
}
.coun :not(:hover) {
  opacity: 0.3;
}
img {
  width: 170px;
  height: 100px;
  -webkit-filter: grayscale(90%);
}
h3 {
  position: absolute;
  left: 200px;
  width: 200px;
  top: 5px;
  font-size: 20px;
}
header {
  width: 100%;
  height: 70px;
  background-color: rgba(250, 250, 250, 0.678);
  margin: 0;
  padding: 0;
}
.main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  margin: 0px;
  padding: 0px;

  background: linear-gradient(#ccccff, #e7ddf1, #ffffff);
}
.left {
  width: 33%;
  overflow: scroll;
  height: 60%;
  background: rgb(255, 255, 255, 0.5);
  overflow-x: hidden;
}
.right {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  display: flex;
  flex-direction: column;
}

.left::-webkit-scrollbar {
  background-color: rgb(255, 255, 255, 0.5);
  width: 9px;
}
.left::-webkit-scrollbar-thumb {
  background-color: rgb(170, 169, 169, 0.2);
  border-radius: 10px;
  background-clip: padding-box;
}

.right :not(.money-1) {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-direction: column;
}
.right-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.right :not(.right) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.left::-webkit-scrollbar-track {
  background-color: rgb(255, 253, 253, 0.2);
  border-radius: 1px;
}
.real_right {
  width: 600px;
  height: 60%;
  background: rgb(255, 255, 255, 0.5);
  display: flex;

  align-items: center;
  justify-content: center;
}
.btn {
  border-radius: 10px;
  background: white;
  border: hidden;
  margin: 30px;
  width: 80px;
}
.btn_1 {
  border-radius: 10px;
  background: white;
  display: flex;
  border: hidden;
  margin: 30px;
  width: 67px;
  position: relative;
  margin: 0;
  font-size: 13px;
  opacity: 0.3;
  position: relative;
  top: 30px;
  left: 120px;
}
.btn_1:hover {
  width: 75px;

  opacity: 1;
}
.right-left {
  display: flex;

  background: transparent;
}
.money-2 {
  flex-direction: column;
}
.money-1 {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.amount_one {
  border-radius: 10px;
  color: #4d4d5e;
  border: 3px solid rgba(193, 175, 212, 0.514);
  font-size: 17px;
  width: 180px;
}
#amount-two {
  border-radius: 10px;
  color: #4d4d5e;
  border: 3px solid rgba(193, 175, 212, 0.514);
  font-size: 17px;
  width: 180px;
  position: relative;
  top: 19px;
}
.currency_one {
  border-radius: 20px;
  color: rgb(26, 26, 26);
  border: 3px solid rgba(193, 175, 212, 0.514);
  margin: 30px;
  background: transparent;
  width: 100px;
}
.money-1 {
  position: relative;
  top: 0px;
}
.currency_two {
  border-radius: 20px;
  color: #4d4d5e;
  border: 3px solid rgba(193, 175, 212, 0.514);
  margin: 20px;
  background: transparent;
  width: 100px;
  position: relative;
  top: 6px;
}