feat: create website for location mapping service #225
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
📝 WalkthroughWalkthroughThis PR introduces a complete static location-focused website featuring an embedded Google Maps integration, responsive design with mobile menu, smooth scroll navigation, parallax hero section, contact form with validation, toast notifications, fade-in animations, and a full design system using CSS variables. Includes documentation, HTML markup, vanilla JavaScript functionality, and comprehensive styling. Changes
Sequence DiagramssequenceDiagram
actor User
participant Navbar
participant JavaScript
participant DOM
participant NotificationSystem
participant Google Maps
User->>Navbar: Click menu button
activate Navbar
Navbar->>JavaScript: Trigger toggle event
JavaScript->>DOM: Toggle mobile menu visibility
deactivate Navbar
User->>Navbar: Click nav link
activate Navbar
Navbar->>JavaScript: Trigger click event
JavaScript->>JavaScript: Calculate scroll offset
JavaScript->>DOM: Scroll to target anchor
JavaScript->>DOM: Auto-close mobile menu
deactivate Navbar
User->>DOM: Scroll page
activate JavaScript
JavaScript->>DOM: Check scroll position
JavaScript->>Navbar: Update navbar style (scrolled state)
JavaScript->>DOM: Apply parallax transform to hero
JavaScript->>DOM: Trigger fade-in for visible elements
deactivate JavaScript
User->>DOM: Fill and submit contact form
activate JavaScript
JavaScript->>JavaScript: Serialize form data
JavaScript->>NotificationSystem: Show success message
NotificationSystem->>DOM: Display toast notification
NotificationSystem->>DOM: Auto-dismiss after delay
JavaScript->>DOM: Reset form fields
deactivate JavaScript
participant PageLoad
PageLoad->>JavaScript: Page load event
activate JavaScript
JavaScript->>DOM: Show loading animation
JavaScript->>Google Maps: Load map iframe
alt Map loads successfully
Google Maps->>JavaScript: Load event
JavaScript->>DOM: Remove loading animation
else Map fails to load
Google Maps->>JavaScript: Error event
JavaScript->>DOM: Display fallback map UI with link
end
deactivate JavaScript
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Fix all issues with AI agents
In `@location-website/index.html`:
- Around line 113-114: The external anchor element (the <a> tag with class
"link" and href "https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" that uses
target="_blank") should include rel="noopener noreferrer" to prevent reverse
tabnabbing; update that anchor (and any other anchors using target="_blank") to
add rel="noopener noreferrer" alongside the existing attributes.
- Around line 20-30: The mobile menu button (id "mobileMenuBtn", class
"mobile-menu-btn") lacks accessible labeling/state; add an aria-label (e.g.,
"Toggle navigation menu"), an aria-expanded="false" attribute initially, and
aria-controls pointing to the navigation list (give the <ul class="nav-links"> a
matching id like "navLinks"); then update the toggle handler (the script that
listens to mobileMenuBtn clicks) to flip aria-expanded between "true" and
"false" and manage focus/keyboard interaction accordingly when opening/closing
the menu.
- Around line 97-105: The iframe src is using a maps.app.goo.gl short-link which
is unreliable for embedding; update the iframe src to use the official Google
Maps Embed API pattern (e.g., replace the current src value with an embed URL
like https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=YOUR_LOCATION
or the direct embed URL produced by Google Maps' Share → Embed a map) and ensure
you supply a valid API key and an address/place name or Place ID instead of the
maps.app.goo.gl link so the <iframe> loads consistently across browsers.
In `@location-website/script.js`:
- Around line 171-178: The flicker occurs because you set
document.body.style.opacity = '0' inside the window.addEventListener('load',
...) handler which briefly shows the page before the handler runs; instead set
the initial hidden state before the page renders (e.g., via CSS or an inline
style/class applied on first paint) and only transition to opacity '1' inside
the load handler (the code inside window.addEventListener('load', ...) should
only trigger the reveal, not set the initial opacity). Update the code that
currently manipulates document.body.style.opacity and
document.body.style.transition so the initial opacity is applied pre-render (CSS
or inline) and the load handler only performs the timeout/opacity-to-1 action.
- Around line 204-210: The anchor element that opens the Google Maps fallback
(the <a> tag with href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7") uses
target="_blank" without rel attributes; update that anchor to include
rel="noopener noreferrer" to prevent the opened page from getting access to
window.opener and to mitigate security/referrer leakage while keeping the
existing styles and target behavior intact.
- Around line 2-15: The mobile menu toggles visual state but doesn't update
ARIA; modify the handlers for mobileMenuBtn click and the '.nav-links a' link
clicks to update mobileMenuBtn.setAttribute('aria-expanded', 'true') when
navLinks becomes active and 'false' when it is closed, and ensure mobileMenuBtn
and navLinks are checked for null before use and that an initial aria-expanded
('false' if closed, 'true' if open) is set on mobileMenuBtn (referencing
mobileMenuBtn and navLinks and the existing event listeners).
🧹 Nitpick comments (2)
location-website/styles.css (1)
527-631: Add a reduced‑motion mode for accessibility.
Disabling animations for users who opt out improves accessibility.♿ Suggested CSS addition
+@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + * { + animation: none !important; + transition: none !important; + } +}location-website/script.js (1)
67-114: Avoid injecting a new<style>tag per toast.
This grows the DOM over time; inject once or move styles to CSS.♻️ Suggested approach (single injection)
+let notificationStylesInjected = false; function showNotification(message, type = 'success') { @@ - const style = document.createElement('style'); - style.textContent = ` + if (!notificationStylesInjected) { + const style = document.createElement('style'); + style.textContent = ` `@keyframes` slideIn { @@ - } - `; - document.head.appendChild(style); + } + `; + document.head.appendChild(style); + notificationStylesInjected = true; + }
Comment on lines
+20
to
+30
| <ul class="nav-links"> | ||
| <li><a href="#home">Home</a></li> | ||
| <li><a href="#about">About</a></li> | ||
| <li><a href="#location">Location</a></li> | ||
| <li><a href="#contact">Contact</a></li> | ||
| </ul> | ||
| <button class="mobile-menu-btn" id="mobileMenuBtn"> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </button> |
Contributor
There was a problem hiding this comment.
Add accessible labeling/state to the mobile menu button.
Screen readers won’t know what the button does or whether the menu is open.
🔧 Suggested HTML update
- <ul class="nav-links">
+ <ul class="nav-links" id="primaryNavigation">
@@
- <button class="mobile-menu-btn" id="mobileMenuBtn">
+ <button class="mobile-menu-btn"
+ id="mobileMenuBtn"
+ aria-label="Open navigation menu"
+ aria-expanded="false"
+ aria-controls="primaryNavigation">🤖 Prompt for AI Agents
In `@location-website/index.html` around lines 20 - 30, The mobile menu button (id
"mobileMenuBtn", class "mobile-menu-btn") lacks accessible labeling/state; add
an aria-label (e.g., "Toggle navigation menu"), an aria-expanded="false"
attribute initially, and aria-controls pointing to the navigation list (give the
<ul class="nav-links"> a matching id like "navLinks"); then update the toggle
handler (the script that listens to mobileMenuBtn clicks) to flip aria-expanded
between "true" and "false" and manage focus/keyboard interaction accordingly
when opening/closing the menu.
Comment on lines
+97
to
+105
| <iframe | ||
| src="https://maps.google.com/maps?q=https://maps.app.goo.gl/WGPfXcfGZzczsQcM7&output=embed" | ||
| width="100%" | ||
| height="450" | ||
| style="border:0;" | ||
| allowfullscreen="" | ||
| loading="lazy" | ||
| referrerpolicy="no-referrer-when-downgrade"> | ||
| </iframe> |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Google Maps embed API official URL format documentation
💡 Result:
Official Google Maps Embed API URL format documentation (Google for Developers): “Embed a map” page. [1]
Base URL format
https://www.google.com/maps/embed/v1/{MAP_MODE}?key=YOUR_API_KEY&{PARAMETERS}
Supported {MAP_MODE} values include: place, view, directions, streetview, search. [1]
Example
https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Eiffel+Tower,Paris+France
[1]
Sources
- [1] Google Maps Platform Docs — “Embed a map” (Maps Embed API): https://developers.google.com/maps/documentation/embed/embedding-map
🌐 Web query:
maps.app.goo.gl short link in iframe q parameter reliability
💡 Result:
maps.app.goo.gl/... links are Google Maps “short” Firebase Dynamic Links / deep links, primarily meant to open the Maps app or route through device/browser-specific redirects—not to be used as a stable iframe src. As a result, they’re not reliable for embedding: redirects can fail or behave differently across browsers (e.g., some browsers show “Dynamic Link Not Found”), and the target/redirect chain can change over time. [3]
Also, maps.app.goo.gl has historically supported redirect-style parameters (e.g., ?link=...) and has been discussed as an abuse vector (open-redirect style behavior), which is another reason to avoid treating it as a stable embed URL. [4]
What to use instead (reliable):
- Use the official Maps Embed API
iframeURL formats, whereqis a documented parameter (supports place name/address/Plus Code/Place ID). [1][2]- Example pattern:
https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=...[1][2]
- Example pattern:
- Or use Google Maps UI: Share → Embed a map, and use the provided
google.com/maps/embed?...URL (these are meant for iframes). (This aligns with common embed guidance; the shortmaps.app.goo.glshare link is for sharing/deep linking, not embedding. [2])
Use the official Google Maps Embed API format.
Using a short-link (maps.app.goo.gl) inside the q= parameter is unreliable—these Firebase Dynamic Links are designed for deep linking to the Maps app, not iframe embedding, and fail inconsistently across browsers.
🔧 Suggested change (use the official Maps Embed API)
- <iframe
- src="https://maps.google.com/maps?q=https://maps.app.goo.gl/WGPfXcfGZzczsQcM7&output=embed"
+ <iframe
+ src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=YOUR_LOCATION"
width="100%"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">Replace YOUR_API_KEY with a valid Google Maps Embed API key and YOUR_LOCATION with the place name, address, or Place ID.
Alternatively, use Google Maps' Share → Embed a map feature to generate the embed URL directly.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <iframe | |
| src="https://maps.google.com/maps?q=https://maps.app.goo.gl/WGPfXcfGZzczsQcM7&output=embed" | |
| width="100%" | |
| height="450" | |
| style="border:0;" | |
| allowfullscreen="" | |
| loading="lazy" | |
| referrerpolicy="no-referrer-when-downgrade"> | |
| </iframe> | |
| <iframe | |
| src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=YOUR_LOCATION" | |
| width="100%" | |
| height="450" | |
| style="border:0;" | |
| allowfullscreen="" | |
| loading="lazy" | |
| referrerpolicy="no-referrer-when-downgrade"> | |
| </iframe> |
🤖 Prompt for AI Agents
In `@location-website/index.html` around lines 97 - 105, The iframe src is using a
maps.app.goo.gl short-link which is unreliable for embedding; update the iframe
src to use the official Google Maps Embed API pattern (e.g., replace the current
src value with an embed URL like
https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=YOUR_LOCATION or
the direct embed URL produced by Google Maps' Share → Embed a map) and ensure
you supply a valid API key and an address/place name or Place ID instead of the
maps.app.goo.gl link so the <iframe> loads consistently across browsers.
Comment on lines
+113
to
+114
| <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" target="_blank" class="link">Open in Google Maps →</a> | ||
| </div> |
Contributor
There was a problem hiding this comment.
Add rel="noopener noreferrer" to external links opened in a new tab.
This prevents reverse tabnabbing.
🔧 Suggested fix
- <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" target="_blank" class="link">Open in Google Maps →</a>
+ <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" target="_blank" rel="noopener noreferrer" class="link">Open in Google Maps →</a>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" target="_blank" class="link">Open in Google Maps →</a> | |
| </div> | |
| <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" target="_blank" rel="noopener noreferrer" class="link">Open in Google Maps →</a> | |
| </div> |
🤖 Prompt for AI Agents
In `@location-website/index.html` around lines 113 - 114, The external anchor
element (the <a> tag with class "link" and href
"https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" that uses target="_blank") should
include rel="noopener noreferrer" to prevent reverse tabnabbing; update that
anchor (and any other anchors using target="_blank") to add rel="noopener
noreferrer" alongside the existing attributes.
Comment on lines
+2
to
+15
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); | ||
| const navLinks = document.querySelector('.nav-links'); | ||
|
|
||
| mobileMenuBtn.addEventListener('click', () => { | ||
| mobileMenuBtn.classList.toggle('active'); | ||
| navLinks.classList.toggle('active'); | ||
| }); | ||
|
|
||
| // Close mobile menu when clicking on a link | ||
| document.querySelectorAll('.nav-links a').forEach(link => { | ||
| link.addEventListener('click', () => { | ||
| mobileMenuBtn.classList.remove('active'); | ||
| navLinks.classList.remove('active'); | ||
| }); |
Contributor
There was a problem hiding this comment.
Keep ARIA state in sync with the mobile menu.
aria-expanded should toggle with the menu state.
🔧 Suggested JS update
-const mobileMenuBtn = document.getElementById('mobileMenuBtn');
-const navLinks = document.querySelector('.nav-links');
+const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+const navLinks = document.querySelector('.nav-links');
+
+if (mobileMenuBtn && navLinks) {
+ mobileMenuBtn.addEventListener('click', () => {
+ const isOpen = mobileMenuBtn.classList.toggle('active');
+ navLinks.classList.toggle('active');
+ mobileMenuBtn.setAttribute('aria-expanded', String(isOpen));
+ });
+
+ document.querySelectorAll('.nav-links a').forEach(link => {
+ link.addEventListener('click', () => {
+ mobileMenuBtn.classList.remove('active');
+ navLinks.classList.remove('active');
+ mobileMenuBtn.setAttribute('aria-expanded', 'false');
+ });
+ });
+}
-
-mobileMenuBtn.addEventListener('click', () => {
- mobileMenuBtn.classList.toggle('active');
- navLinks.classList.toggle('active');
-});
-
-// Close mobile menu when clicking on a link
-document.querySelectorAll('.nav-links a').forEach(link => {
- link.addEventListener('click', () => {
- mobileMenuBtn.classList.remove('active');
- navLinks.classList.remove('active');
- });
-});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); | |
| const navLinks = document.querySelector('.nav-links'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| mobileMenuBtn.classList.toggle('active'); | |
| navLinks.classList.toggle('active'); | |
| }); | |
| // Close mobile menu when clicking on a link | |
| document.querySelectorAll('.nav-links a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenuBtn.classList.remove('active'); | |
| navLinks.classList.remove('active'); | |
| }); | |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); | |
| const navLinks = document.querySelector('.nav-links'); | |
| if (mobileMenuBtn && navLinks) { | |
| mobileMenuBtn.addEventListener('click', () => { | |
| const isOpen = mobileMenuBtn.classList.toggle('active'); | |
| navLinks.classList.toggle('active'); | |
| mobileMenuBtn.setAttribute('aria-expanded', String(isOpen)); | |
| }); | |
| // Close mobile menu when clicking on a link | |
| document.querySelectorAll('.nav-links a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenuBtn.classList.remove('active'); | |
| navLinks.classList.remove('active'); | |
| mobileMenuBtn.setAttribute('aria-expanded', 'false'); | |
| }); | |
| }); | |
| } |
🤖 Prompt for AI Agents
In `@location-website/script.js` around lines 2 - 15, The mobile menu toggles
visual state but doesn't update ARIA; modify the handlers for mobileMenuBtn
click and the '.nav-links a' link clicks to update
mobileMenuBtn.setAttribute('aria-expanded', 'true') when navLinks becomes active
and 'false' when it is closed, and ensure mobileMenuBtn and navLinks are checked
for null before use and that an initial aria-expanded ('false' if closed, 'true'
if open) is set on mobileMenuBtn (referencing mobileMenuBtn and navLinks and the
existing event listeners).
Comment on lines
+171
to
+178
| // Add loading animation | ||
| window.addEventListener('load', () => { | ||
| document.body.style.opacity = '0'; | ||
| document.body.style.transition = 'opacity 0.5s ease'; | ||
|
|
||
| setTimeout(() => { | ||
| document.body.style.opacity = '1'; | ||
| }, 100); |
Contributor
There was a problem hiding this comment.
Prevent the load‑time opacity flash.
Setting opacity to 0 inside the load handler causes a visible flicker.
🔧 Suggested fix
-window.addEventListener('load', () => {
- document.body.style.opacity = '0';
- document.body.style.transition = 'opacity 0.5s ease';
-
- setTimeout(() => {
- document.body.style.opacity = '1';
- }, 100);
-});
+document.body.style.opacity = '0';
+document.body.style.transition = 'opacity 0.5s ease';
+window.addEventListener('load', () => {
+ setTimeout(() => {
+ document.body.style.opacity = '1';
+ }, 100);
+});🤖 Prompt for AI Agents
In `@location-website/script.js` around lines 171 - 178, The flicker occurs
because you set document.body.style.opacity = '0' inside the
window.addEventListener('load', ...) handler which briefly shows the page before
the handler runs; instead set the initial hidden state before the page renders
(e.g., via CSS or an inline style/class applied on first paint) and only
transition to opacity '1' inside the load handler (the code inside
window.addEventListener('load', ...) should only trigger the reveal, not set the
initial opacity). Update the code that currently manipulates
document.body.style.opacity and document.body.style.transition so the initial
opacity is applied pre-render (CSS or inline) and the load handler only performs
the timeout/opacity-to-1 action.
Comment on lines
+204
to
+210
| <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" | ||
| target="_blank" | ||
| style=" | ||
| color: #2563eb; | ||
| text-decoration: none; | ||
| font-weight: 600; | ||
| "> |
Contributor
There was a problem hiding this comment.
Add rel="noopener noreferrer" to the fallback Google Maps link.
Same security concern as other target="_blank" links.
🔧 Suggested fix
- <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7"
- target="_blank"
+ <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7"
+ target="_blank"
+ rel="noopener noreferrer"
style="
color: `#2563eb`;
text-decoration: none;
font-weight: 600;
">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" | |
| target="_blank" | |
| style=" | |
| color: #2563eb; | |
| text-decoration: none; | |
| font-weight: 600; | |
| "> | |
| <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| style=" | |
| color: `#2563eb`; | |
| text-decoration: none; | |
| font-weight: 600; | |
| "> |
🤖 Prompt for AI Agents
In `@location-website/script.js` around lines 204 - 210, The anchor element that
opens the Google Maps fallback (the <a> tag with
href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7") uses target="_blank" without
rel attributes; update that anchor to include rel="noopener noreferrer" to
prevent the opened page from getting access to window.opener and to mitigate
security/referrer leakage while keeping the existing styles and target behavior
intact.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.