Level 2 : 6~13(숙제 및 깨달은 점)_scroll

6. Carousel slider 만들기

조건

번호를 누르면 해당 이미지로 이동할 수 있다.

$('.slide-1').on('click', function(){
    $('.slide-container').css('transform', 'translateX(0)');
})
$('.slide-2').on('click', function(){
    $('.slide-container').css('transform', 'translateX(-100vw)');
})
$('.slide-3').on('click', function(){
    $('.slide-container').css('transform', 'translateX(-200vw)');
})

---

7. Carousel slider 만들기 2

조건

이전/다음버튼 만들기. 첫번째 이미지에서 이전 누르거나 마지막 이미지에서 다음 눌러도 오류 없이 작동하기

let nowPic = 1;
$('.slide-container').css('width', `${$('.slide-box').length}00vw`);
$('.prev').on('click', function(){
    if (nowPic == 1) {
        $('.slide-container').css('transform', `translateX(-${$('.slide-box').length - 1}00vw)`);
        nowPic = $('.slide-box').length;
    } else {
        $('.slide-container').css('transform', `translateX(-${nowPic - 2}00vw)`);
        nowPic--;
    }
})
$('.next').on('click', function(){
    if (nowPic == $('.slide-box').length) {
        $('.slide-container').css('transform', `translateX(0)`);
        nowPic = 1;
    } else {
        $('.slide-container').css('transform', `translateX(-${nowPic}00vw)`);
        nowPic++;
    }
})

깨달은 점 : 문자열 안에 변수를 넣을 수 있었다! ES6에서 추가된 Template literals를 사용하면 문자열을 백틱기호 ``로 표현하면 안에 ${} 형태로 변수를 넣을 수 있다. ''로 된 문자열에는 쓸 수 없었다.

---

8. 수수료 계산하기

조건

소수점 오차 개선하고, 문자열로 반환된 값 숫자로 변환하여 return으로 반환하기

console.log(vat(55555));

function vat(a) {
    let num = (a * 1.1).toFixed(1);
    return parseFloat(num);
}

깨달은 점 : 정말 간단하긴 한데 여태까지는 return을 빼도 콘솔에 값이 정상적으로 뜰거라고 생각했다. 같은 a * 0.1을 담고 있더라도 리턴이 있는 함수는 값을 퉤 뱉어서 반환하고, 리턴이 없는 함수는 호출되면 실행만 하는 것이다. (그래서 undefined가 뜨더라)

---

9. 분, 초를 넣으면 ms로 구하기

console.log(timeChanger(1,30));

function timeChanger (min, s){
    let minChange = min * 60;
    let result = minChange + s;
    return result * 1000;
}

---

10. 할인에 최초구매할인 먹여서 최종구매가 구하기

조건

1. 소수점 오차 개선하고, 문자열로 반환된 값 숫자로 변환하여 return으로 반환하기
2. 10퍼센트 할인가 먹이고, 첫구매일 시 1.5달러 추가 할인해서 최종구매가 반환하기

console.log(disCounter(10,true));

function disCounter (price, firsttime){
    let finalPrice = (price * 0.9).toFixed(1);
    if (firsttime == true) {
        return parseFloat(finalPrice) - 1.5;
    } else {
        return parseFloat(finalPrice);
    }
}

---

11. 네비바 텍스트 스크롤 내리면 폰트사이즈 줄이기

조건

스크롤 다시 올리면 폰트사이즈 다시 키우기

window.addEventListener('scroll', function(){
    if (window.scrollY > 100) {
        document.querySelector('.navbar-brand').style.fontSize = '16px';
    } else {
        document.querySelector('.navbar-brand').style.fontSize = '30px';
    }
})

---

12. 약관박스 스크롤 끝까지 내리면 얼럿띄우기

조건

완전히 끝까지 내리지 않아도 적당히 다 읽으면 얼럿띄우기

let lorem = document.querySelector('.lorem');
lorem.addEventListener('scroll', function(){
    if ((lorem.scrollTop + lorem.getBoundingClientRect().height) > (lorem.scrollHeight - 10)) {
        alert('끝까지 읽었음.');
    }
})

깨달은 점

scrollHeight/clientHeight/offsetHeight/getBoundingClientRect()에 대해서 서치하며 알게 된 건 따로 글로 작성했다.
addEventListener('scroll') 앞에 window.로 붙였더니 작동 안했다. (약관을 스크롤하는것이니 당연함) 주의하자.

개선할 점

요소의 화면에 보이는 높이값을 element.getBoundingClientRect().height로 힘겹게 구했는데, element.clientHeight로도 동일한 값이 반환된다고 한다?

이에 관해 쓴 글 : [코딩애플] 요소의 높이와 위치값 구하기 (clientHeight, offsetHeight, scrollHeight, getBoundingClientRect()) — PERFECTLY YELLOW (tistory.com)  

---

13. 화면을 내리면 진행도가 표시되는 바 만들기

const progress = document.querySelector('.progress');
const progressBar = document.querySelector('.progress .bar');
window.addEventListener('scroll', function(){
    let nowProgress = Math.max(window.scrollY / (document.body.scrollHeight - window.innerHeight)).toFixed(2) * 100;
    progressBar.style.width = nowProgress + `%`;
})

깨달은 점

window.scrollY(현재스크롤위치)  document.body.scrollHeight(문서 전체의 높이) window.innerHeight(모니터안 브라우저 자체의 높이)로 구했다.
문서 전체의 높이는 정확히는 이렇게 구한다고 한다.

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

참고 사이트 : https://ko.javascript.info/size-and-scroll-window

---

출처 : 코딩애플 https://codingapple.com/