Muslem Omar muslemomar

Pokemon Frontend Coding Challenge

This is a coding challenge for a frontend position at prepend. The goal is to build a web application that allows users to browse and discover Pokemon. The application should list all Pokemon, show details for a selected Pokemon, and allow pagination and searching.

Getting Started

To get started with the project, follow these steps:

Clone the repository to your local machine using git clone <repository-url>.
Install the dependencies using npm install.

Async Javascript Discussion

What is asynchronous programming in JavaScript, and how is it different from synchronous programming?
How does the event loop work in JavaScript, and how does it enable asynchronous programming?
What are some of the common problems that can arise when working with asynchronous code in JavaScript, and how can you address them?
Why would you use async/await over .then when working with promises in JavaScript?
In your own words, what is a promise in JavaScript?
Please read the common mistakes section of MDN here and summarize what the common mistakes are.
What will be console logged first? Why do you think that happened? What will happen if you change the 1000 to 0?

DOM and Frontend File Setup

How do you link a JavaScript file to an HTML document?
How do you link a CSS file to an HTML document?
What are the roles of HTML, CSS, and JavaScript on a webpage?
What are elements
What are attributes in HTML
How can we interact with HTML
What is the DOM? How is it related to HTML, CSS, and JavaScript?
How does HTML get rendered into DOM

What are the similarities between context, redux, and local state?
What is the difference between an action and an action creator in Redux?
In your own words, what problem does context and Redux aim to solve?
Please fill out the following table.

Tool	When should we use this over the others?
Context
Redux
Local state

Learning Objectives

The objective of this discussion is to expose you to some of the popular frameworks that are built on top of JavaScript or React. The goal is not for you to know how to use these, but simply understand what their intended usage is in case you want to use it at some point in time.

For each of these, I want you to answer the following questions for the class:

Why does this exist? Why did people spend hundreds of hours of their time to build this?
For what types of projects would you use this for?

Questions

Gatsby
Storybook

Promise Discussion Questions

In your own words, what does asynchronous mean?
In your own words, what is a promise?
In your own words, why is it called a Promise?
In your own words, why is it called await?
Please read the common mistakes section of MDN here and summarize what the common mistakes are.
Why would you use async/await over .then?

Scopes Discussion

1. What is the scope of variable GLOBAL_DATA in the example below:

<script>
    let GLOBAL_DATA = {value : 1};
</script>

Discussion Questions: Events

Objectives

Recall the different types of JavaScript Events
Identify when the DOMContentLoaded event will trigger
Implement a callback attached to an event handler

	/**
	* Calculates the discounted price of a product based on the original price and discount percentage.
	*
	* @param {number} originalPrice - The original price of the product.
	* @param {number} discountPercentage - The discount percentage to be applied.
	* @returns {number} The calculated discounted price.
	*/

	function calculateDiscountedPrice(originalPrice, discountPercentage) {
	const discountAmount = (originalPrice * discountPercentage) / 100;