diff --git a/Week-2/Task-4/vanilla/index.html b/Week-2/Task-4/vanilla/index.html
index c3e2db2..9f0b5a6 100644
--- a/Week-2/Task-4/vanilla/index.html
+++ b/Week-2/Task-4/vanilla/index.html
@@ -1,11 +1,14 @@
-
-
- Task 4 - Click To Highlight / Select Visual State
+
+ Task 4 — Click To Highlight / Select
+
-
+ Interaction Pattern- click on the object
+
\ No newline at end of file
diff --git a/Week-2/Task-4/vanilla/main.js b/Week-2/Task-4/vanilla/main.js
index e69de29..30c4b97 100644
--- a/Week-2/Task-4/vanilla/main.js
+++ b/Week-2/Task-4/vanilla/main.js
@@ -0,0 +1,70 @@
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color("white");
+
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.z = 5;
+
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const geometry = new THREE.TorusKnotGeometry(1, 0.4, 100, 16);
+const material = new THREE.MeshStandardMaterial({ color: "#ccc", roughness: 0.5 });
+const mesh = new THREE.Mesh(geometry, material);
+scene.add(mesh);
+
+scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+const pointLight = new THREE.PointLight(0xffffff, 1);
+pointLight.position.set(5, 5, 5);
+scene.add(pointLight);
+
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+
+const raycaster = new THREE.Raycaster();
+const mouse = new THREE.Vector2();
+let isSelected = false;
+
+window.addEventListener("click", (event) => {
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+ raycaster.setFromCamera(mouse, camera);
+ const intersects = raycaster.intersectObject(mesh);
+
+ if (intersects.length > 0) {
+ isSelected = !isSelected;
+ updateAppearance();
+ }
+});
+
+function updateAppearance() {
+ if (isSelected) {
+ mesh.scale.set(1.2, 1.2, 1.2);
+ mesh.material.color.set("#3498db");
+ mesh.material.emissive.set("#1e3799");
+ mesh.material.emissiveIntensity = 0.5;
+ } else {
+ mesh.scale.set(1, 1, 1);
+ mesh.material.color.set("#ccc");
+ mesh.material.emissive.set("#000");
+ mesh.material.emissiveIntensity = 0;
+ }
+}
+
+function animate() {
+ requestAnimationFrame(animate);
+ controls.update();
+ mesh.rotation.y += 0.01;
+ renderer.render(scene, camera);
+}
+animate();
+
+window.addEventListener("resize", () => {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+});