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
반응형
'WEB > JS' 카테고리의 다른 글
| [JS] 10-2. 과제 - 이벤트 (0) | 2021.09.29 |
|---|---|
| [JS] 10-1. 이벤트 (0) | 2021.09.29 |
| [JS] 9-1. 객체 (0) | 2021.09.29 |
| [JS] 8-2. 과제 - 함수 (0) | 2021.09.21 |
| [JS] 8-1. 함수 (2) | 2021.09.21 |
