divyap/thob-capability-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement UI-3D state consistency switcher for week 3 task 3 in vanilla

Browse Source
This commit is contained in:
divyap 2026-04-12 12:29:26 +05:30
parent b5e07716cc
commit b787546d6c
3 changed files with 49 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Week-3/Task-3/vanilla/index.html
View File

@ -11,6 +11,7 @@
<button data-variant="black" class="active">Black</button> <button data-variant="black" class="active">Black</button>
<button data-variant="silver">Silver</button> <button data-variant="silver">Silver</button>
<button data-variant="gold">Gold</button> <button data-variant="gold">Gold</button>
<button data-variant="emerald">Emerald</button>
</div> </div>
<script type="module" src="./main.js"></script> <script type="module" src="./main.js"></script>

6
Week-3/Task-3/vanilla/main.js
View File

@ -20,6 +20,7 @@ const geometries = {
black: new THREE.BoxGeometry(2, 2, 2), black: new THREE.BoxGeometry(2, 2, 2),
silver: new THREE.SphereGeometry(1.5, 32, 32), silver: new THREE.SphereGeometry(1.5, 32, 32),
gold: new THREE.TorusGeometry(1.2, 0.4, 16, 100), gold: new THREE.TorusGeometry(1.2, 0.4, 16, 100),
emerald: new THREE.CylinderGeometry(1.2, 0.4, 2.5, 100),
}; };
const materials = { const materials = {
@ -38,6 +39,11 @@ const materials = {
roughness: 0.4, roughness: 0.4,
metalness: 1, metalness: 1,
}), }),
emerald: new THREE.MeshStandardMaterial({
color: "#009B77",
roughness: 0.4,
metalness: 1,
}),
}; };
let currentVariant = "black"; let currentVariant = "black";

42
Week-3/Task-3/vanilla/style.css Normal file
View File

@ -0,0 +1,42 @@
body {
margin: 0;
overflow: hidden;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
#controls {
position: absolute;
top: 20px;
left: 20px;
display: flex;
gap: 12px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 16px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
}
button {
padding: 10px 18px;
border: none;
border-radius: 8px;
background: white;
color: #333;
cursor: pointer;
font-weight: 500;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
button.active {
background: #333;
color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}