Antara Muka Jam Penggera

?? Menjelaskan Kelas dan ID untuk Pemula

Apabila memperkenalkan kelas dan ID dalam HTML dan CSS, adalah berguna untuk memecahkan tujuan, perbezaan dan kes penggunaan praktikalnya. Berikut ialah penjelasan langkah demi langkah berdasarkan kod untuk Antara Muka Jam Penggera.

---

? Apakah Kelas dan ID?

1. Kelas dan ID ialah atribut yang anda gunakan untuk menamakan dan mengenal pasti elemen dalam HTML.
2. Ia membantu anda menggunakan gaya atau fungsi tertentu pada elemen menggunakan CSS atau JavaScript.

---

1️⃣ Kelas (kelas)

• Tujuan: Digunakan untuk menggayakan berbilang elemen yang berkongsi gaya atau gelagat yang sama.
• Sintaks dalam HTML:>
• Sintaks dalam CSS: .name-of-class { property: value; }
• Contoh daripada Kod:

  <div>



<p><strong>Explanation</strong>:</p>

<ul>
<li>The container class wraps the whole interface.</li>
<li>The set-alarm class applies styling to the section where users set alarms.</li>
<li>The set-button class styles the "Set Alarm" button.</li>
</ul>

<h4>
  
  
  ? <strong>Why Use Classes?</strong>
</h4>

<ul>
<li>You can reuse the same class for multiple elements.</li>
<li>Makes your code more organized and efficient.</li>
</ul>

<h4>
  
  
  ? <strong>Example of Reusability</strong>:
</h4>

<p>If you want to style multiple buttons similarly, you can give them the same class:<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>And style them with:<br>
</p>

<pre class="brush:php;toolbar:false">.set-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
}

---

2️⃣ ID (id)

• Tujuan: Digunakan untuk mengenal pasti satu elemen secara unik.
• Sintaks dalam HTML:>
• Sintaks dalam CSS: #unique-name { property: value; }
• Contoh daripada Kod:

  <input type="time">



<p><strong>Explanation</strong>:</p>

• The>
• IDs should not be reused within the same HTML document.

? Why Use IDs?

• IDs are for elements that need unique identification, such as form fields or sections you want to target specifically.
• Useful for JavaScript interactions.

---

? Key Differences Between Classes and IDs

Feature	Class	ID
Usage	For multiple elements	For a single element
Syntax	class="example"	id="example"
CSS Selector	.example	#example
Reusability	Can be reused	Should be unique

---

?️ Practical Analogy

Imagine a classroom:

• Class: Like giving students the same uniform color. Anyone wearing the same uniform belongs to that class group.
• ID: Like giving each student a unique student ID card.

In code, classes are like uniforms for elements with similar styles, while IDs are unique identifiers for specific elements.

---

? Interactive Exercise

Ask beginners to:

1. Add a New Button: In the HTML, add another button for canceling the alarm.

   <button>



<ol>
<li>
<strong>Style the Buttons Differently</strong>: Update the CSS to give each button a unique background color by using both classes and IDs.
</li>
</ol>

<pre class="brush:php;toolbar:false">   .set-button {
     padding: 10px 20px;
     color: white;
     border: none;
     border-radius: 5px;
   }

   #set-alarm {
     background-color: green;
   }

   #cancel-alarm {
     background-color: red;
   }

Latihan ini membantu mengukuhkan konsep penggunaan kelas untuk penggayaan umum dan ID untuk kes unik.