MontessoriVisualization · MontessoriVisualization · Apr 24, 2026 · Mar 31, 2026 · Apr 1, 2026 · Apr 2, 2026
diff --git a/Students/Nishan/DOM.html b/Students/Nishan/DOM.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .fullpage {
+            height: 100vh; /* full viewport height */
+            display: flex;
+            justify-content: center; /* horizontal centering */
+            align-items: center;     /* vertical centering */
+        }
+        button {
+            padding: 15px 30px;
+            font-size: 18px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body class="fullpage">
+    <button>Click me</button>
+</body>
+<script>
+    const button = document.querySelector('button');
+    button.addEventListener('click', () => {
+        alert('Button clicked!');
+        document.body.style.backgroundColor = 'lightblue'; // Change background color on click
+    });
+
+
+</script>
+</html>
diff --git a/Students/Nishan/bag.jpg b/Students/Nishan/bag.jpg
diff --git a/Students/Nishan/dom2.html b/Students/Nishan/dom2.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <button class="btn">Change Background</button>
+</body>
+<script>
+    const colors = ["red","green","blue","yellow","orange"];
+    const btn = document.querySelector(".btn");
+btn.addEventListener("click",()=>{
+    const random = Math.floor(Math.random()*colors.length);//range 0- 4 
+    console.log(random)
+    document.body.style.backgroundColor = colors[random];
+
+
+})
+</script>
+</html>
diff --git a/Students/Nishan/for each.js b/Students/Nishan/for each.js
@@ -0,0 +1,11 @@
+//foreach loop is used to iterate over the array and perform a function on each element of the array
+const MarbalHeros=["Iron Man","Captain America","Thor","Hulk","Black Widow","Hawkeye"];
+MarbalHeros.forEach(function(hero){
+    console.log(hero);
+})
+
+//foreach loop is used to iterate over the array and perform a function on each element of the array
+const numbers=[1,2,3,4,5];
+numbers.forEach(function(number){
+    console.log(number*2);
+})
diff --git a/Students/Nishan/forin & forof.js b/Students/Nishan/forin & forof.js
@@ -0,0 +1,42 @@
+// forin give only name of the key
+const letslearnUsersArray=[{
+    name:"saugat Bagale",
+    age:23,
+    isLogin:true
+},{
+    name:"Nishant",
+    age:24,
+    isLogin:false
+},
+{
+    name:"Aakriti",
+    age:22,
+    isLogin:true
+},
+{
+    name:"subin",
+    age:19,
+    isLogin:false
+},
+{
+    name:"kamala",
+    age:19,
+    isLogin:true
+},
+{
+    name:"suman",
+    age:19,
+    isLogin:false
+},
+
+]
+//forin give only name of the key
+for(let key in letslearnUsersArray){
+    console.log(letslearnUsersArray[key].name)
+}
+//for of give only name
+for(let key of letslearnUsersArray){
+    console.log(key.name)
+}
+
+
diff --git a/Students/Nishan/head phone.jpg b/Students/Nishan/head phone.jpg
diff --git a/Students/Nishan/html+js copy 2.html b/Students/Nishan/html+js copy 2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+
+        .btn{
+            background-color: white;
+            color: black;
+            border: 2px solid black;
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <button class="btn" onclick="clicked()" onmouseover="over()" onmouseout="leave()">Click Me </button>
+</body>
+<script>
+    function clicked(){
+        alert("Button Clicked");
+    }
+    function over(){
+        document.querySelector(".btn").style.backgroundColor = "red";
+    }
+    function leave(){
+        document.querySelector(".btn").style.backgroundColor = "white";
+    }
+
+    </script>
+
+</html>
diff --git a/Students/Nishan/html+js.html b/Students/Nishan/html+js.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+
+        .btn{
+            background-color: white;
+            color: black;
+            border: 2px solid black;
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <button class="btn" onclick="clicked()" onmouseover="over()" onmouseout="leave()">Click Me </button>
+</body>
+<script>
+    function clicked(){
+        alert("Button Clicked");
+    }
+    function over(){
+        document.querySelector(".btn").style.backgroundColor = "red";
+    }
+    function leave(){
+        document.querySelector(".btn").style.backgroundColor = "white";
+    }
+
+    </script>
+
+</html>
diff --git a/Students/Nishan/jacket.jpg b/Students/Nishan/jacket.jpg
diff --git a/Students/Nishan/luckeydraw.html b/Students/Nishan/luckeydraw.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>lucky draw slot machine</title>
+    <style>
+        .container{
+            text-align: center;
+            margin-top: 50px;
+        }
+        .slot-machine{
+            display: flex;
+            justify-content: center;
+            margin-bottom: 20px;
+        }
+        .slot{
+            font-size: 3em;
+            margin: 0 10px;
+            width: 80px;
+            height: 80px;
+            line-height: 80px;
+            border: 2px solid #000;
+            border-radius: 10px;
+        }
+        #spinButton{
+            padding: 10px 20px;
+            font-size: 1.2em;
+            cursor: pointer;
+        }
+        #result{
+            margin-top: 20px;
+            font-size: 1.5em;
+        }
+        .currency{
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            padding: 10px 20px;
+            background-color: #f0f0f0;
+            font-size: 1.5em;
+            margin-bottom: 20px;
+            display: block;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+
+    <h1>Lucky Draw Slot Machine</h1>
+    <span class="currency">$100</span>
+    <div class="slot-machine">
+        <div class="slot" id="slot1">🍒</div>
+        <div class="slot" id="slot2">🍋</div>
+        <div class="slot" id="slot3">🍇</div>
+    </div>
+    <button id="spinButton">Spin</button>
+    <div id="result"></div>
+</div>
+
+</body>
+<script>
+
+    //initialize the symbols and get the elements
+   const symbols = ["🍒", "🍋", "🍇", "🍉", "🍊"];
+    const slot1 = document.getElementById("slot1");
+    const slot2 = document.getElementById("slot2");
+    const slot3 = document.getElementById("slot3");
+    const spinButton = document.getElementById("spinButton");
+    const result = document.getElementById("result");
+    let Currency = document.querySelector(".currency")
+    let currency=100
+    Currency.innerHTML=currency
+    console.log(Currency)
+
+    spinButton.addEventListener("click",()=>{
+        result.innerHTML=""
+        slot1.innerText= symbols[randomValue()]
+        slot2.innerText= symbols[randomValue()]
+        slot3.innerText= symbols[randomValue()]
+        if(slot1.innerText==slot2.innerText && slot2.innerText==slot3.innerText){
+            result.innerHTML="JackPot"
+            currency+=1000
+            Currency.innerHTML=currency
+        }
+        else{
+            currency-=100
+            Currency.innerHTML=currency
+
+        }
+
+    })
+    function randomValue(){
+     return Math.floor(Math.random()*symbols.length)
+
+    }
+
+
+</script>
+</html>
diff --git a/Students/Nishan/mobile.jpg b/Students/Nishan/mobile.jpg