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:
- Node.js (LTS version or higher)
- npm (Node Package Manager)
Getting Started
Follow the steps below to run the SvelteKit project locally:
- Clone the repository:
git clone https://github.com/your-username/sveltekit-emoji-project.git
cd sveltekit-emoji-project
- Install the dependencies:
npm install
- Start the development server:
npm run dev
- Open your web browser and navigate to
http://localhost:5173to 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! 😊
