전체 글
Ajax 활용 미세먼지 70이상 값만 빨간색 표시 예제
미세먼지 70이상 값 빨간색 표시 예제 Ajax , for, If 문 활용 Ajax 콜을 Get 요청으로 받아온 뒤 rows의 변수를 정한다. rows는 받아온 response값의 RealtimeCityAir안의 row의 전부. for문을 이용해 반복문을 돌린다. gu_name값은 아까 정한 row의 계속 돌아갈 i번째의 MSRSTE_NM 값이고, gu_mise값은 IDEX_MVL 값이다. temp_html 은 백틱을 사용하여 공백 처리한다. 그 후 if문을 활용해 70이상일 경우엔 color:red를 주고, else (아닐 경우엔) 그냥 준다. if문을 벗어나서 append를 활용하여 temp_html을 더해준다.
타이핑 예제
Html 타이핑 마스터! Hello 남은 시간 : 0초 획득 점수 : 0점 게임을 불러오는 중... CSS * { margin: 0; padding: 0; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; } .header { width: 100%; background: #3b5999; color: white; text-align: center; padding: 1rem; } .word-display { margin-top: 3rem; font-size: 80px; color: #3b5999; } .word-input-box { margin-top: 2rem; } .word-input {..
Python Flask, Ajax 활용 예제 - 링크 따오기
개인 미니 프로젝트 제작 기록 & 복습 용 링크 가져오면, 좋아요, 삭제, 댓글, 댓글수 버튼을 함께 가져오는 부분 예제. 각각의 기능들은 따로 따로 구현해야함. 밑의 HTML과 PYTHON은 링크를 단순하게 가져오는 크롤링과 그것을 HTML에 어떻게 적용하느냐는 예제 [ HTML ] function showArticles(url) { $.ajax({ type: "GET", url: "/memo", data: {}, success: function (response) { let list = response['list_receive'] for (let i = 0; i < list.length; i++) { let title = list[i]['title'] let img = list[i]['img'] le..
Python, Ajax 활용 예제 - 좋아요 기능
Python, Ajax 활용 예제 - 좋아요 기능 일의 순서 1. DB에서 인물 리스트를 내려 받고, 2. 클라이언트에 제공해준다. 3. 클라이언트에서는 좋아요, 삭제 등 함수값을 서버쪽에 넘기면 4. 서버는 그 값을 받고, DB를 수정해준다. 기본 임포트 값 from pymongo import MongoClient from flask import Flask, render_template, jsonify, request 1. 리스트 내려주기 - 서버 쪽 ( Python ) @app.route('/api/list', methods=['GET']) def show_stars(): movie_stars = list(db.mystar.find({}, {'_id': False}).sort('like', -1)) ..
Flask에서 Ajax 요청하기 POST 예제 - 북리뷰(book-review)
북리뷰 코딩 예제 일의 순서 1. 클라이언트와 서버 확인하기 (print나 console.log 등으로 확인) 2. 서버 만들기 3. 클라이언트 만들기 4. 완성 확인하기 서버쪽 app.py 상태 @app.route('/review', methods=['POST']) def write_review(): title_receive = request.form['title_give'] author_receive = request.form['author_give'] review_receive = request.form['review_give'] doc = { 'title':title_receive, 'author':author_receive, 'review':review_receive } # 딕셔너리를 만들고 d..