자기소개페이지 - javascript 적용

드디어 javascript를 자기소개페이지에 적용했다.

1.  text-typing

• 한 글자씩 나타나도록 적용
• 무한반복하는 타이핑 적용

홈화면에 인사말을 자바스크립트로 구현해내고 싶어서 유노코딩 영상을 참고했다.

  <section class="home" id="sec1">
     <h1 class="text"></h1>
   </section><!--sec1/--> 

/*sec1*/
#sec1{
    background: url(../images/back.jpg) no-repeat center;
    background-size: cover;
}
#sec1 h1{
    position: absolute;top:30%;left:48%;
    transform: translate(-30%,-48%);
    color:#fff;
    font:lighter 60px 'Dongle';
    border-right: 1px solid #fff;
    animation: cursor 0.5s ease infinite;
    
}
@keyframes typing{
    0% {
      width: 0%;
    }
    50% {
      width: 100%;
    }
    100% {
      width: 0%;
    }
  }

@keyframes cursor {
    50% { border-color: transparent;}
  } /*커서가 깜빡이는 효과를 주기위해 적용*/

 const content = "안녕하세요,  우혜림입니다.";           //효과를 주고자 하는 텍스트 선언
 const text = document.querySelector(".text");     //효과를 주고자 하는 태그 선택
 let i = 0;                      //문자열 하나하나의 인덱스 접근을 하기 위한 사용하는 숫자열 데이터

 function typing(){                  
   text.textContent += content[i++];    //h1태그에 컨텐츠 내용을 추가 i가 올라가면서 하나씩 추가
   if(i > content.length){     //i가 컨텐츠의 길이보다 길어졌을 때 멈추기 위해
    text.textContent = ""   // 모든것을 초기화하고 다시 시작하도록 만들기 위해 컨텐츠는 없애고
     i = 0;                  //i는 0으로 리셋
   }
 }
 setInterval(typing, 300);   //(주기적으로 동작해주고 싶은 함수 이름, millisecond)

📌완성본

2.  chatbot

페이지에 없는 정보들을 chatbot 기능으로 나타냈다.
codewithrandom 사이트에서 클론코딩 겸 연습을 하다가 재밌는 기능을 발견해서 자기소개 페이지에 적용했다.

<p id="btn"><img src="./images/chat.png" alt=""></p>

    <div id="glass">
      <h1>Chatbot</h1>
      <h2>저에게 무엇이든 물어보세요!</h2>
      <div class="input">
        <input type="text" id="userBox" onkeydown="if(event.key === 'Enter'){talk()}" placeholder="질문을 입력하세요.">  
      </div><!--input/-->
      <p id="chatLog"></p>

      <p id="close">X</p>
    </div><!--glass/-->

/*chat*/
#glass{
    width: 500px;
    height: 350px;
    background:url(../images/chatback2.jpg)no-repeat center;
    background-size: cover;
    padding: 50px;
    color:#fff;
    border-radius: 9px;
    box-shadow: 10px 10px 10px rgba(45,55,68,0.3);
    backdrop-filter: blur(50px);
    line-height: 1.5;
    position: fixed;
    top:30%;left:30%;
    text-align: center;
    font-family: '배달의민족 한나는 열한살';
    display: none;
 }
 #glass h2{
     font-size: 20px;
     margin-top: 20px;
     color:#fff;
 }
 #glass p{
     font-size: 20px;
     color: #fff;
     line-height: 1.5;
 }
 .input{
     width: 500px;
     height: 70px;
     margin: 40px auto;
 }
 .input input{
     width:400px;
     height:70px;
     border:none;
     padding: 0 0 0 40px;
     font-size: 18px;
     border-radius: 20px;
 }
 #close{
     position: absolute;
     top: 10px;
     right:10px;
     font-size: 25px;
     border: none;
     background: none;
     color:#fff;
     cursor: pointer;
 }
 #btn{
     position: fixed;
     bottom: 0;
     left: 0;
     cursor: pointer;
 }
 #btn img{
     width:8%;
 }

position:fixed 를 사용하여 전체 페이지에서 같은 위치에 이미지가 고정되도록 적용했다.

function talk(){
  let know = {
      "안녕하세요" : "안녕하세요, 만나서 반갑습니다👊🏻",
      "사는 곳이 어딘가요?" : "저는 경기도 화성시에 거주하고 있습니다.",
      "무엇을 하고 있나요?" : "프론트엔드개발을 위해 공부하고 있습니다.",
      "개발을 시작하게 된 계기가 있나요?" : "10년, 20년후에도 계속 할 수 있는  분야를 알아보다가<br>웹디자인&웹퍼블리셔 교육을 듣게 되었는데,<br>그때 개발의 매력을 느끼면서 본격적으로 시작하게 됐습니다.",
      "취미가 뭐에요?" : "평소에 영화보는것을 좋아하고, <br> 스트레스 쌓일 땐 블럭조립 하는 것,<br> 날씨 맑을 때 걷는것을 좋아해요!",
      "대답해 주셔서 고맙습니다!" : "질문해주셔서 감사합니다🙏🏻",
      "안녕히 계세요" : "다음에 또 만나요👊🏻"
  };

  let user = document.getElementById('userBox').value;
      document.getElementById('chatLog').innerHTML = user + "<br>";
      if(user in know){
          document.getElementById('chatLog').innerHTML = know[user] + "<br>";            
      }else{
          document.getElementById('chatLog').innerHTML = "죄송합니다. 그 질문은 대답할 수 없습니다. <br>";
      }
}

///////////////열고 닫는 기능////////////

document.getElementById('btn').addEventListener('click',function(){
  document.getElementById('glass').style.display = 'block'
});

document.getElementById('close').addEventListener('click',function(){
  document.getElementById('glass').style.display = 'none'
});

기존의 없던 클릭해서 열고 닫는 기능을 추가했다.

📌완성본

❗️느낀점

어느덧 스터디도 4주가 지났다.
지난 4주간 기본 문법을 공부하고 간단한 Repl.it만 풀다가 직접 페이지에 적용하려니 부족한 실력과... 구글링의 소중함을 다시 한번 느낌!!!..
직접 친 코드는 열고 닫는 코드 뿐이라 하면서 자괴감이 느껴졌다.. 클론코딩을 해보는것도 좋은 경험이 될거라는 말을 뼈저리게 느낀 주였다!!
javascript를 공부한지도 이제 4주차고, 앞으로 갈길이 멀기에 조급해 하지말자 다짐했지만 직접 적용하고 보니 흔들리게된다.. 그러니 멘탈 잡고 더 열심히 하자!!!! 하다 보면 나아질거라 믿는다.