Skip to content

Commit a395515

Browse files
devrutu143devrutu143
authored
Create script.js
1 parent 57fe504 commit a395515

1 file changed

Lines changed: 199 additions & 0 deletions

File tree

‎script.js‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const nameInput = document.getElementById('name-input');
3+
const nextBtn = document.getElementById('next-btn');
4+
const errorMsg = document.getElementById('error-msg');
5+
const firstDashboard = document.getElementById('first-dashboard');
6+
const secondDashboard = document.getElementById('second-dashboard');
7+
const greetingPart1 = document.getElementById('greeting-part1');
8+
const greetingPart2 = document.getElementById('greeting-part2');
9+
const clickNextBtn = document.getElementById('click-next-btn');
10+
const thirdDashboard = document.getElementById('third-dashboard');
11+
const thirdGreeting = document.getElementById('third-greeting');
12+
const yesBtn = document.getElementById('yes-btn');
13+
const noBtn = document.getElementById('no-btn');
14+
const fourthDashboard = document.getElementById('fourth-dashboard');
15+
const fourthGreeting = document.getElementById('fourth-greeting');
16+
const fourthNextBtn = document.getElementById('fourth-next-btn');
17+
const fifthDashboard = document.getElementById('fifth-dashboard');
18+
const fifthGreeting = document.getElementById('fifth-greeting');
19+
const giftYesBtn = document.getElementById('gift-yes-btn');
20+
const giftNoBtn = document.getElementById('gift-no-btn');
21+
const sixthDashboard = document.getElementById('sixth-dashboard');
22+
const giftBox1 = document.getElementById('gift-box1');
23+
const giftBox2 = document.getElementById('gift-box2');
24+
const resultText = document.getElementById('result-text');
25+
const seventhDashboard = document.getElementById('seventh-dashboard');
26+
const seventhGreeting = document.getElementById('seventh-greeting');
27+
const seventhNextBtn = document.getElementById('seventh-next-btn');
28+
const eighthDashboard = document.getElementById('eighth-dashboard');
29+
const eighthGreeting = document.getElementById('eighth-greeting');
30+
const dateYesBtn = document.getElementById('date-yes-btn');
31+
const dateNoBtn = document.getElementById('date-no-btn');
32+
const ninthDashboard = document.getElementById('ninth-dashboard');
33+
const ninthGreeting = document.getElementById('ninth-greeting');
34+
35+
// Valid names (case-insensitive)
36+
const validNames = ['nisha', 'nisha sarkar'];
37+
38+
// Function to validate input
39+
const validateInput = () => {
40+
const inputName = nameInput.value.trim().toLowerCase();
41+
if (validNames.includes(inputName)) {
42+
nextBtn.disabled = false;
43+
errorMsg.textContent = '';
44+
} else {
45+
nextBtn.disabled = true;
46+
errorMsg.textContent = '';
47+
}
48+
};
49+
50+
// Input event for real-time validation
51+
nameInput.addEventListener('input', validateInput);
52+
53+
// Focus event to ensure input is clickable
54+
nameInput.addEventListener('focus', () => {
55+
console.log('Input field focused'); // Debugging
56+
nameInput.select();
57+
});
58+
59+
// First to Second Dashboard
60+
nextBtn.addEventListener('click', () => {
61+
const inputName = nameInput.value.trim().toLowerCase();
62+
if (validNames.includes(inputName)) {
63+
firstDashboard.style.opacity = '0';
64+
setTimeout(() => {
65+
firstDashboard.style.display = 'none';
66+
secondDashboard.style.display = 'flex';
67+
secondDashboard.style.opacity = '1';
68+
greetingPart1.textContent = 'Oh Madam ji?';
69+
setTimeout(() => {
70+
greetingPart2.style.display = 'block';
71+
greetingPart2.textContent = "I'm soo grateful you finally decided to visit my site🤭";
72+
}, 3000);
73+
}, 1000);
74+
} else {
75+
errorMsg.textContent = 'Abe tum kon ha?....this website is not for you!';
76+
}
77+
});
78+
79+
// Second to Third Dashboard
80+
clickNextBtn.addEventListener('click', () => {
81+
secondDashboard.style.opacity = '0';
82+
setTimeout(() => {
83+
secondDashboard.style.display = 'none';
84+
thirdDashboard.style.display = 'flex';
85+
thirdDashboard.style.opacity = '1';
86+
thirdGreeting.textContent = 'Madam ji ek baat bolna tha';
87+
}, 1000);
88+
});
89+
90+
// Third to Fourth Dashboard
91+
yesBtn.addEventListener('click', () => {
92+
thirdDashboard.style.opacity = '0';
93+
setTimeout(() => {
94+
thirdDashboard.style.display = 'none';
95+
fourthDashboard.style.display = 'flex';
96+
fourthDashboard.style.opacity = '1';
97+
fourthGreeting.textContent = 'madam ji aap bahut cute ho...hehe~';
98+
}, 1000);
99+
});
100+
101+
// Third Dashboard: No button with loop
102+
noBtn.addEventListener('click', () => {
103+
noBtn.style.animation = 'disappear 0.5s forwards';
104+
setTimeout(() => {
105+
noBtn.textContent = 'Are man v jao ji🤧!';
106+
noBtn.style.animation = 'reappear 0.5s forwards';
107+
}, 500);
108+
});
109+
110+
// Fourth to Fifth Dashboard
111+
fourthNextBtn.addEventListener('click', () => {
112+
fourthDashboard.style.opacity = '0';
113+
setTimeout(() => {
114+
fourthDashboard.style.display = 'none';
115+
fifthDashboard.style.display = 'flex';
116+
fifthDashboard.style.opacity = '1';
117+
fifthGreeting.textContent = 'Madam ji, ek gift ha aapke liya!';
118+
}, 1000);
119+
});
120+
121+
// Fifth Dashboard: Gift Yes button
122+
giftYesBtn.addEventListener('click', () => {
123+
fifthDashboard.style.opacity = '0';
124+
setTimeout(() => {
125+
fifthDashboard.style.display = 'none';
126+
sixthDashboard.style.display = 'flex';
127+
sixthDashboard.style.opacity = '1';
128+
}, 1000);
129+
});
130+
131+
// Fifth Dashboard: Gift No button with loop
132+
giftNoBtn.addEventListener('click', () => {
133+
giftNoBtn.style.animation = 'disappear 0.5s forwards';
134+
setTimeout(() => {
135+
giftNoBtn.textContent = 'please dek lo na!';
136+
giftNoBtn.style.animation = 'reappear 0.5s forwards';
137+
}, 500);
138+
});
139+
140+
// Sixth Dashboard: Gift box selection
141+
const selectGift = (box) => {
142+
box.style.animation = 'flip-forward 0.5s forwards';
143+
setTimeout(() => {
144+
box.textContent = '💍';
145+
resultText.style.display = 'block';
146+
resultText.textContent = 'aww... you pick a ring!';
147+
// Disable other box
148+
giftBox1.style.pointerEvents = 'none';
149+
giftBox2.style.pointerEvents = 'none';
150+
// Transition to seventh dashboard after 2 seconds
151+
setTimeout(() => {
152+
sixthDashboard.style.opacity = '0';
153+
setTimeout(() => {
154+
sixthDashboard.style.display = 'none';
155+
seventhDashboard.style.display = 'flex';
156+
seventhDashboard.style.opacity = '1';
157+
seventhGreeting.textContent = 'ek aur bat puchna ha🤭';
158+
}, 1000);
159+
}, 2000);
160+
}, 500);
161+
};
162+
163+
giftBox1.addEventListener('click', () => selectGift(giftBox1));
164+
giftBox2.addEventListener('click', () => selectGift(giftBox2));
165+
166+
// Seventh to Eighth Dashboard
167+
seventhNextBtn.addEventListener('click', () => {
168+
seventhDashboard.style.opacity = '0';
169+
setTimeout(() => {
170+
seventhDashboard.style.display = 'none';
171+
eighthDashboard.style.display = 'flex';
172+
eighthDashboard.style.opacity = '1';
173+
eighthGreeting.textContent = 'Madam ji, Date ma chalogi mera sath?🎀';
174+
}, 1000);
175+
});
176+
177+
// Eighth Dashboard: Date Yes button
178+
dateYesBtn.addEventListener('click', () => {
179+
eighthDashboard.style.opacity = '0';
180+
setTimeout(() => {
181+
eighthDashboard.style.display = 'none';
182+
ninthDashboard.style.display = 'flex';
183+
ninthDashboard.style.opacity = '1';
184+
ninthGreeting.textContent = 'aap mera, pasandita Aurat ho 🤭';
185+
}, 1000);
186+
});
187+
188+
// Eighth Dashboard: Date No button with loop
189+
dateNoBtn.addEventListener('click', () => {
190+
dateNoBtn.style.animation = 'disappear 0.5s forwards';
191+
setTimeout(() => {
192+
dateNoBtn.textContent = 'please chalo na🤧!';
193+
dateNoBtn.style.animation = 'reappear 0.5s forwards';
194+
}, 500);
195+
});
196+
197+
// Ensure input is focused on page load
198+
nameInput.focus();
199+
});

0 commit comments

Comments
 (0)