Skip to content

Commit

Permalink
minor changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@swarooppatilx
swarooppatilx committed Oct 21, 2024
2 parents 2e3828b + 9e8d962 commit 25e31d2
Show file tree
Hide file tree
Showing 7 changed files with 2,805 additions and 83 deletions.
2,695 changes: 2,675 additions & 20 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"main": "index.js",
"scripts": {
"test": "npx nodemon app.js",
"dev": "nodemon app.js",
"start": "node app.js",
"lint": "eslint .",
"lint:ejs": "npx ejs-lint views/**/*.ejs",
Expand All @@ -13,6 +14,7 @@
"license": "ISC",
"dependencies": {
"bcrypt": "^5.1.1",
"bcryptjs": "^2.4.3",
"cloudinary": "^1.41.3",
"connect-mongo": "^5.1.0",
"dotenv": "^16.4.5",
Expand Down
62 changes: 43 additions & 19 deletions public/js/client-validation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
rent: document.getElementById('rent'),
price: document.getElementById('price'),
};

// Select all form group elements for error handling
const formGroupElements = form.querySelectorAll('.form-group, .mb-3');

Expand All @@ -27,20 +27,20 @@ document.addEventListener('DOMContentLoaded', () => {
formGroup.appendChild(feedback);
}

feedback.textContent = message; // Set error message
element.classList.add('is-invalid'); // Mark the input as invalid
feedback.textContent = message; // Set error message
element.classList.add('is-invalid'); // Mark the input as invalid
}

// Function to clear all error messages and invalid styles
function clearErrors() {
formGroupElements.forEach(group => {
const feedback = group.querySelector('.invalid-feedback');
if (feedback) {
feedback.textContent = ''; // Clear error message
feedback.classList.remove('d-block'); // Hide feedback
feedback.textContent = ''; // Clear error message
feedback.classList.remove('d-block'); // Hide feedback
}
group.querySelectorAll('.form-control').forEach(input => {
input.classList.remove('is-invalid'); // Remove invalid class
input.classList.remove('is-invalid'); // Remove invalid class
});
});
}
Expand All @@ -49,30 +49,36 @@ document.addEventListener('DOMContentLoaded', () => {
function validateField(field, conditions) {
for (const [check, message] of conditions) {
if (!check()) {
showError(field, message); // Show error if check fails
showError(field, message); // Show error if check fails
return false;
}
}
return true; // Return true if all conditions pass
return true; // Return true if all conditions pass
}

// Event listener for form submission
form.addEventListener('submit', event => {
clearErrors(); // Clear previous errors
let hasErrors = false; // Flag to track validation status
const routeName = form.action.split('/').pop(); // Get the last segment of the action URL
clearErrors(); // Clear previous errors
let hasErrors = false; // Flag to track validation status
const routeName = form.action.split('/').pop(); // Get the last segment of the action URL

// Validate title field
hasErrors |= !validateField(fields.title, [
[() => fields.title.value.trim() !== '', 'Title is required!'],
[() => fields.title.value.length >= 3, 'Title must be at least 3 characters long!'],
[
() => fields.title.value.length >= 3,
'Title must be at least 3 characters long!',
],
]);

// Validate image field
const image = fields.image.files[0];
hasErrors |= !validateField(fields.image, [
[() => image !== undefined, 'Image is required!'],
[() => ['image/jpeg', 'image/png', 'image/gif'].includes(image.type), 'Invalid image type! Only JPEG, PNG, and GIF are allowed.'],
[
() => ['image/jpeg', 'image/png', 'image/gif'].includes(image.type),
'Invalid image type! Only JPEG, PNG, and GIF are allowed.',
],
[() => image.size <= 2 * 1024 * 1024, 'Image size exceeds 2MB!'],
]);

Expand All @@ -85,30 +91,48 @@ document.addEventListener('DOMContentLoaded', () => {
const latPattern = /^-?([1-8]?[0-9](\.\d+)?|90(\.0+)?)$/;
const lonPattern = /^-?((1[0-7][0-9]|[1-9]?[0-9])(\.\d+)?|180(\.0+)?)$/;
hasErrors |= !validateField(fields.latitude, [
[() => latPattern.test(fields.latitude.value.trim()), 'Invalid latitude format!'],
[
() => latPattern.test(fields.latitude.value.trim()),
'Invalid latitude format!',
],
]);
hasErrors |= !validateField(fields.longitude, [
[() => lonPattern.test(fields.longitude.value.trim()), 'Invalid longitude format!'],
[
() => lonPattern.test(fields.longitude.value.trim()),
'Invalid longitude format!',
],
]);

// Validate description field
hasErrors |= !validateField(fields.description, [
[() => fields.description.value.trim() !== '', 'Description is required!'],
[() => fields.description.value.length >= 10, 'Description must be at least 10 characters long!'],
[
() => fields.description.value.trim() !== '',
'Description is required!',
],
[
() => fields.description.value.length >= 10,
'Description must be at least 10 characters long!',
],
]);

// Conditional validation based on route name
if (routeName === 'house') {
hasErrors |= !validateField(fields.rent, [
[() => fields.rent.value.trim() !== '', 'Rent is required!'],
[() => !isNaN(fields.rent.value) && fields.rent.value > 0, 'Invalid rent value!'],
[
() => !isNaN(fields.rent.value) && fields.rent.value > 0,
'Invalid rent value!',
],
]);
}

if (routeName === 'market') {
hasErrors |= !validateField(fields.price, [
[() => fields.price.value.trim() !== '', 'Price is required!'],
[() => !isNaN(fields.price.value) && fields.price.value > 0, 'Invalid price value!'],
[
() => !isNaN(fields.price.value) && fields.price.value > 0,
'Invalid price value!',
],
]);
}

Expand Down
71 changes: 71 additions & 0 deletions public/js/gsap.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
document.addEventListener('DOMContentLoaded', function () {
gsap.registerPlugin(ScrollTrigger);
const tl = gsap.timeline();
tl.fromTo(
'.gsap',
{
y: -100,
opacity: 0,
ease: 'power1.inOut',
},
{
y: 0,
opacity: 1,
duration: 0.5,
stagger: 0.3,
}
);

tl.fromTo(
'.gsap-main',
{
scale: 0,
opacity: 0,
ease: 'power1.inOut',
},
{
scale: 1,
opacity: 1,
duration: 1,
ease: 'power1.inOut',
}
);

gsap.fromTo(
'.gsap-card',
{
y: 200,
opacity: 0,
ease: 'power1.inOut',
},
{
y: 0,
opacity: 1,
duration: 2,
scrollTrigger: {
trigger: '.gsap-card',
start: 'top 92%',
toggleActions: 'play none none none',
},
}
);

gsap.fromTo(
'.gsap-card2',
{
y: 200,
opacity: 0,
ease: 'power1.inOut',
},
{
y: 0,
opacity: 1,
duration: 2,
scrollTrigger: {
trigger: '.gsap-card2',
start: 'top 90%',
toggleActions: 'play none none none',
},
}
);
});
42 changes: 6 additions & 36 deletions views/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>
<script src="js/gsap.js"></script>

<!-- Add service worker -->
<script>
Expand Down Expand Up @@ -190,29 +193,9 @@
</div>
</div>
</div>
</section>

<section class="container mt-5 mb-5 pb-5">
<div class="row">
<div class="col-md-4">
<h3>Welcome to Our Project!</h3>
<p>The Scruter Team is excited to be part of <strong>GSSoC Extended 2024</strong> and <strong>Hacktoberfest
2024</strong>, initiatives that empower global developers to contribute to open-source projects.</p>
</div>
<div class="col-md-4">
<h3>Join Us!</h3>
<p>Our project helps you <strong>discover local services and interact with your community</strong>. We are
enhancing features to improve user experience.</p>
</div>
<div class="col-md-4">
<h3>Get Involved!</h3>
<p>All contributions are welcome! Hacktoberfest is a great way to dive into open source.</p>
</div>
</div>

<section class="container mt-5 mb-5 pb-5">
<p class="text-center"><a href="https://github.com/swarooppatilx/scruter" target="_blank" class="repo-link">
<i class="fab fa-github"></i> GitHub Repository Link</a></p>

<section class="container mt-5 mb-5 pb-5 gsap-card2">
<p class="text-center"><a href="https://github.com/swarooppatilx/scruter" target="_blank" class = "repo-link"> <i class="fab fa-github"></i> GitHub Repository Link</a></p>
</section>
</section>

Expand Down Expand Up @@ -254,8 +237,6 @@

<%- include('partials/footer') %> <%- include('partials/bottom_nav') %>

<%- include('partials/bottom_nav') %>

<!-- Scroll Progress Script -->
<script>
window.onscroll = function () {
Expand All @@ -266,17 +247,6 @@
};
</script>


<script>
window.embeddedChatbotConfig = {
chatbotId: "3y5y_b4ZtgDExQUL8b2_A",
domain: "www.chatbase.co"
}
</script>
<script src="https://www.chatbase.co/embed.min.js" chatbotId="3y5y_b4ZtgDExQUL8b2_A"
domain="www.chatbase.co" defer>
</script>

</body>

</body>
Expand Down
14 changes: 7 additions & 7 deletions views/partials/navbar.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ a {
alt="Scruter Logo"
width="90"
height="30"
class="d-inline-block align-text-top"
class="d-inline-block align-text-top gsap"
/>
</a>
<button
Expand All @@ -184,28 +184,28 @@ a {
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="navbar-links" class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<li class="nav-item gsap">
<a
class="nav-link <%= activeLink === 'home' ? 'active-link' : '' %>"
href="/"
><i class="fa-solid fa-house"></i> Home Page</a
>
</li>
<li class="nav-item">
<li class="nav-item gsap">
<a
class="nav-link <%= activeLink === 'house' ? 'active-link' : '' %>"
href="/house"
><i class="fa-solid fa-city"></i> Housing</a
>
</li>
<li class="nav-item">
<li class="nav-item gsap">
<a
class="nav-link <%= activeLink === 'food' ? 'active-link' : '' %>"
href="/food"
><i class="fa-solid fa-utensils me-2"></i>Food</a
>
</li>
<li class="nav-item">
<li class="nav-item gsap">
<a
class="nav-link <%= activeLink === 'market' ? 'active-link' : '' %>"
href="/market"
Expand All @@ -216,7 +216,7 @@ a {
<div
class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center mt-3 mt-lg-0"
>
<button id="darkModeToggle" style="margin-right: 10px; ">
<button id="darkModeToggle" class="gsap" style="margin-right: 10px; ">
<img src="https://img.icons8.com/?size=100&id=45475&format=png&color=000000" class="toggleMode" id="toggleMode" alt="">
</button>
<% if (user) { %>
Expand Down Expand Up @@ -269,7 +269,7 @@ a {
</div>
</li>
<li>
<a class="dropdown-item text-danger mt-2" href="/logout">
<a class="gsap dropdown-item text-danger mt-2" href="/logout">
<i class="fa-solid fa-sign-out-alt me-2"></i>Logout
</a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion views/partials/searchbar.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- Custom Search Bar -->
<div id="search-bar" class="container my-3">
<div id="search-bar" class="container my-3 gsap-main">
<form id="search-form" method="GET" action="<%= searchAction %>">
<div class="d-flex justify-content-center align-items-center">
<!-- Search Input -->
Expand Down

0 comments on commit 25e31d2

Please sign in to comment.