[EDYMY] -JS -PJ -03-PRE

#### 🙄 <0>

const main = document.getElementById('main');
const addUserBtn = document.getElementById('add-user');
const doubleBtn = document.getElementById('double');
const showMillionairesBtn = document.getElementById('show-millionaires');
const sortBtn = document.getElementById('sort');
const inner = document.querySelector('.inner');
const calculateWealthBtn = document.getElementById('calculate-wealth');
const data_arr = [];

const GoTo_welath = function (ec) {
//console.log(ac);
}
const arr_span = [];

const new_update = function (arr_arr) {
arr_arr.forEach(vv => {
const hhml = vv;
inner.insertAdjacentHTML('beforeend', hhml);
})

}

const update_form = function (v1, v2) {

const body = document.createElement('div');
body.innerHTML = `
   <span> ${v1}</span> 
   <span class="da" value="${v2}"> ${v2}</span> 
   `

inner.insertAdjacentElement('beforeend', body);
const da = document.querySelectorAll('.da');

arr_span.push(da);

}

const da = document.querySelectorAll('.new_body');

addUserBtn.addEventListener('click', function () {
fetch('https://randomuser.me/api').then(dda => {

    return dda.json();
}).then(cc => {
    const data = (cc.results[0]);

    const namev = (data.name.first + data.name.last).toString();
    const data_inner = {
        name: namev,
        wealth: Math.floor(Math.random() * 100)
    }

    const arr_data_inner = [data_inner];

    data_arr.push(arr_data_inner);
    update_form(data_inner.name, data_inner.wealth)


})

})

//update From 을 만들어서 거기에다가 넣는게 어떰?

😈😈
Span 객채 만을 queryselector 로 불러와 그 값만 고쳐서 다시 object
객체에 넣었다.
=>🧐

ERROR!

queryselector> 을통해 객체를 불러오는거 말고 객체 그 자체를 이용해서
innerHTML 했으면 되는 문제 .
QuerySelector 를 무분별하게 사용해서 로직이 복잡하게 됨.

🙄원래의 형식에 숫자를 바꾸는 구조를 사용하지 말고

새로운 구조를 만들어서 넣었으면 된다.!!!

doubleBtn.addEventListener('click', function () {

const vv = arr_span[arr_span.length - 1]

vv.forEach((element, ii) => {
    const Num_inner = parseInt(element.innerHTML) * 2;


  
    element.innerHTML = Num_inner;


    data_arr[ii].wealthc = Num_inner;
});

console.log(data_arr)

})

showMillionairesBtn.addEventListener('click', function () {
const new_milion = [];

inner.innerHTML = '';

😈안에 있는 것을 다비워라!😈

const milion_money = data_arr.filter(element => {
  😈filter 사용 함 😈

return (element.wealthc > 100)

})
console.log(milion_money)
milion_money.forEach(element => {

    const bodyq = document.createElement('div');
    bodyq.innerHTML = ` <span> ${element[0].name}</span> 
   <span class="da" value="${element.wealthc}"> ${element.wealthc}</span> `




    inner.insertAdjacentElement('beforeend', bodyq);



})

})

sortBtn.addEventListener('click', function () {
inner.innerHTML = '';
const sort_ary = data_arr.sort((v1, v2) => {
return v1.wealthc - v2.wealthc;
})
console.log(sort_ary)

sort_ary.forEach(element => {

    const bodyc = document.createElement('div');
    bodyc.innerHTML = ` <span> ${element[0].name}</span> 
   <span class="da" value="${element[0]}"> ${element.wealthc}</span> 
   `
    inner.insertAdjacentElement('beforeend', bodyc);
})

😈object 안에 있는 wealth 객체의 숫자를 변경하고 싶었으나 안되서
하나의 새로운 객체를 만들수 밖에 없었음 < 객체의 value 변경하는 방법에
대해서 다시 공부해야될거 같음😈

})
calculateWealthBtn.addEventListener('click', function () {
var total = 0;

data_arr.forEach(element => {
    total += element[0].wealth;

})

const bodycc = document.createElement('div');
bodycc.innerHTML = `
<span> TOTAL : </span>
<Strong> ${total}</Strong>`
inner.insertAdjacentElement('beforeend', bodycc);

})

😈MISS😈

1)- 벌로 어렵지도 않는 로직에 너무 많은 시간을 허비!
2)- 꾸준히 안하는거 같아서 킹받음..
3)- 내가 지향하는 로직대신 쉬운 로직도 생각해보기
4)- 설계하기전 설계도 작성 x!!!> 설계도 작성후 개발하기