자바스크립트
자바스크립트 간단한 웹 애플리케이션 만들기 - Todo 리스트,날씨 정보 표시, 숫자 맞추기 게임, 카드 뒤집기 게임
16. 실전 프로젝트 간단한 웹 애플리케이션
이번 장에서는 자바스크립트를 활용하여 실제로 동작하는 간단한 웹 애플리케이션을 만들어보겠습니다.
- 자바스크립트를 활용한 Todo 리스트 만들기
- 날씨 API를 활용한 날씨 정보 표시 웹사이트
- 간단한 게임 (숫자 맞추기 게임, 카드 뒤집기 게임)
이 실전 프로젝트들을 통해 자바스크립트의 기초부터 API 활용, 게임 개발까지 다양한 기술을 적용해 볼 수 있습니다.
16.1 자바스크립트를 활용한 Todo 리스트 만들기
16.1.1 HTML 구조
할 일을 입력하고 목록을 관리할 수 있는 간단한 Todo 리스트 웹 애플리케이션을 만듭니다.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<style>
body { font-family: Arial, sans-serif; }
#todo-list { list-style-type: none; padding: 0; }
#todo-list li { margin: 5px 0; }
.delete-btn { margin-left: 10px; color: red; cursor: pointer; }
</style>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="todo-input" placeholder="Enter a new task" />
<button id="add-todo">Add</button>
<ul id="todo-list"></ul>
<script src="app.js"></script>
</body>
</html>
16.1.2 자바스크립트 코드
javascriptdocument.getElementById('add-todo').addEventListener('click', function () {
const input = document.getElementById('todo-input');
const todoText = input.value;
if (todoText === '') {
alert('Please enter a task!');
return;
}
const list = document.getElementById('todo-list');
const listItem = document.createElement('li');
listItem.textContent = todoText;
const deleteBtn = document.createElement('span');
deleteBtn.textContent = ' [Delete]';
deleteBtn.classList.add('delete-btn');
deleteBtn.addEventListener('click', function () {
list.removeChild(listItem);
});
listItem.appendChild(deleteBtn);
list.appendChild(listItem);
input.value = ''; // 입력 필드 초기화
});
16.1.3 기능 설명
- 사용자가 할 일을 입력하고 "Add" 버튼을 클릭하면 할 일이 목록에 추가됩니다.
- 각 할 일 항목에는 "Delete" 버튼이 있으며, 이를 클릭하면 해당 항목이 삭제됩니다.
16.2 날씨 API를 활용한 날씨 정보 표시 웹사이트
16.2.1 HTML 구조
날씨 API에서 데이터를 받아와 사용자에게 현재 날씨 정보를 보여주는 간단한 웹사이트를 만듭니다.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<style>
body { font-family: Arial, sans-serif; }
#weather-info { margin-top: 20px; }
</style>
</head>
<body>
<h1>Weather App</h1>
<input type="text" id="city-input" placeholder="Enter city name" />
<button id="get-weather">Get Weather</button>
<div id="weather-info"></div>
<script src="app.js"></script>
</body>
</html>
16.2.2 자바스크립트 코드
OpenWeather API를 활용하여 날씨 정보를 표시하는 자바스크립트 코드입니다.
javascriptdocument.getElementById('get-weather').addEventListener('click', function () {
const city = document.getElementById('city-input').value;
const apiKey = 'YOUR_API_KEY'; // OpenWeather API에서 발급받은 키
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const weatherInfo = `
<h2>${data.name}, ${data.sys.country}</h2>
<p>Temperature: ${data.main.temp}°C</p>
<p>Weather: ${data.weather[0].description}</p>
<p>Humidity: ${data.main.humidity}%</p>
`;
document.getElementById('weather-info').innerHTML = weatherInfo;
})
.catch(error => {
document.getElementById('weather-info').textContent = 'Error fetching weather data.';
});
});
16.2.3 기능 설명
- 사용자가 도시 이름을 입력하고 "Get Weather" 버튼을 클릭하면, OpenWeather API에서 해당 도시의 날씨 정보를 가져옵니다.
- 날씨 정보는 도시 이름, 기온, 날씨 설명, 습도 등으로 화면에 표시됩니다.
16.2.4 API 키 설정
API 호출을 위해 OpenWeather에서 발급받은 API 키를 사용해야 합니다. OpenWeather API에서 회원가입 후 무료로 API 키를 받을 수 있습니다.
16.3 간단한 게임 (숫자 맞추기 게임, 카드 뒤집기 게임)
16.3.1 숫자 맞추기 게임
16.3.1.1 HTML 구조
사용자가 숫자를 맞추는 간단한 게임입니다.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Guessing Game</title>
</head>
<body>
<h1>Number Guessing Game</h1>
<p>Guess a number between 1 and 100</p>
<input type="number" id="guess-input" placeholder="Enter your guess" />
<button id="submit-guess">Submit Guess</button>
<p id="feedback"></p>
<script src="app.js"></script>
</body>
</html>
16.3.1.2 자바스크립트 코드
javascriptconst randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
document.getElementById('submit-guess').addEventListener('click', function () {
const userGuess = Number(document.getElementById('guess-input').value);
attempts++;
if (userGuess === randomNumber) {
document.getElementById('feedback').textContent = `Correct! You guessed the number in ${attempts} attempts.`;
} else if (userGuess > randomNumber) {
document.getElementById('feedback').textContent = 'Too high! Try again.';
} else {
document.getElementById('feedback').textContent = 'Too low! Try again.';
}
});
16.3.1.3 기능 설명
- 1부터 100까지의 숫자를 무작위로 생성하고, 사용자가 이 숫자를 맞추는 게임입니다.
- 사용자가 숫자를 입력하고 제출할 때마다, 정답과 비교하여 "Too high" 또는 "Too low" 메시지를 제공합니다.
- 사용자가 맞췄을 경우 시도 횟수를 알려줍니다.
16.3.2 카드 뒤집기 게임
16.3.2.1 HTML 구조
같은 카드끼리 짝을 맞추는 간단한 메모리 게임입니다.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Matching Game</title>
<style>
#game-board { display: grid; grid-template-columns: repeat(4, 100px); gap: 10px; }
.card { width: 100px; height: 100px; background-color: lightblue; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; }
.matched { background-color: lightgreen; pointer-events: none; }
</style>
</head>
<body>
<h1>Card Matching Game</h1>
<div id="game-board"></div>
<script src="app.js"></script>
</body>
</html>
16.3.2.2 자바스크립트 코드
javascriptconst cards = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D'];
let flippedCards = [];
let matchedPairs = 0;
// 카드 섞기
cards.sort(() => 0.5 - Math.random());
const gameBoard = document.getElementById('game-board');
cards.forEach(card => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.textContent = '?';
cardElement.dataset.value = card;
cardElement.addEventListener('click', flipCard);
gameBoard.appendChild(cardElement);
});
function flipCard() {
if (flippedCards.length === 2) return;
this.textContent = this.dataset.value;
flippedCards.push(this);
if (flippedCards.length === 2) {
if (flippedCards[0].dataset.value === flippedCards[1].dataset.value) {
flippedCards.forEach(card => card.classList.add('matched'));
matchedPairs++;
if (matchedPairs === cards.length / 2) {
alert('You matched all pairs!');
}
} else {
setTimeout(() => {
flippedCards.forEach(card => card.textContent = '?');
}, 1000);
}
flippedCards = [];
}
}
16.3.2.3 기능 설명
- 카드 뒤집기 게임은 같은 문자가 적힌 카드를 찾아 짝을 맞추는 게임입니다.
- 카드가 짝을 이루면 녹색으로 변하며 고정됩니다.
- 모든 카드의 짝을 맞추면 게임이 끝납니다.
이 장에서는 자바스크립트를 활용한 Todo 리스트, 날씨 정보 웹사이트, 숫자 맞추기 게임, 그리고 카드 뒤집기 게임을 구현해 보았습니다. 이러한 실전 프로젝트를 통해 자바스크립트의 다양한 기능을 실제 프로젝트에 적용할 수 있는 경험을 쌓을 수 있습니다. 프로젝트를 확장하거나 개선하는 과정에서 자바스크립트의 더 깊은 부분을 학습하고 응용할 수 있습니다.
댓글 쓰기
0 댓글