[코드캠프] 싸이월드 만들기 2탄, 3탄

 

싸이월드 만들기 2탄

왼: 예시 / 오: 내가 구현한 것

글씨체를 지원해주지 않아서 그 부분을 구현하지 못했고, 이 부분을 제외하고는 수월하게 구현해낼 수 있었다. 

왼쪽과 오른쪽 상자의 높이가 맞지 않는 일이 발생했었는데 wrapper_left_header를 div로 묶을 때 뒷 태그의 위치가 잘못되어 길이가 다르게 나타난 것이었다. 다른 걸 모두 구현하고 나서 다시 한번 흝어보니 다행히 쉽게 찾을 수 있어 수정하였다. 

 

싸이월드 만들기 3탄

왼: 예시 / 오: 내가 구현한 것

 

끝말잇기 게임을 구현할 때 함수를 사용했는데 나는 평소에 화살표함수를 잘 사용하지 않아 어색했다. 

const startWord = () => {
    let myword = document.getElementById("myword").value
    let word= document.getElementById("word").innerText


    let lastword = word[word.length-1]
    let firstword = myword[0]

    if(lastword===firstword){
        //정답일때
        document.getElementById("result").innerText ="정답입니다!"
        document.getElementById("word").innerText= myword
        document.getElementById("myword").value= ""
    }
    else{
        document.getElementById("result").innerText="땡!"
        document.getElementById("word").innerText= ""
    

    }
}

 

인덱스를 사용하여 기존의 단어 마지막 글자와 새로 입력한 단어의 첫글자를 비교하여 

if문을 통해 판별하였다.

"" 빈문자열을 사용하여, HTML 요소의 텍스트를 비워 화면에 아무것도 출력되지 않게 설정하였다.