sample programs

Author: Narahari-Sundaragopalan

checkboxes/checkboxes.md

@@ -0,0 +1,50 @@
+## SELECT / UNSELECT ALL CHECKBOXES
+
+```html
+<table>
+    <thead>
+        <tr>
+            <th>
+                <button id="selectAll" type="button">Select All</button>
+            </th>
+            <th>Name</th>
+            <th>Company</th>
+            <th>Location</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>
+                <input type="checkbox" name="checkbox" />
+            </td>
+            <td>Hari</td>
+            <td>Mutual of Omaha</td>
+            <td>Omaha</td>
+        </tr>
+        <tr>
+            <td>
+                <input type="checkbox" name="checkbox" />
+            </td>
+            <td>Sundaragopalan</td>
+            <td>CUB</td>
+            <td>Hyderabad</td>
+        </tr>
+    </tbody>
+</table>
+```
+
+```js
+const selectAllButton = document.getElementById("selectAll");
+
+selectAllButton.addEventListener("click", function() {
+    const checkboxes = document.querySelectorAll("input[type=checkbox]");
+    // check if button has allChecked class
+    if (selectAllButton.classList.contains("allChecked")) {
+        checkboxes.forEach(checkbox => checkbox.checked = false);
+    } else {
+        checkboxes.forEach(checkbox => checkbox.checked = true);
+    }
+
+    selectAllButton.classList.toggle("allChecked");
+})
+```

progressBar/progressBar.md

@@ -0,0 +1,47 @@
+## Progress Bar with Vanilla JS
+
+### HTML
+
+```html
+<div class="progressBarContainer">
+    <div class="progressBar" />
+</div>
+
+<button onclick="updateProgress(2)">Start</button>
+```
+
+### CSS
+
+```css
+.progressBarContainer {
+    width: 400px;
+    height: 30px;
+    margin: 40px;
+    background-color: light-grey;
+}
+
+.progressBar {
+    background-color: green;
+    height: 100%;
+    width: 0%;
+}
+```
+
+### JS
+
+```js
+const updateProgress = delayInSeconds => {
+    let atPercent = 0;
+    const progressBar = document.querySelector(".progressBar");
+
+    const interval = setInterval(() => {
+        atPercent++;
+        progressBar.style.width = `${atPercent}%`;
+        progressBar.style.innerText = `${atPercent}%`;
+
+        if (atPercent >= 100) {
+            clearInterval(interval);
+        }
+    }, (delayInSeconds * 1000) / 100);
+}
+```