-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
34 lines (30 loc) · 1.61 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// Import the `createResponsiveAttributesFile` function from the `responsiveAttributes.js` file.
import { createResponsiveAttributesFile } from "./responsiveAttributes.js"
// Import the `closeOtherDetails` function to manage the behavior of details elements
import { closeOtherDetails } from "./helpers/closeOtherDetails.js"
// Import the `getClickedRow` function from the "getClickedRow.js" file
import { getClickedRow } from "./helpers/getClickedRow.js"
// Add an event listener to the document that will trigger when the DOM content is fully loaded.
document.addEventListener("DOMContentLoaded", () => {
// Close other <details> tags
closeOtherDetails()
// Select all labels within the grid
const labels = document.querySelectorAll("#grid label")
labels.forEach((label) => {
// Select the label's input element
const radio = label.previousElementSibling
// Check if the radio is checked and display instructions
if (radio.checked) getClickedRow(label)
// Attach input event listener to the radio
radio.addEventListener("input", () => {
getClickedRow(label) // Call the getClickedRow function when an input is checked
})
// Always display instructions below the label even if the device orientation changes
window.addEventListener("resize", () => {
if (radio.checked) getClickedRow(label)
})
})
// Call the `createResponsiveAttributesFile` function, passing in the CSS selector '[data-btn="generate-responsive-attributes"]' as an argument.
// This function creates a file containing responsive attributes for use in styling.
createResponsiveAttributesFile('[data-btn="generate-responsive-attributes"]')
})