SCout

• 

  Home Page

• 

  Event Page

• 

  Day Trips Page

• 

  Modal Pop-Up Example

• 

  Activities Page

• 

  Menu Page

• 

  Menu Button and Hover

Finally have a weekend off but don’t know what to do? Still a stranger to your (new) city? Feeling stressed over planning and your miniscule budget? At SCout, we’ve got you covered! From academic adventures to food frenzies, follow our various experiences to enrich your college experience and explore your city until it becomes home.

Strangers to LA, we’ve been conflicted by desires to explore the diverse offerings of this gorgeous city yet limited by our budgets and information. After all, we can’t really shell out a couple thousand dollars for a jet ski trip or a few hundred for certain shopping complexes, and it’s incredibly frustrating to do hours and days of research for only a couple hours of satisfaction. And, some areas are safer to uber to while others you can save by taking a bus. So, we decided to pioneer the changes we wanted to see in the world, hoping to create community and foster growth and love for college students and their new cities through our website SCout.

INSPIRATION:

Inspired by our unfamiliarity with our new city, as well as frustrations with resources available to help us learn said new city, we’ve decided to become the change and create a site for college students based on an actual college student’s budget, complete with beautiful sights, delicious food and more to grow through exploration of ourselves and our new home, LA.

WHAT IT DOES:

With SCout, you can look at pre-planned day trips, restaurants/bars, upcoming events, and activities for weekday/weekend leisure.

THE BUILDING PROCESS:

Our website was created using HTML-CSS-Javascript. Utilizing Domain.com we linked our code to our domain name, scoutting.tech. Our website was then deployed through our GitHub Repository.

On our Home Page, you will see our Title and Logo, University Drop-Down Menu, Navigation Bar, Image Slideshow, and information about the creators of this project. Our default university is USC, our host school. Selecting different universities will ideally change the location settings and suggestions for each suggestion page on the site. Our Navigation Bar is equipped to be utilized on every page. On the bottom of each page is a button that allows the user to return to the top of the page.

The back-to-top button utilizes JS. Essentially. it was for an onClick() event called by the user when the user clicks on the button. Once it does, our script gets the button’s element and calls our scrollToTopFunction

Selecting the ‘Events’ tab in the Navigation Bar will direct you to our Events Page where we utilized data from Google's Cloud API to generate a list of local events. Each event option is linked to its corresponding event host site.

Moving to the ‘Day Trips’ tab will direct you to the Day Trips Page. Here you will find blog posts about suggested day trip opportunities in your area. Each day trip features a modal with information about the suggested trip.

The modal and see more buttons run using javascript. When a user clicks the button, it calls an on-click event to the code. The code receives the ID of the button and displays the modal that corresponds with the button. When the user clicks elsewhere, the modal disappears by turning the display to none.

Our Activities tab will direct you to the Activities Page where a multitude of different opportunities to explore and get to know your city within a college-student’s budget are recommended.

Our last tab, “Restaurants & Bars” leads you to our final page where restaurants and bars in the surrounding area are listed. Each card lists information about the location, hours, and price with a direct link to the restaurant’s menu.

CHALLENGES:

We were met with many challenges throughout the duration of this project. Since most of us weren’t very familiar with HTML/CSS, we were learning the language as we went and often encountered problems we didn’t immediately know how to solve. Most of the issues we experienced were related to the format of our website, in that we were able to add what we needed, but not where we wanted it. We spent a majority of our time looking up ways to move, align, and format the elements of the website into what we visualized in the beginning. Though we were met with many roadblocks, we persevered, tackling every challenge we were handed, and successfully crafted a beautiful site.

ACCOMPLISHMENTS WE’RE PROUD OF:

We’re proud of the way our format turned out. Despite the setbacks and challenges, our site looks sleek and elegant. We’re proud of the content of our site too, from the pretty transitions and information displayed on Daytrips to the look and tags of Activities to the playfulness mixed with informative essence present in Restaurants/Bars.

WHAT WE LEARNED:

As most of us weren’t familiar with HTML/CSS, we learned how to utilize many aspects of website development, from utilization of photo cards to modals to formatting and the language itself. Since many of our tasks were often related to each other, the repetition of making/changing each element made learning the material and applying it to other aspects easier.

In addition, through research about the area and compilation of our own experiences, we’ve discovered new places to explore throughout the area for our next lazy weekend. Our bucket lists have expanded, and we’re eager to fall further in love with LA and its wonderful offerings.

Built With

• css
• html
• javascript