Skip to content

Shepe1304/web102_prework

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WEB102 Prework - Sea Monster Crowdfunding

Submitted by: Quynh Giang Ho (Shepe1304)

Sea Monster Crowdfunding is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.

Time spent: 10 hours spent in total

Required Features

The following required functionality is completed:

  • The introduction section explains the background of the company and how many games remain unfunded.
  • The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games.
  • The Our Games section initially displays all games funded by Sea Monster Crowdfunding.
  • The Our Games section has three buttons that allow the user to display only unfunded games, only funded games, or all games.

The following optional features are implemented:

  • Users can now navigate to the Our Games section quickly by clicking the "Our Games" button on the navigation bar.
  • A search bar is implemented so that the user can look up the games they care about. The result shows all of the games that include at least one word from the search input.
  • Filter buttons now stay on the page even when the user has scrolled down past its original position. This helps the user avoid having to scroll back all the way to find the filter buttons.
  • A styling change is included to indicate which filter is in effect.
  • For aesthetics, buttons take 0.15s to transition when hovered on, and some minor CSS changes are made.
  • Making the website Responsive.

Video Walkthrough

Here's a walkthrough of implemented features:

Video Walkthrough

GIF created with Chrome Capture - screenshot & GIF

Notes

There are a few challenges that I encountered while doing this project. Firstly, I have used Git before, but mostly to store my code after I have finished the whole project. Therefore, there were many instances that I forgot to push my progress to GitHub. This is a shortcoming I have acknowledged and fixed with enthusiastic effort at the end of the project. Secondly, I needed to slow down to figure out which functions I really needed and wanted to implement due to the many ideas that I had for customizing the website. It was a reflective process to inspect the current design at that time and decide what was the best thing to do, such as making the filter stay in place for the convenience of the user. Lastly, I had to ocassionally stop to think about how I should implement the ideas that I had for the Customization part. While trying to implement these optional features, I went through many trials and errors to find what works best.

License

Copyright [yyyy] [name of copyright owner]

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 75.4%
  • CSS 13.1%
  • HTML 11.5%