프로젝트 사이트

추가된 기능

1. css 적용 - 시멘틱 UI
2. 클립보드에 있는 컬러 값 적용기능
3. 설정 값 웹스토리지에 저장

클립보드에 있는 컬러 값 적용기능

colorhunt나 2colors.colorion등 좋은 컬러값들을 보여주는 사이트들이 있습니다. 이러한 사이트에서는 컬러를 클립보드로 복사해주는 기능이 존재합니다.

기존에는 컬러값을 복사하고 직접 입력해야되는 불편함이 있었습니다. 이러한 사이트에서 컬러 값들을 참고할 일이 많을 것으로 생각되어서 클립보드에 있는 컬러 값 적용 기능을 만들었습니다.

사이트를 참조한 결과 클립보드로 복사되는 컬러 양식은 FFFFFF 이거나 #FFFFFF 입니다.

따라서 이 두가지를 만족하는지 검사하는 코드를 작성하였습니다. (이 로직 볼때마다 수정하고 싶어요🤦‍♂️)

function isVaildColor(text) {
    let startdIdx = 0;
    if(text.length == 6 || text.length == 7){
        for(let i = startdIdx ; i < text.length ; i++) {
            if(!((text[i] >= 'a' && text[i] <= 'f') ||
               (text[i] >= 'A' && text[i] <= 'F') ||
               (text[i] >= '0' && text[i] <= '9'))) {
                   return false;
               }
        }
        return true;

    }else {
        return false;
    }
}

💡 2021.05.27 : 정규표현식으로 바꿀 수 있을 것 같네요.

컬러값이 만족하면 해당 컬러를 적용하도록 하였습니다.

만약 잘못된 컬러양식이면 다음과 같이 알림창이 나오도록 하였습니다.

설정 값 웹스토리지에 저장

입력되는 값들을 웹 스토리에서 저장 및 불러오기를 해서 기존 입력값을 설정을 유지시키도록 했습니다.

마치며

아직 사이트는 완벽하지는 않지만, 어느정도 구색(?)을 갖출만큼 만든 것 같습니다.
벨로그에 글을 쓸때, 이 사이트를 이용하면서 불편한 점이 있다면 고쳐나가도록 해야겠습니다.

PS - 추천 세팅

가로 : 800
세로 : 400
폰트크기 : 40