1+ import { todayDeal } from "./todayDeal.js"
2+
3+ let slideBtnLeft = document . getElementById ( "slide-btn-left" )
4+ let slideBtnRight = document . getElementById ( "slide-btn-right" )
5+ let imgItem = document . querySelectorAll ( ".image-item" )
6+
7+
8+ console . log ( imgItem . length - 1 )
9+
10+ let startSlider = 0
11+ let endSlider = ( imgItem . length - 1 ) * 100 // 700
12+
13+ slideBtnLeft . addEventListener ( "click" , handleLeftBtn )
14+
15+ function handleLeftBtn ( ) {
16+ if ( startSlider < 0 ) {
17+ startSlider = startSlider + 100 ;
18+ }
19+ imgItem . forEach ( element => {
20+ element . style . transform = `translateX(${ startSlider } %)` ;
21+ } )
22+ }
23+
24+ slideBtnRight . addEventListener ( "click" , handleRightBtn )
25+
26+ function handleRightBtn ( ) {
27+ if ( startSlider >= - endSlider + 100 ) {
28+ startSlider = startSlider - 100 ;
29+ }
30+ imgItem . forEach ( element => {
31+ element . style . transform = `translateX(${ startSlider } %)` ;
32+ } )
33+
34+ }
35+ //render automatic
36+ function renderSlideAuto ( ) {
37+
38+ if ( startSlider >= - endSlider + 100 ) {
39+ handleRightBtn ( )
40+ }
41+ else {
42+ startSlider = 0 ;
43+ }
44+ }
45+ setInterval ( renderSlideAuto , 2000 ) ;
46+
47+
48+
49+
50+ /***** sidebar navigation */
51+ const sidebarNavigationEl = document . getElementById ( "sidebar-container-navigation-id" )
52+ const sidebarOpenNavigationEl = document . getElementById ( "open-nav-sidebar" )
53+ const sidebarCloseNavigationEl = document . getElementById ( "sidebar-navigation-close" )
54+
55+
56+ // console.log(sidebarNavigationEl)
57+
58+ sidebarOpenNavigationEl . addEventListener ( "click" , ( ) => {
59+ sidebarNavigationEl . classList . toggle ( "slidebar-show" )
60+ } )
61+ sidebarCloseNavigationEl . addEventListener ( "click" , ( ) => {
62+ sidebarNavigationEl . classList . toggle ( "slidebar-show" )
63+ } )
64+
65+
66+
67+
68+ //today deals
69+ console . log ( todayDeal )
70+ let todayDealProductListEl = document . querySelector ( ".today_deals_product_list" )
71+ console . log ( todayDealProductListEl )
72+
73+ let todayDealProductHTML = ""
74+
75+ let todayDeallength = todayDeal . length
76+
77+ for ( let i = 0 ; i < todayDeallength ; i ++ ) {
78+ // console.log(todayDeal[i])
79+
80+ todayDealProductHTML += `
81+ <div class="today_deals_product_item">
82+ <div class="todayDeals_product_image">
83+ <img src=${ todayDeal [ i ] . img } />
84+ </div>
85+
86+
87+
88+ <div class="discount_Contaienr">
89+ <a href="#">Up to ${ todayDeal [ i ] . discount } % off</a>
90+ <a href="#">${ todayDeal [ i ] . DealOfDay } </a>
91+ </div>
92+ <p>${ todayDeal [ i ] . desc } </p>
93+ </div>
94+ `
95+ }
96+
97+ todayDealProductListEl . innerHTML = todayDealProductHTML
98+ // console.log(todayDealProductHTML)
99+
100+ let today_deal_btn_prevEl = document . getElementById ( "today_deal_btn_prev" )
101+ let today_deal_btn_nextEl = document . getElementById ( "today_deal_btn_next" )
102+ let today_deals_product_itemEl = document . querySelectorAll ( ".today_deals_product_item" )
103+
104+ let startProduct = 0 ;
105+
106+
107+ today_deal_btn_prevEl . addEventListener ( "click" , ( ) => {
108+
109+
110+ if ( startProduct < 0 ) {
111+ startProduct += 500
112+ }
113+ if ( startProduct > - 2000 ) {
114+ today_deals_product_itemEl . forEach ( el => {
115+ el . style . transform = `translateX(${ startProduct } %)`
116+ } )
117+ }
118+
119+ } )
120+
121+ today_deal_btn_nextEl . addEventListener ( "click" , ( ) => {
122+ // alert("next")
123+
124+ if ( startProduct > - 1500 ) {
125+ startProduct -= 500
126+ }
127+
128+ today_deals_product_itemEl . forEach ( el => {
129+ el . style . transform = `translateX(${ startProduct } %)`
130+ } )
131+
132+
133+ } )
134+
135+ const backtop = document . querySelector ( ".backtop" ) ;
136+
137+ backtop . addEventListener ( "click" , ( ) => {
138+ window . scrollTo ( {
139+ top :0 ,
140+ behavior :"smooth"
141+ } )
142+ } )
143+
144+ const sidebar = document . querySelector ( ".sidebar" ) ;
145+ const cross = document . querySelector ( ".fa-xmark" ) ;
146+ const black = document . querySelector ( ".black" ) ;
147+ const sidebtn = document . querySelector ( ".second-1" ) ;
148+
149+ sidebtn . addEventListener ( "click" , ( ) => {
150+ sidebar . classList . add ( "active" ) ;
151+ cross . classList . add ( "active" ) ;
152+ black . classList . add ( "active" ) ;
153+ document . body . classList . add ( "stop-scroll" ) ;
154+ } )
155+ cross . addEventListener ( "click" , ( ) => {
156+ sidebar . classList . remove ( "active" ) ;
157+ cross . classList . remove ( "active" ) ;
158+ black . classList . remove ( "active" ) ;
159+ document . body . classList . remove ( "stop-scroll" ) ;
160+ } )
161+
162+ const sign = document . querySelector ( ".ac" ) ;
163+ const tri = document . querySelector ( ".triangle" ) ;
164+ const signin = document . querySelector ( ".hdn-sign" ) ;
165+
166+ sign . addEventListener ( "click" , ( ) => {
167+ black . classList . toggle ( "active-1" ) ;
168+ signin . classList . toggle ( "active" ) ;
169+ tri . classList . toggle ( "active" ) ;
170+ document . body . classList . toggle ( "stop-scroll" ) ;
171+ } )
0 commit comments