muslemomar

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

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

muslemomar

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

muslemomar

Async Javascript Discussion

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

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:

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

muslemomar

/**
 * 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;

muslemomar

import { useState } from 'react';
import Router from 'next/router';
import useRequest from '../../hooks/use-request';

export default () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const { doRequest, errors } = useRequest({
    url: '/api/users/signin',
    method: 'post',

muslemomar

OOP

• What is Object-Oriented Programming (OOP)?
• What are the concepts of OOP in JavaScript?
• Why are classes important in OOP? How do they help developers write better code?
• What is the difference between an object and a class in JavaScript?
• What is inheritance in JavaScript?
• What is a constructor function in JavaScript?
• What are getter and setter methods in JavaScript classes

muslemomar

React Introduction Discussion

After seeing the code along and doing your first lab, discuss these ideas with your friends:

1. From your understanding, what is React?
2. What concept stood out to you about React?
3. How different is coding React apps from coding with pure JS?
4. What benefits do you anticipate from using React?
5. How would React help you towards having a more structured project management experience?

After discussing this, one member of the team should write down what the group reached in the comment sections.

muslemomar

• Examine package.json file, and answer the following questions:
  • What is the scripts section?
  • What could the dependencies be?
• How many ways we can style an element in react?
• Why do we use className instead of class in JSX?
• In page.tsx we've used useState in line 6. What does it mean?

muslemomar

React Query Exercise

Overview

This exercise focuses on creating a Next.js application that uses React Query to fetch data.

Instructions

1. Create a NextJS application (the configurations are up to you, but make sure "App Router" is enabled, since you will need it in this app).
2. Create a page for fetching all posts using this url: https://jsonplaceholder.typicode.com/posts