├── index.html └── src ├── css └── style.css └── js └── index.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | HW6-DOM-part-2 9 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 |
25 | 30 |
31 |
32 | 33 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | .block { 2 | height: 100vh; 3 | } 4 | 5 | .square { 6 | height: 200px; 7 | width: 200px; 8 | transition: 1000ms; 9 | } 10 | 11 | .rectangle { 12 | height: 200px; 13 | width: 400px; 14 | transition: 1000ms; 15 | } 16 | 17 | .circle { 18 | height: 200px; 19 | width: 200px; 20 | border-radius: 50%; 21 | transition: 1000ms; 22 | } 23 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | const figure = document.getElementById('figure') 2 | const typeFigure = document.getElementById('typeFigure') 3 | const colorFigure = document.getElementById('colorFigure') 4 | function changeFigureType() { 5 | figure.classList.remove(...figure.classList); 6 | figure.classList.add(typeFigure.value); 7 | colorFigure.value = '#000000'; 8 | figure.style.background = colorFigure.value; 9 | } 10 | 11 | function changeColor() { 12 | figure.style.background = colorFigure.value; 13 | } 14 | typeFigure.addEventListener('change', changeFigureType) 15 | colorFigure.addEventListener('input', changeColor) --------------------------------------------------------------------------------