완성본
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하면 색도 바뀌게 만들었는데 움짤넣는 방법을 모르겠다.
페이지 너무 이쁘네요
기능 구현하시기 위해 애쓰신게 보입니다 ㅎㅎ 움짤넣는 방법도 다음엔 꼭 성공하시길!!
한가지 팁을 드리자면 WIL은 한주간의 배우신점이나 회고를 해보신다면 좀더 알찬 구성으로 작성하실 수 있을거에요!
미니프로젝트 진행하시느라 한주동안 정말 너무 고생 많으셨습니다