This repo contains 8 react coding challenges. And my solutions for all those challenges. You can explore the deployed version of all these challenges by visiting React Coding Challenges.
To navigate through the solutions:
- The React code for each challenge resides within the
src/pages
folder. - Inside the
src/pages
directory, you'll discover individual files, each named after a specific challenge. - Every file corresponds to a distinct challenge and contains the solution for that particular problem.
I have used React, Tailwind Css, React Icons and Vite for this project.
- Hex Guesser Game
- Make Points
- Memory Card Game
- Text Analyzer
- Stopwatch
- Analog Clock
- Pomodoro Timer
- Breaking Bad
Create a hex color code guesser game where the user can interact with color options and guess the correct color code.
-
Display the Color: Show the hex color code to the user.
-
Provide Options: Offer multiple color options for the user to choose from.
-
Correct Option: Ensure that one of the options is the correct hex color code.
-
User Feedback: Provide feedback to the user indicating whether their chosen color is correct or wrong.
-
Reset or Next Question: After receiving feedback, reset the game or provide an option to move to the next question.
-
Win Streak Display: Display the win streak of the player to enhance the gaming experience.
-
Responsiveness: Make the game responsive to ensure a consistent user experience across different devices.
-
Color Information: Optionally, provide information to the user about the correct and incorrect color options.
Create an interactive application where users can add points by clicking on the screen. Implement undo and redo functionality to remove and add points, respectively.
-
Undo Button: Provide a button to remove the last point created by the user.
-
Redo Button: Include a button to add the last point removed by the user.
-
Click to Add Point: Allow users to click anywhere on the screen (or you can have a region) to add a point.
-
Point Counter: Display a counter indicating the number of points on the screen.
-
Reset Button: Optionally, include a button to reset the points and start over.
Your task is to create a memory card game with a 2 x 3 grid, consisting of 6 cards. There should be pairs of cards with the same values, and each pair should appear only once in the entire set.
At the start, all card values are concealed. The gameplay involves revealing the values of cards by clicking on them. When two cards with matching values are clicked, they are removed from the screen. In case of a mismatch, the cards are closed. The objective is to successfully match and remove all cards to achieve victory.
-
Card Value Display: Allow users to click on a card to reveal its value.
-
Pair Matching: Implement logic to identify and remove pairs of cards with identical values.
-
Winning Condition: Declare victory when all cards have been successfully matched and removed.
-
Move Counter: Implement a move counter to track the number of moves it takes for the player to win.
-
Variable Card Selection: Provide an option for users to customize the game by selecting a different number of cards, enhancing the difficulty level.
-
Card Shuffling: Add a feature to shuffle the positions of cards at the beginning of each game, increasing the randomness and challenge for players.
Create a text analyzer that processes user-inputted text and provides information on the number of pronouns, paragraphs, words, and characters.
-
Pronoun Counter: Count the number of pronouns provided by the user.
-
Word Counter: Determine the total number of words. Consider space-separated strings as individual words.
-
Character Count: Provide the total character count.
-
Paragraph Count: Calculate the number of paragraphs, considering strings separated by line breaks.
-
Sentence Counter: Optionally, implement counting sentences, assuming sentence endings with "?", "!", or ".".
-
Longest Word: Optionally, display the longest word present in the input text.
-
Time to Read: Optionally, estimate the time required to read the given text, assuming a reading speed of 25 words per minute.
You can use this set of pronoun to count number of pronuns.
const pronouns = new Set([
"i",
"me",
"you",
"he",
"him",
"she",
"her",
"it",
"we",
"us",
"they",
"them",
"myself",
"yourself",
"himself",
"herself",
"itself",
"ourselves",
"yourselves",
"themselves",
"who",
"whom",
"whose",
"which",
"what",
"whichever",
"whoever",
"whomever",
"this",
"that",
"these",
"those",
"mine",
"yours",
"his",
"hers",
"its",
"ours",
"theirs",
"one",
"oneself",
"someone",
"somebody",
"something",
"anyone",
"anybody",
"anything",
"everyone",
"everybody",
"everything",
"no one",
"nobody",
"nothing",
"each",
"either",
"neither",
"both",
"few",
"many",
"all",
]);
Design a stopwatch application that provides timekeeping functionalities.
Start/Stop Button: Implement a start/stop button for initiating and halting the stopwatch.
Reset: Provide a reset button to clear and reset the stopwatch.
Split Time: Optionally, add a split time feature that allows users to record intermediate time intervals without stopping the main stopwatch.
Create an analog clock that displays the current time, featuring hour, minute, and seconds hands.
Hour Hand: Implement an hour hand on the clock that accurately reflects the current hour.
Minute Hand: Include a minute hand that indicates the precise minutes of the current time.
Seconds Hand: Integrate a seconds hand to provide real-time tracking of seconds.
Customization: Optionally, allow users to customize the clock's appearance, such as background color or hand styles.
Create a Pomodoro Timer application designed to enhance time management during work and break intervals. The application should feature two timers: one for focused work sessions and another for break periods.
Work Timer: Develop a work timer that enables users to set the duration of their focused work sessions.
Break Timer: Incorporate a break timer that users can customize to fit their preferred break periods.
Animation: Optionally, implement visually appealing animations that correspond to the passage of time.
Create an app that takes user input and creates intro text like breaking bad.
Element Matching: Dynamically match the initial characters of the input text to corresponding periodic table element, creating a visually compelling representation of the given text.
Info About Elemet Optionally you can show info about element like atomic number, atomic weight and valency.
You can use this array of perodic elemets.
export const periodicElements = [
{ symbol: "H", name: "Hydrogen", atomicNumber: 1, atomicWeight: 1.008 },
{ symbol: "He", name: "Helium", atomicNumber: 2, atomicWeight: 4.0026 },
{ symbol: "Li", name: "Lithium", atomicNumber: 3, atomicWeight: 6.94 },
{ symbol: "Be", name: "Beryllium", atomicNumber: 4, atomicWeight: 9.0122 },
{ symbol: "B", name: "Boron", atomicNumber: 5, atomicWeight: 10.81 },
{ symbol: "C", name: "Carbon", atomicNumber: 6, atomicWeight: 12.01 },
{ symbol: "N", name: "Nitrogen", atomicNumber: 7, atomicWeight: 14.01 },
{ symbol: "O", name: "Oxygen", atomicNumber: 8, atomicWeight: 16.0 },
{ symbol: "F", name: "Fluorine", atomicNumber: 9, atomicWeight: 18.99 },
{ symbol: "Ne", name: "Neon", atomicNumber: 10, atomicWeight: 20.18 },
{ symbol: "Na", name: "Sodium", atomicNumber: 11, atomicWeight: 22.99 },
{ symbol: "Mg", name: "Magnesium", atomicNumber: 12, atomicWeight: 24.31 },
{ symbol: "Al", name: "Aluminum", atomicNumber: 13, atomicWeight: 26.98 },
{ symbol: "Si", name: "Silicon", atomicNumber: 14, atomicWeight: 28.09 },
{ symbol: "P", name: "Phosphorus", atomicNumber: 15, atomicWeight: 30.97 },
{ symbol: "S", name: "Sulfur", atomicNumber: 16, atomicWeight: 32.07 },
{ symbol: "Cl", name: "Chlorine", atomicNumber: 17, atomicWeight: 35.45 },
{ symbol: "K", name: "Potassium", atomicNumber: 19, atomicWeight: 39.1 },
{ symbol: "Ar", name: "Argon", atomicNumber: 18, atomicWeight: 39.95 },
{ symbol: "Ca", name: "Calcium", atomicNumber: 20, atomicWeight: 40.08 },
{ symbol: "Sc", name: "Scandium", atomicNumber: 21, atomicWeight: 44.96 },
{ symbol: "Ti", name: "Titanium", atomicNumber: 22, atomicWeight: 47.87 },
{ symbol: "V", name: "Vanadium", atomicNumber: 23, atomicWeight: 50.94 },
{ symbol: "Cr", name: "Chromium", atomicNumber: 24, atomicWeight: 52.0 },
{ symbol: "Mn", name: "Manganese", atomicNumber: 25, atomicWeight: 54.94 },
{ symbol: "Fe", name: "Iron", atomicNumber: 26, atomicWeight: 55.85 },
{ symbol: "Ni", name: "Nickel", atomicNumber: 28, atomicWeight: 58.69 },
{ symbol: "Co", name: "Cobalt", atomicNumber: 27, atomicWeight: 58.93 },
{ symbol: "Cu", name: "Copper", atomicNumber: 29, atomicWeight: 63.55 },
{ symbol: "Zn", name: "Zinc", atomicNumber: 30, atomicWeight: 65.38 },
{ symbol: "Ga", name: "Gallium", atomicNumber: 31, atomicWeight: 69.72 },
{ symbol: "Ge", name: "Germanium", atomicNumber: 32, atomicWeight: 72.63 },
{ symbol: "As", name: "Arsenic", atomicNumber: 33, atomicWeight: 74.92 },
{ symbol: "Se", name: "Selenium", atomicNumber: 34, atomicWeight: 78.96 },
{ symbol: "Br", name: "Bromine", atomicNumber: 35, atomicWeight: 79.9 },
{ symbol: "Kr", name: "Krypton", atomicNumber: 36, atomicWeight: 83.8 },
{ symbol: "Rb", name: "Rubidium", atomicNumber: 37, atomicWeight: 85.47 },
{ symbol: "Sr", name: "Strontium", atomicNumber: 38, atomicWeight: 87.62 },
{ symbol: "Y", name: "Yttrium", atomicNumber: 39, atomicWeight: 88.91 },
{ symbol: "Zr", name: "Zirconium", atomicNumber: 40, atomicWeight: 91.22 },
{ symbol: "Nb", name: "Niobium", atomicNumber: 41, atomicWeight: 92.91 },
{ symbol: "Mo", name: "Molybdenum", atomicNumber: 42, atomicWeight: 95.95 },
{ symbol: "Tc", name: "Technetium", atomicNumber: 43, atomicWeight: 98 },
{ symbol: "Ru", name: "Ruthenium", atomicNumber: 44, atomicWeight: 101.1 },
{ symbol: "Rh", name: "Rhodium", atomicNumber: 45, atomicWeight: 102.9 },
{ symbol: "Pd", name: "Palladium", atomicNumber: 46, atomicWeight: 106.4 },
{ symbol: "Ag", name: "Silver", atomicNumber: 47, atomicWeight: 107.9 },
{ symbol: "Cd", name: "Cadmium", atomicNumber: 48, atomicWeight: 112.4 },
{ symbol: "In", name: "Indium", atomicNumber: 49, atomicWeight: 114.8 },
{ symbol: "Sn", name: "Tin", atomicNumber: 50, atomicWeight: 118.7 },
{ symbol: "Sb", name: "Antimony", atomicNumber: 51, atomicWeight: 121.8 },
{ symbol: "Te", name: "Tellurium", atomicNumber: 52, atomicWeight: 127.6 },
{ symbol: "I", name: "Iodine", atomicNumber: 53, atomicWeight: 126.9 },
{ symbol: "Xe", name: "Xenon", atomicNumber: 54, atomicWeight: 131.3 },
{ symbol: "Cs", name: "Cesium", atomicNumber: 55, atomicWeight: 132.9 },
{ symbol: "Ba", name: "Barium", atomicNumber: 56, atomicWeight: 137.3 },
{ symbol: "La", name: "Lanthanum", atomicNumber: 57, atomicWeight: 138.9 },
{ symbol: "Ce", name: "Cerium", atomicNumber: 58, atomicWeight: 140.1 },
{ symbol: "Pr", name: "Praseodymium", atomicNumber: 59, atomicWeight: 140.9 },
{ symbol: "Nd", name: "Neodymium", atomicNumber: 60, atomicWeight: 144.2 },
{ symbol: "Pm", name: "Promethium", atomicNumber: 61, atomicWeight: 145 },
{ symbol: "Sm", name: "Samarium", atomicNumber: 62, atomicWeight: 150.4 },
{ symbol: "Eu", name: "Europium", atomicNumber: 63, atomicWeight: 152.0 },
{ symbol: "Gd", name: "Gadolinium", atomicNumber: 64, atomicWeight: 157.3 },
{ symbol: "Tb", name: "Terbium", atomicNumber: 65, atomicWeight: 158.9 },
{ symbol: "Dy", name: "Dysprosium", atomicNumber: 66, atomicWeight: 162.5 },
{ symbol: "Ho", name: "Holmium", atomicNumber: 67, atomicWeight: 164.9 },
{ symbol: "Er", name: "Erbium", atomicNumber: 68, atomicWeight: 167.3 },
{ symbol: "Tm", name: "Thulium", atomicNumber: 69, atomicWeight: 168.9 },
{ symbol: "Yb", name: "Ytterbium", atomicNumber: 70, atomicWeight: 173.0 },
{ symbol: "Lu", name: "Lutetium", atomicNumber: 71, atomicWeight: 175.0 },
{ symbol: "Hf", name: "Hafnium", atomicNumber: 72, atomicWeight: 178.5 },
{ symbol: "Ta", name: "Tantalum", atomicNumber: 73, atomicWeight: 180.9 },
{ symbol: "W", name: "Tungsten", atomicNumber: 74, atomicWeight: 183.8 },
{ symbol: "Re", name: "Rhenium", atomicNumber: 75, atomicWeight: 186.2 },
{ symbol: "Os", name: "Osmium", atomicNumber: 76, atomicWeight: 190.2 },
{ symbol: "Ir", name: "Iridium", atomicNumber: 77, atomicWeight: 192.2 },
{ symbol: "Pt", name: "Platinum", atomicNumber: 78, atomicWeight: 195.1 },
{ symbol: "Au", name: "Gold", atomicNumber: 79, atomicWeight: 197.0 },
{ symbol: "Hg", name: "Mercury", atomicNumber: 80, atomicWeight: 200.6 },
{ symbol: "Tl", name: "Thallium", atomicNumber: 81, atomicWeight: 204.4 },
{ symbol: "Pb", name: "Lead", atomicNumber: 82, atomicWeight: 207.2 },
{ symbol: "Bi", name: "Bismuth", atomicNumber: 83, atomicWeight: 208.9 },
{ symbol: "Po", name: "Polonium", atomicNumber: 84, atomicWeight: 209 },
{ symbol: "At", name: "Astatine", atomicNumber: 85, atomicWeight: 210 },
{ symbol: "Rn", name: "Radon", atomicNumber: 86, atomicWeight: 222 },
{ symbol: "Fr", name: "Francium", atomicNumber: 87, atomicWeight: 223 },
{ symbol: "Ra", name: "Radium", atomicNumber: 88, atomicWeight: 226 },
{ symbol: "Ac", name: "Actinium", atomicNumber: 89, atomicWeight: 227 },
{ symbol: "Th", name: "Thorium", atomicNumber: 90, atomicWeight: 232.0 },
{ symbol: "Pa", name: "Protactinium", atomicNumber: 91, atomicWeight: 231.0 },
{ symbol: "U", name: "Uranium", atomicNumber: 92, atomicWeight: 238.0 },
{ symbol: "Np", name: "Neptunium", atomicNumber: 93, atomicWeight: 237.0 },
{ symbol: "Pu", name: "Plutonium", atomicNumber: 94, atomicWeight: 244.0 },
{ symbol: "Am", name: "Americium", atomicNumber: 95, atomicWeight: 243.0 },
{ symbol: "Cm", name: "Curium", atomicNumber: 96, atomicWeight: 247.0 },
{ symbol: "Bk", name: "Berkelium", atomicNumber: 97, atomicWeight: 247.0 },
{ symbol: "Cf", name: "Californium", atomicNumber: 98, atomicWeight: 251.0 },
{ symbol: "Es", name: "Einsteinium", atomicNumber: 99, atomicWeight: 252.0 },
{ symbol: "Fm", name: "Fermium", atomicNumber: 100, atomicWeight: 257.0 },
{ symbol: "Md", name: "Mendelevium", atomicNumber: 101, atomicWeight: 258.0 },
{ symbol: "No", name: "Nobelium", atomicNumber: 102, atomicWeight: 259.0 },
{ symbol: "Lr", name: "Lawrencium", atomicNumber: 103, atomicWeight: 262.0 },
{ symbol: "Rf", name: "Rutherfordium", atomicNumber: 104, atomicWeight: 267.0 },
{ symbol: "Db", name: "Dubnium", atomicNumber: 105, atomicWeight: 270.0 },
{ symbol: "Sg", name: "Seaborgium", atomicNumber: 106, atomicWeight: 271.0 },
{ symbol: "Bh", name: "Bohrium", atomicNumber: 107, atomicWeight: 270.0 },
{ symbol: "Hs", name: "Hassium", atomicNumber: 108, atomicWeight: 277.0 },
{ symbol: "Mt", name: "Meitnerium", atomicNumber: 109, atomicWeight: 276.0 },
{ symbol: "Ds", name: "Darmstadtium", atomicNumber: 110, atomicWeight: 281.0 },
{ symbol: "Rg", name: "Roentgenium", atomicNumber: 111, atomicWeight: 280.0 },
{ symbol: "Cn", name: "Copernicium", atomicNumber: 112, atomicWeight: 285.0 },
{ symbol: "Nh", name: "Nihonium", atomicNumber: 113, atomicWeight: 284.0 },
{ symbol: "Fl", name: "Flerovium", atomicNumber: 114, atomicWeight: 289.0 },
{ symbol: "Mc", name: "Moscovium", atomicNumber: 115, atomicWeight: 288.0 },
{ symbol: "Lv", name: "Livermorium", atomicNumber: 116, atomicWeight: 293.0 },
{ symbol: "Ts", name: "Tennessine", atomicNumber: 117, atomicWeight: 294.0 },
{ symbol: "Og", name: "Oganesson", atomicNumber: 118, atomicWeight: 294.0 },
];