html 파일을 웹 브라우저로 불러와서 보는데 혹시 data.common_count 값이 설정이 안되어 있어서 이렇게 나오는 건가요?
여쭈어 봅니다!
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.lotto-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.lotto-ball {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #ffcc00;
color: #000;
font-size: 24px;
line-height: 80px;
text-align: center;
font-weight: bold;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.lotto-numbers {
list-style: none;
padding: 0;
}
.lotto-numbers {
display: inline-block;
margin: 5px;
background-color: #FFFF00;
padding: 10px;
border-radius: 50%;
font-weight: bold;
}
.randomlotto-numbers {
list-style: none;
padding: 0;
}
.randomlotto-numbers li {
display: inline-block;
margin: 5px;
background-color: red;
padding: 10px;
border-radius: 50%;
font-weight: bold;
}
</style>
</head>
<body>
<h1>안녕, {{ data.name }}</h1>
<h2>로또 번호: {{ data.lotto }}</h2>
<h2>랜덤 로또 번호: {{ data.random_lotto }}</h2>
<ul class="lotto-container">
{% for element in data.lotto %}
<li>{{ element|e }}</li>
{% endfor %}
</ul>
<ul class="randomlotto-container">
{% for element in data.random_lotto %}
<li>{{ element|e }}</li>
{% endfor %}
</ul>
<!-- 당첨 갯수에 따라 메세지 표시 -->
{% if data.common_count == 6 %}
<h2>{{ data.common_count }}개 맞았습니다. 1등입니다!!!</h2>
{% elif data.common_count == 5 %}
<h2>{{ data.common_count }}개 맞았습니다. 2등입니다!!!</h2>
{% elif data.common_count == 4 %}
<h2>{{ data.common_count }}개 맞았습니다. 3등입니다!!!</h2>
{% elif data.common_count == 3 %}
<h2>{{ data.common_count }}개 맞았습니다. 4등입니다!!!</h2>
{% else %}
<h2>{{ data.common_count }}개 맞았습니다. 탈락입니다...</h2>
{% endif %}
</body>
</html>
