-
-
Weather and covid cases in a particular city. It informs the current information the user has to know before they're all set to travel.
-
Our top picks on the coziest locations. Ranked based on user likability and popularity.
-
Overall look and the city on map for accessibility and knowledge of location.
-
Newly created Twitter account, along with an Rss and Linkedin accounts for the project so as to make it interactive.
-
Meticulously crafted login page to get to know the user. Trouble- free registration and login.
-
Database which contains our user's details put together using MyAdmin.
-
Talk to us, tell us what you liked and where we're supposed to improve. Always delighted to receive queries and feedback.
Travel with TravelWorld
Inspiration
I believe in making something that adds up making our lives easier. Who doesn't like things when they're more simplified. To be honest, the motivation behind our project is trip gone wrong incidents. When the sat in my room to brainstorm ideas, I realized that it was not just me but all of us had some pretty bad travel experiences solely due to misinformation and lack of guidance. I felt that the help of a native person could've made our travel experiences effortless. So here I am, attempting to build something that can assist a lot more people and make their tour easier.
What it does
In short, TravelWorld is a brand new website for looking into your favorite locations, getting current updates and making your travel super easy! Staying on track helps you plan your time and pack your luggage accordingly. You can go over our top picks for guidance, if you like them, click on them and check them out. Get notified of the current information and plan your stay however it suits you. It's a platform completely made for user's comfort and coziness.
How I built it
Since I don't have a proper Hackathon experience, this is my first project. I am really excited to present it to the panel. I've put in hours of hard work and managed to make the final product come out clean and sharp looking. The login and register webpage is made to collect the user credentials for logging into the website. This feature allows trusted reviews about a particular place that the user has already visited. Tourists who are visiting the place for the first time might have numerous issues. They can make use of this particular aspect to get trusted solutions for the problems that they face. The query is sent as a mail to whoever visited that place before through SMTP. APIs such as finding the location of that place and also to fetch the weather conditions are also implemented. I've used Twitter bootstrap to enhance the user experience and for sleek transitions.
Challenges I ran into
During the initial stages of our development, there were plenty of obstacles, I had to refer and learn some coding concept from scratch. The weather API used in the project was a difficult task to do from the beginning. I wanted every part of the site to look personalized and reflect my unique programming style and not snatched. The backend process was tedious nevertheless when I split the work and taught myself, the task at hand became facile. This experience gave me a lot of excitement and sprinkled some confidence for a beginner.
Accomplishments that I'm proud of
Continuing from the previous point I learnt something new from this project. Knowing I had support in finishing the project on time with all the specs I wanted our site to have. I never thought I'd be making APIs and putting together an entire platform within the speculated time. The database I created was an entirely new concept to us. I watched a lot of tutorial videos and went through plenty of sample codes. Even though I really want to win and hope the project tips the scales in our favor, I am absolutely content with the type and quality of the final submission.
What I learned
Before making the project I didn't know how to use phpMyAdmin or MySql, I got an opportunity to learn about making our own customized database. I emphasized on the event being a learning experience . And that's when I knew I set my priorities straight. Locating the cities on the map with respect to their coordinates and linking them into the index file was quite a bit of a challenge. When I resolved it I learned how to move forward by myself.
What's next for Travelworld
Seeing the insufficient number of platforms and value of sites like TravelWorld I plan to expand the target locations all around the globe and provide a wide array of dream destinations. The accessibility factor adds more uniqueness to the project. Considering all this, I've decided to work on the betterment of TravelWorld and promote it. No muss, No fuss, Not a single cuss!
Code snippets
** index HTML **
<div class="row"> <div class="col-lg-2 col-md-3 col-sm-6 col-6"> <a href="london.html" class="mini-box"> <i><img src="assets/images/work-process-item-01.png" alt=""></i> <strong>London</strong> <span></span> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-6"> <a href="paris.html"class="mini-box"> <i><img src="assets/images/work-process-item-01.png" alt=""></i> <strong>Paris</strong> <span></span> </a> </div>
** JS file for weather**
const listItems = list.querySelectorAll(".ajax-section .city"); const listItemsArray = Array.from(listItems); if (listItemsArray.length > 0) { const filteredArray = listItemsArray.filter(el => { let content = ""; //Input city- Paris, fr if (inputVal.includes(",")) { if (inputVal.split(",")[1].length > 2) { inputVal = inputVal.split(",")[0]; content = el .querySelector(".city-name span") .textContent.toLowerCase(); } else { content = el.querySelector(".city-name").dataset.name.toLowerCase(); } } else { // For Paris content = el.querySelector(".city-name span").textContent.toLowerCase(); } return content == inputVal.toLowerCase(); });
Log in or sign up for Devpost to join the conversation.