Skip to content

Commit

Permalink
Show popup after feedback submit.
Browse files Browse the repository at this point in the history
  • Loading branch information
@amin-xiv
amin-xiv committed Nov 8, 2024
1 parent efb3c35 commit 34aafce
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 59 deletions.
27 changes: 10 additions & 17 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,17 +109,17 @@
</p>
<p id="intro_text">The adjoining map shows people who are using or contributing to Dataverse.</p>
<button id="download_btn"
onclick="showCustomAlert('Dataverse is currently under development. It will be available for installastion soon.\n\nHowever, you can visit the following link to run the project locally on your computer:')">Get
onclick="showModal('Dataverse is currently under development. It will be available for installastion soon.\n\nHowever, you can visit the following link to run the project locally on your computer:', 'download dataverse')">Get
Dataverse</button>

<div id="custom-alert" class="custom-alert">
<div class="custom-alert-content">
<span id="alert-message"></span>
<div class="row_buttons">
<div id="modal" class="modal">
<div class="modal-content">
<span id="modal-message"></span>
<div id="modal-buttons">
<a
href="https://github.com/multiverseweb/Dataverse?tab=readme-ov-file#deployment-specifications"><button>Try
href="https://github.com/multiverseweb/Dataverse?tab=readme-ov-file#deployment-specifications"><button id="accept-modal">Try
Dataverse</button></a>
<button onclick="closeCustomAlert()" id="later">Later</button>
<button onclick="closeModal()" id="close-modal">Later</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -250,11 +250,11 @@
<a class="subheading" href="index.html" id="last_link">Dataverse</a>
</div>
</div>
<form name="Dataverse Reviews" method="POST" data-netlify="true" onsubmit="return validateForm()">
<form name="Dataverse Reviews" method="POST" data-netlify="true" id="feedback-form" onsubmit="return validateForm()">
<p style="color:white">Let Me Know Your Thoughts!</p>
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="Email" placeholder="Your Email ID" required>
<input name="Message" placeholder="Your Message" required>
<textarea name="Message" placeholder="Your Message" rows="4" cols="38" required></textarea>
<div class="star-rating" style="text-align: center; margin: 10px;">
<input type="radio" id="star5" name="rating" value="5" />
<label for="star5" title="5 star">&#9733;</label>
Expand Down Expand Up @@ -292,14 +292,7 @@
checkFeedbackLength(feedback);
return feedback.value.length >= 10;
}
function validateForm() {
const rating = document.querySelector('input[name="rating"]:checked');
if (!rating) {
alert("Please select a rating.");
return false; // Prevent form submission
}
return true; // Allow form submission
}

// Delay the execution by 3 seconds
setTimeout(function () {
window.embeddedChatbotConfig = {
Expand Down
63 changes: 28 additions & 35 deletions website/scripts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,13 +334,25 @@ examples2.addEventListener("mouseleave", startAutoScroll);
window.addEventListener("scroll", progress);


function showCustomAlert(message) {
document.getElementById('alert-message').innerText = message;
document.getElementById('custom-alert').style.display = 'block';
function showModal(message, purpose) {
document.getElementById('modal').style.display = 'block';
document.getElementById('modal-message').innerText = message;

if(purpose === 'download dataverse') {
// Check if the accept and close buttons has been already hidden
if(document.getElementById('accept-modal').style.display === 'none') {
document.getElementById('accept-modal').style.display = 'block';
document.getElementById('modal-buttons').style.gap = '25%';
}
} else if(purpose === 'submit feedback') {
document.getElementById('accept-modal').style.display = 'none';
document.getElementById('close-modal').innerText = 'close';
document.getElementById('modal-buttons').style.gap = '0';
}
}

function closeCustomAlert() {
document.getElementById('custom-alert').style.display = 'none';
function closeModal() {
document.getElementById('modal').style.display = 'none';
}

/*CHANGING DIRECTION OF AEROPLANE*/
Expand All @@ -352,38 +364,13 @@ function updateAngle() {

setInterval(updateAngle, 10000);

function validateForm() {
const name = document.querySelector('input[name="Name"]').value.trim();
const email = document.querySelector('input[name="Email"]').value.trim();
const message = document.querySelector('textarea[name="Message"]').value.trim();

console.log("Name:", name);
console.log("Email:", email);
console.log("Message:", message);

if (!name) {
alert("Please enter your name.");
return false;
}
if (!email) {
alert("Please enter your email.");
return false;
}
if (!message) {
alert("Please enter your message.");
return false;
}

return true;
}

// FORM VALIDATING FUNCTION
function validateForm() {

const form = document.getElementById('feedback-form');
const nameInput = document.querySelector('[name="Name"]');
const emailInput = document.querySelector('[name="Email"]');
const messageInput = document.querySelector('[name="Message"]');

const messageInput = document.querySelector('textarea[name="Message"]');
const rating = document.querySelector('[name=rating]:checked');

if (nameInput.value === '') {
alert('Please enter your name.');
Expand All @@ -399,7 +386,10 @@ function validateForm() {
alert('Please enter your message.');
return false;
}

if (rating === false || rating === null) {
alert("Please select a rating.");
return false;
}

const formData = {
Name: nameInput.value,
Expand All @@ -411,8 +401,11 @@ function validateForm() {
nameInput.value = '';
emailInput.value = '';
messageInput.value = '';
rating.checked = false;

return false;
showModal('Thank you for your feedback!', 'submit feedback');

return false;
}

// EMAIL VALIDATING FUNCTION
Expand Down
17 changes: 10 additions & 7 deletions website/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -931,7 +931,7 @@ footer .contact {

footer input[type="text"],
footer input[type="email"],
footer input[name="Message"],
footer textarea[name="Message"],
footer input[type="submit"] {
backdrop-filter: blur(50px);
box-shadow: 0 0 10px black;
Expand Down Expand Up @@ -1323,7 +1323,7 @@ input {
transition: width 200ms linear;
}

.custom-alert {
.modal {
display: none;
position: fixed;
z-index: 1000;
Expand All @@ -1334,7 +1334,7 @@ input {
background-color: rgba(0, 0, 0, 0.7);
}

.custom-alert-content {
.modal-content {
position: absolute;
top: 50%;
left: 50%;
Expand All @@ -1347,22 +1347,25 @@ input {
border-radius: 4px;
text-align: center;
color: white;
font-size: 1.2rem;
}

.row_buttons {
#modal-buttons {
display: flex;
justify-content: space-around;
justify-content: center;
gap: 25%;
}

.custom-alert button {
.modal button {
margin-top: 20px;
background-color: #efefefeb;
border-radius: 3px;
border: 1px solid white;
padding: 5px 20px 5px 20px;
font-size: 0.9rem;
}

#later {
#close-modal {
color: white;
background-color: #00000000;
}
Expand Down

0 comments on commit 34aafce

Please sign in to comment.