[Udemy]20 Web Projects With Vanilla JavaScript -Project#5

유데미에서 Brad Traversy의 20 Web Projects With Vanilla JavaScript

를 하나씩 직접 코딩해보면서 정리하기 위한 글이다.

데모 페이지

DOM Array Methods (vanillawebprojects.com)

코드 링크

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>DOM Array Methods</title>
</head>
<body>
    <h1>DOM Array Methods</h1>
    <div class="container">
        <aside>
            <button id="add-user">Add User</button>
            <button id="double">Double Money</button>
            <button id="show-millionaires">Show Only Millionaires</button>

            <button id="sort">Sort by Richest</button>
            <button id="calculate-wealth">Calculate entire Wealth</button>
        </aside>
        <main id="main">
            <h2><strong>Person</strong> Wealth</h2>
        </main>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

* {
    box-sizing: border-box;
}

body {
    background: #f4f4f4;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.container {
    display: flex;
    padding: 20px;
    margin: 0 auto;
    max-width: 100%;
    width: 800px;
}

aside {
    padding: 10px 20px;
    width: 250px;
    border-right: 1px solid #111;
}

button {
    background-color: #ffffff;
    cursor: pointer;
    border: solid 1px #111;
    border-radius: 5px;
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 14px;

}

main {
    flex: 1;
    padding: 10px 20px;
}

h2 {
    border-bottom: 1px solid #111111;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    font-weight: 300;
    margin: 0 0 20px;
}

h3 {
    background-color: white;
    border-bottom: 1px solid #111111;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    font-weight: 300;
    margin: 20px 0 0;
}

.person {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    margin-bottom: 10px;
}

script.js

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 calculateWealthBtn = document.getElementById('calculate-wealth');
let data = [];


getRandomUser();
getRandomUser();
getRandomUser();

// fetch random user and add money
async function getRandomUser() {
    const res = await fetch('https://api.randomuser.me/');
    const data = await res.json();

    const user = data.results[0];
    const newUser = {
        name: `${user.name.first} ${user.name.last}`,
        money: Math.floor(Math.random()* 1000000)
    };

    addData(newUser);
}

function doubleMoney() {
    data = data.map(user => {
        return { ...user, money: user.money * 2 };
    });

    updateDOM();
}
const sortByRichest = () => {
    data.sort((a, b) => b.money - a.money);

    updateDOM();
}

const showMillionaires = () => {
    data = data.filter(user => user.money > 1000000);

    updateDOM();
}

const calculateWealth = () => {
    const wealth = data.reduce((acc, user) => (acc += user.money), 0);

    const wealthEl = document.createElement('div');
    wealthEl.innerHTML = `<h3>Total Wealth: <strong>${formatMoney(
        wealth
    )}</strong></h3>`;
    main.appendChild(wealthEl);
}


const addData = (obj) => {
    data.push(obj);

    updateDOM();
}

// Update DOM

const updateDOM = (providedData = data) => {
    // Clear main div
    main.innerHTML = '<h2><strong>Person</strong> Wealth</h2>';

    providedData.forEach((item)=> {
        const e = document.createElement('div');
        e.classList.add('person');
        e.innerHTML = `<strong>${item.name}</strong> ${formatMoney(
            item.money
        )}`;
        main.appendChild(e);
    });
}

// Format number as money - https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-string
function formatMoney(number) {
    return '$' + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}

// Event Listeners
addUserBtn.addEventListener('click', getRandomUser);
doubleBtn.addEventListener('click', doubleMoney);
sortBtn.addEventListener('click', sortByRichest);
showMillionairesBtn.addEventListener('click', showMillionaires);
calculateWealthBtn.addEventListener('click', calculateWealth);

강의를 통해 배운 점(생각, 내용 정리)

외부 api를 aysnc, await를 사용하여 비동기 처리 방법을 익힐 수 있었음

arrow function에 forEach, map, reduce, filter를 적용해 볼 수 있었음

구조화된 코드 작성(변수 선언 -> 함수 호출 -> 함수 정의 -> event listener 등록)을 알 수 있었음

'HTML&CSS&Javascript' 카테고리의 다른 글

[Udemy]20 Web Projects With Vanilla JavaScript -Project#7 (0)	2020.12.11
[Udemy]20 Web Projects With Vanilla JavaScript -Project#6 (0)	2020.12.11
[Udemy]20 Web Projects With Vanilla JavaScript -Project#4 (0)	2020.12.09
[Udemy]20 Web Projects With Vanilla JavaScript -Project#3 (0)	2020.12.08
[Udemy]20 Web Projects With Vanilla JavaScript -Project#2 (0)	2020.12.08

[Udemy]20 Web Projects With Vanilla JavaScript -Project#5

index.html

style.css

script.js

'HTML&CSS&Javascript' 카테고리의 다른 글

관련글

티스토리툴바