hbshifat/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. A CI/CD pipeline will be setup soon and exercises done up till that point can be easily viewed as a part of the 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.

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.