Skip to content

Noroff-FEU-Assignments/cross-course-project-Mathias-Gausl--aug22-FT

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GameHub (cross-course-project)

Automated E2E Testing Automated Unit Testing

image

Description

This is a webiste build for Game Hub, a fictional online game store that sells both new and used games.The products on the site are stored on WordPress and use the REST API to fetch them. The color scheme on the site is mostly blue and white and is WCAG-compliant.The site is responsively built and the layout of the site is a simple single-column grid for mobile with horizontal scroll sections on the homepage. For desktop, I mainly use a three-column grid system to display content.

Homepage

The homepage has a featured section, an on-sales section, and a News section. The navigation has links to six pages, the product page, the used game page, the login page, the about us page, the contact page, and the cart page. for small screens the three column grid changes to a horizontal scroll.

Products

The product page fetches the products from WordPress and displays them in a three-column grid for desktop and a single-column grid for mobile. The page has a search bar and a sorting function.

Used games page

Works almost the same as the product page but only includes games that are categorized as used.

Login and signup page

On this page, users can log in or signup, has an eye icon where users can choose to hide or show their password.

Contact page

The contact page includes information about contacting the store and a contact form.

About us page

The about us page has one section with information about the store.

Design:

  • Typeface: Dosis (body text), Kontakt (headings)
  • colors: dark blue for background (1B203D), white for text
  • layout: single-column grid (mobile), three-coumn grid (Desktop)
  • Responsive Design

Functionality:

  • Working cart (using local storage)
  • Detailed page dynamically built using JS.
  • All forms are validated using JS
  • Products are stored and fetched from WorldPress
  • Product page got Search and Sort Functionality

Built With

  • JS
  • HTML
  • CSS
  • WorldPress

Running

https://creative-salamander-5aa1fe.netlify.app

Contact

My email address: [email protected]

About

cross-course-project-mathiasg12 created by GitHub Classroom

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published