Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added some customization #47

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Added some customization #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f51637d
Added some customization
wasifafridi25 Dec 11, 2023
55d987d
Update README.md
wasifafridi25 Dec 11, 2023
d34eb2d
Adding walkthrough gif
wasifafridi25 Dec 11, 2023
7b923ea
Add link for walkthrough
wasifafridi25 Dec 11, 2023
482d8a5
Add link for walkthrough
wasifafridi25 Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 15 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,37 @@
# WEB102 Prework - *Name of App Here*
# WEB102 Prework - *Sea Monster Crowdfunding*

Submitted by: **Your Name Here**
Submitted by: **Bhuiyan Shadman Wasif**

**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
**Sea Monster Crowdfunding** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.

Time spent: **X** hours spent in total
Time spent: **17** 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.
* [x] The introduction section explains the background of the company and how many games remain unfunded.
* [x] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games.
* [x] The Our Games section initially displays all games funded by Sea Monster Crowdfunding
* [x] 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:

* [ ] List anything else that you can get done to improve the app functionality!
* [x] Added an anchor tag in the navbar which when clicked will take the user to the game section.
* [x] Added an input field in the game section where the user can search for any specific game and if it matches with the name of any of our games only those matched games will be displayed.
* [x] Added some styling to the game section to make it stand out a bit more.
* [x] Added hover effects on the 3 buttons: Show Unfunded Only, Show Funded Only and Show All Games.
* [x] Added a footer.

## Video Walkthrough

Here's a walkthrough of implemented features:

<img src='http://i.imgur.com/link/to/your/gif/file.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
<img src='walkthrough.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />

<!-- Replace this with whatever GIF tool you used! -->
GIF created with ...
GIF created with [LiceCap](https://licecap.en.softonic.com/) for Windows
<!-- Recommended tools:
[Kap](https://getkap.co/) for macOS
[ScreenToGif](https://www.screentogif.com/) for Windows
Expand Down
108 changes: 65 additions & 43 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,85 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- header row with logo -->
<div class="header">
<img id="tentacles" src="assets/tentacles.png">
<h1 class="header-text">Sea Monster Crowdfunding</h1>
</div>
<main>

<!-- background info about company -->
<h2>Welcome to Sea Monster!</h2>
<div id="description-container">
<p>The purpose of our company is to fund independent games. We've been in operation for 12 years.</p>
</div>
<div class="header">
<div class="header__left">

<img id="tentacles" src="assets/tentacles.png" />
<h1 class="header-text">Sea Monster Crowdfunding</h1>
</div>
<a class="game__section--navLink" href="#games">
<h1 >Our Game Section</h1>
</a>
</div>

<!-- top games & other interesting stats -->
<h2>Stats</h2>
<div class="stats-container">
<div class="stats-card">
<h3>Individual Contributions</h3>
<p id="num-contributions">
<div class="spacing">


<!-- background info about company -->
<h2>Welcome to Sea Monster!</h2>
<div id="description-container">
<p>
The purpose of our company is to fund independent games. We've been in
operation for 12 years.
</p>
</div>
<div class="stats-card">
<h3>Total Raised</h3>
<p id="total-raised">
</p>

<!-- top games & other interesting stats -->
<h2>Stats</h2>
<div class="stats-container">
<div class="stats-card">
<h3>Individual Contributions</h3>
<p id="num-contributions"></p>
</div>
<div class="stats-card">
<h3>Total Raised</h3>
<p id="total-raised"></p>
</div>
<div class="stats-card">
<h3>Total Number of Games</h3>
<p id="num-games"></p>
</div>
</div>
<div class="stats-card">
<h3>Total Number of Games</h3>
<p id="num-games">
</p>
<div class="stats-container" id="top-games">
<div class="stats-card" id="first-game">
<h3>🥇 Top Funded Game</h3>
</div>
<div class="stats-card" id="second-game">
<h3>🥈 Runner Up</h3>
</div>
</div>
</div>
<div class="stats-container" id="top-games">
<div class="stats-card" id="first-game">
<h3>🥇 Top Funded Game</h3>

<!-- list of games funded by Sea Monster -->
<div class="game__section" id="games">
<div>
<h2>Our Games</h2>
<p>Check out each of our games below!</p>
</div>
<div>
<input type="text" placeholder="Search by game name" id="searchGame">
</div>
</div>
<div class="stats-card" id="second-game">
<h3>🥈 Runner Up</h3>
<div id="button-container">
<button id="unfunded-btn">Show Unfunded Only</button>
<button id="funded-btn">Show Funded Only</button>
<button id="all-btn">Show All Games</button>
</div>
<div id="games-container"></div>
</div>

<!-- list of games funded by Sea Monster -->
<h2>Our Games</h2>
<p>Check out each of our games below!</p>
<div id="button-container">
<button id="unfunded-btn">Show Unfunded Only</button>
<button id="funded-btn">Show Funded Only</button>
<button id="all-btn">Show All Games</button>
</div>
<div id="games-container">

</div>
</main>
<footer>
<p>Copyright &copy; CodePath, Bhuiyan Shadman Wasif, 2023</p>
</footer>

<script type="module" src="index.js"></script>
</body>
</html>

</html>
Loading