Skip to content

This project is a web application that provides information about different countries. It allows users to explore details such as the continent, capital, area, and population of various countries. Users can also view comments and add their own insights about specific countries.

License

Notifications You must be signed in to change notification settings

M-Anwar-Hussaini/JavaScriptCapstone

Repository files navigation

📗 Table of Contents

📖 [Most Visitied Countries]

[Most Visitied Countries] is a web application that provides information about different countries. It allows users to explore details such as the continent, capital, area, and population of various countries. Users can also view comments and add their own insights about specific countries. The application utilizes the Involvement API to enable features like liking countries and commenting. It offers a user-friendly interface with pop-up windows to display country information and interact with the community through comments. The project aims to provide an engaging platform for users to learn and share knowledge about different countries.

🛠 Built With

  1. HTML
  2. CSS
  3. BootStrap
  4. JavaScript
  5. WebPack
  6. LightHouse
  7. WebHint
  8. Styelint
  9. ESLint
  10. Git
  11. Github
  12. APIs
  13. Jest

Tech Stack

Markup
  • HTML
  • MD markup
Style
  • CSS
  • Bootstrap
Dynamic
  • JavaScript
  • WepPack
  • APIs

Key Features

  • 🔰 [Display countries with thier informations]
  • 🔰 [Asynchronous javascript functionality]
  • 🔰 [Professional design]
  • 🔰 [Good look and feel]
  • 🔰 [Responsive]

(back to top)

🚀 Live Demo

  • Click to see live demo and watch this video for project short descriptions.

(back to top)

💻 Getting Started

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

  1. Download or clone this repostory.
  2. Provide a browser.
  3. Open the ./dist/index.html file using webpage browser.

Prerequisites

In order to run this project you need:

  • Git installed in your machine.
  • ✔ Sign in or sign up to your Github account.
  • ✔ A professional editer such as VS Code.
  • ✔ An Updated web browser such as Google Chrome, you can download it from here.
  • Node.js installed in your machine.
  • ✔ Lighthouse.
  • ✔ Webhint
  • ✔ Stylelint
  • ✔ ESLint
  • ✔ WebPack
npm init -y
npm install --save-dev hint@7.x
npx hint .
  • ✔ Stylelint
npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
  • ✔ ESLint
npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x

Configuring WebPack

  1. Initialize package.json:
npm init y
  1. Install webpack:
npm install webpack webpack-cli --save-dev
  1. Install CSS style loader:
npm install --save-dev style-loader css-loader

Setup

  • Clone this repository to your desired folder:

  • Example commands:

  cd [YOUR FOLDER]
  git clone https://github.com/M-Anwar-Hussaini/JavaScriptCapstone.git

Install

  • Install this project by cloning or downloading the master branch of this repository and run index.html file on the root of repository.

Usage

  • To run the project, execute the following command:
 cd [YOUR FOLDER]
 git clone https://github.com/M-Anwar-Hussaini/JavaScriptCapstone.git

Run tests

  1. WebHint ☑
npx hint .
  1. Stylelint ☑
npx stylelint "**/*.{css,scss}"
  1. ESLint ☑
npx eslint .

Deployment

This project is deployed by the author, no permission for deployment by any other client.

(back to top)

👥 Authors

👤 Mohammad Anwar Hussaini

👤 Sergio Usma

(back to top)

🔭 Future Features

  • [Release Version]
  • [Host to a server]
  • [Use bootstrap framework]
  • [Use developer local storage]

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project, kindly drop a start for the repository;

(back to top)

🙏 Acknowledgments

I would like to thank the following individuals and organizations for their contribution to this project.

  • 🙏We would like to express my heartfelt gratitude to Microvere for the invaluable learning experience they have provided. The supportive community, dedicated mentors, and remote collaboration opportunities have enhanced my technical skills and prepared me for real-world projects. I extend my appreciation to the mentors and staff members for their guidance and support. The friendships and knowledge sharing within the Microverse community have made this journey truly rewarding.

(back to top)

📝 License

This project is MIT licensed.

(back to top)

About

This project is a web application that provides information about different countries. It allows users to explore details such as the continent, capital, area, and population of various countries. Users can also view comments and add their own insights about specific countries.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published