<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kanban Board</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="board">
<div class="column" id="backlog">
<h2>Backlog</h2>
<div class="add-card">
<input type="text" placeholder="Card title" id="backlog-title" />
<textarea
placeholder="Card description"
id="backlog-description"
></textarea>
<button onclick="addCard('backlog')">+</button>
</div>
<div class="cards"></div>
</div>
<div class="column" id="doing">
<h2>Doing</h2>
<div class="add-card">
<input type="text" placeholder="Card title" id="doing-title" />
<textarea
placeholder="Card description"
id="doing-description"
></textarea>
<button onclick="addCard('doing')">+</button>
</div>
<div class="cards"></div>
</div>
<div class="column" id="qa">
<h2>QA</h2>
<div class="add-card">
<input type="text" placeholder="Card title" id="qa-title" />
<textarea
placeholder="Card description"
id="qa-description"
></textarea>
<button onclick="addCard('qa')">+</button>
</div>
<div class="cards"></div>
</div>
<div class="column" id="production">
<h2>Production</h2>
<div class="add-card">
<input type="text" placeholder="Card title" id="production-title" />
<textarea
placeholder="Card description"
id="production-description"
></textarea>
<button onclick="addCard('production')">+</button>
</div>
<div class="cards"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
