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(); });
Share this project:

Updates