Skip to content

The Darth Side - Third place entry for the Code Institute May 2024 Hackathon, Code Wars: The Hackathon Strikes Back

Notifications You must be signed in to change notification settings

Danbob81/The-Darth-Side

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Code Wars - May Hackathon 2024

Image of Responsiveness

Visit the deployed site: The Darth Side

Introduction

Problem Statement

The Darth Side is a website designed to provide fans with the opportunity to learn about and test their knowledge on the iconic Darth Vader from the legendary Star Wars franchise.

User Stories

Navigation

  • I want to gain access to the gain access to the Home, About Us, Quiz and Wiki page via the nav bar so that I can understand what areas of the site to visit.
  • I want to able to visually identify what page I am on using the nav bar so that I can know what page I am on.

Home Page

  • I want to be able to view a home page with an image of Darth Vader so that I can understand the theme of the website.
  • I want to have clear options on what areas of the site I should visit so that I understand where the main features of the site are.

About Us

  • I want to view a list of collaborators and their roles so that I can understand who was involved in building the site.

Quiz Page

  • I want to be able to participate in a quiz about Darth Vader so that I can test my knowledge about this character.
  • I want to have multiple choice options so that I have I higher chance of selecting the correct answer.
  • I want to receive a performance based nofication upon completion so that I can see how well I know Darth Vader.
  • I want to be able to refer to the instructions without having to restart the game so that I can have a quick reminder if I forget and continue to play.
  • I want to have Start and Restart buttons so I have some control over the flow of the game.
  • I want to have time limited questions so that the game doesn't take all day.

Wiki Page

  • I want to be able to view a timeline of Darth Vaders life story so that I can learn about the character in a structured way.
  • I want to be able to read text that is relevant to each part of the timeline so that I can learn about specific area that interest me.
  • I want to be able to view a relevant image on each part of the timeline so that I can gain a visual understanding of what happend during this period.

General

  • I want to be able to hear the lightsaber sound when I hover over key areas of the site so that I can feel like I am part of the Star Wars verse.

Criteria

  • Project is Star Wars themed

  • The website is centred around the antagonist of the original Star Wars trilogy: Darth Vader.

  • Well-executed project with effective planning using GitHub Projects and a basic README.md

  • Agile methodology was used by appointing a Scrum Master (Micah) and utilising a Kanban board on GitHub in order to prioritise and organise tasks.

  • The project uses Star Wars sound effects

  • When hovering over 'Team ChewHakkas' on the homepage, Chewbaccas signature growl is heard.

  • Lightsaber sounds are heard when hovering over boxes on the homepage.

  • Darth Vader's voice is heard at the end of the quiz.

  • Project demonstrates responsiveness, accessibility, and thorough testing

  • Project was designed with a mobile first approach. BootStrap was utilised to ensure responsiveness across all screen sizes.

  • The site was continually manually tested by members throughout development.

  • Please read the TESTING.md document for further evidence of testing.

  • Fun and entertaining presentation

  • A video presentation was created using OBS.

  • The presentation was presented as a 'recruitment to the Empire' presentation in order to add entertainment value.

Design

  • Hero image of Darth Vader
  • We focused our design around the character of Darth Vader. He wears a dark hooded cloak and carries a red lightsaber. The Star Wars universe also uses a distinctive font which we utilised on our site. Hover effects were used to create a light blurred effect around the edges of buttons on the site - to emulate a lightsaber.

Wireframes

  • The Darth Side site planning wireframe

Colour scheme

  • Colour palette - black, red, gunmetal
  • The colour scheme was chosen to match the costume of Darth Vader but also to provide enough contrast for accessibility reasons.

Font

We chose to use Rubik for the main text and SF Distant Galaxy Font by ShyFoundry (which we renamed to 'starwars' for ease of use) for headings.

Accessibility

  • The colour scheme was run through a Web Accessibility Colour Contrast Checker to ensure good contrast for colours.
  • Aria labels were added so that users with screen readers can access the site more easily.

Responsiveness

  • Bootstrap has been utilised through the site which provides great responsiveness on a range of devices. We have also used custom media queries where required (for example on the 404 page).

Features

Home Page

Home Page Responsive Image

Quiz

Quiz Page Responsive Image

  • The Quiz uses 10 questions from a bank of 16 randomised questions which are shuffled to give the quiz repeatability.
  • There is a 60 second timer to complete the whole quiz.
  • There is an option to restart the quiz throughout by use of a 'Restart' button.
  • At the end of the quiz, you can review your answers before you restart the quiz.
  • A different message/voiceover is shown dependent on your score on the quiz.

Wiki Page

Wiki Page Responsive Image

  • Information is displayed in the form of a timeline.
  • When each time-frame is clicked on, a box appears containing the relevant information for that time frame. The box disappears again when clicked.

About Page

About Page Responsive Image

404 Page

404 Page Responsive Image

Tech used

  • HTML
  • CSS
  • JavaScript
  • Bootstrap (Version 4.6) CSS framework
  • TinyPNG - For compressing images
  • Birme - To convert images to WEBP format

Credits

Media

Images:

Most of the images used are from StarWars.com.

We created our avatar images using Doll Divine

Sound Effects:

Quiz resources

Team

Releases

No releases published

Packages

No packages published

Languages

  • HTML 72.4%
  • JavaScript 11.8%
  • CSS 11.4%
  • Dockerfile 2.3%
  • Python 1.1%
  • Shell 1.0%