반응형
✅ 오늘의 문제 풀이 인증
📣 과제에 대한 답안 코드는 <소스코드>를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가)
📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁
Day9.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Day9</title>
<link rel="stylesheet" href="./Day9.css">
</head>
<body>
<div class="layout">
<div class="head">
<h1 class="mainTitle" onclick="getInformation(0)">MOVIE</h1>
<div class="tab">
<div class="tabBtn" onclick="getInformation(1)">Inception</div>
<div class="tabBtn" onclick="getInformation(2)">Shutter Island</div>
<div class="tabBtn" onclick="getInformation(3)">Life Is Beautiful</div>
</div>
</div>
<div class="main">
<img id="mainImg" src="./img/mainImg.jpg" alt="">
<div class="view">
<img id="poster" src="" alt="포스터" style="display: none;">
<p id="grade" style="display: none;">★0.00</p>
</div>
<div class="basicInform">
<ul id="inform" style="display: none;">
<li id="release"></li>
<li id="rating"></li>
<li id="genre"></li>
<li id="country"></li>
<li id="runningTime"></li>
</ul>
</div>
</div>
</div>
<script src="./Day9.js"></script>
</body>
</html>
Day9.css
.mainTitle{
text-align: center;
margin-top: 20px;
cursor: pointer;
}
.tab{
text-align: center;
margin-top: 30px;
}
.tabBtn{
display: inline-block;
width: 150px;
height: 40px;
border: 1px solid black;
cursor: pointer;
text-align: center;
line-height: 40px;
border-radius: 5px;
}
.main{
padding: 50px 300px;
text-align: center;
}
#mainImg{
margin-top: 50px; margin-left: auto; margin-right: auto;
}
#grade{
position: absolute;
bottom: 0px;
margin-left: 150px;
font-size: 30px;
}
#poster{
float: left;
width: 400px;
height: 530px;
}
.basicInform{
float: left;
margin-top: 100px;
margin-left: 50px;
}
.basicInform ul li{
text-align: left;
font-size: 30px;
line-height: 60px;
}
Day9.js
var release = document.getElementById('release');
var rating = document.getElementById('rating');
var genre = document.getElementById('genre');
var country = document.getElementById('country');
var runningTime = document.getElementById('runningTime');
var grade = document.getElementById('grade');
var inception = {
posterSrc : "./img/inception.jpg",
release : "2010.07.21.",
rating : "12-year-old spectator",
genre : "Action, SF",
country : "USA, UK",
runningTime : "147min",
grade : "9.60"
}
var shutterIsland = {
posterSrc : "./img/shutterIsland.jpg",
release : "2010.03.18.",
rating : "15-year-old spectator",
genre : "Mystery, Thriller",
country : "USA",
runningTime : "138min",
grade : "8.39"
}
var lifeisBeautiful = {
posterSrc : "./img/lifeisBeautiful.jpg",
release : "1999.03.06.",
rating : "All spectator",
genre : "Drama, Comedy",
country : "Italy",
runningTime : "116min",
grade : "9.54"
}
function getInformation(i) {
document.getElementById('poster').style.display = "block";
document.getElementById('grade').style.display = "block";
document.getElementById('inform').style.display = "block";
document.getElementById('mainImg').style.display = "none";
switch(i) {
case 0:
document.getElementById('poster').style.display = "none";
document.getElementById('grade').style.display = "none";
document.getElementById('inform').style.display = "none";
document.getElementById('mainImg').style.display = "block";
break;
case 1:
document.getElementById('poster').src = inception.posterSrc;
grade.innerHTML = "★" + inception.grade;
release.innerHTML = "Release date : " + inception.release;
rating.innerHTML = "Rating : " + inception.rating;
genre.innerHTML = "Genre : " + inception.genre;
country.innerHTML = "Country : " + inception.country;
runningTime.innerHTML = "Running time : " + inception.runningTime;
break;
case 2:
document.getElementById('poster').src = shutterIsland.posterSrc;
grade.innerHTML = "★" + shutterIsland.grade;
release.innerHTML = "Release date : " + shutterIsland.release;
rating.innerHTML = "Rating : " + shutterIsland.rating;
genre.innerHTML = "Genre : " + shutterIsland.genre;
country.innerHTML = "Country : " + shutterIsland.country;
runningTime.innerHTML = "Running time : " + shutterIsland.runningTime;
break;
case 3:
document.getElementById('poster').src = lifeisBeautiful.posterSrc;
grade.innerHTML = "★" + lifeisBeautiful.grade;
release.innerHTML = "Release date : " + lifeisBeautiful.release;
rating.innerHTML = "Rating : " + lifeisBeautiful.rating;
genre.innerHTML = "Genre : " + lifeisBeautiful.genre;
country.innerHTML = "Country : " + lifeisBeautiful.country;
runningTime.innerHTML = "Running time : " + lifeisBeautiful.runningTime;
break;
}
}
부족함이 많음을 느낀 과제였습니다(특히 css에서..)
여러모로 더 열심히 해야겠습니다!
재밌게 과제했습니다
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| [코뮤니티] 11일차 - 한 입 웹개발(JS) (0) | 2021.05.13 |
|---|---|
| [코뮤니티] 10일차 - 한 입 웹개발(JS) (0) | 2021.05.12 |
| [코뮤니티] 8일차 - 한 입 웹개발(JS) (2) | 2021.05.11 |
| [코뮤니티] 7일차 - 한 입 웹개발(JS) (0) | 2021.05.08 |
| [코뮤니티] 6일차 - 한 입 웹개발(JS) (0) | 2021.05.06 |