Skip to content

malmgrenola/bowling-alley

BranchesTags

Repository files navigation

Bowling Alley

Website for a bowling alley where the site's users are customers that would like to bowl and eat.

Live site location:

Bowling Alley Website

last deployment

badge

Live site screenshot: screenshot image

Table of Contents

UX

Features

Technologies Used

Testing

Development & Deployment

Credits

UX

The site owners goal is to get more lane bookings and dinner reservations & present the alley and its services to the potential customers. The current available activities are bowling, billiards, birthday party bowling & eat & drink in the restaurant.

The website's typical user is a young to mid aged customer with their cell phone that would like to do activities with friends later the same day or near future. Another category is a typical mid age person, with children, using the website on the computer and would like to arrange a children birthday party or bowl with friends.

Site screenshots is found here.

Site wireframes:

Features

The website contains a clear navigation on every page. The site is based on a navigational hierarchical tree structure. Navigation bar is responsive and will fold down to a burger menu when it wont fit the size. On mobile (small screen) devices hamburger menu should contain quick access to social media links. Current page is highlighted in the navigation bar.

Navigation bar wireframe example

  • Navigation items:
    • Home (the logo is also a link to home)
    • Bowling
    • Billiards/Snooker
    • Find us
    • Restaurant
    • Booking

Each page includes a footer element containing all the necessary information needed at a glance for the user. This would include links to social media platforms, address information & opening hours. Additional elements such as booking rules download, gdpr information, vacancy Section could also be found in the footer at a later stage. The footer element is responsive and should flow with the device screen size. Footer wireframe example

  • Footer items:
    • Opening hours
      • Sunday to Thursday 13:00 to 22:00
      • Friday to Saturday 13:00 to 02:00
      • Holidays 13:00 to 02:00
    • Find us
      • Address (link to map)
      • phone
      • email
    • Social
      • Facebook
      • Instagram
      • Twitter
      • Youtube
      • Tripadvisor
      • Linkedin

Each page needs a hero image acting as identification for the section. Where needed the hero image also contains the page header.

Existing Features

  • Provide information on the bowling alley's location, opening hours & contact details.
  • Bowling alley activities
    • Bowling section - allows users to see prices and navigate to booking form
    • Billiards section - allows users to see prices and navigate to booking form
    • Children's birthday party Section
  • Restaurant section - allows users to see menu
  • Booking form
  • Newsletter signup

Site content

Bowling content

Here at Bowling Alley you and your friends can enjoy bowling on the greatest lanes with the finest equipment. All our lanes are oiled daily to max out your bowling experience. Our bowling balls span from the lightest 6lb to the heaviest 14lb with grip sizes all the way from XXS to XXL and we have all sizes of shoes you would ever need. For the youngest the shoes are velcro fastening ones.

Price per lane and hour is USD 35. max 6 people per lane and shoes are included in the price.

It is possible to order drinks and snacks from the bar at any time. Water is always available without charge.

Book your bowling today!

Bowling birthday party content

Book the awesome birthday party here at Bowling Alley. We will make the party fantastic, fun, easy and unforgettable! The kids get unlimited bowling, unlimited drinks and unlimited snacks during the birthday event. There is always a dedicated Party Host available.

Price per birthday party is USD 25 per person.

Book a birthday party today!

Billiards content

Enjoy classic billiards! On Bowling Alley you can play billiards and Snooker. Table's and accessories have the highest available standard.

Price per table is USD 35. max 4 people can play per table.

It is possible to order drinks and snacks from the bar at any time. Water is always available without charge.

Book a table now!

Find us content

Bowling Alley 115 AZ-66, Seligman, AZ 86337 USA

Phone: 555 123 456 Email: [email protected]

maplink

Restaurant content

Dine Never be hungry! Our restaurant offers menus that will leave you speechless. Try our burgers or chicken wings! Our restaurant is Open! Download menu

Wine You can always find a good spot for a glass of wine in our bar area. The selection of good wines is frequently updated but we always keep your favourites available. Download menu

Style Information

Selected Typefaces:
  • Logo: Playball, cursive
  • Header: Lato, sans-serif
  • Text: Raleway, sans-serif
Color Scheme

The sites color schema wireframe

color schema examples

/* Bowling alley colors */
.bowling-alley-1-hex {
  color: #3f0061;
}
.bowling-alley-2-hex {
  color: #003c61;
}
.bowling-alley-3-hex {
  color: #18614a;
}
.bowling-alley-4-hex {
  color: #613901;
}
.bowling-alley-5-hex {
  color: #61291a;
}

Features Left to Implement

  • Add footer elements such as booking rules download, gdpr information, vacancy Section.
  • Propper backend for newsletter signup & booking form

Technologies Used

