Recruitment Test for Frontend Position

Welcome to the recruitment test for the Frontend position at our company! The test aims to assess your programming skills, problem-solving abilities, and understanding of web development concepts. Please read the instructions for each task carefully before starting.

Keep in mind

• Please use real Github accounts, we want to check your contributions history. Since we use, create, and contribute to open source.
• Everyone work with the same set of information, to let us fairly judge your work.
• We are answering questions only when it's strictly necessary.
• The test is designed in a way, that can confuse you or seems weird because we want to test you in a way worse environment than you will work on a daily basis. It's also not a representation of the tech stack we are using in real projects.
• You can use any web technology you want. (Task 1 you can use any language you want)

Before you start

• Create a repository on GitHub. Keep it publicly available.
• Complete each task in its designated folder and provide clear instructions on how to run your code.
• Take into account User Experience (UX) and ensure the user interface is usable and responsive.
• Include all assets and resources necessary to run your project.

Evaluation

We will evaluate your solutions based on the following criteria:

• Code quality and readability.
• Functionality and correctness of the implemented tasks.
• User Experience (UX) design in Task 2 and Task 3.
• Proper validation and error handling.

Let's get started! 🚀

📚 Task 1 - Fundamental Programming

Write a function to reverse the elements of a given array while keeping special characters in their original positions. The function should handle dynamic changes in the array and special character positions. For example:

Input:

['n', 2, '&', 'a', 'l', 9, '$', 'q', 47, 'i', 'a', 'j', 'b', 'z', '%', 8]

Expected Output:

[8, 'z', '&', 'b', 'j', 'a', '$', 'i', 47, 'q', 9, 'l', 'a', 2, '%', 'n']

Note:

Your solution must possess the arcane art of dynamic adaptability. Even as the positions of special characters shift, their places must remain unchanged in your solution's wake.

🐾 Task 2 - Fetching Canine Insights 🐶

Meet Kennim, our customer. He's a wizard who's passionate about dogs and their sub-breeds. He's have a new project in mind, and he's seeking your assistance to bring it to fruition. 🧙‍♂️

I, Kennim, seek to weave a web tapestry showcasing the grandeur of dog breeds and their intricate sub-categories. Picture this: a realm where dog images and names grace the canvas, and the magic of hovering reveals all the sub-breeds.

But wait, there's more enchantment to be had! Behold, a table unveiling all dog breeds and their sub-categories, complete with the power to summon search and filter spells, custom-tailored for dog names and sub-breeds. 🐕✨

---

Create a web page that fetches data from the Dog API, display the following information:

📜 Page 1 - Glimpse of Wonders

This image is just a mockup, you should use your creativity to make it look better.

• List all the dog breeds
• Show the dog image and name
• Add hover state to dog image to show dog sub-breeds
• Don’t use any CSS library or framework
• Follow the UI Mockup to complete this task.

Mockup for Dog API <|> API: https://dog.ceo/dog-api/

| The grid needs to be responsive.

📜 Page 2 - Command and Conquer: Manage, Search, and Filter

• Create a table with all dogs and sub-breeds (no image needed)
• Create a search input to filter the data by dog's name or sub-breeds
• Add a way to sort the data by dog's name or sub-breeds
• Create a simple CRUD based on API (save data locally, you can use a variable, local storage, session or cookie, whatever you think is the better option)

May your journey be filled with bountiful discoveries, and your creation kindle the brilliance of canine revelation! 🌟

🎮 Task 3 - Interactive Memory Game

This image is just a mockup, you should use your creativity to make it look better.

Behold, as Kennim, enraptured by your prior feats, beckons you once more. His mind hungers for challenge, his memory thirsts for test. 🧠 He envisions a realm of cards, where pairs align, challenging the boundaries of his memory. He yearns for an experience of visual delight, a seamless dance between desktop and mobile, all within the realm of the web. 📱

Your task, noble creator, is to birth an interactive memory game. A tapestry woven with HTML, CSS, and JavaScript/TypeScript, devoid of external crutches. A canvas where cards hide mysteries, and players reveal them through cunning and remembrance.

🃏 Requirements

1. HTML Glyphs:

   Design an HTML structure for the memory game. It should include:

   • A grid of face-down cards.
   • Each card should have a unique identifier or index.
   • A "New Game" button to start a new game.

   You can use emojis or images for the card faces.

2. CSS Enchantment:

   Style the cards and the game board using CSS. You can use your creativity to give the game a visually appealing look.

3. JavaScript/TypeScript Enigma:

   Write JavaScript/TypeScript code to implement the following game logic:

   • When the game starts or the "New Game" button is clicked, shuffle the cards and lay them face down.
   • Allow players to click on cards to reveal their faces.
   • If two revealed cards have the same face, keep them face up as a matched pair.
   • If two revealed cards have different faces, flip them back face down.
   • The game ends when all pairs are matched.
   • Display a message when the game is won.

4. DOM Conjuring:

   Demonstrate your DOM manipulation skills by:

   • Creating and updating DOM elements dynamically.
   • Handling user clicks and interactions.
   • Modifying classes and styles to show the card states (face-up, face-down, matched).

5. Challenge Enhancements:

   For an extra challenge, consider implementing these features:

   • Add a timer to track the player's time.
   • Implement a scoring system based on the number of moves or time taken.
   • Create different levels of difficulty with varying numbers of cards.
   • Creativity is encouraged! Feel free to add any other features you think would enhance the game.

🕹️ The Dance of Victory

1. Player clicks the "New Game" button.
2. Cards are shuffled and laid out face down.
3. Player clicks on two cards to reveal their faces.
4. If the faces match, the cards stay face up; otherwise, they flip back.
5. Player continues until all pairs are matched.
6. A victory message is displayed.

📝 Submission

Please provide the following:

• HTML, CSS, and JavaScript/TypeScript files.
• Any additional assets or resources your game requires.
• Comments in your code to explain complex parts if necessary.

May your creative skills bring this memory game to life! 🃏🕊️

🌟 Engage in the Bonus Challenge - The Spotlight is on You (Optional) ✨

Here's your chance to illuminate your thought processes and problem-solving finesse. We invite you to craft a novel task, allowing us to witness firsthand your exceptional skill set. 🚀 While conceiving this task, align it with the position you're aspiring for to ensure its relevance.

Feel free to provide your response within a dedicated readme file or establish a fresh folder to encapsulate the task. 📁 This endeavor offers you a platform to radiate your creativity and capabilities. 🌈

🌟 Showcase Your Projects or Contributions (Optional) ✨

We are enthusiastic about getting a glimpse into a project that fills you with pride or one you consider truly remarkable. Whether it's a personal endeavor, a contribution to an open-source initiative, or a past project you've been a part of, we're eager to witness your coding prowess in action. This is an opportunity to reveal your approach to organizing code, your adeptness at problem-solving, and your collaborative skills when working within a team. 🤝

| Don't be concerned if you currently lack publicly accessible projects or contributions. You can freely bypass this step without any worries. 😊

📨 Submit Your Brilliance!

Once you've conquered the tasks, spread the magic by sharing the repository URL with us via email. 💌 Kindly ensure that the repository remains open for all to access.

Best of luck! We're eagerly anticipating the privilege of delving into your work. 🌟

- Created with heartfelt affection ❤️ from the Minnek's Team