첫 프로젝트(feat. 자기소개페이지)

완성본

HTML & CSS

부트스트랩을 이용한 카드형식.
가운데 정렬 후 반응형으로 디자인했다.
box-shadow 효과를 주어 입체감 부여.

width: 95%;
max-width: 500px;
margin: 0 auto;
box-shadow: 1px 5px 15px 3px #999;

날씨 & 현재기온

https://openweathermap.org/ 에서 가져온 api로 현재기온을 실시간으로 반영, 지역정보를 넣고 날씨는 아이콘으로 표현(switch함수 사용)되도록 했다.

※ $('document').ready(function){}

: DOM(Document Object Model/ HTML 또는 XML)이 완전히 로드되면 실행되는 Event
한마디로 화면이 로드되면 처음 실행되는 이벤트이다.

$(function(){});으로 줄여서 사용할 수 있다.

<div class="weather">            
     <p class="temperature">
     	<i class="bi bi-thermometer-half"></i> 현재기온 : <span id="temp"></span>℃
     </p>
     <p class="sky">날씨 : </p>
</div>

$(document).ready(function(){
	set_cloud()
});

function set_cloud(){
	$.ajax({
      type: "GET",
      url: "https://api.openweathermap.org/data/2.5/weather?q=seoul&appid=ab2d28805384c99f85017b405ab63c00",
      data: {},
      success: function (response) {
          let sky = response.weather[0].main;
          switch(sky){
              case 'Clear':
                  $('.sky').append("<i class=\"bi bi-brightness-high\"></i>");
              break;
              case 'Wind':
                  $('.sky').append("<i class=\"bi bi-wind\"></i>");
              break;
              case 'Clouds':
                  $('.sky').append("<i class=\"bi bi-clouds\"></i>");
              break;
              case 'Rain':
                  $('.sky').append("<i class=\"bi bi-cloud-rain-fill\"></i>");
              break;
              case 'Snow':
                  $('.sky').append("<i class=\"bi bi-snow2\"></i>");
              break;
          }
          $('.sky').append('\u00A0'+response.name);
    	}
    })
}

댓글달기 + 삭제 (python flask pymongo)

name과 comment로 지정,
삭제는 len()함수를 이용하여 댓글순번을 부여한 후 done값(0 또는 1)에 따라 화면에 나타나도록 하였다. 삭제를 해도 db에는 데이터가 그대로 남는다.

▶댓글저장

@app.route("/ha", methods=["POST"])
def ha_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    comment_list = list(db.ha.find({}, {'_id': False}))
    count = len(comment_list) + 1

    doc = {
        'num':count,
        'name':name_receive,
        'comment':comment_receive,
        'done':0
    }
    db.ha.insert_one(doc)
    return jsonify({'msg':'저장 완료!'})

function save_comment(){
            let name = $('#name').val()
            let comment = $('#comment').val()
            $.ajax({
                type: 'POST',
                url: '/ha',
                data: {name_give:name, comment_give:comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })
}

▶댓글보여주기

@app.route("/ha", methods=["GET"])
def ha_get():
    comment_list = list(db.ha.find({}, {'_id':False}))
    return jsonify({'comments':comment_list})

$(document).ready(function(){
	set_cloud()
    show_comment()
});
        
function show_comment(){
   $.ajax({
       type: 'GET',
       url: '/ha',
       data: {},
         success: function (response) {
              let rows = response['comments']
              for (let i = 0; i < rows.length; i++) {
                  let name = rows[i]['name']
                  let comment = rows[i]['comment']
                  let num = rows[i]['num']
                  let done = rows[i]['done']
                  let temp_html = ``
                  if (done == 0) {
                       temp_html = 
                            `<div class="card">
                                <div class="comment_card">
                                    <blockquote class="blockquote mb-0">
                                        <button onclick="delete_comment(${num})" type="button" class="btn-light">X</button>
                                        <p>${comment}</p>
                                        <footer class="blockquote-footer">${name}</footer>
                                    </blockquote>
                                </div>
                            </div>`
                 } else {
                       temp_html = ``
                 }
                 $('#comment-list').append(temp_html)
                }
}

▶댓글삭제

*삭제button클릭시 done값을 '1'로 set
default값은 '0'

@app.route("/ha/done", methods=["POST"])
def delete_comment():
    num_receive = request.form['num_give']
    db.ha.update_one({'num':int(num_receive)},{'$set':{'done':1}})
	return jsonify({'msg': '삭제완료'})

function delete_comment(num){
            $.ajax({
                type: "POST",
                url: "/ha/done",
                data: {num_give:num},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
}

x에 마우스 hover하면 색도 바뀌게 만들었는데 움짤넣는 방법을 모르겠다.