PROGRAMMING

HTML 실습 - 로또 번호 비교 본문

HTML/Flask

HTML 실습 - 로또 번호 비교

Raccoon2125 2021. 1. 27. 11:09

1. app.py

import random
from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def lotto():
    if request.method == 'POST':
        user_number = []
        number_for_lotto = [x for x in range(1, 46)]

        # 1. request.form.values()를 사용하면, submit 과 동시에
        #    받는 변수들의 모든 값을 리스트형태로 저장(값의 type: class 'str')
        # 2. request.form.items()를 사용하면, name과 value를
        #    키와 값을 지니는 dictionary 형태로 반환
        
        for i in range(1, 7):
            user_number.append(int(request.form[f'num{i}']))
        lotto_result = random.sample(number_for_lotto, 6)

        user_set = set(user_number)
        dst_set = set(lotto_result)
        match_num_len = len(user_set.intersection(dst_set))

        return render_template('lotto_input.html',
                               user_number=user_number,
                               lotto_result=lotto_result,
                               result_number=match_num_len)
    else:
        # result_number is undefined 에러가 계속 발생.
        # POST 방식으로 받게 해놨으나 GET에서도 변수를 인식하는 듯
        # GET 방식으로 보낼 때, 값을 초기화시켜서 에러 방지하였음
        result_number = -1
        return render_template('lotto_input.html',
                               result_number=result_number)


if __name__ == '__main__':
    app.run()

2. lotto_input.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>로또 사이트</title>
    <style>
        {# 클래스 생성 .circle #}
        .circle {
            {# div의 경우 누가 옆에 오는 것을 싫어해서 아래로 정렬되는데,
             display로 inline-block을 적용하면 가로로 만들 수 있다. #}
            display: inline-block;
            border: 1px solid saddlebrown;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: sandybrown;
            border-radius: 50%;
        }
        .dst_circle {
            display: inline-block;
            border: 3px solid cornflowerblue;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
            background-color: azure;
            border-radius: 50%;
        }
        input {
            width: 50px;
        }
    </style>
</head>
<body>
    <form action="/" method="post">
        <input type="text" name="num1">
        <input type="text" name="num2">
        <input type="text" name="num3">
        <input type="text" name="num4">
        <input type="text" name="num5">
        <input type="text" name="num6">
        <input type="submit" value="입력">
    </form>
        <ul>
            {% for user in user_number %}
                {# 클래스 사용: circle #}
                <li class="circle" style="background-color: darkseagreen">
                    {{ user }}
                </li>
            {% endfor %}
        </ul>
        <ul>
            {% for item in lotto_result %}
                {# 클래스 사용: circle #}
                <li class="circle">
                    {{ item }}
                </li>
            {% endfor %}
        </ul>

        {% if result_number == -1 %}
        <ul>
            <li class="dst_circle" style="background-color: grey">
                Put numbers.
            </li>
        </ul>
        {% elif result_number >= 2 %}
        <ul>
            <li class="dst_circle">
                {{ result_number }}
            </li>
        </ul>
        {% elif 2 > result_number >= 0 %}
        <ul>
            <li class="dst_circle" style="background-color: grey">
                {{ result_number }}
            </li>
        </ul>
        {% endif %}
</body>
</html>

3. 결과 화면

시작 화면
결과 화면

  ※ 입력을 모두 못 받았을 경우에 대한 예외처리 필요

저작자표시 비영리 변경금지

'HTML > Flask' 카테고리의 다른 글

웹 프레임워크 Flask - 3 (BootStrap, CSS, font, OpenWeatherMap)  (0) 2021.01.28
웹 프레임워크 Flask - 2  (0) 2021.01.28
웹 프레임워크 Flask - 1  (0) 2021.01.26
MongoDB Homepage 자료(사진)  (0) 2021.01.22
HTML 실습 - MongoDB 홈페이지 제작(feat. Flask) (파일)  (0) 2021.01.22
'HTML/Flask' Related Articles more
Comments