[개발일지] JavaScript & JQuery 기초 수업 Level 3-2

<코딩애플 온라인강의 수강일지>

Level 3-2 JavaScript: local storage, 스와이프, switch, 드래그&드롭

1. local storage 사용법

 - 개발자도구 > application

localStorage.setItem('이름', 'kim') //자료저장하는법
localStorage.getItem('이름') //자료꺼내는법
localStorage.removeItem('이름') //자료삭제하는법

 

 

// array 변환하여 저장하기

var arr = [1,2,3];
var newArr = JSON.stringify(arr);

localStorage.setItem('num', newArr);


// array 꺼내서 다시 변환하기

var 꺼낸거 = localStorage.getItem('num');
꺼낸거 = JSON.parse(꺼낸거);
console.log(꺼낸거);

 

2. 스와이프 기능 만들기

        var xStart = 0
        var xNow = 0
        let imgNowX = 0
        var clicked = false

        for (let i = 0; i < $('.slide-box').length; i++) {

            $('.slide-box').eq(i).on('mousedown', function (e) {
                xStart = e.clientX
                clicked = true
            })

            $('.slide-box').eq(i).on('mousemove', function (e) {
                xNow = e.clientX

                imgNowX = i * document.body.clientWidth * -1
                console.log(imgNowX)

                if (clicked == true) {
                    $('.slide-container').css('transform', `translateX(${xNow - xStart + imgNowX}px)`)
                }

            })

            $('.slide-box').eq(i).on('mouseup', function (e) {
                xNow = e.clientX
                clicked = false

                if (xNow - xStart < -100 && i != 2) {
                    $('.slide-container').css('transition', 'all 0.5s').css('transform', `translateX(${(i + 1) * -100}vw`)
                    imgNow = i + 1
                } else if (xNow - xStart > 100 && i != 0) {
                    $('.slide-container').css('transition', 'all 0.5s').css('transform', `translateX(${(i - 1) * -100}vw`)
                    imgNow = i - 1
                } else {
                    $('.slide-container').css('transition', 'all 0.5s').css('transform', `translateX(${(i) * -100}vw`)
                }

                setTimeout(function () {
                    $('.slide-container').css('transition', 'all 0s')
                }, 500)

            })

        }

 

3. switch 문법

<div id="quiz">
  <h4>물에 빠지면 누구먼저 구할 것임?</h4>
  <button>와이프</button>
  <button>부모님</button>
  <button>키우던 개</button>
</div>

<script>
  document.querySelector('#quiz').addEventListener('click', function(e){
    switch (e.target.innerHTML){
      case '와이프':
        alert('와이프를 좋아하시네요');
        break
      case '부모님':
        alert('효자네요');
        break
      case '키우던 개':
        alert('역시 사람보단 동물이 더 낫죠');
        break
    }
  });

</script>

 

 

4. 드래그 & 드롭 기능개발

        // json 불러오기

        let products = []
        let cart = []

        $.get('store.json').then((data) => {
            products = data.products

            for (let i = 0; i < products.length; i++) {
                let pTitle = products[i].title
                let pBrand = products[i].brand
                let pPrice = products[i].price
                let pPhoto = products[i].photo
                let pId = products[i].id
                let temp_html = `
<div class="col">
<div class="card" data-id="${pId}" draggable="true">
    <img src="/img/${pPhoto}" class="card-img-top">
    <div class="card-body">
        <h5 class="card-title">${pTitle}</h5>
        <h6 class="card-brand">${pBrand}</h6>
        <p class="card-text">가격: ${pPrice}</p>
        <button class="add btn btn-dark" data-id="${pId}">담기</button>
    </div>
</div>
</div>
`
                $('#list').append(temp_html)
            }


            //담기버튼

            $('.add').click(function (e) {

                //지금 누른 상품번호
                let productId = e.target.dataset.id;

                let num = cart.findIndex((a) => { return a.id == productId })

                if (num == -1) {
                    let itemNow = products.find((a) => { return a.id == productId })
                    itemNow.count = 1
                    cart.push(itemNow)
                } else {
                    cart[num].count++
                }
                console.log(cart)

                $('.cart').html('')

                for (let i = 0; i < cart.length; i++) {
                    let cTitle = cart[i].title
                    let cBrand = cart[i].brand
                    let cPrice = cart[i].price
                    let cPhoto = cart[i].photo
                    let cCount = cart[i].count
                    let temp_html = `
<div class="col">
<div class="item card">
    <img src="/img/${cPhoto}" class="card-img-top">
    <div class="card-body">
        <h5 class="card-title">${cTitle}</h5>
        <h6 class="card-brand">${cBrand}</h6>
        <p class="card-text">가격: ${cPrice}</p>
        <input type="number" value="${cCount}" class="item-count w-100">
    </div>
</div>
</div>
`
                    $('.cart').append(temp_html)

                }
                //가격계산

                calPrice()

            }) //담기버튼 끝





            // 장바구니
            $('.card').on('dragstart', function (e) {
                e.originalEvent.dataTransfer.setData('id', e.target.dataset.id)
            })

            $('.cart').on('dragover', function (e) {
                e.preventDefault()
            })

            $('.cart').on('drop', function (e) {

                let productId = e.originalEvent.dataTransfer.getData('id')
                console.log(productId)

                $('.add').eq(productId).click()

            })




        }) //$.get().then() 끝