Scribd
Upload
34 views5 pages

Interactive Home

The document describes a smart home control interface with controls for devices like fans, lights, thermostats and more. It includes the HTML, CSS and JavaScript code to build the UI and integrate with a smart home API.

Uploaded by

Hemen Boro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
34 views5 pages

Interactive Home

The document describes a smart home control interface with controls for devices like fans, lights, thermostats and more. It includes the HTML, CSS and JavaScript code to build the UI and integrate with a smart home API.

Uploaded by

Hemen Boro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart Home Control Center</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>Smart Home Control</h1>
</header>
<main class="main">
<div class="device-card">
<img src="images/fan.svg" alt="Fan" class="device-icon">
<h2>Fan</h2>
<div class="slider-container">
<input type="range" min="0" max="100" value="50" class="device-
slider" id="fan-slider" data-device="fan">
<span class="slider-value">50%</span>
</div>
</div>
<div class="device-card">
<img src="images/bulb.svg" alt="Bulb" class="device-icon">
<h2>Bulb</h2>
<div class="switch-container">
<label class="switch">
<input type="checkbox" id="bulb-switch" data-device="bulb">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="device-card">
<img src="images/led-strip.svg" alt="LED Strip" class="device-
icon">
<h2>LED Strip</h2>
<div class="color-picker-container">
<input type="color" id="led-color-picker" data-
device="led_strip">
<button class="led-power-button"
id="led-power-button">Off</button>
</div>
</div>
<div class="device-card">
<img src="images/ac.svg" alt="AC" class="device-icon">
<h2>AC</h2>
<div class="ac-controls">
<button class="ac-button" id="ac-power-button">Off</button>
<div class="ac-temperature-control">
<button class="ac-button" id="ac-temp-up">+</button>
<span id="ac-temp-display">24°C</span>
<button class="ac-button" id="ac-temp-down">-</button>
</div>
</div>
</div>
</main>
<footer class="footer">
<p>&copy; 2024 Smart Home Solutions</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>

CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart Home Control Center</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>Smart Home Control</h1>
</header>
<main class="main">
<div class="device-card">
<img src="images/fan.svg" alt="Fan" class="device-icon">
<h2>Fan</h2>
<div class="slider-container">
<input type="range" min="0" max="100" value="50" class="device-
slider" id="fan-slider" data-device="fan">
<span class="slider-value">50%</span>
</div>
</div>
<div class="device-card">
<img src="images/bulb.svg" alt="Bulb" class="device-icon">
<h2>Bulb</h2>
<div class="switch-container">
<label class="switch">
<input type="checkbox" id="bulb-switch" data-device="bulb">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="device-card">
<img src="images/led-strip.svg" alt="LED Strip" class="device-
icon">
<h2>LED Strip</h2>
<div class="color-picker-container">
<input type="color" id="led-color-picker" data-
device="led_strip">
<button class="led-power-button"
id="led-power-button">Off</button>
</div>
</div>
<div class="device-card">
<img src="images/ac.svg" alt="AC" class="device-icon">
<h2>AC</h2>
<div class="ac-controls">
<button class="ac-button" id="ac-power-button">Off</button>
<div class="ac-temperature-control">
<button class="ac-button" id="ac-temp-up">+</button>
<span id="ac-temp-display">24°C</span>
<button class="ac-button" id="ac-temp-down">-</button>
</div>
</div>
</div>
</main>
<footer class="footer">
<p>&copy; 2024 Smart Home Solutions</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>

JS:

const API_URL = 'https://kodessphere-api.vercel.app'; // Assuming the provided API


URL remains the same

// Gather UI elements
const sliders = document.querySelectorAll('.device-slider');
const ledSwitch = document.querySelector('.switch input[data-device="led_strip"]');
// Assuming LED switch
const colorPicker = document.getElementById('led-color-picker');
const ledPowerButton = document.getElementById('led-power-button');
const acPowerButton = document.getElementById('ac-power-button');
const acTempUpButton = document.getElementById('ac-temp-up');
const acTempDownButton = document.getElementById('ac-temp-down');
const acTempDisplay = document.getElementById('ac-temp-display');

function sendAPIRequest(endpoint, method, data = null) {


return fetch(`<span class="math-inline">\{API\_URL\}/</span>{endpoint}`, {
method,
headers: {
'Content-Type': 'application/json', // Adjust if necessary based on API
requirements
// Add authorization headers if required by the API
},
body: data ? JSON.stringify(data) : null,
})
.then(response => response.json())
.catch(error => console.error('API Error:', error));
}

function updateSliderValue(slider, value) {


slider.value = value;
const sliderValueElement = slider.nextElementSibling;
sliderValueElement.textContent = `${value}%`;
}
function updateACDisplay(temperature) {
acTempDisplay.textContent = `${temperature}°C`;
}

// Handle slider changes


sliders.forEach(slider => {
slider.addEventListener('input', async () => {
const device = slider.dataset.device;
const value = slider.value;
const data = { value }; // Assuming the API expects a "value" property

const response = await sendAPIRequest(`devices/${device}`, 'PUT', data);


if (response.success) {
updateSliderValue(slider, value);
} else {
console.error('API Error:', response.error);
// Implement error handling UI (e.g., toast notification)
}
});
});

// Handle LED switch


ledSwitch.addEventListener('change', async () => {
const device = 'led_strip'; // Assuming 'led_strip' is the correct device name
const state = ledSwitch.checked ? 'on' : 'off';
const data = { state }; // Assuming the API expects a "state" property

const response = await sendAPIRequest(`devices/${device}`, 'PUT', data);


if (response.success) {
// Update UI based on switch state (e.g., change LED icon)
} else {
console.error('API Error:', response.error);
// Implement error handling UI
}
});

// Handle LED color picker


colorPicker.addEventListener('change', async () => {
const device = 'led_strip'; // Assuming 'led_strip' is the correct device name
const color = colorPicker.value;
const data = { color }; // Assuming the API expects a "color" property

const response = await sendAPIRequest(`devices/${device}`, 'PUT', data);


if (response.success) {
// Update LED strip preview color (optional)
} else {
console.error('API Error:', response.error);
// Implement error handling UI
}
});

// Handle LED power button


ledPowerButton.addEventListener('click', async () => {
const device = 'led_strip'; // Assuming 'led_strip' is the correct device name
const state = ledPowerButton.textContent === 'Off' ? 'on' : 'off';
const data = { state }; // Assuming the API expects a "state" property

try {
const response = await sendAPIRequest(`devices/${device}`, 'PUT', data);
if (response.success) {
ledPowerButton.textContent = state === 'on' ? 'Off' : 'On'; // Update button
text
// Optionally update other UI elements (e.g., LED icon)
console.log('LED state updated successfully!');
} else {
console.error('API Error:', response.error);
// Implement error handling UI (e.g., toast notification)
}
} catch (error) {
console

You might also like