반응형
1. 필수 구현
- 기능 구현
• 랜덤 선택 버튼을 클릭 시 제공되는 4 개의 이미지 중에서 랜덤 하게 하나의 이미지를 선택합니다
• 선택된 이미지의 음식 이름을 오늘의 메뉴 : 에 표시합니다
• 선택된 이미지를 화면 중앙에 표시합니다
- 화면 구현
• 최초 화면 로딩시 제공되는 이미지 중에서 케이크 이미지를 화면 중앙에 표시합니다
• 화면 상단에 랜덤 선택 버튼을 보여줍니다
• 제공된 4 개의 이미지를 화면 하단에 보여줍니다 썸네일 이미지
• 구현된 화면이미지를 참조하여 이미지 및 버튼의 크기는 적절하게 선택합니다
2. 선택 구현
• 화면 하단의 썸네일 이미지에 마우스를 올리면 이미지의 투명도를 변경합니다
• 화면 하단의 썸네일 이미지를 클릭하면 화면 중앙에 이 미지를 표시하고 썸네일 이미지의 테두리를 표시하고 투명
도를 변경합니다
• 랜덤 선택 버튼을 클릭 시 화면 하단에 선택된 이미지의 썸네일 이미지 테두리를 표시하고 투명도를 변경합니다.
- HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/homework.css">
</head>
<body>
<div class="container">
<div class="content">
<div class="btn-group">
<button id="addBtn">랜덤 선택</button>
</div>
<div class="msg-area">
오늘의 메뉴 : <span id="foodName"> <!-- 음식의 이름이 들어올 공간 --></span>
</div>
<div class="img-view">
<!-- 선택한 이미지가 보이는 공간 -->
<img width="200" height="150">
</div>
<div class="img-thumb">
<!-- 4개의 이미지가 보이는 공간 -->
</div>
</div>
</div>
<script src="./js/homework.js"></script>
</body>
</html>- CSS
* {
margin : 0px;
padding : 0px;
}
.container {
width : 960px;
margin : 0 auto;
}
.content {
width : 500px;
padding-top : 20px;
margin : 50px auto 0;
background : #eee;
}
.btn-group {
text-align : center;
}
.btn-group>button {
height : 30px;
border : 1px solid #345;
color : #345;
font-weight : bold;
background : white;
padding : 0 10px;
}
.btn-group>button:active {
color : white;
background : black;
outline : none;
}
.img-view {
text-align : center;
height : 150px;
}
.msg-area {
maring : 10px auto;
font-size : 1.2rem;
font-weight : bold;
text-align : center;
}
.img-thumb {
margin-top : 20px;
text-align : center;
}
.img-thumb>img {
width : 100px;
height : 70px;
margin : 10px;
box-sizing : border-box;
opacity : 0.5;
}
.img-thumb>img.choice {
border : 5px solid #345;
opacity : 1;
}
.img-thumb>img:hover {
opacity : 1;
}
- Javascript
var foods = ["cake 케이크", "burger 햄버거", "steak 스테이크", "sandwich 샌드위치"];
function init() {
var html= "", food = "";
foods.forEach(function(value, index){
food = value.split(" ");
html += `<img src="./images/${food[0]}.jpg" data-index="${index}">`;
});
console.log(html);
document.querySelector(".img-thumb").innerHTML = html;
choiceImg(0);
document.querySelector("#addBtn").addEventListener("click", addImg);
var thumbs = document.querySelectorAll(".img-thumb>img");
for(var i=0; i<thumbs.length; i++){
thumbs[i].addEventListener("click", function() {
choiceImg(this.getAttribute("data-index"));
});
}
}
function addImg() {
choiceImg(parseInt(Math.random() * 4));
}
function choiceImg(index) {
var food = foods[index].split(" ");
document.querySelector(".img-view > img").setAttribute("src", `./images/${food[0]}.jpg`);
document.querySelector("#foodName").innerHTML = food[1];
var thumbs = document.querySelectorAll(".img-thumb > img");
for(var i = 0; i<thumbs.length; i++){
thumbs[i].classList.remove("choice");
}
thumbs[index].classList.add("choice");
}
init();반응형
'웹 프로그래밍 > Front-End' 카테고리의 다른 글
| 메모장 만들기 (1) | 2020.03.25 |
|---|---|
| "오늘의 메뉴" JS -> JQuery 로 바꿔보기 (0) | 2020.03.25 |
| Javascript 생성자, 프로토타입 (0) | 2020.03.21 |
| HTML, CSS 연습문제 (0) | 2020.03.21 |
| javascript 기본 연습 문제 (0) | 2020.03.21 |
