DogWalking is a responsive web app built with PHP and JavaScript. This site was built as a marketing tool for a dog walking/sitting company.
One of the most notable features is a dynamic image gallery that repopulates every time the parent article is opened. To properly display these images, this site takes advantage of the fslightbox.js library.
The contact form was developed with PHP's PHPMailer library using an external SMTP server. The form leverages Ajax to submit the contact request seamlessly and intuitively as well as displaying any mailing error codes to the client.
This site is based from a template found on the web. Below are the original creators' comments about the template: This is Dimension, a fun little one-pager with modal-ized "pages" and a cool depth effect (click on a menu item to see what I mean). Simple, fully responsive, and kitted out with all the usual pre-styled elements you'd expect. Hope you dig it :)
These are some resources I found helpful while creating this project. If you want to build something similar and don't know where to start, skim these resources alongside the dogWalking source code.
Displaying Random image with JS
Dynamically populating JavaScript image array
Original Template: Dimension by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the DogWalking - A Responsive Web App for Dog Walking/Sitting Services
DogWalking is a responsive web app designed to serve as a marketing tool for a dog walking and sitting company. The app is built using PHP and JavaScript to provide users with an engaging experience. Here are some key features of the project: Features:
- Image Gallery
One of the standout features of DogWalking is its dynamic image gallery. The gallery repopulates every time the parent article is opened, providing users with fresh and appealing images of dog walking and sitting services. This feature is implemented using the fslightbox.js library, which enhances the visual experience for visitors.
fsLightbox Documentation 2. Contact Form
The contact form is a crucial component of the web app, allowing potential clients to get in touch seamlessly. It is developed using PHP's PHPMailer library and is configured to use an external SMTP server for reliable email delivery. The form also leverages Ajax to submit contact requests intuitively, providing real-time feedback to users. In case of any mailing errors, the app displays error codes to the client, ensuring a smooth user experience.
PHPMailer common errors 3. Responsive Design
DogWalking is fully responsive, ensuring that it looks and functions well on various devices and screen sizes. This responsive design is crucial for providing a consistent and user-friendly experience to both desktop and mobile users. 4. Disclaimer
Please note that this web app is based on a template originally created by the following developers:
"Dimension" by HTML5 UP
html5up.net
@ajlkn
Licensed under the CCA 3.0 license (html5up.net/license)
The template is simple, fully responsive, and includes pre-styled elements, making it a great starting point for your project. Resources:
If you're interested in building a similar project or need additional guidance, consider exploring these resources alongside the DogWalking source code:
Dockerizing LEMP
Displaying Random Image with JavaScript
Dynamically Populating JavaScript Image Array
Credits: Original Template:
Dimension by HTML5 UP
html5up.net
@ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Icons:
Font Awesome
fontawesome.io
Libraries and Tools:
fsLightbox
PHPMailer
jQuery
Responsive ToolsCCA 3.0 license (html5up.net/license)
Icons: Font Awesome (fontawesome.io)