Emoji Project

This repository contains a SvelteKit project that utilizes a Web API to fetch emoji details and displays them on a web page. The project fulfills the minimum requirements of displaying emojis in a card layout with response parameters such as name, category, group, and HTML code. Additionally, the design is responsive for mobile, tablet, and desktop views.

View Project Live on: https://sveltekit-emoji-project.vercel.app/

To run this project locally, ensure that you have the following minimum requirements installed on your machine:

  1. Node.js (LTS version or higher)
  2. npm (Node Package Manager)

Getting Started

Follow the steps below to run the SvelteKit project locally:

  1. Clone the repository:
git clone https://github.com/your-username/sveltekit-emoji-project.git
cd sveltekit-emoji-project
  1. Install the dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your web browser and navigate to http://localhost:5173 to see the running project.

Features Implemented

Web API to Fetch Emoji Details

The project uses the Emoji API provided by emojihub.yurace.pro to fetch emoji details. The API returns response parameters like name, category, group, and HTML code for each emoji.

Emoji Display and Card Layout

All emojis fetched from the API are displayed on the web page using a card layout. Each card shows the emoji along with its name, category, group, and HTML code.

Responsive Design

The project's design is responsive and adapts to different screen sizes, including mobile, tablet, and desktop views. This ensures a consistent user experience across various devices.

Visually Interactive Design

The design of the web page is visually interactive, making it more engaging for users. Users can see the emoji details displayed in a user-friendly manner.

Plus Point (Intermediate)

Filter by Category

In addition to the minimum requirements, this project also includes a feature to filter the displayed emojis by "category." Users can use this filter to view emojis belonging to specific categories.

Pagination

To improve the user experience, the project implements a pagination feature that lists 10 emojis per page. Users can navigate through different pages to explore more emojis.

Conclusion

Thank you for checking out the SvelteKit Emoji Project! We hope you find it helpful and informative. If you have any questions or feedback, please feel free to reach out to the project maintainers.

Happy coding! 😊

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes