오늘은 사이드바를 제작하고, 제작한 사이드바를 기반으로 ui가 바뀌어서 적용되는 스크립트를 작성하였다.
사이드바는
<divclass="left-side-bar">
<divclass="status-ico">
<span>▶</span>
<span>▼</span>
</div>
<ul>
<li>
<ahref="#"id="nowpop">인기 영화</a>
</li>
<li>
<ahref="#"id ="upcoming">개봉 예정</a>
</li>
<li>
<ahref="#"id = "historypop">역대 흥행 영화</a>
</li>
</ul>
</div>
와 같이 html코드로 리스트를 만들어서 해당하는 리스트가 왼쪽에 나오게 제작하였다.
위에 해당하는 css를 적용시키면
body,
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
.left-side-bar>ulul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: white;
}
.left-side-bar {
background-color: white;
height: 100%;
width: 180px;
position: fixed;
left: -155px;
transition: left.3s;
}
.left-side-bar>.status-ico {
text-align: right;
padding: 10px;
}
.left-side-bar>ulli {
position: relative;
}
.left-side-barul {
font-weight: bold;
text-align: center;
padding: 0;
}
.left-side-barul>li>a {
display: block;
padding: 10px;
white-space: nowrap;
}
.left-side-bar:hover {
left: 0;
}
.left-side-barul>li:hoverul {
display: block;
}
.left-side-barul>li:hover>a {
color: white;
background-color: black;
}
다음과 같이 css를 만들수 있는데 left-side-bar의 정보에 left값이나 width값을 조정해서 너비를 조정할 수 있고, transition:left는 왼쪽에서 0.3초간 이동한다는 뜻을 가지고 있다.
위의 코드를 적용하면
평소에는 들어가있다가 마우스를 가져다대면 해당하는 사이드바가 반응하여 움직이는 ui를 제작할 수 있다.
이제 해당하는 정보인 인기영화, 개봉 예정영화, 역대흥행영화의 정보를 가져와서 클릭하면 해당하는 정보로 이동하는 스크립트를 작성하였는데,
처음에는 html로 onclick시 fetch한 api함수를 호출하는 식으로 제작하려하였지만, 해당하는 정보를 사용할 때 uncaught referenceerror: 에러가 나오면서 해당하는 정보를 호출할 수 없다 라는 식으로 나왔다. onclick으로는 js의 코드에 변경을 접근하기 힘든 것같아서 다른 방법을 찾아본 결과
nowpop.addEventListener('click', async () => {
awaitfetchPopularMovies();
});
위와 같이 해당하는 id를 html 파일에 걸어놓고, id.addEventListener('click',async() => { //내용 }을 적용하면, 해당하는 정보를 클릭시 정보를 이동할 수 있는 함수를 호출 할 수 있었다.
aysnc함수로 저장한다음 클릭시 해당하는 정보를 await으로 비동기함수를 동기함수로 바꾸게끔 하여 데이터를 저장하게하였다. 다음 해볼것은 아이디나 비밀번호를 입력시 조건을 충족해야만 아이디, 비밀번호를 적용할 수 있는 시스템과, 평점순, 추천순 등으로 영화가 정렬되게끔 제작해볼 예정이다.
