js 변수와 조건문 - 20세 체크, 별점 주기(with jquery)

자바스크립트 변수(var)와 조건문(if) - 20세 성인 체크

** 폰트어썸 4.7 , 제이쿼리 연결

css 속성: flex input[type=text]

jquery 속성: var if val() alert()

 

 

input 값을 가져와서 변수에 저장하기 

input 값이 빈칸, 20미만, 20이상, 숫자가 아닌 다른모든 값인 경우를 체크한다.   

 

    <div class="container">
        <h1>JavaScript var, val(), if</h1>
        <div class="login">
            <h2>20세 이상 성인인증 체크 제이쿼리 if 조건문</h2>
            <input id="age" type="text" placeholder="나이를 숫자로 입력">
            <button>성인인증</button>
        </div>
    </div>

body {
    margin: 0;
    line-height: 1.5em;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    text-align: center;
    background-color: #fff;
}
.login {
    padding: 30px;
    border: 1px solid #000;
}
.login input[id=age],
.login button {
    padding: 10px;
    outline: none;
}
.login button {
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

 

// id값이 age인 요소의 value값 받기

$('#age').val() 

// 성인인증 체크
$('.login button').click(function() {
    // 요소의 value값을 받아옴
    var num = $('#age').val();
    if(num == '') {
        alert('나이를 입력하세요.');
    } 
    else if(num < 20) {
        alert('미성년자입니다.');
    }    
    else if(20 <= num) {
        alert('성인입니다.');
    }
    else {
        // 빈칸은 아니고 입력은 했으나 입력이 잘못된경우
        alert('입력내용을 숫자로 넣으세요.');
    }
});

 

 

 

- 예제2 별점 주기

별점의 클릭한 별을 기준으로 (.fa) 그 이전 별은 보이게 

그 이후 별은 안보이게 active클래스 add , remove

 

순서 찾는 메서드 index

텍스트 내용 뿌려주는거 text, 태그도 같이 사용하고 싶으면 html

 

    <div class="star-rating">
        <div class="stars">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
        </div>
        <div class="text">
            별점 주실거죠? ㅎ
        </div>
    </div>

.star-rating {
    width: 260px;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.829);
}
.star-rating div {
    float: left;
    width: 50%;
}
.stars {
}
.stars .fa {
    font-size: 18px;
    cursor: pointer;
}
.stars .fa.active {
    color: yellow;
    text-shadow: 0 0 5px yellow;
}
.print {
    color: #fff;
}
.print img {
   /* 인라인끼리 중앙맞추기 */
    vertical-align: middle;
    margin-right: 5px;
}

$('.stars .fa').click(function() {
    $(this).addClass('active');

    // 클릭한 별을 기준으로 (.fa) 그 이전 별은 보이게 그 뒤에 별들은 안보이게
    $(this).prevAll().addClass('active');
    $(this).nextAll().removeClass('active');

    // 순서를 찾는 메서드 index 0 1 2 3 4
    // 텍스트내용을 출력 text, 태그+텍스트 html
    var num = $(this).index();
    $('.print').text(starRate);
    var starRate = num + 1
    if(starRate == 1) {
        // $('.print').text('별로에요');
        $('.print').html('<img src="img/icon/star-lv1.png">' + '별로에요');
    } else if(starRate == 2) {
        $('.print').html('<img src="img/icon/star-lv2.png">' + '보통 이에요');
    } else if(starRate == 3) {
        $('.print').html('<img src="img/icon/star-lv3.png">' + '그냥 그래요');
    } else if(starRate == 4) {
        $('.print').html('<img src="img/icon/star-lv4.png">' + '맘에 들어요');
    } else {
        $('.print').html('<img src="img/icon/star-lv4.png">' + '아주 좋아요');
    }
});