Inspiration
Our main inspiration came from the desire to make environmental data and monitoring accessible and engaging using simple web technologies. We wanted to move beyond static displays and create a dashboard that felt responsive and alive. Specifically, we were inspired by real-world smart garden and agriculture IoT (Internet of Things) dashboards that provide growers with instant feedback on critical metrics like soil moisture and light intensity, helping them ensure plant vitality.
What it does
The Virtual Garden Health Monitor simulates a simple dashboard that displays the current "health" status of a virtual garden.
Displays Key Metrics: It shows simulated values for Soil Moisture (in %), Sunlight Intensity (in Lux), and Air Temperature (in °C).
Provides Real-time Status: Based on the simulated metric values, the JavaScript logic instantly assigns a visual status (Optimal, Low, High, or Critical) to each parameter.
Updates Dynamically: A dedicated "Simulate Data Update" button triggers the JavaScript to generate new random values and update the entire dashboard, demonstrating dynamic DOM manipulation and interactivity.
Visual Feedback: It uses CSS classes to apply color-coded styling (green for optimal, orange/red for warning/critical) to the status indicators, allowing for quick, at-a-glance assessment of the garden's health.
How we built it
We used the fundamental stack of web development:
HTML (index.html): Used for the structure and semantics. We created containers (
) and elements (,) that serve as placeholders for the dynamic data.
CSS (style.css): Used for presentation and design. We applied a green-centric color palette to reflect the project's theme. Crucially, we defined specific classes (.good, .low, .critical) that the JavaScript could toggle to change the visual status.
JavaScript (script.js): Used for the interactivity and logic.
We used the document.getElementById() method (DOM API) to select all the elements we needed to manipulate.
We defined a generateRandomInt() helper function to simulate realistic, changing data.
We attached an Event Listener (addEventListener('click', ... )) to the update button.
Inside the click handler, we used conditional logic (if/else if) to determine the health status, and then used element.textContent to update the numbers and element.classList.add() to apply the appropriate color-coded CSS status class
Log in or sign up for Devpost to join the conversation.