[#3-1. Develop ] 박람회 플랫폼 개발 작업 (index & login)

앞서 개발을 위한 로직, 창 안에서의 컨텐츠 배치 등등의 세부 디자인 까지 기획했다.

이 모든 것은 개발을 좀 더 효율적으로 빠르고 체계적으로 하기 위한 준비 과정이라고 할 수 있다!!

develop 과정은 세 명이 협업하여 약 일주일 정도가 걸렸다.

 

<index.html>

완성된 index page

index page를 develop 하면서 가장 신경 썼던 부분은 배경에 깔리는 짧은 길이의 video였다.

꽉찬 화면으로, 무한 루프를 돌며 끊임없이 재생되도록 video 태그를 사용하여 코딩했다.

video source 또한 적절한 길이의 무료 오픈소스 video를 다운 받아 사용했다.

index.html의 bg 부분

<login.html>

login page의 기본 화면

정보를 받기 전의 login page는 저렇게 생겼다.

정보를 받기 위해 밑줄을 클릭하면, 아래와 같이 밑줄이 파란색으로 그려지는 것을 볼 수 있다.

또 정보를 입력한 뒤 옆에 있는 입력 버튼을 누르거나, 키보드의 enter 키를 누르면,

아래와 같이 정보가 잘 저장되서 '어서오세요 ~~~ 님!' 이라는 문구도 띄워주는 것을 볼 수 있다.

추가적으로 정보를 고치기 위해 만든 버튼을 누르면 login page의 기본 화면으로 돌아가 새 정보를 입력할 수 있다.

login page 정보 입력 시 화면

정보를 다 입력하면, 아래의 사진과 같이 이름표를 받고 입장하세요! 라는 버튼이 새롭게 생성된다.

그리고 저 버튼을 누르면 바로 name-tag splash 화면으로 연결된다.

login page 정보 입력 완료 시

login page에는 JS 코드가 좀 들어가서 공부도 추가적으로 많이 하면서 개발했다.

또 입력된 정보를 local storage에 저장하는 부분도 특히 신경썼다.

 

- js 코드

html의 class명으로 js를 적용하기 위해 const 변수에 document.querySelector(".class"); 로 요소를 가져왔다.

그리고 CLASS_HIDDEN = "hidden"; 을 저장하여,

조건에 따라 숨김 처리할 요소에 classList.add(CLASS_HIDDEN); 을 주고,

숨김 해제할 요소에 classList.remove(CLASS_HIDDEN); 을 적용해 각 요소에 hidden CSS를 적용했다.

 

또, 받은 정보를  local storage에 저장하기 위해, 

nameSubmit() , positionSubmit() 함수를 각각 만들어 enter가 눌렸을때,

localStorage.setItem()을 해주었다. 그리고 innerText 코드로 업데이트된 코드를 보여주어 inf 입력 부분을 마무리했다.