Mashruucan wuxuu diiradda saaraya sidii aad u abuuri lahayd website fudud adigoo adeegsanaya HTML, CSS, iyo JavaScript. Waxaa loo dhisay si aad ugu tababarto fikradaha asaasiga ah iyo isticmaalka saddexda luuqadood ee loo adeegsado web horumarinta. Waxaan ku samayn doonaa mashruuc fudud oo ah 'To-Do List' oo kuu ogolaanaya inaad diiwaan geliso waxyaabaha aad rabto inaad qabato, ku darto liiska, tirtirto marka la dhammeeyo, iyo in waxyaabahaas dib loo habeeyo.
1. HTML (Qaabka aasaasiga ah)
HTML waa luuqadda loo isticmaalo in lagu dhiso qaabka guud ee website-ka. Waxaa ku jira tags kuwaas oo kala saara qaybo kala duwan sida headings, buttons, iyo lists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>My To-Do List</h1>
<input type="text" id="todo-input" placeholder="Add a new task">
<button id="add-btn">Add Task</button>
<ul id="todo-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
Qaybta kore waxay abuureysaa qaabka aasaasiga ah ee bogga oo leh input, button, iyo ul liis furan oo aan wali la buuxin.
2. CSS (Qaabeynta)
CSS waxay kuu ogolaaneysaa inaad qurxiso qaabka website-kaaga. Mashruucan, waxaan isticmaaleynaa waxyaabo fudud sida midabada, baakad, iyo qaab dhismeedka.
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
input {
padding: 10px;
width: 80%;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f8f9fa;
padding: 10px;
margin-top: 5px;
border-radius: 5px;
display: flex;
justify-content: space-between;
}
CSS-da kore waxay qurxinaysaa qaabka guud iyo walxaha kala duwan sida buttons, input, iyo liisaska.
3. JavaScript (Shaqada Bogga)
JavaScript wuxuu kuu ogolaanayaa inaad ku darto hawlo. Waxaan isticmaaleynaa si aan u abuurno shaqooyin sida ku darida liis cusub iyo tirtirida kuwa la dhammeeyay.
// script.js
document.getElementById('add-btn').addEventListener('click', function() {
const task = document.getElementById('todo-input').value;
if (task) {
addTask(task);
document.getElementById('todo-input').value = '';
}
});
function addTask(task) {
const listItem = document.createElement('li');
listItem.textContent = task;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.style.backgroundColor = '#dc3545';
deleteBtn.style.color = 'white';
deleteBtn.style.border = 'none';
deleteBtn.style.borderRadius = '5px';
deleteBtn.style.padding = '5px 10px';
deleteBtn.style.cursor = 'pointer';
deleteBtn.addEventListener('click', function() {
listItem.remove();
});
listItem.appendChild(deleteBtn);
document.getElementById('todo-list').appendChild(listItem);
}
JavaScript-ka wuxuu sameynayaa ku darida shaqada cusub liiska iyo tir tiriida marka la dhameeyo. Shaqo kasta waxay yeelanaysaa button 'Delete' oo lagu tirtiro karo shaqada liiska ku jirta.
Gunaanad
Mashruucan wuxuu ku siinayaa fursad wanaagsan oo aad ku tababaran karto isticmaalka HTML, CSS, iyo JavaScript. Waxaad fahmi doontaa sida saddexda luuqadood ay isugu shaqeeyaan si wadajir ah. Mashruucan waa mid fudud laakiin wuxuu kaa caawin karaa inaad bilowdo inaad dhisto mashruucyo ka adag mustaqbalka.