[TIL] 버킷리스트 프로젝트

이루고 싶은것을 입력하고 기록하기 버튼을 누르면 아래 리스트에 추가되고, 완료를 클릭하면 취소선이 생기는 간단한 프로젝트다.
여기에 이미 완료된 버킷을 취소하는 기능을 만들어 보라는 숙제가 생겼다.
일단 완료된 li에 버튼을 달아주고 onclick 함수를 작성해보자.

//index.html

function cancle_bucket(num) {
  $.ajax({
    type: "POST",
    url: "/bucket/cancle",
    data: {cancle_give: num},
    success: function (response) {
      alert(response["msg"])
      window.location.reload()
    }
  });
}

함수를 작성하고, 서버쪽 코드도 작성해줬다.

#app.py

@app.route("/bucket/cancle", methods=["POST"])
def bucket_cancle():
    cancle_receive = int(request.form['cancle_give'])
    db.bucket.update_one({'num': cancle_receive}, {'$set': {'done': 0}})
    return jsonify({'msg': '수정 완료'})

잘 돌아간다. 삭제도 만들어 봐야겠다.

버킷리스트 왼쪽에 삭제버튼을 만들어주고

onclick함수 작성하고

//index.html

function delete_bucket(num) {
  if(confirm('정말 삭제 하시겠습니까?')) {
    $.ajax({
      type: "POST",
      url: "/bucket/delete",
      data: {delete_give: num},
      success: function (response) {
        alert(response["msg"])
        window.location.reload()
      }
    });
  }
}

서버코드 작성하고

#app.py

@app.route("/bucket/delete", methods=["POST"])
def bucket_delete():
    delete_receive = int(request.form['delete_give'])
    db.bucket.delete_one({'num': delete_receive})
    return jsonify({'msg': '삭제 완료'})

삭제의 경우엔 confirm()을 이용해 확인창을 띄워줬다.

잘 작동한다.