A bit new to HTML, trying to create a dashboard. The state (ON, OFF, OPEN, or CLOSED) of a room or door should be indicated using an icon.
Have an open/close door image & lightbulbs Need help adding element to all the existing βliβ elements.
Tried watching tutorials but they were too confusing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"> </script>
<script src="dashboard.js"> </script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<li class="dashboard_item kitchen">
<h4>Kitchen</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item frontdoor">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item balconydoor">
<h4>Balcony Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item livingroom">
<h4>Livingroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bedroom">
<h4>Bedroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bathroom">
<h4>Bathroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item studyroom">
<h4>Studyroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item hall">
<h4>Hall</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
</ul>
</body>
</html>
2
Answers
you either use onclick event to trigger a function when the tag is clicked
or add an Event listener to the tag, this is how you can solve the problem in two ways, here.
it’s better here to use variables as a state to manage the current state of each item you have instead of relying on the text
checkout these resources:
https://www.w3schools.com/jsref/event_onclick.asp
https://www.w3schools.com/js/js_htmldom_eventlistener.asp