PROBA – KOZMETIKA

body {
font-family: Arial, sans-serif;
text-align: center;
background: #f0f0f0;
}
canvas {
border: 2px solid #333;
margin-top: 20px;
}
.controls {
margin-top: 15px;
}
.color-group {
margin: 10px 0;
}

Interaktivna Promena Boje Nameštaja i Zida

const canvas = document.getElementById(‘roomCanvas’);
const ctx = canvas.getContext(‘2d’);

// Pocetne boje
let colors = {
wall: ‘#dcdcdc’,
tvStand: ‘#8b4513’,
table: ‘#a0522d’,
shelf: ‘#deb887’,
};

function drawScene() {
// Zid
ctx.fillStyle = colors.wall;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// TV komoda
ctx.fillStyle = colors.tvStand;
ctx.fillRect(150, 250, 200, 80);

// TV ekran
ctx.fillStyle=”#000”;
ctx.fillRect(170, 180, 160, 60);

// Stočić
ctx.fillStyle = colors.table;
ctx.fillRect(400, 280, 120, 40);

// Stalaža
ctx.fillStyle = colors.shelf;
ctx.fillRect(580, 160, 40, 160);
}

// Update boja
document.getElementById(‘wallColor’).addEventListener(‘input’, (e) => {
colors.wall = e.target.value;
drawScene();
});
document.getElementById(‘tvStandColor’).addEventListener(‘input’, (e) => {
colors.tvStand = e.target.value;
drawScene();
});
document.getElementById(‘tableColor’).addEventListener(‘input’, (e) => {
colors.table = e.target.value;
drawScene();
});
document.getElementById(‘shelfColor’).addEventListener(‘input’, (e) => {
colors.shelf = e.target.value;
drawScene();
});

// Prvi crtež
drawScene();

Source link