-
Notifications
You must be signed in to change notification settings - Fork 1
/
navbar.js
143 lines (119 loc) · 4.62 KB
/
navbar.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
//cartbutton after login logic//
let loggedIn = Boolean(localStorage.getItem('loggedIn')) || false;
if(loggedIn===true) {
loginbut = document.querySelector('#navbar > div:nth-child(1) > p:nth-child(6) > a')
loginbut.innerText=' 🛒 '
loginbut.setAttribute('href','cart.html')
signinbut = document.querySelector('#navbar > div:nth-child(1) > p:nth-child(5) > a')
signinbut.innerText = ''
}
//cartbutton after login logic//
ScrollOut( {
cssProps: true,
threshold: 0.2
} );
function redirect( x ) {
x.classList.toggle( "change" )
// window.location.href="womens.html"
}
document.querySelector( "#search_icon" ).addEventListener( "click", display_search );
function display_search() {
document.querySelector( "#menu_icon" ).style.right = "91%";
document.querySelector( "#person_icon" ).style.left = "7%";
document.querySelector( "#search" ).style.display = "block";
document.querySelector( "#close_search" ).style.display = "block";
document.querySelector( "#navbar" ).style.height = "80px";
}
// close searchbar
document.querySelector( "#close_search" ).addEventListener( "click", close_search );
function close_search() {
document.querySelector( "#search" ).style.display = "none";
document.querySelector( "#close_search" ).style.display = "none";
document.querySelector( "#navbar" ).style.height = "40px";
document.querySelector( "#menu_icon" ).style.right = "95%";
document.querySelector( "#person_icon" ).style.left = "5px";
window.location.reload()
}
// change color of border in search
document.querySelector( "#search" ).addEventListener( "click", changeborder );
function changeborder() {
document.querySelector( "#search" ).style.border = "1px solid #8735ea"
document.querySelector( "#search" ).style.backgroundColor = "transparent"
}
// display help dropdown
document.querySelector( "#help" ).addEventListener( "click", displaybar );
function displaybar() {
document.querySelector( ".helplist" ).style.display = "inline-block";
}
// contry selection
let arr = [
{ country: "India", currency: "$" },
{
country: "United States of America",
currency: "$",
},
{ country: "China", currency: "$" },
{ country: "Nepal", currency: "$" },
{ country: "Australia", currency: "$" },
{ country: "France", currency: "$" },
{ country: "South Africa", currency: "$" },
{ country: "Nigeria", currency: "$" },
{ country: "Mexico", currency: "$" },
{ country: "Argentina", currency: "$" },
{ country: "Brazil", currency: "$" },
{ country: "Canada", currency: "$" },
{ country: "Singapore", currency: "$" },
{ country: "Sweden", currency: "$" },
{ country: "Germany", currency: "$" },
];
for ( let i = 0; i < arr.length; i++ ) {
let x = document.createElement( "option" );
x.innerText = arr[ i ].country;
document.querySelector( "select" ).append( x );
}
// document.querySelector( "#set_country" ).style.display = "none";
document.querySelector( "#country" ).addEventListener( "click", displayselect );
function displayselect() {
document.querySelector( "#set_country" ).style.display = "inline-block";
document.querySelector( "#set_country" ).style.visibility = "visible";
}
document.querySelector( "#close_display" ).addEventListener( "click", closedisplay );
function closedisplay() {
document.querySelector( "#set_country" ).style.display = "none";
}
document.querySelector( "#set_country button " ).addEventListener( "click", set_country );
function set_country() {
window.location.reload();
}
// country section over ....................................................//
// it will close dropdown when clicking outside
document.addEventListener( "click", function ( event ) {
if ( ( event.target.matches( "#set_country" ) ) ||
( !event.target.closest( "#country" ) ) ) {
closeModel()
}
},
false );
document.addEventListener( "click", function ( event ) {
if ( ( event.target.matches( ".helplist" ) ) || ( !event.target.closest( "#help" ) ) ) {
closehelp()
}
},
false );
function closehelp() {
document.querySelector( ".helplist" ).style.display = "none";
}
function closeModel() {
document.querySelector( "#set_country" ).style.display = "none";
// document.querySelector( ".helplist" ).style.display = "none";
}
// for logo
document.querySelector( "#logo" ).addEventListener( "click", redirect );
function redirect() {
window.location.href = "index.html";
}
document.querySelector( "#menu_icon" ).addEventListener( "click", redirect_womenspage );
function redirect_womenspage() {
window.location.href = "womens.html";
// window.location.reload();
}