search

CodingGarden / seedling-school-01-frontend-project

For your first project, you will build a frontend website with HTML, CSS and JavaScript. The website will communicate and integrate with a 3rd party Web API.
MIT License
105 stars 14 forks source link

YuGiOh Deck Builder #21

Open TWDcarlos opened 5 years ago

TWDcarlos commented 5 years ago

Project Name / Title

YuGiOh Deck Builder

Your Name / Title

Carlos

Project Description

Users can quickly build, edit and delete Decks for YuGiOh.

What 3rd Party Web API do you plan to use?

Which of the following describes you:

mertcanekiz commented 5 years ago

Damn, I wish I knew about this API so I could do it instead... I don't think there are a lot of YGO players here though, so let me know if you need help with testing or want some feedback. Good luck :+1:

TWDcarlos commented 5 years ago

I'm waiting... i don't know if i can already start on it! thanks

TWDcarlos commented 5 years ago

Home - WireFrame initial home

TWDcarlos commented 5 years ago

App - WireFrame initial app

w3cj commented 5 years ago

Description looks okay. To save user deck configurations, you will need something like local storage, index db or web sql. Determine which one you will use and update the project description.

For the second wireframe, it might help to show the application in multiple states (multiple wireframes) and describe how the user will navigate between the screens i.e. searching, adding to deck, single card view, deck stats view etc.

Also, I'd like you to think through and write out how the user will interact with the app. Maybe these questions will help you, (you don't have to answer all of them, and the app does not have to be that complicated, but I think it will help you to focus on what this app will do):

Sorry if that is information overload, but it seems like there are a lot of different directions you can take this app. I would like you to have a clear vision before getting started!

Please update your description and then comment here when you get started or if you'd like more feedback.

TWDcarlos commented 5 years ago

To save users decks i will use Local Storage.

I don't really understand the second question. You mean add like a Tab with screen to Deck, Search Card, Deck Stats ?

How will the user search for a card to add to the deck ?

For now i'll stick with just search by card name. but later on i can add filters to type, atk, def etc.

How will the user know when their deck is finished ?

On YuGiOh the deck is finished when you have 40 or more card and 60 or less cards. one deck also contain a extra deck (for fusion, etc) and a side deck (for cards for quick change), but i will leave it as a stretch for now.

Will you show stats about the deck ?

Maybe as a stretch

Will you show an alert if a certain card has already been added to the deck ?

Some kind of message should pop up when this happen. there are cards on YuGiOh that you can only add 1 or 2, the normal is 3.

Will you show pre-built / configured decks that the user can use as a base to modify ?

Maybe as a stretch

TWDcarlos commented 5 years ago

I Start to use Bulma as my CSS Framework, but I got frustrated and Bulma Docs don't have a search bar. So i will change to bootstrap. CSS is my nemesis.

w3cj commented 5 years ago

Yeah a lot of those things I mentioned would be stretch goals, but I wanted to be clear what the base functionality will be.

Feel free to get started!

TWDcarlos commented 5 years ago

I can't find a free loading gif!

w3cj commented 5 years ago

Here are a few I found on giphy:

https://media.giphy.com/media/wQn3SlhHnVmaQ/source.gif

https://media.giphy.com/media/OVRmUzOHzorLy/source.gif

You can also find free ones here: https://loading.io/ and here: http://loadinggif.com/

w3cj commented 5 years ago

Any updates to share?

TWDcarlos commented 4 years ago

I'm trying to make a router. When the user go to 'app#deck' they see deck view. When go to 'app#dashboard' they can search cards.

mahendrjy commented 4 years ago

Helpful Resources

Simple Solution for SPA

HTML

<nav></nav>
<main>
  <section class="page-1">
    <div id="dashboard"></div>
  </section>

  <section></section>

  <section class="page-2">
    <div id="deck"></div>
  </section>
</main>
<footer></footer>

CSS

.none {
  display: none;
}

JavaScript

const page1 = document.querySelector('.page-1');
const page2 = document.querySelectorAll('.page-2');

const showPage1 = () => {
  page1.style.display = '';
  page2.style.display = 'none';
};

const showPage2 = () => {
  page1.style.display = 'none';
  page2.style.display = '';
}
};

showPage1();

// dashBoardButton.addEventListener('click', showPage1);
// deckButton.addEventListener('click, showPage2);
TWDcarlos commented 4 years ago

I'm sorry, i don't see this and i make the router using the url.

the project is deployed here

mahendrjy commented 4 years ago

It's ok :+1:

w3cj commented 4 years ago

Deployed site looks good! Would you like a code review or ui review?

TWDcarlos commented 4 years ago

Code Review please, I already know that the UI of the site is ugly.