Skip to content

Commit

Permalink
feedback submit issue fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@zalabhavy
zalabhavy committed Jun 5, 2024
1 parent 58900da commit d23cba2
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 90 deletions.
2 changes: 1 addition & 1 deletion Official_Website/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,4 +184,4 @@ function handleScroll() {
// Add scroll event listener
window.addEventListener("scroll", handleScroll);
// Add click event listener
scrollToTopBtn.addEventListener("click", scrollToTop);
scrollToTopBtn.addEventListener("click", scrollToTop);
2 changes: 1 addition & 1 deletion Official_Website/contributor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,4 +213,4 @@ fetchAllContributors();
// });

// window.onscroll = calcScrollValue;
// window.onload = calcScrollValue;
// window.onload = calcScrollValue;
212 changes: 124 additions & 88 deletions Official_Website/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<!DOCTYPE html><html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
/>
<title>HelpOps-Hub</title>
<!-- Added Favicon for website -->
<link rel="stylesheet" href="style.css" />
Expand All @@ -24,25 +26,6 @@
<h1>HelpOps-Hub</h1>
<p>Ensuring You Never Get Stuck In DevOps Again!</p>
</div>
<!-- <div class="icons">
<a href="contributor-index.html" class="fa-solid fa-people-group"></a>
<a href="https://github.com" target="_blank" class="fab fa-github"></a>
<a href="https://linkedin.com" target="_blank" class="fab fa-linkedin"></a>
<a href="https://discord.com" target="_blank" class="fab fa-discord"></a>
<a href="javascript:void(0);" class="fas fa-adjust" onclick="toggleTheme()"></a>
<button class="about-button">
<a href="./about.html">
About Us
</a>
</button>
<button class="about-button">
<a href="./faq.html">
FAQ's
</a>
</button>
</div> -->
</header>

<nav class="nav" id="navbar">
Expand All @@ -57,23 +40,17 @@ <h1>HelpOps-Hub</h1>
class="fab fa-github"></a>
</li>
<li class="nav__item">
<a
href="https://linkedin.com"
target="_blank"
class="fab fa-linkedin"></a>
<a href="https://linkedin.com" target="_blank" class="fab fa-linkedin"></a>
</li>
<li class="nav__item">
<a
href="https://discord.com"
target="_blank"
class="fab fa-discord"></a>
<a href="https://discord.com" target="_blank" class="fab fa-discord"></a>
</li>

<li class="nav__item">
<a
href="javascript:void(0);"
class="fas fa-adjust"
onclick="toggleTheme()"></a>
onclick="toggleTheme()"
></a>
</li>
<li>
<button class="about-button">
Expand All @@ -83,7 +60,8 @@ <h1>HelpOps-Hub</h1>
<li>
<button
class="sponsor-button"
onclick="window.location.href='https://github.com/sponsors/mdazfar2'">
onclick="window.location.href='https://github.com/sponsors/mdazfar2'"
>
<span class="heart">&#10084;</span> Sponsor
</button>
</li>
Expand All @@ -95,85 +73,108 @@ <h1>HelpOps-Hub</h1>
<div class="icon">
<i class="fas fa-duotone fa-magnifying-glass"></i>
</div>
<input
type="text"
id="search-bar"
placeholder="Search topics..." />
<input type="text" id="search-bar" placeholder="Search topics..." />
</div>
</div>

<div id="maincontainer">
<div id="loading" class="loading-gears">
<svg class="gear one" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M78.9,50c0-1.6-0.1-3.1-0.2-4.6l9.4-7.2c0.7-0.5,0.9-1.5,0.4-2.2l-8.8-15.3c-0.5-0.7-1.5-0.9-2.2-0.4l-11,6.4
<div id="loading" class="loading-gears">
<svg
class="gear one"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
<path
d="M78.9,50c0-1.6-0.1-3.1-0.2-4.6l9.4-7.2c0.7-0.5,0.9-1.5,0.4-2.2l-8.8-15.3c-0.5-0.7-1.5-0.9-2.2-0.4l-11,6.4
c-2.4-1.8-5-3.3-7.9-4.4L57,9.4c-0.2-0.8-1-1.4-1.8-1.4H44.8c-0.8,0-1.6,0.6-1.8,1.4l-1.6,12.1c-2.9,1-5.5,2.5-7.9,4.4l-11-6.4
c-0.7-0.5-1.7-0.3-2.2,0.4l-8.8,15.3c-0.5,0.7-0.3,1.7,0.4,2.2l9.4,7.2c-0.1,1.5-0.2,3.1-0.2,4.6s0.1,3.1,0.2,4.6l-9.4,7.2
c-0.7,0.5-0.9,1.5-0.4,2.2l8.8,15.3c0.5,0.7,1.5,0.9,2.2,0.4l11-6.4c2.4,1.8,5,3.3,7.9,4.4l1.6,12.1c0.2,0.8,1,1.4,1.8,1.4h10.4
c0.8,0,1.6-0.6,1.8-1.4l1.6-12.1c2.9-1,5.5-2.5,7.9-4.4l11,6.4c0.7,0.5,1.7,0.3,2.2-0.4l8.8-15.3c0.5-0.7,0.3-1.7-0.4-2.2l-9.4-7.2
C78.8,53.1,78.9,51.6,78.9,50z M50,62.5c-6.9,0-12.5-5.6-12.5-12.5S43.1,37.5,50,37.5S62.5,43.1,62.5,50S56.9,62.5,50,62.5z"/>
</svg>
<svg class="gear two" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M78.9,50c0-1.6-0.1-3.1-0.2-4.6l9.4-7.2c0.7-0.5,0.9-1.5,0.4-2.2l-8.8-15.3c-0.5-0.7-1.5-0.9-2.2-0.4l-11,6.4
C78.8,53.1,78.9,51.6,78.9,50z M50,62.5c-6.9,0-12.5-5.6-12.5-12.5S43.1,37.5,50,37.5S62.5,43.1,62.5,50S56.9,62.5,50,62.5z"
/>
</svg>
<svg
class="gear two"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
<path
d="M78.9,50c0-1.6-0.1-3.1-0.2-4.6l9.4-7.2c0.7-0.5,0.9-1.5,0.4-2.2l-8.8-15.3c-0.5-0.7-1.5-0.9-2.2-0.4l-11,6.4
c-2.4-1.8-5-3.3-7.9-4.4L57,9.4c-0.2-0.8-1-1.4-1.8-1.4H44.8c-0.8,0-1.6,0.6-1.8,1.4l-1.6,12.1c-2.9,1-5.5,2.5-7.9,4.4l-11-6.4
c-0.7-0.5-1.7-0.3-2.2,0.4l-8.8,15.3c-0.5,0.7-0.3,1.7,0.4,2.2l9.4,7.2c-0.1,1.5-0.2,3.1-0.2,4.6s0.1,3.1,0.2,4.6l-9.4,7.2
c-0.7,0.5-0.9,1.5-0.4,2.2l8.8,15.3c0.5,0.7,1.5,0.9,2.2,0.4l11-6.4c2.4,1.8,5,3.3,7.9,4.4l1.6,12.1c0.2,0.8,1,1.4,1.8,1.4h10.4
c0.8,0,1.6-0.6,1.8-1.4l1.6-12.1c2.9-1,5.5-2.5,7.9-4.4l11,6.4c0.7,0.5,1.7,0.3,2.2-0.4l8.8-15.3c0.5-0.7,0.3-1.7-0.4-2.2l-9.4-7.2
C78.8,53.1,78.9,51.6,78.9,50z M50,62.5c-6.9,0-12.5-5.6-12.5-12.5S43.1,37.5,50,37.5S62.5,43.1,62.5,50S56.9,62.5,50,62.5z"/>
</svg>
</div>
C78.8,53.1,78.9,51.6,78.9,50z M50,62.5c-6.9,0-12.5-5.6-12.5-12.5S43.1,37.5,50,37.5S62.5,43.1,62.5,50S56.9,62.5,50,62.5z"
/>
</svg>
</div>
</div>
<!-- <button id="scrollToTopBtn" class="scrollToTopBtn">▲</button> -->

<div id="folders-container"></div>

<!-- Feedback Section -->
<div class="feedback">
<div id="feedback-image">
<img src="feedback.png" alt="feedback-image">
<img src="feedback.png" alt="feedback-image" />
</div>
<div id="feedback-section">
<h2>Feedback</h2>
<form class="feedback-form" id="feedback-form">
<label for="name">Name</label>
<input type="text" id="name" name="name" required />
<div id="feedback-section">
<h2>Feedback</h2>
<form class="feedback-form" id="feedback-form">
<label for="name">Name</label>
<input type="text" id="name" name="name" required />

<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="email">Email</label>
<input type="email" id="email" name="email" required />

<label for="comments">Comments</label>
<textarea id="comments" name="comments" required></textarea>
<label for="comments">Comments</label>
<textarea id="comments" name="comments" required></textarea>

<label for="rating">Rating</label>
<div class="rating">
<input type="radio" id="star1" name="rating" value="1" /><label
for="star1"
title="1 star"
>&#9733;</label
>
<input type="radio" id="star2" name="rating" value="2" /><label
for="star2"
title="2 stars"
>&#9733;</label
>
<input type="radio" id="star3" name="rating" value="3" /><label
for="star3"
title="3 stars"
>&#9733;</label
>
<input type="radio" id="star4" name="rating" value="4" /><label
for="star4"
title="4 stars"
>&#9733;</label
>
<input type="radio" id="star5" name="rating" value="5" /><label
for="star5"
title="5 stars"
>&#9733;</label
>
</div>
<label for="rating">Rating</label>
<div class="rating">
<input
type="radio"
id="star1"
name="rating"
value="1"
/><label for="star1" title="1 star">&#9733;</label>
<input
type="radio"
id="star2"
name="rating"
value="2"
/><label for="star2" title="2 stars">&#9733;</label>
<input
type="radio"
id="star3"
name="rating"
value="3"
/><label for="star3" title="3 stars">&#9733;</label>
<input
type="radio"
id="star4"
name="rating"
value="4"
/><label for="star4" title="4 stars">&#9733;</label>
<input
type="radio"
id="star5"
name="rating"
value="5"
/><label for="star5" title="5 stars">&#9733;</label>
</div>

<button type="submit">Submit Feedback</button>
</form>
<button type="submit">Submit Feedback</button>
</form>
<div
id="message"
style="display: none; color: green; font-size: 1.2em; margin-top: 20px;"
></div>
<div
id="error-message"
style="display: none; color: red; font-size: 1.2em; margin-top: 20px;"
></div>
</div>
</div>
</div>
<!-- Footer Section -->
<footer>
<div class="footer">
Expand All @@ -183,5 +184,40 @@ <h2>Feedback</h2>

<script src="app.js"></script>
<script src="darkmode.js"></script>
<script>
//feedback js
document.getElementById("feedback-form").addEventListener("submit", function(event) {
event.preventDefault();

var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var comments = document.getElementById("comments").value;
var rating = document.querySelector('input[name="rating"]:checked');


if (!rating) {

var errorMessage = document.getElementById("error-message");
errorMessage.innerText = "Please select a Rating!";
errorMessage.style.display = "block";


setTimeout(function() {
errorMessage.style.display = "none";
}, 3000);

return;
}

var messageElement = document.getElementById("message");
messageElement.innerText = "Thank you for your feedback!";
messageElement.style.display = "block";

setTimeout(function() {
messageElement.style.display = "none";
document.getElementById("feedback-form").reset();
}, 3000);
});
</script>
</body>
</html>

0 comments on commit d23cba2

Please sign in to comment.