[KDT]FCFE - 1주2일 과제 airbnb체로 변환 페이지 만들기

git 저장을 숙련하기위한 과제!

github flow practice
github flow로 프로젝트를 수행해봅시다

주제: 에어비엔비체 구현하기

Tasks
직접 실행해보고 동작 원리 파악하기
알고리즘 구현하기
구현된 알고리즘을 수행할 페이지 구현하기
github flow로 기능 단위별 브랜칭
issue와 projects로 프로젝트를 관리
template을 활용하여 issue와 project templating

https://airbnbfy.hanmesoft.com/

1. 틀 만들기

1) 변환 전, 후 textarea 와 변환하기 button 먼저 만들기

2) 변환 전 textarea에 입력한 내용을 변환 버튼을 눌렀을 때 변환 후 textarea로 출력하기

2. 변환시키기

처음든 생각은

글자를 unicode로 바꿔서 숫자 변경해서 다시 넣어주기.

unicode에 3씩만 더해서 바꿔줬다.

<script>
    const before = document.querySelector("#before");
    const after = document .querySelector("#after");

    document.querySelector("#convertBtn").addEventListener("click",function(){
        const beforArray = (before.value).split("");
        const afterArray = [];
        beforArray.forEach((char)=>{
            const uni = Number(char.charCodeAt(0));
            console.log(uni);
            //32는 공백, 46은 .
            if(uni!=32 && uni!=46 && uni!=39 && uni!=34 && uni!=45 && uni!=40 && uni!=41 && uni!=33 && uni!=63 && uni!=44 && uni!=47 && uni!=92 && uni!=58 && uni!=59){
                afterArray.push(String.fromCharCode(uni+2));
            } else {
                afterArray.push(String.fromCharCode(uni));
            }
        })
        after.value = afterArray.join("");
    })

</script>

여러가지 특수기호들은 제외시켰다.
더 긴 문장을 넣으면 읽기 어렵다. 뜻 전달도 안되는 정도.

3은 너무 큰 듯 해서 1, 2 정도 더해서 변환.

1 또는 2를 랜덤으로 던해서 반환 시킨다.