අපගේ Counter App එකට අවශ්‍ය මූලික HTML ව්‍යුහය සහ එයට Bootstrap මගින් පෙනුමක් ලබාදීම.
මෙම ව්‍යාපෘතිය ආරම්භ කිරීමට ඔබට විශේෂ මෘදුකාංග අවශ්‍ය නැත. අවශ්‍ය වන්නේ:
ඔබේ පරිගණකයේ counter-project වැනි නමකින් අලුත් ෆෝල්ඩරයක් සාදාගන්න. අපගේ සියලුම ගොනු (files) තැන්පත් කරන්නේ එම ෆෝල්ඩරය තුලය. අවසානයේදී, අපගේ ෆෝල්ඩර් ව්‍යුහය මෙසේ දිස්වනු ඇත:
counter-project/
├── counter.html
└── app.js
counter.html: මෙය අපගේ වෙබ් පිටුවේ පෙනුම සහ ව්‍යුහය අඩංගු ප්‍රධාන HTML ගොනුවයි.app.js: Counter එකේ ක්‍රියාකාරීත්වය (logic), එනම් අගය වැඩි කිරීම, අඩු කිරීම වැනි දේ සිදුවන JavaScript කේතය මෙහි අඩංගු වේ.අප අවසානයේදී නිර්මාණය කරන Counter App එක මෙසේ දිස්වනු ඇත. මෙය තවමත් JavaScript ක්‍රියාකාරීත්වය රහිත HTML පෙනුම පමණි.
ඉහතින් ඔබ දකින්නේ, අප පහත HTML කේතය භාවිතයෙන් සාදන Counter App එකේ මූලික පෙනුමයි. තවමත් බොත්තම් ක්‍රියා නොකරයි. ඊළඟ පාඩම් වලදී JavaScript භාවිතයෙන් එයට ජීවය ලබා දෙමු.
පහත HTML කේතය counter.html නමින් ඉහත සෑදූ ෆෝල්ඩරය තුල save කරගන්න. මෙය අපගේ සම්පූර්ණ ව්‍යාපෘතියේ ප්‍රධාන ගොනුව වනු ඇත.
මෙහිදී, JavaScript මගින් පහසුවෙන් හඳුනාගැනීම සඳහා එක් එක් වැදගත් element එකට id එකක් ලබා දී ඇත.
<!doctype html>
<html lang="si">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS Counter App</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card text-center">
<div class="card-header">JavaScript Counter App</div>
<div class="card-body">
<!-- අගය පෙන්වන ස්ථානය (id="count-display") -->
<h1 class="display-1" id="count-display">0</h1>
</div>
<div class="card-footer">
<!-- බොත්තම් (id's: increment-btn, reset-btn, decrement-btn) -->
<button class="btn btn-success me-2" id="increment-btn">Plus (+)</button>
<button class="btn btn-warning me-2" id="reset-btn">Reset</button>
<button class="btn btn-danger" id="decrement-btn">Minus (-)</button>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript ගොනුව මෙතනට සම්බන්ධ කරමු -->
<script src="app.js"></script>
</body>
</html>
සැලකිය යුතුයි: <body> tag එක අවසානයේ <script src="app.js"></script> ලෙස කේතයක් එක් කර ඇත. අපගේ සියලුම JavaScript කේත ලියන්නේ ඊළඟ පාඩමේදී සාදන app.js නම් ගොනුවකය.