1010 < link rel ="shortcut icon " href ="Favicon.png " type ="image/x-icon " />
1111 < link rel ="stylesheet " href ="dark_mode.css " />
1212 < link rel ="stylesheet " href ="navstyle.css " />
13+ < script type ="text/javascript "
14+ src ="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js ">
15+ </ script >
1316</ head >
1417< body >
1518 < header class ="header ">
@@ -21,35 +24,52 @@ <h1>HelpOps-Hub</h1>
2124 < p > Ensuring You Never Get Stuck In DevOps Again!</ p >
2225 </ div >
2326 </ header >
24- < nav class ="nav " id ="navbar ">
27+ < nav class ="nav " id ="navbar ">
28+
29+
30+
2531 < ul class ="nav__list " id ="navlinkitems ">
26- < li class ="nav__item ">
27- < a href ="contributor-index.html " class ="fa-solid fa-people-group "> </ a >
28- </ li >
29- < li class ="nav__item ">
30- < a href ="https://github.com/mdazfar2/HelpOps-Hub " target ="_blank " class ="fab fa-github "> </ a >
31- </ li >
32- < li class ="nav__item ">
33- < a href ="https://www.linkedin.com/company/helpops-hub/ " target ="_blank " class ="fab fa-linkedin "> </ a >
34- </ li >
35- < li class ="nav__item ">
36- < a href ="https://discord.com/invite/UWTrRhqywt " target ="_blank " class ="fab fa-discord "> </ a >
37- </ li >
38- < li class ="nav__item ">
39- < a href ="javascript:void(0); " class ="fas fa-adjust " onclick ="toggleTheme() "> </ a >
40- </ li >
41- < li >
42- < button class ="about-button ">
43- < a href ="./faq.html "> FAQ's </ a >
44- </ button >
45- </ li >
46- < li >
47- < button class ="sponsor-button " onclick ="window.location.href='https://github.com/sponsors/mdazfar2' ">
48- < span class ="heart "> ❤</ span > Sponsor
49- </ button >
50- </ li >
32+ < li class ="nav__item ">
33+ < a href ="https://linkedin.com " target ="_blank " class ="fab fa-linkedin "> </ a >
34+ </ li >
35+ < li class ="nav__item ">
36+ < a href ="https://discord.com " target ="_blank " class ="fab fa-discord "> </ a >
37+ </ li >
38+
39+ < li class ="nav__item ">
40+ < a href ="javascript:void(0); " class ="fas fa-adjust " onclick ="toggleTheme() "> </ a >
41+ </ li >
42+ < li >
43+ < a href ="contributor-index.html ">
44+ < button class ="team-button ">
45+ < svg viewBox ="0 0 20 20 " width ="25 " height ="25 " fill ="none " class ="text-primary dark:text-white "> < path d ="M9.95757 12.1164C12.8169 12.1164 15.2584 12.5697 15.2584 14.3837C15.2584 16.1969 12.8326 16.6667 9.95757 16.6667C7.09825 16.6667 4.65678 16.2134 4.65678 14.4002C4.65678 12.5862 7.08258 12.1164 9.95757 12.1164ZM14.5293 11.0241C15.6224 11.0038 16.7976 11.1539 17.2319 11.2605C18.1519 11.4414 18.7571 11.8106 19.0078 12.3472C19.2197 12.7878 19.2197 13.2989 19.0078 13.7387C18.6242 14.571 17.3878 14.8382 16.9073 14.9072C16.8081 14.9222 16.7282 14.8359 16.7387 14.7361C16.9842 12.4298 15.0314 11.3363 14.5263 11.0849C14.5046 11.0736 14.5002 11.0564 14.5024 11.0459C14.5039 11.0384 14.5129 11.0264 14.5293 11.0241ZM5.47137 11.0244C5.48779 11.0267 5.496 11.0387 5.49749 11.0454C5.49973 11.0567 5.49525 11.0732 5.47436 11.0852C4.96846 11.3366 3.01573 12.4301 3.26122 14.7357C3.27167 14.8362 3.19257 14.9218 3.09333 14.9075C2.6128 14.8385 1.3764 14.5713 0.992868 13.739C0.780209 13.2984 0.780209 12.7881 0.992868 12.3475C1.24358 11.8109 1.84798 11.4417 2.768 11.2601C3.20302 11.1542 4.37749 11.0041 5.47137 11.0244ZM9.95757 3.33337C11.9043 3.33337 13.4653 4.90193 13.4653 6.86075C13.4653 8.81882 11.9043 10.3889 9.95757 10.3889C8.01081 10.3889 6.44982 8.81882 6.44982 6.86075C6.44982 4.90193 8.01081 3.33337 9.95757 3.33337ZM14.7195 3.92162C16.5999 3.92162 18.0766 5.70107 17.5736 7.68315C17.2341 9.01755 16.0052 9.9039 14.636 9.86788C14.4987 9.86412 14.3636 9.85137 14.233 9.82885C14.1383 9.81234 14.0905 9.70502 14.1442 9.62546C14.6666 8.85244 14.9643 7.92257 14.9643 6.92439C14.9643 5.88269 14.639 4.91154 14.0741 4.11525C14.0562 4.09048 14.0428 4.05221 14.0607 4.02369C14.0756 4.00042 14.1032 3.98842 14.1293 3.98241C14.3196 3.94339 14.5151 3.92162 14.7195 3.92162ZM5.27998 3.92155C5.48443 3.92155 5.67993 3.94331 5.87095 3.98234C5.89632 3.98834 5.92467 4.0011 5.93959 4.02361C5.95676 4.05213 5.94407 4.09041 5.92616 4.11518C5.36131 4.91146 5.03598 5.88262 5.03598 6.92432C5.03598 7.92249 5.33371 8.85237 5.85602 9.62539C5.90975 9.70494 5.86199 9.81226 5.76723 9.82878C5.6359 9.85204 5.50159 9.86405 5.3643 9.8678C3.99508 9.90383 2.76614 9.01748 2.42663 7.68308C1.92297 5.70099 3.39964 3.92155 5.27998 3.92155Z " fill ="currentColor "> </ path > </ svg > Our Team
46+ </ button >
47+ </ a >
48+ </ li >
49+ < li >
50+ < button class ="about-button ">
51+
52+ < a href ="./about.html ">
53+ About Us
54+ </ a >
55+ </ button >
56+
57+ </ li >
58+ < li > < button class ="about-button ">
59+
60+ < a href ="./faq.html ">
61+ FAQ's
62+ </ a >
63+ </ button > </ li >
64+ < li >
65+ < button class ="sponsor-button " onclick ="window.location.href='https://github.com/sponsors/mdazfar2' ">
66+ < span class ="heart "> ❤</ span > Sponsor
67+ </ button >
68+ </ li >
69+
5170 </ ul >
52- </ nav >
71+
72+ </ nav >
5373
5474 < div class ="search-container ">
5575 < div id ="search-box ">
@@ -77,19 +97,19 @@ <h1>HelpOps-Hub</h1>
7797 </ div >
7898 < div id ="feedback-section ">
7999 < h2 > Feedback</ h2 >
80- < form class ="feedback-form " id ="feedback-form ">
100+ < form class ="feedback-form " id ="feedback-form ">
81101 < label for ="name "> Name</ label >
82102 < input type ="text " id ="name " name ="name " required />
83103
84104 < label for ="email "> Email</ label >
85- < input type ="email " id ="email " name ="email " required />
105+ < input type ="email " id ="email " name ="user_email " required />
86106
87107 < label for ="comments "> Comments</ label >
88- < textarea id ="comments " name ="comments " required > </ textarea >
108+ < textarea id ="comments " name ="message " required > </ textarea >
89109
90110 < label for ="rating "> Rating</ label >
91111 < div class ="rating ">
92- < input type ="radio " id ="star1 " name ="rating " value ="1 " /> < label for =" star1 " title =" 1 star " > ★ </ label >
112+ < label for =" star1 " title =" 1 star " > ★ </ label > < input type ="radio " id ="star1 " name ="rating " value ="1 " />
93113 < input type ="radio " id ="star2 " name ="rating " value ="2 " /> < label for ="star2 " title ="2 stars "> ★</ label >
94114 < input type ="radio " id ="star3 " name ="rating " value ="3 " /> < label for ="star3 " title ="3 stars "> ★</ label >
95115 < input type ="radio " id ="star4 " name ="rating " value ="4 " /> < label for ="star4 " title ="4 stars "> ★</ label >
@@ -110,11 +130,46 @@ <h2>Feedback</h2>
110130
111131 < script src ="app.js "> </ script >
112132 < script src ="darkmode.js "> </ script >
133+ < script type ="text/javascript ">
134+ ( function ( ) {
135+ emailjs . init ( {
136+ publicKey : "rId2aw03Pj2ZNq2U5" ,
137+ } ) ;
138+ } ) ( ) ;
139+ </ script >
140+ < script >
141+ document . getElementById ( "feedback-form" ) . reset ( ) ;
142+
143+ </ script >
113144 < script >
114145 // Feedback JS
115146 document . getElementById ( "feedback-form" ) . addEventListener ( "submit" , function ( event ) {
116147 event . preventDefault ( ) ;
117-
148+ var rating = document . querySelector ( 'input[name="rating"]:checked' ) . value
149+ if ( ! rating ) {
150+ var errorMessage = document . getElementById ( "error-message" ) ;
151+ errorMessage . innerText = "Please select a Rating!" ;
152+ errorMessage . style . display = "block" ;
153+ setTimeout ( function ( ) {
154+ errorMessage . style . display = "none" ;
155+ } , 3000 ) ;
156+ return ;
157+ }
158+ let temp = document . getElementById ( 'comments' ) . value
159+ document . getElementById ( 'comments' ) . value = `Comments : ${ document . getElementById ( "comments" ) . value } Rating : ${ document . querySelector ( 'input[name="rating"]:checked' ) . value } ` ;
160+
161+ emailjs . sendForm ( 'service_hrz8hfg' , 'template_na7xjc4' , "#feedback-form" ) . then (
162+ ( response ) => {
163+ console . log ( 'SUCCESS!' , response . status , response . text ) ;
164+ } ,
165+ ( error ) => {
166+ console . log ( 'FAILED...' , error ) ;
167+ } ,
168+ ) ;
169+ document . getElementById ( 'comments' ) . value = temp
170+
171+
172+
118173 if ( ! document . querySelector ( 'input[name="rating"]:checked' ) ) {
119174 var errorMessage = document . getElementById ( "error-message" ) ;
120175 errorMessage . innerText = "Please select a rating!" ;
@@ -130,34 +185,47 @@ <h2>Feedback</h2>
130185 comments : document . getElementById ( "comments" ) . value ,
131186 rating : document . querySelector ( 'input[name="rating"]:checked' ) . value
132187 } ;
133- console . log ( formData ) ;
134- fetch ( 'https://helpops-hub.vercel.app/feedback' , {
135- method : 'POST' ,
136- headers : {
137- 'Content-Type' : 'application/json'
138- } ,
139- body : JSON . stringify ( formData )
140- } )
141- . then ( response => response . json ( ) )
142- . then ( data => {
143- console . log ( 'Success:' , data ) ;
144- document . getElementById ( "message" ) . innerText = "Thank you for your feedback!" ;
145- document . getElementById ( "message" ) . style . display = "block" ;
146- setTimeout ( function ( ) {
147- document . getElementById ( "message" ) . style . display = "none" ;
148- document . getElementById ( "feedback-form" ) . reset ( ) ;
149- } , 3000 ) ;
150- } )
151- . catch ( ( error ) => {
152- console . error ( 'Error:' , error ) ;
153- var errorMessage = document . getElementById ( "error-message" ) ;
154- errorMessage . innerText = "There was an error submitting your feedback." ;
155- errorMessage . style . display = "block" ;
156- setTimeout ( function ( ) {
157- errorMessage . style . display = "none" ;
158- } , 3000 ) ;
159- } ) ;
160- } ) ;
188+ // fetch('https://helpops-hub.vercel.app/feedback', {
189+ // method: 'POST',
190+ // headers: {
191+ // 'Content-Type': 'application/json'
192+ // },
193+ // body: JSON.stringify(formData)
194+ // })
195+ // .then(response => response.json())
196+ // .then(data => {
197+ // console.log('Success:', data);
198+ // document.getElementById("message").innerText = "Thank you for your feedback!";
199+ // document.getElementById("message").style.display = "block";
200+ // setTimeout(function() {
201+ // document.getElementById("message").style.display = "none";
202+ // document.getElementById("feedback-form").reset();
203+ // }, 3000);
204+ // })
205+ // .catch((error) => {
206+ // console.error('Error:', error);
207+ // var errorMessage = document.getElementById("error-message");
208+ // errorMessage.innerText = "There was an error submitting your feedback.";
209+ // errorMessage.style.display = "block";
210+ // setTimeout(function() {
211+ // errorMessage.style.display = "none";
212+ // }, 3000);
213+ // });
214+ var messageElement = document . getElementById ( "message" ) ;
215+ messageElement . innerText = "Thank you for your feedback!" ;
216+ messageElement . style . display = "block" ;
217+
218+ setTimeout ( function ( ) {
219+ messageElement . style . display = "none" ;
220+ document . getElementById ( "feedback-form" ) . reset ( ) ;
221+ } , 3000 ) ;
222+
223+
224+
225+
226+
227+
228+ } ) ;
161229 </ script >
162230</ body >
163231</ html >
0 commit comments