diff --git a/js-core/classworks/classwork-17/index.html b/js-core/classworks/classwork-17/index.html
new file mode 100644
index 0000000..00652ba
--- /dev/null
+++ b/js-core/classworks/classwork-17/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Class work 17</title>
+    <style>
+        .circle{
+            border-radius: 50%;
+        }
+    </style>
+</head>
+
+<body>
+    
+    <div id="next"
+       style="width:300px; height:300px; background: yellow; transition: .5s ease 0s">   
+    </div>   
+        
+    <script src="src/main.js"></script>
+
+</body>
+
+</html>
diff --git a/js-core/classworks/classwork-17/src/main.js b/js-core/classworks/classwork-17/src/main.js
new file mode 100644
index 0000000..ced4ad4
--- /dev/null
+++ b/js-core/classworks/classwork-17/src/main.js
@@ -0,0 +1,21 @@
+const next = document.getElementById('next');
+
+const colors = ['yellow', 'green', 'red']
+
+let conterBgc = 0;
+let polzi = 0;
+
+const traffickLight = setInterval(() => {
+    next.style.backgroundColor = colors[conterBgc];
+    conterBgc += 1;
+    if(conterBgc === colors.length) {
+        conterBgc = 0;
+    }
+    
+    next.style.marginLeft = `${polzi}px`;
+    polzi += 10
+}, 100);
+
+setInterval(() => {
+    next.classList.toggle('circle');
+}, 5000);
\ No newline at end of file
