Create the leaderboard skeleton using webpack

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+    "env": {
+      "browser": true,
+      "es6": true,
+      "jest": true
+    },
+    "parser": "babel-eslint",
+    "parserOptions": {
+      "ecmaVersion": 2018,
+      "sourceType": "module"
+    },
+    "extends": ["airbnb-base"],
+    "rules": {
+      "no-shadow": "off",
+      "no-param-reassign": "off",
+      "eol-last": "off",
+      "import/extensions": [ 1, {
+        "js": "always", "json": "always"
+      }]
+    },
+    "ignorePatterns": [
+      "dist/",
+      "build/"
+    ]
+  }

.github/workflows/linters.yml

@@ -0,0 +1,70 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  lighthouse:
+    name: Lighthouse
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "18.x"
+      - name: Setup Lighthouse
+        run: npm install -g @lhci/cli@0.7.x
+      - name: Lighthouse Report
+        run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
+  webhint:
+    name: Webhint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "18.x"
+      - name: Setup Webhint
+        run: |
+          npm install --save-dev hint@7.x
+          [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
+      - name: Webhint Report
+        run: npx hint .
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "18.x"
+      - name: Setup Stylelint
+        run: |
+          npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
+          [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
+      - name: Stylelint Report
+        run: npx stylelint "**/*.{css,scss}"
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "18.x"
+      - name: Setup ESLint
+        run: |
+          npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
+          [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
+      - name: ESLint Report
+        run: npx eslint .
+  nodechecker:
+    name: node_modules checker
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+      - name: Check node_modules existence
+        run: |
+          if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi

.gitignore

@@ -0,0 +1 @@
+node_modules

.hintrc

@@ -0,0 +1,18 @@
+{
+  "connector": {
+    "name": "local",
+    "options": {
+      "pattern": ["**", "!.git/**", "!node_modules/**"]
+    }
+  },
+  "extends": ["development"],
+  "formatters": ["stylish"],
+  "hints": [
+    "button-type",
+    "disown-opener",
+    "html-checker",
+    "meta-charset-utf-8",
+    "meta-viewport",
+    "no-inline-styles:error"
+  ]
+}

.stylelintrc.json

@@ -0,0 +1,20 @@
+{
+    "extends": ["stylelint-config-standard"],
+    "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
+    "rules": {
+      "at-rule-no-unknown": [
+        true,
+        {
+          "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
+        }
+      ],
+      "scss/at-rule-no-unknown":  [
+        true,
+        {
+          "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
+        }
+      ],
+      "csstree/validator": true
+    },
+    "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
+  }

MIT.md

@@ -0,0 +1,19 @@
+Copyright 2022, OBI EMMANUEL CHIGOZIE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1 +1,98 @@
-# Leaderboard
+📗 Table of Contents
+📖 About the Project
+🛠 Built With
+Key Features
+🚀 Live Demo
+💻 Getting Started
+Setup
+Prerequisites
+Install
+Usage
+Run tests
+Deployment
+👥 Authors
+🔭 Future Features
+🤝 Contributing
+⭐️ Show your support
+🙏 Acknowledgements
+❓ FAQ (OPTIONAL)
+📝 License
+📖 Leaderboard
+The leaderboard website displays scores submitted by different players. It also allows you to submit your score.
+
+🛠 Built With
+HTML(HTML-5).
+CSS(Flexbox).
+javaScript (ES6, ES6-Modules).
+★ webpack.
+Gitflow.
+Linters.
+Key Features
+In this project:
+Add items dynamically to the UI
+Use NPM.
+Use webpack.
+Use webpack-cli.
+Use css-loader.
+Use style-loader.
+Modify webpack.config.js
+use HtmlWebpackPlugin.
+Setup local dev server
+Add Linters for HTML/CSS.
+
+(back to top)
+
+
+💻 Getting Started
+To get a local copy up and running, follow these steps. 
+1 - clone Repo. git@github.com:Gmanlove/Leaderboard.git
+
+2- Install npm (node pakage manager) you can run any one of these commands to install npm on your machine:
+
+npm i
+
+npm install
+
+sudo apt install npm
+
+to install globally, just add a -g or --global after the install or i
+
+npm i -g
+
+sudo apt install -g npm
+
+(back to top)
+
+👥 Authors
+👤 Author
+
+GitHub: @Gmanlove
+(back to top)
+
+🔭 Future Features
+ Use Leaderboard API
+(back to top)
+
+🤝 Contributing
+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)
+
+🙏 Acknowledgments
+I would like to thank all Microverse community.
+
+(back to top)
+
+(back to top)
+<!-- LICENSE -->
+
+## 📝 License <a name="license"></a>
+
+This project is [MIT](./MIT.md) licensed.

dist/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+     <title>Leaderboard</title>
+  <script defer src="runtime.js"></script><script defer src="main.js"></script></head>
+  <body>
+    <header class="first-header">
+      <h3 class="heading"> A Web Page</h3>
+      <div class="nav-link">
+        <nav>
+          <ul class="nav-icons">
+            <li><a href="#"><i class="fa fa-arrow-left fa-xl fa-icon" aria-hidden="true"></i></a></li>
+            <li><a href="#"><i class="fa fa-arrow-right fa-xl fa-icon" aria-hidden="true"></i></a></li>
+            <li><a href="#"><i class="fas fa-times fa-xl fa-icon"></i></a></li>
+            <li><a href="#"><i class="fa fa-home fa-xl fa-icon" aria-hidden="true"></i></a></li>
+
+          </ul>
+        </nav>
+        <input type="text" id="link" placeholder="https://"/>
+        <button type="submit"><i class="fa fa-search fa-xl" aria-hidden="true"></i></button>
+      </div>
+    </header>
+
+    <main class="main-head">
+      <h1 class="head-word">Leaderboard</h1>
+      <div class="main-container">
+        <div class="new">
+          <h2 class="new-head">Recent scores
+            <button type="reset" class="reload">Refresh</button>
+          </h2>
+          <table>
+            <tbody>
+              <tr>
+                <td>Name: 100</td>
+            </tr>
+            <tr>
+                <td>Name: 20</td>
+            </tr>
+            <tr>
+                <td>Name: 50</td>
+            </tr>
+            <tr>
+                <td>Name: 78</td>
+            </tr>
+            <tr>
+                <td>Name: 125</td>
+            </tr>
+            <tr>
+                <td>Name: 77</td>
+            </tr>
+            <tr>
+                <td>Name: 42</td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="adding">
+          <h2 class="adding-head">Add your score</h2>
+          <form class="input-mark">
+            <input id="add-name" type="text" placeholder="Your name" required/>
+            <input id="add-score" type="number" placeholder="Your score" required/>
+            <button type="submit" class="submit">Submit</button>
+        </form>
+        </div>
+      </div>
+    </main>
+    <div id="footer">
+      <footer>
+
+      </footer>
+    </div>
+  </body>
+</html>