WEB/JS

[JS] 9-2. 과제 - 객체

개발자 만두 2021. 9. 29. 19:29
728x90
반응형

✅오늘의 과제

➰좋아하는 영화 정리하기

 

➰코드

day9.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day9</title>
    <style>
        @font-face {
            font-family: 'Vitro_core';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Vitro_core.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        #window {
            background-color: darkolivegreen;
            text-align: center;
            margin-top: 80px;
            margin-left: 235px;
            width: 1000px;
            height: 500px;
            border-radius: 50px;
        }
        #mvlist {
            font-family: 'Vitro_core';
            font-size: 40px;
            padding-top: 30px;
        }
        #btns {
            display: flex;
            justify-content: center;
        }
        .funcbtns {
            font-family: 'Vitro_core';
            background-color: darkcyan;
            border-color: darkcyan;
            margin-top: 20px;
            margin-right: 70px;
            width: 100px;
            height: 70px;
            border-radius: 10px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="window">
        <p id="mvlist">인생영화 리스트</p>
    </div>
    <div id="btns">
        <button type="button" id="plus" class="funcbtns" onclick="add()">추가</button>
        <button type="button" id="minus" class="funcbtns" onclick="del()">삭제</button>
        <button type="button" id="ok" class="funcbtns" onclick="confirm()">확인</button>
    </div>
    <script src="day9.js"></script>
</body>
</html>

 

 

day9.js

let movies;
let list = [];
let movie;
let all = document.getElementById('mvlist');

function add() {
    movies = prompt("영화제목, 개봉연도, 장르를 입력하세요").split(',');
    list.push({ name: movies[0], year: movies[1], genre: movies[2] });
}

function del() {
    movie = prompt("영화제목을 입력하세요");
    for (let i = 0; i < list.length; i++) {
        if (movie === list[i].name) {
            list.splice(i, 1);
        } else {
            break;
        }
    }
}

function confirm() {
    all.innerHTML = "인생영화 리스트";
    for (let i = 0; i < list.length; i++) {
        all.innerHTML += "</br>" + "✅" + list[i].name + " ," + list[i].year + " ," + list[i].genre + "</br>";
    }
}

 

 

코드 설명

추가 버튼을 클릭하면 add() 함수가 실행된다. 이 함수는 prompt로 영화의 정보를 얻어오고 split() 함수로 구분하여 변수 list의 객체 형태로 대입되며 각각의 key의 value가 된다. 

 

삭제 버튼을 클릭하면 del() 함수가 실행된다. 이 함수는 prompt로 영화의 제목을 얻어오고 변수 list의 i번째 원소의 name프로퍼티가 이와 동일한 것이 있으면 변수 list에서 그 원소 자체를 삭제한다.

 

확인 버튼을 클릭하면 confirm() 함수가 실행된다. 이 함수는 현재 list에 객체 형태로 저장되어 있는 영화의 정보를 문자열 더하기를 이용하여 화면에 출력해준다. 

 

 

➰코드실행화면(jsday9.netlify.app)

➰GitHub

https://github.com/minseon6371/javascript-study/tree/main/day9

 

GitHub - minseon6371/javascript-study

Contribute to minseon6371/javascript-study development by creating an account on GitHub.

github.com

 

728x90
반응형