-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
109 lines (94 loc) · 3.88 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
const james = document.getElementById("james")
const raju = document.getElementById("raju")
const rocky = document.getElementById("rocky")
const dhruv = document.getElementById("dhruv")
const barber_pic = document.getElementById("barber-photo")
const barber_name = document.getElementById("barber-name")
const form = document.getElementById("form");
const submit = document.getElementById("submit");
const thankyou = document.getElementById("thankyou")
const apointment = document.getElementById("appointment")
const nav = document.getElementById("nav");
const nav_element = document.querySelector(".nav-element");
window.addEventListener('scroll',()=>{
if(window.scrollY>100){
nav.classList.add("navbar-scrolled");
nav_element.style.color = 'Black';
}
else{
nav.classList.remove("navbar-scrolled");
nav_element.style.color = 'White';
}
})
// background
const background = document.getElementById("change-bg");
function Changeby(){
const images = ['url("bg1.avif")','url("bg2.jpg")','url("bg3.jpg")']
const backgroundImg = images[Math.floor(Math.random() * images.length)];
background.style.backgroundImage = backgroundImg;
}
setInterval(Changeby,4000)
// expert team
james.onclick=()=>{
james.style.boxShadow = "#525252 0px 0px 5px 5px";
raju.style.boxShadow = "none";
rocky.style.boxShadow = "none";
dhruv.style.boxShadow = "none";
barber_name.innerText = "James";
barber_pic.style.backgroundImage = "url(https://media.istockphoto.com/id/1340452153/photo/portrait-of-a-barber.webp?b=1&s=170667a&w=0&k=20&c=VlwTsPzdwb__ETewlVphgPny4NykdkDucvpy_rPHl5k=)";
}
raju.onclick=()=>{
// raju.style.border = "2px solid white";
raju.style.boxShadow = "#525252 0px 0px 5px 5px";
james.style.boxShadow = "none";
rocky.style.boxShadow = "none";
dhruv.style.boxShadow = "none";
barber_name.innerText = "Raju";
barber_pic.style.backgroundImage = "url(https://media.istockphoto.com/id/1365608023/photo/shot-of-a-handsome-young-barber-standing-alone-in-his-salon.webp?b=1&s=170667a&w=0&k=20&c=pxeqhIkM--YoZn2HQyrlWWO60QPKo-nmMvU92YWbOhc=)";
barber_pic.style.backgroundPosition = "center";
}
rocky.onclick=()=>{
rocky.style.boxShadow = "#525252 0px 0px 5px 5px";
james.style.boxShadow = "none";
raju.style.boxShadow = "none";
dhruv.style.boxShadow = "none";
barber_name.innerText = "Rocky";
barber_pic.style.backgroundImage = "url(https://static01.nyt.com/images/2023/05/21/multimedia/00CelebrityBarbers-JP1/00CelebrityBarbers-lede-try-btcf-superJumbo.jpg?quality=75&auto=webp)";
barber_pic.style.backgroundPosition = "center";
}
dhruv.onclick=()=>{
dhruv.style.boxShadow = "#525252 0px 0px 5px 5px";
james.style.boxShadow = "none";
rocky.style.boxShadow = "none";
raju.style.boxShadow = "none";
barber_name.innerText = "Dhruv";
barber_pic.style.backgroundImage = "url(https://nypost.com/wp-content/uploads/sites/2/2015/06/barber_mendoza1a.jpg?resize=1064,709&quality=75&strip=all)";
barber_pic.style.backgroundPosition = "center";
}
// appointement form
const body = document.body;
function openform(){
form.style.display = "block";
form.style.boxShadow = "0px 0px 0px 400px #000000ad";
}
function closeform (){
form.style.display = "none";
}
const appointment_form = document.getElementById("appointment-form");
appointment_form.onsubmit =()=>{
submit.style.display= "none";
thankyou.style.display= "block";
form.style.display= "none";
apointment.style.display = "none";
// alert("Thankyou for Booking");
return false;
}
// Newsletter form
const news_form = document.getElementById("newsletter");
const subscribe = document.getElementById("subscribe");
news_form.onsubmit=()=>{
alert("Copy below code to get 10% off\n\nCode: asdfghjkjhgf6545")
subscribe.style.backgroundColor = "red";
subscribe.innerText = "SUBSCRIBED";
return false;
}