flaviodelgrosso/frontend-expert

Collection of exercises from the FrontendExpert Course

Frontend-Expert

Frontend-Expert contains bunch of exercises available in the FrontendExpert course. All the implementations have been done in ReactJS for consistency. All the exercises can be viewed in this deployed website. Detailed description can be found in each exercise's README.

Exercises

1. SignUpForm: Implement a sign-up form in HTML with some given prerequisites.
2. ItemCart: Implement an item cart in HTML with static data.
3. Spaghetti Recipe: You've been provided with a recipe for spaghetti as raw text, and you need to convert this recipe into a properly marked-up HTML file.
4. Blog Post: You've been provided with a blog post as raw text, and you need to convert this post into a properly marked-up HTML file.
5. Rainbow Circles: You're given an HTML file with three nested divs, each with a unique ID. Using only CSS, style the HTML to have the appearance of six concentric colored circles.
6. Navbar: You're given an HTML file for the top navigation bar of a website, style the navigation bar as per the given conditions.
7. PigEmoji: You're given an HTML file with the markup for a pig emoji. Using only CSS, style the HTML to have the appearance of a pig emoji.
8. PurchaseForm: You're given an HTML file with the markup for a purchase form, similar to the actual purchase form on AlgoExpert. Using only CSS, style the purchase form.
9. AlgoExpertProducts: You're given an HTML file containing divs representing AlgoExpert's products. Using only CSS, align the products in three rows.
10. RobotEmoji: You're given an HTML file with the markup for a robot head emoji. Using only CSS, style the HTML to have the appearance of a robot emoji.
11. NotificationsMenu: You're given an HTML file containing the markup for a notifications menu. Using only CSS, replicate the expected output.
12. AlgoExpertLogo: You're given an HTML file containing the markup for the AlgoExpert logo. Using only CSS, replicate the logo.
13. TestingFramework: Implement the following three functions of a basic JavaScript testing framework: describe, it and expect based on the given requirements.
14. ArrayMethods: Without calling Array.prototype.map(), Array.prototype.filter(), Array.prototype.reduce(), or Array.prototype.forEach(), implement the following functions - myMap, myFilter and myReduce on the Array prototype.
15. EventTarget: Implement an EventTarget class (similar to the EventTarget interface of the DOM), which keeps track of event listeners and dispatches events.
16. Debounce: Write a debounce function that takes in a required callback function, a required delay in milliseconds, and an optional immediate boolean, which defaults to false.
17. ThisBinding: Without calling Function.prototype.call, Function.prototype.apply or Function.prototype.bind, implement the following three similar functions - myCall, myApply and myBind on the Function prototype.
18. Promisify: Write a promisify function (similar to the util.promisify Node.js function) that takes in a required callback function and returns a new "promisifed" version of that function.
19. Throttle: Write a throttle function that takes in a required callback function and a required delay in milliseconds.
20. Curry: Write a curry function that takes in a required callback function and returns a curried version of that function.
21. PromiseMethods: Without calling Promise.race(), Promise.any(), Promise.all(), Promise.allSettled(), implement the following four similar functions on the native Promise object.
22. DeepEquals: Write a deepEquals function that takes in two required values and returns if those two values are deeply equal to each other.
23. Promises: Write a MyPromise class based on the native Promise built-in class.
24. Flatten: Write a flatten function that takes in a value and returns a flattened version of that value.
25. CorrespondingNode: Write a correspondingNode function that takes in three DOM Elements. The first two parameters represent the root nodes of two different DOM trees. The third parameter is a node within the first DOM tree.
26. Memoize: Write a memoize function that takes in a required callback function and an optional resolver function. The memoize function returns a memoized version of the callback function.
27. CreateDOM: Write a createDom function that takes in a required root parameter, which is an object representation of a DOM tree's root node or a string representation of a text node.
28. TrendingStocks: Write an asynchronous trendingStocks function that takes in a required integer n and returns data about the top n US-based stocks by market cap.
29. InfiniteScroll: You're given an API endpoint that returns a list of AlgoExpert testimonials, and you have to fetch and display these testimonials on the page.
30. StopWatch: You're given HTML and CSS files for a simple stopwatch, and you need to make the stopwatch functional using JavaScript.
31. TicTacToe: You're given HTML and CSS files for a simple Tic Tac Toe board, and you need to make the board functional using JavaScript.
32. TodoList: You're given HTML and CSS files for a simple todo list, and you need to make the todo list functional using JavaScript.
33. TypeAhead: You're given an API endpoint that returns a list of FrontendExpert glossary terms that start with a given string, and you have to use this API to implement a search typeahead. Due to CORS, we cannot access the FrontendExpert API here so instead using a free movies API, which can be found here.
34. TierList: You're given HTML and CSS files for a simple tier list, and you need to make the tier list functional using JavaScript.
35. Toasts: You're given HTML and CSS files for a simple toast system, and you need to make the toast system functional using JavaScript.
36. Sudoku: You're given HTML and CSS files for a Sudoku game based on The New York Times Number Puzzles, and you need to make the game functional using JavaScript.
37. UseFetch: Write a useFetch custom hook that takes in a required url as a string or URL object. This parameter should be directly passed to the native JavaScript fetch function.
38. UseLocalStorage: Write a useLocalStorage custom hook that takes in a required key as a string, and an optional initialValue.
39. UseStateWithHistory: Write a useStateWithHistory custom hook that takes in an initialState value. Calling useStateWithHistory should work the same as useState, but with an added history with the ability to scroll through previous state values.
40. UseInterval: Write a useInterval custom hook that takes in a required callback function, and an optional delay as a number in milliseconds.
41. UseWindowSize: Write a useWindowSize custom hook used to track changes to the size of the browser window.
42. UseMap: Write a useMap custom hook that works as a wrapper around the native JavaScript Map object.
43. TipCalculator: You're given a CSS file for a tip calculator, and you need to implement the component using React.
44. PhoneInput: You're given a CSS file for a phone input, and you need to implement the component using React.
45. CryptoPrices: You're given a CSS file for a component displaying cryptocurrency prices, and you need to implement the component using React.
46. QuestionList: You're given a CSS file for the FrontendExpert question list, and you need to implement the component using React.
47. Quiz: You're given a CSS file for a multiple choice quiz, and you need to implement the component using React.
48. Wordle: You're given a CSS file for a clone of the popular game Wordle, and you need to implement the component using React.
49. Memory: You're given a CSS file for a memory game, and you need to implement the component using React.
50. ConnectFour: You're given a CSS file for a Connect Four game, and you need to implement the component using React.

Disclaimer: This repo is not related to FrontendExpert or AlgoExpert in any way. This repo has been set up just to practice the exercises available in the course which can be purchased through their website.