Code Monkey home page Code Monkey logo

mozahidul01 / dream-team-selection Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 734 KB

This is a react app that lists all of the Bangladesh cricket team's players. You can choose 15 players at random from among all of these players, and then you can choose 11 players at random from among the 15 players you've chosen.

Home Page: https://dream-team-selection.netlify.app/

JavaScript 88.06% HTML 11.55% CSS 0.40%
react-feather reactjs tailwindcss

dream-team-selection's Introduction

Dream Team Selection

Table of contents

Overview

This is a react app that lists all of the Bangladesh cricket team's players. You can choose 15 players at random from among all of these players, and then you can choose 11 players at random from among the 15 players you've chosen. This website can also change theme(dark/light) according to your device theme.

The challenge

  • Show Optimal layout for the site depending on device's screen size
  • Show hover states for all interactive elements on the page
  • Have to use a CSS framework/library
  • Have to create fake data and show that on the website

Screenshot

Desktop View

Desktop Screenshot

Cart View Cart Screenshot

Mobile View

Mobile Screenshot

Links

Built with

  • React Js
  • Tailwind CSS
  • Post CSS
  • React Feather Icon
  • tailwind-scrollbar

What I learned

I have used Tailwind CSS for the first time to develop any website. It was a great learning process for me. I learned a lot about Tailwind CSS. This Project also helps me a lot to under how logic works in Js. It was a fun learning process for me.

Future Plan

I will add some features in the future. In the future users can create an 11 players team from the selected players. Users must select 15 players for creating a team and they can select a maximum of 18 players.

Useful resources

Author

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.