Code Monkey home page Code Monkey logo

leaderboard's Introduction

Leader board app

๐Ÿ“— Table of Contents

๐Ÿ“– Leader board App

I developed a leaderboard using HTML, CSS, JavaScript, and APIs. This project aims to create a simple and intuitive interface that allows users to track their scores and compare their rankings with others.๐Ÿ‘Œ

๐Ÿ›  Built With

Tech Stack

  • HTML-5
  • CSS3
  • Java Script ES 6
  • Linters
  • webpack
Client

(back to top)

(back to top)

๐Ÿ’ป Getting Started

  • To get a local copy up and running, follow these steps.

Prerequisites

  • You only need a browser to run the html file in.
  • A web browser: You will need a modern web browser such as Google Chrome, Mozilla Firefox, or Safari to view and test your project. A code editor: You will need a code editor such as Visual Studio Code, Sublime Text, or Atom to write, edit, and manage your project's files. A local server: You will need a local server such as XAMPP or WAMP to run your project locally and test it on your own computer. Knowledge of HTML, CSS, and JavaScript: You will need to have a basic understanding of HTML, CSS, and JavaScript in order to build a web development project. Familiarity with Git and GitHub: If you are using Git and GitHub to manage your project's codebase, you will need to be familiar with how to use them.

Setup

  • Create a new folder to store the files in.
  • Open a command-line interface (e.g. Terminal on Mac or Linux, Command Prompt on Windows). Navigate to the folder where you want to clone the repository using the cd command. Use the git clone command followed by the repository's URL to clone the repository. For example: git clone https://github.com/techmoves/Leaderboard.git Press enter and wait for the repository to finish cloning.

Install

Install this project with:

  • Open your command prompt or terminal and run.

  • git clone [https://github.com/techmoves/Leaderboard.git]

  • Clone the repository to your local machine using the git clone command as described in the previous answer. Navigate to the project folder using a command-line interface such as Terminal or Command Prompt. Install any necessary dependencies using a package manager such as NPM or Yarn. You can do this by running the npm install or yarn install command in the project folder. Start the local server using a command such as npm start or yarn start, depending on the project's setup. Open a web browser and navigate to the local server's URL to view and test the project.

Usage

  • Assuming that you have installed the project's dependencies and started the local server, you can run the project by following these steps:

Open a web browser such as Google Chrome, Mozilla Firefox, or Safari. In the address bar, type the URL of the local server that you started in the previous step. This will typically be something like http://localhost:3000. Press enter to navigate to the local server's URL. The project should now be running in your web browser. Use the website's interface to interact with the project and test its functionality.

Run tests

To run tests, run the following command:

  • To run tests run :
  • npx hint .
  • npx stylelint "*/.{css,scss}"
  • modules

Key Features

  • Added index.html file
  • Added styles.css
  • Added index.js file
  • Used Modular JS

๐Ÿ‘ฅ Authors

๐Ÿ‘ค Phelelani Ndlovu

(back to top)

๐Ÿ”ญ Future Features

Features to be added:

  • [Learder board add score]
  • [leader board add and and refresh]
  • [Set Local Storage]
  • [add list]

(back to top)

๐Ÿค Contributing

Understand the project's goals: Before I start contributing to a project, it's important to understand its goals, scope, and target audience. Read the project's documentation and review its codebase to get a sense of what it does and how it works.

Create a new issue: If you I find an existing issue that matches your contribution, consider creating a new one. sure about the problem or feature request clearly and provide any relevant details or context.

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page

(back to top)

โญ๏ธ Show your support

Give a โญ๏ธ if you like this project!

(back to top)

(back to top)

๐Ÿ™ Acknowledgments

i would like to thank the Microverse team for this project

(back to top)

๐Ÿ“ License

This project is MIT licensed.

(back to top)

leaderboard's People

Contributors

techmoves avatar

Stargazers

 avatar  avatar

Watchers

 avatar

leaderboard's Issues

Improve Styling

The current functionality of the user profile page is effective and serves its purpose well.
However, the user profile page has a simplistic and minimalistic design, which may not fully engage users and fails to provide an aesthetically pleasing experience. While the core functionality is intact, enhancing the styles would significantly improve the overall user experience and make the page more visually appealing.

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.