In this section all of the languages, frameworks, libraries, and any other tools that is used to construct this project is mentioned. For each, name, a link to its official site and a short sentence of why it was used is provided.

  • HTML5
  • CSS
  • Bootstrap
    • Grid feature is used to help layout the website.
    • Modal is used to catch forms, since forms backend is not implemented yet
  • Google Maps static API
    • For the find us map (key is restricted)

Testing

All HTML and CSS is validated with W3C Validator

As specified in User's guide for the W3C Markup Validator calls can be made to the validator. This site validator test are specified below in this section.

Amazon Device Farm is used for device testing Selected devices is targeted:

  • Samsung Galaxy A40 (OS 9.0)
  • Samsung Galaxy S9 (OS 8.0.0)
  • Samsung Galaxy Tab S4 (OS 8.1.1)
  • Apple iPhone 11 (OS 13.1.3)
  • Apple iPad Pro 11 (OS 12.1)
  • Apple iPhone 12 Pro Max (OS 14.3)
  • Apple Macbook Pro (Chrome, Safari, Firefox)
  • Asus ZenBook (Chrome, Microsoft Edge, Firefox)

Login for accounts to Device services 1Password Please contact Ola Malmgren for access.

Iterate all user stories in the UX Section and ensure that they all work as intended, with the project providing an easy and straightforward way for the users to achieve their goals.

No automated Tests is set up for this project.

  1. Validator tests, confirm no errors on each file listed.

    1. validate style.css
    2. validate index.html
    3. validate activities.html
    4. validate booking.html
    5. validate findus.html
    6. validate landing-booking.html
    7. validate landing-newsletter.html
    8. validate restaurant.html
  1. Layout & External links:
    1. confirm that the user can see and book all available activities (including birthday party) on activities.html, index.html & landing-newsletter.html in the activities section.
    2. confirm all social media icons correctly linked and open a blank page on the footer section on every page, findus.html & the hamburger menu on a mobile device.
    3. confirm correct opening hours on index.html in the opening hours section & on footer section on every page.
    4. confirm correct contact information and links (street, tel & email) opens a blank page on footer section on every page, findus.html & index.html.
    5. confirm correct download of menu & that it opens a blank page on restaurant.html
    6. confirm that there are no missing images on all pages (use devtools / network).
  2. Forms:
    1. navigate to local index.html -> newsletter signup section.
    2. confirm that faulty address feedback error to the user.
    3. confirm that submit takes user to landing-newsletter.html
    4. navigate to local booking.html.
    5. confirm faulty input in all form elements.
    6. confirm that submit takes user to landing-booking.html
  3. Lighthouse Scoring
    1. open devtools / lighthouse in google chrome and press "Generate report" for Desktop device & Mobile Devices.
    2. Confirm results and correct if needed.

Known issues

This section mentions interesting bugs or problems discovered during the testing, also not addressed items.

1 - Social Links

Social icons & links on site have the url's set to generic social media sites and not to any propper social account.

2 - Newsletter & Booking form Form

Newsletter signup & booking form ends up on a fake landing page & nothing is sent to the server side at all.

4 - Address information

All address, email & phone information on websites is a fake.

5 - Restaurant downloadable menu pdf

The resturamenu is currently without proper content.

6 - switch between landscape and portrait

On some devices the switch between landscape and portrait misaligns the scrollbar.

Landscape menu that "grows" under the screen cant be scrolled with bootstrap on most mobile devices.

It's confirmed here that pre-scrollable class in Bootstrap v4.x has been removed in Bootstrap version 5.

The scroll issue is fixed by using this css fix in style.css

On windows using Explorer or Firefox (latest version) with a screen height smaller than the collapsed menu height will cause an extra scrollbar on the right hand side.

7 - CSS Warnings

-moz-transition,-webkit-transition & -o-transition is still in style.css file even if it seems like they could most likely be removed.

Based on comments, for example here and the fact that code institute keeps them in their examples, decision is to not remove code at this point.

Development & Deployment

Development on this site happens primary on branch main. branch main also acts as a staging environment.

If you would like to contribute please fork repo and open pull requests. Before opening pull requests, please confirm all items in Testing section in this document.

Deployment is done by opening a Pull Request and merge to branch 'production'. Only changes to website code will be deployed to production branch.

This site is currently deployed with gitHub Pages. The branch 'production' and the "/(root)" folder is used. Deployment url: https://malmgrenola.github.io/bowling-alley/

How to deploy is found here.

local development can be previewed as local files in the browser without any http-server.

Tools

Any text IDE can be used. Atom (with prettier) is recommended.

Credits

Content

Media

The photos used in this site were obtained from:

The Download menu feature were obtained from:

Acknowledgements

I received inspiration for this project from:

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages