<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>골프 스코어 카드</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Arial,sans-serif;
background:#0f172a;
color:white;
padding:40px;
}
.wrap{
width:900px;
margin:auto;
background:#1e293b;
padding:30px;
border-radius:24px;
box-shadow:0 20px 50px rgba(0,0,0,.4);
}
h1{
text-align:center;
margin-bottom:10px;
}
.desc{
text-align:center;
color:#cbd5e1;
margin-bottom:25px;
}
.scoreGrid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
margin-bottom:25px;
}
.hole{
background:#334155;
padding:12px;
border-radius:14px;
text-align:center;
}
.hole label{
display:block;
margin-bottom:8px;
font-weight:bold;
}
.hole input{
width:100%;
padding:10px;
border:none;
border-radius:8px;
text-align:center;
font-size:16px;
}
.btnArea{
text-align:center;
margin-bottom:25px;
}
button{
padding:14px 24px;
border:none;
border-radius:12px;
background:#22c55e;
color:white;
font-size:17px;
cursor:pointer;
margin:5px;
}
button:hover{
background:#16a34a;
}
.resetBtn{
background:#ef4444;
}
.resetBtn:hover{
background:#dc2626;
}
.result{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}
.card{
background:#020617;
padding:20px;
border-radius:16px;
text-align:center;
}
.card span{
display:block;
color:#94a3b8;
margin-bottom:8px;
}
.card strong{
font-size:28px;
color:#facc15;
}
.message{
margin-top:20px;
background:#064e3b;
padding:18px;
border-radius:14px;
text-align:center;
font-size:20px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>골프 스코어 카드</h1>
<p class="desc">18홀 스코어를 입력하면 총타수, 평균, 오버/언더를 계산합니다.</p>
<div class="scoreGrid" id="scoreGrid"></div>
<div class="btnArea">
<button onclick="calculateScore()">스코어 계산</button>
<button class="resetBtn" onclick="resetScore()">초기화</button>
</div>
<div class="result">
<div class="card">
<span>총 타수</span>
<strong id="totalScore">0</strong>
</div>
<div class="card">
<span>평균 타수</span>
<strong id="avgScore">0</strong>
</div>
<div class="card">
<span>기준 파</span>
<strong>72</strong>
</div>
<div class="card">
<span>오버 / 언더</span>
<strong id="overScore">0</strong>
</div>
</div>
<div class="message" id="message">
스코어를 입력하고 계산 버튼을 눌러보세요.
</div>
</div>
<script>
let par = 72;
// 18홀 입력칸 자동 생성
function makeScoreInputs(){
let html = "";
for(let i = 1; i <= 18; i++){
html += `
<div class="hole">
<label>${i}홀</label>
<input type="number" id="hole${i}" placeholder="타수">
</div>
`;
}
document.getElementById("scoreGrid").innerHTML = html;
}
makeScoreInputs();
function calculateScore(){
let total = 0;
let count = 0;
for(let i = 1; i <= 18; i++){
let score = document.getElementById("hole" + i).value;
if(score !== ""){
total += Number(score);
count++;
}
}
if(count === 0){
alert("스코어를 입력하세요.");
return;
}
let avg = total / count;
let over = total - par;
document.getElementById("totalScore").innerHTML = total;
document.getElementById("avgScore").innerHTML = avg.toFixed(1);
if(over > 0){
document.getElementById("overScore").innerHTML = "+" + over;
}else{
document.getElementById("overScore").innerHTML = over;
}
let msg = "";
if(total <= 72){
msg = "대단합니다! 언더 또는 이븐 플레이 수준입니다.";
}else if(total <= 90){
msg = "좋은 스코어입니다. 안정적인 라운드입니다.";
}else if(total <= 100){
msg = "보기 플레이어 수준입니다. 꾸준히 좋아지고 있습니다.";
}else{
msg = "연습하면 충분히 줄일 수 있습니다. 다음 라운드를 기대해보세요.";
}
document.getElementById("message").innerHTML = msg;
}
function resetScore(){
for(let i = 1; i <= 18; i++){
document.getElementById("hole" + i).value = "";
}
document.getElementById("totalScore").innerHTML = "0";
document.getElementById("avgScore").innerHTML = "0";
document.getElementById("overScore").innerHTML = "0";
document.getElementById("message").innerHTML =
"스코어를 입력하고 계산 버튼을 눌러보세요.";
}
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>골프 스코어 카드</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Arial,sans-serif;
background:#0f172a;
color:white;
padding:40px;
}
.wrap{
width:900px;
margin:auto;
background:#1e293b;
padding:30px;
border-radius:24px;
box-shadow:0 20px 50px rgba(0,0,0,.4);
}
h1{
text-align:center;
margin-bottom:10px;
}
.desc{
text-align:center;
color:#cbd5e1;
margin-bottom:25px;
}
.scoreGrid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
margin-bottom:25px;
}
.hole{
background:#334155;
padding:12px;
border-radius:14px;
text-align:center;
}
.hole label{
display:block;
margin-bottom:8px;
font-weight:bold;
}
.hole input{
width:100%;
padding:10px;
border:none;
border-radius:8px;
text-align:center;
font-size:16px;
}
.btnArea{
text-align:center;
margin-bottom:25px;
}
button{
padding:14px 24px;
border:none;
border-radius:12px;
background:#22c55e;
color:white;
font-size:17px;
cursor:pointer;
margin:5px;
}
button:hover{
background:#16a34a;
}
.resetBtn{
background:#ef4444;
}
.resetBtn:hover{
background:#dc2626;
}
.result{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}
.card{
background:#020617;
padding:20px;
border-radius:16px;
text-align:center;
}
.card span{
display:block;
color:#94a3b8;
margin-bottom:8px;
}
.card strong{
font-size:28px;
color:#facc15;
}
.message{
margin-top:20px;
background:#064e3b;
padding:18px;
border-radius:14px;
text-align:center;
font-size:20px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>골프 스코어 카드</h1>
<p class="desc">18홀 스코어를 입력하면 총타수, 평균, 오버/언더를 계산합니다.</p>
<div class="scoreGrid" id="scoreGrid"></div>
<div class="btnArea">
<button onclick="calculateScore()">스코어 계산</button>
<button class="resetBtn" onclick="resetScore()">초기화</button>
</div>
<div class="result">
<div class="card">
<span>총 타수</span>
<strong id="totalScore">0</strong>
</div>
<div class="card">
<span>평균 타수</span>
<strong id="avgScore">0</strong>
</div>
<div class="card">
<span>기준 파</span>
<strong>72</strong>
</div>
<div class="card">
<span>오버 / 언더</span>
<strong id="overScore">0</strong>
</div>
</div>
<div class="message" id="message">
스코어를 입력하고 계산 버튼을 눌러보세요.
</div>
</div>
<script>
let par = 72;
// 18홀 입력칸 자동 생성
function makeScoreInputs(){
let html = "";
for(let i = 1; i <= 18; i++){
html += `
<div class="hole">
<label>${i}홀</label>
<input type="number" id="hole${i}" placeholder="타수">
</div>
`;
}
document.getElementById("scoreGrid").innerHTML = html;
}
makeScoreInputs();
function calculateScore(){
let total = 0;
let count = 0;
for(let i = 1; i <= 18; i++){
let score = document.getElementById("hole" + i).value;
if(score !== ""){
total += Number(score);
count++;
}
}
if(count === 0){
alert("스코어를 입력하세요.");
return;
}
let avg = total / count;
let over = total - par;
document.getElementById("totalScore").innerHTML = total;
document.getElementById("avgScore").innerHTML = avg.toFixed(1);
if(over > 0){
document.getElementById("overScore").innerHTML = "+" + over;
}else{
document.getElementById("overScore").innerHTML = over;
}
let msg = "";
if(total <= 72){
msg = "대단합니다! 언더 또는 이븐 플레이 수준입니다.";
}else if(total <= 90){
msg = "좋은 스코어입니다. 안정적인 라운드입니다.";
}else if(total <= 100){
msg = "보기 플레이어 수준입니다. 꾸준히 좋아지고 있습니다.";
}else{
msg = "연습하면 충분히 줄일 수 있습니다. 다음 라운드를 기대해보세요.";
}
document.getElementById("message").innerHTML = msg;
}
function resetScore(){
for(let i = 1; i <= 18; i++){
document.getElementById("hole" + i).value = "";
}
document.getElementById("totalScore").innerHTML = "0";
document.getElementById("avgScore").innerHTML = "0";
document.getElementById("overScore").innerHTML = "0";
document.getElementById("message").innerHTML =
"스코어를 입력하고 계산 버튼을 눌러보세요.";
}
</script>
</body>
</html>
#골프 스코어 카드