기존페이지에서 css기능을 한가지 추가하고 자바스크립트 기능을 2가지 추가하였다.
(1) hover기능
기존페이지 hover기능을 사용해서 메뉴바나 사진에 마우스를 올렸을 시에 반응하도록 설정하였고,
(2) 로그인아닌 로그인기능..
자바스크립트를 이용해서 이름을 입력하면 입력한 값을 바탕으로 인사를 하는 기능
(3) 선택기능
음악장르를 선택하면 내가 어떤 음악을 좋아하는지 장르에 따라 다르게 보여주는 기능을 추가하였다.
(깃허브 커밋을 할 때 다른 페이지를 만들어서 커밋을 했으면 전에 어떤방식이었는지 비교를 하기 쉬울텐데,,,그냥 계속 덮어 써버려서,, 비교를 하기 힘들어 졌다...)
https://holywatter.github.io/seongsu/index_favorite.html
(1) hover기능
hover기능은 내가 원하는 셀렉터를 지정하고 hover일경우에 어떤 스타일을 지정해 줄 것인지 써주면 된다.
메뉴박스에 지정한 css는 다음과 같다.
nav태그의 a태그가 hover인 경우에는 밑줄과 크기를 1.2배 키우고 0.7초 만큼의트랜지션을 준다.
다른 것들에도 비슷한 방법으로 부여했다.
(2) 로그인(?)기능
이름 입력 전
이름 입력 후..
html에 <input>과 <button>을 <form>으로 묶어서 만든 후에 id를 부여하고 js에 ElementById를 사용해서 불러왔다.
form에 이벤트를 부여해서 제출되었을 때 페이지가 새로고침되는 기본효과를 막는 이벤트,, input의 값을 불러와 localStorage에 저장하고 화면에 표현해주는 함수를 추가했다.
불러온 요소들은 총 세개 IPF는 form양식, NameInput은 input, Span은 오른쪽 상단에 안녕하세요 ㅇㅇㅇ님이 입력될 곳.
변수를 하나 선언해 주고, 거기에 inputform에 있는 value를 저장해준다. 그 값을 localStorage에 추가해준다.
submit될 때 기본동작을 막기 위해서 preventDefault()함수를 써주고, innerText를 활용해서에 IPF와 오른쪽상단 span에 인사말을 추가해준다.
만약 새로고침하거나 페이지를 옮길 때마다 이름을 기억하지 못 하는 것을 대비해서 localStorage에 저장을 한 것 인데 저장되어있다면 저장되어있는 이름을 불러와서 화면에 출력해주어야한다..
변수를 하나 선언하고, localStorage에서 저장된 것을 불러온다.
만약 저장된 것이 있다면 그것을 불러와서 인사말을 추가한다.
form양식이 제출될 때 함수를 실행한다.(localStorage에 저장된 값이 있는지 확인하고 화면에 표시하는 것은 함수 밖에 있어서 페이지가 로딩될 때 자동으로 확인하고 동작을 수행한다.)
(3) 선택기능
처음에는 다음과 같이 선택창만 표시된다.
선택지를 선택하면 다음과 같이 리스트 들이 나온다...
이걸 활용하려고 자바스크립트에서 배열, 객체 등을 사용했다...
일단 html에서 select와 option을 만들었다.
JavaScript에서 인식할 수 있도록 id와 option의 밸류도 각각 지정해 주었다.
일단 배열안에 객체를 만들어서 songs프로퍼티와 url프로퍼티를 각각 만들었다.
셀렉트를 불러오고 각각 노래들이 입력될 칸들을 미리 만들고 불러왔다..
(createElement가 왜인지 동작을 안해서... 실패하고...)
Song1은 첫 번째 노래가 입력될 li안의 span이고, a1은 첫 번째 노래의 url이 입력될 a태그이다.
만약 Select의 밸류가 1이라면, Song1에는 indiesongs에 있는 [0]인덱스의 songs값을 불러오고, A1의 href에는 url을 참조한다.
다음과 같은 방식으로 A2, 3, 4도 인덱스 1 2 3을 각각 저장한다. 배열도 장르에 맞게 세개를 제작했고,, 밸류가 2일때 3일때도 같은 방식으로 각각 불러왔다.
코드가 길고 복잡하긴 한데,, createElement를 활용하거나 더 편한 방식으로 훨씬 간결하게 작성할 수 있을 것 같은 느낌이다..
이번에 자바스크립트를 쓰면서 느낀게 확실히 React가 편리하단걸 느꼈다..
(하지만 기본기가 탄탄해야 프레임워크도 잘 사용할 수 있다고,,,)
