DEV Community: OlumideSamuel

With the advent of AI, is there still a need for Frontend Engineers?

OlumideSamuel — Sun, 29 Mar 2026 15:37:53 +0000

With the advent of AI, is there still a need for Frontend Engineers?

This is one question I asked myself a lot in the last 3 months.

About a year ago, Agentic AI wasn’t that intelligent enough to make anyone worry. However, in 2026, AI has completely revolutionized the way we write code.

(By the way, no AI is used in any way or form in writing this article. Let's bring back human voices in our writings)

Teams are being downsized, roles and responsibilities are being collapsed into one. Worst hit across board is the Frontend Engineering department.

It is true that AI is good. Claude Code especially is really good at spinning up working UI code from scratch and almost everyone is using it to build websites and whatnot. So are Frontend Engineers still relevant?

Honestly, Absolutely!

First, frontend engineering is NOT ONLY about developing websites. If that is all you do in your organization, well, maybe AI will do for you. (For more context, I have worked as a Frontend Engineer for over 5 years now and I have developed less than 5 websites in that time).

Moreso, Javascript - which is the base language for developing web based applications is as much a programming language as any other out there. Its versatility to be used across the stack (Backend-Frontend-Mobile Apps) is a major selling point. Yes, it is not Java or C# or Golang, but what it excels at doing, those other languages can not as efficiently.

That said, one can say, even if one needs to develop a complicated web app, we can just give our requirement document to the AI and let it do its magic.

Truth is, your requirement document is not always enough.

I had to solve a problem at work recently.

In one of our major projects, there is a Python class that has about 30 internal methods. The purpose of this class is to interface with a local directory on the machine, read certain data points from the files, make some computations and communicate resulting data to the frontend via an API.

However, we have a new use case to bundle our app and the data it needs into a third party service as an add-on that prevents us from making an API call. Rather, the third party system provides us with the datasource as a zip folder within their system and expects us to do the computation on the frontend.

So two options,

either we use the python interface on the frontend directly using libraries like Pyodide that allows some Python code on the frontend or
we rewrite our Python class in JavaScript to interface with the zip file and use directly without any dependency.

For various reasons, we decide on the second option.
Ofcourse, perfect quick suggestion in the meeting - "we can use AI for that!"

Flash news - the backend engineer did use AI in converting perfectly but it did not solve our problem.

Not because it could not translate it accurately, it did. However, the solution it came up with to interface with the zip folder did not work.

As the lead frontend engineer, I had to understand the tradeoffs to make within the JavaScript environment to solve our problem

Loading the zip file
Unzipping the file (key note; can be as large as 5GB, hence unzipping to browser memory directly will crash the browser)
Figuring out a way to unzip and load the file such that it can be managed entirely by the browser
Figuring out how to interact with those folders
Then converting the Python interface file to fit our use-case.

What to do?

So what I did was to develop a demo project that unzips the folder into an asynchronous IndexedDB (an asynchronous browser based database). Recursively go through every folder and files in the directory, stores the path as key and its associated content as value (files/blobs).

Then, I converted 4 methods from the python interface to javascript. This time, rather than read from "directory" as it did in python, we determine the path to where specific file we need is stored, read from indexed-db using the path as key, then do our computation and return result as needed (a lot of technicalities not related to this writing glossed over here, but you get the point).

Yaay! Success!

Using AI to finish up!

Then I told Claude to look at my demo implementation, and using the same technique to convert the rest of the class to javascript. Voila!

(As a bonus, I told it to create it as a library so it can be used as plug and play. Some mistakes and bloated code here and there but fixed it and again, voila!)

Could AI have done it with more prompting without my expertise in javascript - maybe, maybe not. One thing is certain though, my understanding of javascript, the browser limitation, knowing about IndexedDB and the knowledge to create a demo the AI could use as a base reference helped to arrive at a solution quickly.

In conclusion

So yes, Frontend Engineers will still be relevant when you are building serious web applications. They will build and ship faster. Moreso, on the plus side, their skills are so valuable that they can not only do frontend tasks, but also backend and develop cross platform mobile apps (iOS and Android).
At least, I do! (Inbox if you have a job for me, haha)

Anyway, do not fire your Frontend Engineers hastily.

freepik illustration

Undo and Redo Counter - A must know Vanilla Javascript Frontend Interview Question (Part 3)

OlumideSamuel — Wed, 09 Jul 2025 21:58:08 +0000

Undo and Redo Counter

This project is a simple counter that can increase or decrease by some set values, keep track of add and minus math operations performed and allow users "undo" and "redo" the operations.

Requirements

The count should begin at 0
Clicking the +1, +10, +100 buttons should add 1, 10, and 100 to the count, respectively
Clicking the -1, -10, -100 buttons should subtract 1, 10, and 100 from the count, respectively
Clicking any + or - button should show a new entry in the history, in the format: ACTION (BEFORE -> AFTER) (e.g. +1 (0 -> 1))
Clicking the 'Undo' button should undo the last action. For example, if the user just clicked '+10', clicking undo should subtract 10 from the count
The user should be able to undo as many operations as possible
The 'Redo' button should be greyed out until the user clicks 'Undo'
Clicking the 'Redo' button should redo the last action the user undid. For example, if the user clicked '+10', clicking undo would subtract 10, then clicking redo would add 10 again
Clicking undo/redo should remove and re-add entries to the history respectively

Problem from FrontendEval¹

Link to the React-JS solution will be added below.²

Solution Walkthrough

Defining the base html

First, there are some givens.

The undo and redo buttons for the operations,
The increment and decrement values and
The history sections.

This section is defined in html as shown below

<section class="body">
        <div>
                <button id="undo">Undo</button>
                <button id="redo">Redo</button>
        </div>
        <div>
                <button class="controlbtn" id="minus100">-100</button>
                <button class="controlbtn" id="minus10">-10</button>
                <button class="controlbtn" id="minus1">-1</button>

                <span id="result">0</span>

                <button class="controlbtn" id="plus1">1</button>
                <button class="controlbtn" id="plus10">10</button>
                <button class="controlbtn" id="plus100">100</button>
        </div>

        <div>
                <h3>History Info</h3>
                <div id="history-list"></div>
        </div>
        </section>

In Javascript `script.js` file

Get all the defined elements in the Javascript file

result -> where the resulting value of the operations is shown
allbtns -> an array of all the buttons defined in the html file
historyBox -> where the operations are listed. Each list item represented as ACTION_VALUE (PREVIOUS_RESULT_VALUE -> CURRENT_RESULT_VALUE).
undoBtn -> on click, returns to the previous state.
redoBtn -> on click, redo the undoBtn action.

const result = document.getElementById("result");
const allbtns = Array.from(document.getElementsByClassName("controlbtn"));
const historyBox = document.getElementById("history-list");

const undoBtn = document.getElementById("undo");
const redoBtn = document.getElementById("redo");
...

Add Listener to all the Buttons

When a user clicks any of the add or minus operation button, fire an event to perform that math operation, display the resulting value and add the item to the history list.

The design choice for ease of use is that each button in the html has been given an id similar to the operation they perform when user clicks them. E.g plus1, minus1, plus10 etc.

Iterate over all the buttons that in allBtns and attach a click listener event, such that onClick of each button, it calls a performMathOperation defined with its value and operator.

...
allbtns.forEach((item, index) => {
  switch (item.id) {
    case "minus100": {
      item.addEventListener("click", (e) => {
        performMathOperation(100, "-");
      });
      return;
    }
    case "minus10": {
      item.addEventListener("click", (e) => {
        performMathOperation(10, "-");
      });
      return;
    }
    case "minus1": {
      item.addEventListener("click", (e) => {
        performMathOperation(1, "-");
      });
      return;
    }
    case "plus1": {
      item.addEventListener("click", (e) => {
        performMathOperation(1, "+");
      });
      return;
    }
    case "plus10": {
      item.addEventListener("click", (e) => {
        performMathOperation(10, "+");
      });
      return;
    }
    case "plus100": {
      item.addEventListener("click", (e) => {
        performMathOperation(100, "+");
      });
      return;
    }
  }
});
...

The performMathOperation accepts the value and operator as arguments. It does 4 things:

If the operator is +, it adds it to the displayed result value and if the operator is -, it subtracts it from the displayed result value.
It updates the historyList with an object that contains the current operator (ops), action value (actionVal), previous result value (prevVal) and current result value (afterVal).
It calls a createHistoryItem that creates and append the current item in the expected format to the list displayed on the screen.
Finally, it call updateButtons function that checks whether to disable or enable the undo and redo button.

...
function performMathOperation(val, ops) {
  const actionVal = val;
  const prevVal = displayedRes;

  if (ops === "+") {
    displayedRes += val;
  } else if (ops === "-") {
    displayedRes -= val;
  }

  result.textContent = displayedRes;
  const afterVal = displayedRes;
  const res = ` ${ops}${actionVal} \t (${prevVal} -> ${afterVal})`;

  historyList.push({ ops, actionVal, prevVal, afterVal });
  historyBox.appendChild(createHistoryItem(res));

  updateButtons();
}

function createHistoryItem(item) {
  const p = document.createElement("p");
  p.textContent = item;
  return p;
}

function updateButtons() {
  undoBtn.disabled = historyList.length === 0 ? true : false;
  redoBtn.disabled = redoHistoryList.length === 0 ? true : false;
}

...

Handling Undo Action

When a user clicks the undoBtn, reverse the operation performed using the history item stored in our historyList array.

First, if the historyList is empty, stop operation immediately. This is a redundant check because the button will be disabled if it is but also a good idea to double make sure.

Then, get the most recent object pushed to the history list by popping and use the saved properties to calculate our previous values. To get the previous state of the values, do the inverse of the saved operator.

If the current saved previous operator is plus, minus the actionVal (value on clicked button) from the afterVal (result after the math operation) to get the newAfterVal old result after the math operation. Then update the displayedRes (result on screen)

...
const { ops, prevVal, afterVal, actionVal } = historyList.pop();

let newAfterVal;
if (ops === "+") {
        newAfterVal = afterVal - actionVal;
        displayedRes -= actionVal;
} else if (ops === "-") {
        newAfterVal = afterVal + actionVal;
        displayedRes += actionVal;
}

result.textContent = displayedRes;
...

First steps to Redo
To Redo what the user has just Undo, keep track of the newly computed values in a separate list called redoHistoryList.

To update the redoHistoryList with the current info, update the afterVal with the new current resulting value (newAfterVal) and the current previous value is afterVal.

Then, remove the last element displayed in historyList from the screen

The full code when undoBtn is clicked:

...
undoBtn.addEventListener("click", (e) => {
  if (historyList.length === 0) {
    return;
  }
  const { ops, prevVal, afterVal, actionVal } = historyList.pop();

  let newAfterVal;
  if (ops === "+") {
    newAfterVal = afterVal - actionVal;
    displayedRes -= actionVal;
  } else if (ops === "-") {
    newAfterVal = afterVal + actionVal;
    displayedRes += actionVal;
  }

  result.textContent = displayedRes;

  redoHistoryList.push({
    ops,
    afterVal: newAfterVal,
    actionVal,
    prevVal: afterVal,
  });

  if (historyBox.lastChild) {
    historyBox.removeChild(historyBox.lastChild);
  }
  updateButtons();
});
...

Handling Redo Action

Redoing an action is simply just recomputing the math operation like a user clicks a button. Hence, get the most recent object in the redoHistoryList and call the performMathOperation with the saved actionVal (the value on the button clicked by the user) and its operator as parameters.

...
redoBtn.addEventListener("click", (e) => {
  if (redoHistoryList.length === 0) {
    return;
  }
  const { ops, actionVal } = redoHistoryList.pop();
  performMathOperation(actionVal, ops);
});
...

Nice to Have - Implement Ctrl+Z (undo) and Ctrl+Shift+Z (redo)

Finally, add a keydown event listener to the global document that triggers the click event or action on the undo and redo buttons when the user uses the keyboard combinations Ctrl+Z (undo) and Ctrl+Shift+Z (redo).

...
document.addEventListener("keydown", (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
    e.preventDefault();
    undoBtn.click();
  }
  if (e.shiftKey && (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
    e.preventDefault();
    redoBtn.click();
  }
});
...

Final Result

Link to the Github repository

https://frontendeval.com/questions/undoable-counter ↩
Walkthrough of the React javascript solution ↩

Undo and Redo Counter - A must know React Javascript Frontend Interview Question (Part 4)

OlumideSamuel — Wed, 09 Jul 2025 21:03:04 +0000

Undo and Redo Counter

This project is a simple counter that can increase or decrease by some set values, keep track of add and minus math operations performed and allow users "undo" and "redo" the operations.

Requirements

The count should begin at 0
Clicking the +1, +10, +100 buttons should add 1, 10, and 100 to the count, respectively
Clicking the -1, -10, -100 buttons should subtract 1, 10, and 100 from the count, respectively
Clicking any + or - button should show a new entry in the history, in the format: ACTION (BEFORE -> AFTER) (e.g. +1 (0 -> 1))
Clicking the 'Undo' button should undo the last action. For example, if the user just clicked '+10', clicking undo should subtract 10 from the count
The user should be able to undo as many operations as possible
The 'Redo' button should be greyed out until the user clicks 'Undo'
Clicking the 'Redo' button should redo the last action the user undid. For example, if the user clicked '+10', clicking undo would subtract 10, then clicking redo would add 10 again
Clicking undo/redo should remove and re-add entries to the history respectively

Problem from FrontendEval¹

Link to the Vanilla-JS solution will be added below.²

Solution Walkthrough

Defining the base states

The project requires to add or subtract a value from 0 (result) as the user clicks on the defined buttons.
Then, list each of this operation in the format ACTION_VALUE (PREVIOUS_RESULT_VALUE -> CURRENT_RESULT_VALUE).

Note:

actionVal: represents the value of the clicked button. represents by what amount to increase or decrease the result
prevVal: represents the previous result before the new math operation is done
afterVal: represents the current result of the math operation
- When the Undo button is clicked, reverse the last operation
- When the Redo button is clicked, undo the last redo action

Hence, define the local states in our App.js as:

...

export type HistoryType = {
  actionVal: number; 
  prevVal: number; 
  afterVal: number; 
};

function App() {
  const [historyList, setHistoryList] = useState<HistoryType[]>([]);
  const [result, setResult] = useState(0);
  const [redoHistoryList, setRedoHistoryList] = useState<HistoryType[]>([]);

...
}

Defining the base components

Doable Controls
This component controls the Undo and Redo click actions on the buttons.

...
type DoableControlsProp = {
  handleUndo: () => void;
  handleRedo: () => void;
  historyList: HistoryType[];
  redoHistoryList: HistoryType[];
};

export const DoableControls: FC<DoableControlsProp> = ({
  handleUndo,
  handleRedo,
  historyList,
  redoHistoryList,
}) => {
  return (
    <div>
      <button
        className="controlbtn"
        id={"undoBtn"}
        onClick={handleUndo}
        disabled={historyList.length === 0}
      >
        Undo
      </button>
      <button
        className="controlbtn"
        id="redoBtn"
        onClick={handleRedo}
        disabled={redoHistoryList.length === 0}
      >
        Redo
      </button>
    </div>
  );
};

Main Controls

The results, increment and decrement buttons are defined in the component. Since the defined actions are finite, let's set each button to have an id that defines the action it triggers for ease of use. E.g plus1, minus1, plus10 etc.

When a user clicks a button, pass the value defined on the button to the parent container, and update the list of objects in the history with the current result (prevVal), the just clicked button value (btnValue), and the new result after operation (afterVal) is done.

const MainControls: FC<MainControlsProps> = ({
  handleHistoryUpdate,
  result,
  setResult,
}) => {
  const handleOnBtnPress = (event: React.MouseEvent<HTMLButtonElement>) => {
    const target = event.target as HTMLButtonElement;
    const btnValue = parseInt(target.innerText);
    const newResult = result + btnValue;

    setResult(btnValue);
    handleHistoryUpdate({
      actionVal: btnValue,
      prevVal: result,
      afterVal: newResult,
    });
  };
  return (
    <div>
      <button className="controlbtn" id="minus100" onClick={handleOnBtnPress}>
        -100
      </button>
      <button className="controlbtn" id="minus10" onClick={handleOnBtnPress}>
        -10
      </button>
      <button className="controlbtn" id="minus1" onClick={handleOnBtnPress}>
        -1
      </button>

      <span id="result">{result}</span>

      <button className="controlbtn" id="plus1" onClick={handleOnBtnPress}>
        1
      </button>
      <button className="controlbtn" id="plus10" onClick={handleOnBtnPress}>
        10
      </button>
      <button className="controlbtn" id="plus100" onClick={handleOnBtnPress}>
        100
      </button>
    </div>
  );
};

export default MainControls;

Rendering History of Past Operations

To render the history of the past operations, map through the historyList state and format the data as
ACTION_VALUE (PREVIOUS_RESULT_VALUE -> CURRENT_RESULT_VALUE).

// in App.js
...
 <div>
  <h3>History Info</h3>
  {historyList.map((item, index) => {
    return (
      <div key={index}>
        {item.actionVal} ({item.prevVal} {`->`} {item.afterVal})
      </div>
    );
  })}
</div>
...

On History Update

When a user clicks any of the MainControls buttons to add or substract from the result, define a function to update the history and results.

Updating result will always work with the plus operation because from elementary maths,
2 + 1 = 3 and 2 + -1 => 2 - 1 = 1

Also, because we want the most recent operation to be added to the top of the history list, add the item before appending the rest behind it. That is, always at index 0.

...
const onUpdateHistory = (payload: HistoryType) => {
  // adding the most recent to top of list
  setHistoryList((prev) => [payload, ...prev]);
};

const handleUpdateResult = (btnValue: number) => {
  setResult((prev: number) => prev + btnValue);
};
...

Handling Undo Operation

Remember this format from above
ACTION_VALUE (PREVIOUS_RESULT_VALUE -> CURRENT_RESULT_VALUE)
where

ACTION_VALUE = value on button clicked
PREVIOUS_RESULT_VALUE = the default result before the math operation
CURRENT_RESULT_VALUE = the new result after the math operation

Then onClick the undoBtn, abort this operation if historyList is empty.

In the vanilla-js solution to this project, new items are added to the bottom of the list. However, in this solution, new items are added to the top of the list.

Hence, updating the list requires getting the just added element in index 0 using the javascript shift inorder to recalculate the previous state.

To get the previous result (newAfterVal), substract the previous actionVal (the value on previously clicked button) from the old result (afterVal).
This implies => newAfterVal = afterVal - actionVal;

Then update the result, historyList and redoHistoryList with the new data.

...
  const handleUndo = () => {
    if (historyList.length === 0) {
      return;
    }

    const tempList = [...historyList];
    const shifted = tempList.shift();
    if (!shifted) {
      return;
    }
    const { actionVal, afterVal, prevVal } = shifted;

    let newAfterVal = result;
    newAfterVal = afterVal - actionVal;

    setResult(newAfterVal);
    setHistoryList(tempList);
    setRedoHistoryList((prev) => [
      ...prev,
      { afterVal: newAfterVal, prevVal, actionVal },
    ]);
  };
  ...

Handling Redo Operation

The redo operation gets the most recent undo object added to the top of the redoHistoryList by the undo action, and calculates the new result.

...
  const handleRedo = () => {
    if (redoHistoryList.length === 0) {
      return;
    }

    const popped = redoHistoryList.pop();
    if (!popped) {
      return;
    }
    const { actionVal, prevVal } = popped;
    const newRes = result + actionVal;
    setResult((prev) => prev + actionVal);
    onUpdateHistory({ actionVal, prevVal, afterVal: newRes });
  };
...

The End Result

Link to the Github repository

https://frontendeval.com/questions/undoable-counter ↩
Walkthrough of the vanilla javascript solution ↩

Shopping List - A Must Know React Javascript problem for any Frontend Interview (Part 2)

OlumideSamuel — Sat, 05 Jul 2025 08:43:24 +0000

This is the React-JS implementation of the Shopping List problem. Link to the Vanilla-JS implementation will be below.

Problem

Create a shopping list application that allows a user to search for an item, add items, check them off, and delete them

As the user starts typing, it should hit the endpoint and show a list of partial matches. Clicking an item should add it to the list.

Requirements

Entering more than two characters in the input should show a list of partially matching items (starting with the same characters)
Clicking an item in the list of partially matching items should add it to the list
Adding the same item multiple times is allowed
Pressing the 'X' next to an item should delete it from the list
Pressing the '✓' next to an item should check it off (i.e. strikethrough text and partially grey out text/buttons)
Pressing the '✓' next to a checked-off item should uncheck it again

Key Skills to be tested

Debounce Knowledge
Rendering lists with Unique Items
Filtering list to remove item
Marking item on list as complete.

Walkthrough...

Solution

First, we create an input field with the handleChange function to update the userInput state.

...
  const [userInput, setUserInput] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUserInput(e.target.value);
  };

...
<div>
          <label htmlFor="search" id="search-label">
            Search:
          </label>
          <input
            id="searchfield"
            type="text"
            onChange={handleChange}
            value={userInput}
            placeholder="Search foods here"
          />
        </div>

When the userInput updates, we must implement the debounce feature on the search field to prevent unnecessary network requests.

Debounce is a technique in javascript that delays network request by few microseconds to prevent unncessary network call.

Without debounce,

With debounce,

Debounce

Debounce is a technique where we use setTimeout to delay the network request for a short while. If while it is being delayed, another network request is made by typing, it cancels the previous request using clearTimeout, and makes a new network request with the most recent typed values.

Basically, the debounce function cancels old requests while the user is still typing.

For the sake of simplicity, we handle this in a useEffect.

On Successful fetch of data from the API, we update the local state availableFoods with the result.

...
// In Parent App.tsx
  const [userInput, setUserInput] = useState("");
  const [availableFoods, setAvailableFoods] = useState([]);
  const [results, setResults] = useState<IResults[]>([]);
  const [isSearchVisible, setIsSearchVisible] = useState(true);

...
useEffect(() => {
    let timer: number | undefined;
    if (userInput) {
      timer = setTimeout(async () => {
        clearTimeout(timer);
        const result = await onFoodSearch();
        setAvailableFoods(result);
        setIsSearchVisible(true);
      }, 1000);
    }

    return () => {
      clearTimeout(timer);
    };
  }, [userInput]);

const onFoodSearch = async () => {
  try {
    const result = fetch(
      `https://api.frontendeval.com/fake/food/${userInput}`
    ).then((res) => res.json());
    return result;
  } catch (error) {
    console.log(error);
    return [];
  }
};
...

For a cute approach, this can also be extracted into a hook separate hook function that accepts the request and delay as arguments.

Rendering Search Results

When we have a list of search results, we render the list and add an onClick event
that triggers the handleItemSelect function.

When a user selects an item on the list, before adding to the results lists,

we generate a random number between 1 and 100 as id (ideally, we use a guuid or a more unique representation as id for each item)
set the isCompleted status to false
add the item to the results

...
export interface IResults {
  id: string;
  item: string;
  isCompleted: boolean;
}
...
// In Parent App.tsx
const [results, setResults] = useState<IResults[]>([]);

 ...
const handleItemSelect = (item: string) => {
  const idx = Math.floor(Math.random() * 100 + 1);
  const resObj = { id: `${idx}-${item}`, item, isCompleted: false };
  setResults((prev) => [...prev, resObj]);
};

  ...

<div className="options">
  {availableFoods.length > 0 && (
    <SearchResults
      foodLists={availableFoods}
      onSelect={handleItemSelect}
      ref={ref}
    />
  )}
</div>

...
...
// In SearchResults.tsx
type SearchResultsProp = {
  foodLists: string[];
  onSelect: (item: string) => void;
};
export const SearchResults = forwardRef<HTMLDivElement, SearchResultsProp>(
  ({ foodLists = [], onSelect }: SearchResultsProp, ref) => {
    return (
      <div id="search-results" ref={ref}>
        {foodLists.map((item) => (
          <SearchItem item={item} key={item} onSelect={onSelect} />
        ))}
      </div>
    );
  }
);

Rendering the results

The results are rendered with the key action events attached to each item

...
// In Parent App.tsx
<div id="results">
  <h3>Results</h3>
  {results.map((item, index) => (
    <FoodItem
      item={item}
      idx={index}
      key={index}
      onDelete={handleDeleteItem}
      onCheckClick={handleCheckClick}
    />
  ))}
</div>


...
// In FoodItem.tsx
type FoodItemProp = {
  item: IResults;
  onDelete: (item: IResults) => void;
  onCheckClick: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
export const FoodItem = ({ item, onDelete, onCheckClick }: FoodItemProp) => {
  return (
    <div className={`list-item ${item.isCompleted ? "complete" : ""}`}>
      <div className="info">
        <input type="checkbox" name={item.id} onChange={onCheckClick} />
        <p className={item.isCompleted ? "strike" : ""}>{item.item}</p>
      </div>

      <button onClick={() => onDelete(item)} className="del-btn">
        X
      </button>
    </div>
  );
};

Deleting and Marking Item as Complete

To delete an item from the list, we use the set id to filter out item from the list and update the results with the new list

...
  const handleDeleteItem = (item: IResults) => {
    const filteredRes = results.filter((food) => food.id !== item.id);
    setResults(filteredRes);
  };
...

To mark an item on the list as complete, loop through the results list to find the item with the same id as the selected item, and update the isCompleted property. It can be done with a one-liner code or more explicitly as shown below.

...
const handleCheckClick = (e: React.ChangeEvent<HTMLInputElement>) => {
  const isChecked = e.target?.checked;
  const id = e.target.name;

  if (isChecked) {
    //When a User marks as complete. 
    // Explicit update
    const temp = results.map((item) => {
      if (item.id === id) {
        return { ...item, isCompleted: true };
      } else return item;
    });
    setResults(temp);
  } else {
    //When a user marks as incomplete.
    // One-liner
    const temp = results.map((item) =>
      item.id === id ? { ...item, isCompleted: false } : item
    );
    setResults(temp);
  }
};
...

Hide Search Lists container

To hide the Search Results container when a user clicks outside the input area, we add a click listener to the global document and a ref to the search results container.

On click on the document, if the search results container does not contain an instance of the global document, set its visibility to false.

...
  const ref = useRef<HTMLDivElement>(null);
...
useEffect(() => {
const handleOutsideClick = (event: MouseEvent) => {
  // @ts-expect-error event ignore
  if (ref.current && !ref.current?.contains(event.target)) {
      setIsSearchVisible(false);
    }
  };

  document.addEventListener("mousedown", handleOutsideClick);

  return () => {
    document.removeEventListener("mousedown", handleOutsideClick);
  };
}, []);

...
<div className="options">
  {isSearchVisible && availableFoods.length > 0 && (
    <SearchResults
      foodLists={availableFoods}
      onSelect={handleItemSelect}
      ref={ref}
    />
  )}
</div>
        ...

Link to code on Github.

Link to Vanilla-JS solution walkthrough here

The final look here

Leave a comment if you have any questions. Like and share if this is helpful to you in some way 🙂

Shopping List - A Must Know Vanilla Javascript problem for any Frontend Interview (Part 1)

OlumideSamuel — Sat, 05 Jul 2025 08:42:47 +0000

This is the Vanilla-JS implementation of the Shopping List problem. Link to the react implementation will be below.

Problem

Create a shopping list web application with search, add, check off, and delete functionality.

As the user starts typing, it should hit the endpoint and show a list of partial matches. Clicking an item should add it to the results list.

Requirements

Entering more than two characters in the input should show a list of partially matching items (starting with the same characters)
Clicking an item in the list of partially matching items should add it to the list
Adding the same item multiple times is allowed
Pressing the 'X' next to an item should delete it from the list
Pressing the '✓' next to an item should check it off (i.e. strikethrough text and partially grey out text/buttons)
Pressing the '✓' next to a checked-off item should uncheck it again

Key Skills to be tested

Debounce Knowledge
Rendering lists with Unique Items
Filtering list to remove item
Marking item on list as complete.

Solution

A major part of this exercise is building an efficient search feature with debounce.

Debounce is a technique in javascript that delays network request by few microseconds while user is typing to prevent unnecessary network call.

Without debounce,

With debounce,

Walkthrough...

Fetch Data

First, define the function to get the list of food from the demo api https://api.frontendeval.com/fake/food/:food

async function getList(value) {
  if (!value) return [];
  try {
    const response = await fetch(
      `https://api.frontendeval.com/fake/food/${value}`,
      { method: "GET" }
    );

    if (!response.ok) {
      throw new Error(`Response error ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.log("Request Error", error.message);
    return [];
  }
}

Debounce Function

A debounce function uses setTimeout to delay the network request for a short while. If while it is being delayed, another network request is made by typing, it cancels the previous request using clearTimeout, and makes a new network request with the most recent typed values.

Basically, the debounce function cancels old requests while the user is still typing.

// debounce function
function debounce(func, delay = 1000) {
  let timer;
  return function (...args) {
    clearTimeout(timer); // cancels older network request
    timer = setTimeout(() => {
      func.apply(this, args); // calls the user defined function with the args (or payload passed into it)
    }, delay);
  };
}

Bind the Search Field

Add event listener to the searchField such that when a user types, it uses the debounce to make the API request.
Renders the search result container as user types and remove when empty.

const searchField = document.getElementById("searchfield");
const searchResultsContainer = document.getElementById("search-results");
const selectedContainer = document.getElementById("results");
searchResultsContainer.style.display = "none";

searchField.addEventListener(
  "input",
  debounce(async (e) => {
    const val = e.target.value;
    const res = await getList(val); // makes API call to get list of foods from the backend service.
    if (val.trim() === "") {
      searchResultsContainer.style.display = "none"; 
    } else if (val.length > 1) {
      renderSearchResult(res);
    }
  }, 500)
);

Render Search Suggestions

Rendering search suggestions with the list of responses got from the network request.

Add a click event listener to the item to generate a random id for each of the items in the response. This helps to be able to identify the exact item when there's need to mark an item for deletion or completion.
Then, render the selected Item in the results list.

Also, overwrite the existing search list when there's new data with replaceChildren()

function renderSearchResult(response = []) {
  searchResultsContainer.replaceChildren(); // this overwrites the existing search results list
  response.forEach((item, index) => {
    const p = document.createElement("p");
    p.textContent = item;
    p.addEventListener("click", (e) => {
      const id = Math.floor(100 * Math.random()) + 1;
      renderSelected({ id, item });
    });
    searchResultsContainer.appendChild(p);
  });
  searchResultsContainer.style.display = "block";
}

Rendering selected items

Render the selected item with delete and check off features.

When rendering the selected food items to the results container, add eventListeners to mark item as completed and delete item from list.

function renderSelected(selected = {}) {
  const listItem = document.createElement("div");
  const listInfo = document.createElement("info");
  const check = document.createElement("input");
  const title = document.createElement("p");
  const delBtn = document.createElement("button");

  title.className = "food-name";
  title.textContent = selected.item;

  check.type = "checkbox";

  listInfo.className = "info";
  listInfo.appendChild(check);
  listInfo.appendChild(title);

  delBtn.className = "del-btn";
  delBtn.textContent = "X";
  listItem.appendChild(listInfo);
  listItem.appendChild(delBtn);

  listItem.className = "list-item";
  listItem.id = selected.id;
  selectedContainer.appendChild(listItem);

  check.addEventListener("click", (e) => {
    if (check.checked) {
      listItem.style.opacity = 0.5;
      title.style.textDecoration = "line-through";
    } else {
      listItem.style.opacity = 1;
      title.style.textDecoration = "none";
    }
  });

  delBtn.addEventListener("click", (e) => {
    selectedContainer.removeChild(listItem);
  });
}

Hiding the search results on click out

Finally, to hide the search-results container when a user clicks outside the container.

This is quite tricky but simple. Basically, add a click listener to the document directly, and on every click anywhere in the document, check if the clicked element is NOT inside the search results container searchResultsContainer to remove the search result container

document.addEventListener("click", (e) => {
  if (!searchResultsContainer.contains(e.target)) {
    searchResultsContainer.style.display = "none";
  }
});

Link to code on Github.
Link to React-JS solution walkthrough here

The Final Look here

Leave a comment if you have any questions. Like and share if this is helpful to you in some way 🙂

Winning Card (DSA Series)

OlumideSamuel — Sun, 15 May 2022 22:44:34 +0000

Problem

Winning Card
In a card game, each player will be given a set of random cards. Players will throw on the table their one winning card, the player with the highest card wins.

A winning card is the card that only exists once in the set of cards, and the highest one.

Given an array of sets of integers cards, return the card of the winning player. Return -1 If no such card is found.

Example 1:
Input: cards = [[5,7,3,9,4,9,8,3,1], [1,2,2,4,4,1], [1,2,3]]
Output: 8
Example 2:
Input: cards = [[5,5], [2,2]]
Output: -1

Solution

Loop through the 2 dimensional array,
On second loop, if item exist in hashset, delete prev occurence of i. Else add to hashset
loop through hashset for the highest number

function winningCard(multiArray) {
    let map = new Set();
    multiArray.forEach(item => {
        for (let i = 0; i < item.length; i++) {
            if (map.has(item[i])) {
               map.delete(item[i])
            } else map.add(item[i])
        }
    })

    if (map.size === 0) return -1;

    let highest = 0;
    for (let i of map) {
        if(i > highest) {
            highest = i
        }
    }

   return highest;
}

Anyway, if you have a better way of solving this, you can drop your solution in the comments. I'm no expert. Just learning aloud.

Don't forget to like, share and drop a comment. :)

The infamous Two Sum problem. (DSA Series 3)

OlumideSamuel — Sun, 15 May 2022 22:34:45 +0000

Problem

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.
You may assume that each input would have exactly one solution, and you may not use the same element twice.
You can return the answer in any order.

Example
Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].
Input: nums = [3,2,4], target = 6
Output: [1,2]
Input: nums = [3,3], target = 6
Output: [0,1]

Solution

THIS WILL ONLY WORK IF ITEMS ARE SORTED
let there be two pointers, one point to the beginning of array (low), and the other to the end of array (high).
while low < high,
if the sum of the value at low and high = target, return the indices
if the sum of the values at low and high > target, reduce high index by 1
if the sum of the values at low and high < target, increase the low by 1

function twoSum(array, target){
    let low = 0;
    let high = array.length - 1;

    while (low < high) {
        const sum = array[low] + array[high];
        if (sum === target) return [low, high];
        if (sum > target) high--;
        else if (sum < target) low++;
    }
}

Method Two

/**
 * 
 * Input: nums = [2,7,11,15], target = 9 
 * Output: [0,1]
 * Initialize a map,
 * loop through array, 
 * subtract currentItem from target to get compliment, 
 *  if compliment exist in map, return [currentItmIdx, compliment[]]
 * else add map[curentItem] = idx
 * @param {*} array 
 * @param {*} target 
 */
function twoSumMethod2(array, target){
    const map = {};

    for (let i = 0; i < array.length; i++) {
        let com = target - array[i];
        if(map[com] !== undefined) return [i, map[com]]
        else map[array[i]] = i;
    }
    return -1
}

Test Examples

const nums = [2,7,11,15], target = 9;
const nums = [3,3], target = 6

Anyway, if you have a better way of solving this, you can drop your solution in the comments. I'm no expert. Just learning aloud.

Don't forget to like, share and drop a comment. :)

Group Anagram. (DSA Series 2)

OlumideSamuel — Sun, 15 May 2022 21:59:27 +0000

Problem

Given an array of strings strs, group the anagrams together. You can return the answer in any order.

An Anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.

Example
Input: strs = ["eat","tea","tan","ate","nat","bat"]
Output: [["bat"],["nat","tan"],["ate","eat","tea"]]
Input: strs = [""]
Output: [[""]]
Input: strs = ["a"]
Output: [["a"]] */

Solution


/**
 * for each item in array, sort alphabetically, then add sorted item to map as key, push index to value array eg; {aet:[0,1,3], ...}
 * return values of every word(key) in the map as an array.
 * Time Complexity is O(n)... I think. _Not sure if the sorting of each word takes an additional O(n)_ 
 */
function groupAnagram(arr){
    const map = {}
    for(let i = 0; i < arr.length; i++) {
       const sortedWord = [...arr[i] ].sort((a,b)=> a.localeCompare(b)).join();
       map[sortedWord] = map[sortedWord] !== undefined ? [...map[sortedWord], arr[i]] : [arr[i]]
    }

    return Object.values(map);
}

Anyway, if you have a better way of solving this, you can drop your solution in the comments. I'm no expert. Just learning aloud.

Don't forget to like, share and drop a comment. :)

Valid Anagram. (Javascript DSA Series)

OlumideSamuel — Sun, 15 May 2022 17:46:48 +0000

Problem

Given two strings s and t, return true if t is an anagram of s, and false otherwise.

An Anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.

Example
Input: s = "anagram", t = "nagaram"
Output: true
Input: s = "rat", t = "car"
Output: false
Constraints
1 <= s.length, t.length <= 5 * 104
s and t consist of lowercase English letters.

Solution

There are two ways of solving this problem.

Method One

/**
 * Since t is compared to s,
 * convert all to lowercase,
 * sort t and s, 
 * if t is exactly equal to s, then it is an anagram, else it isn't
 * Runtime O(n)
 */

// const s = "anagram";
// const t = "nagaram" 
const s = "rat", t = "car"
function anagram(s, t){
    const sortedS = s.split('').sort().join('');
    const sortedT = t.split('').sort().join('');
    if (sortedS === sortedT) return true;
    return false;
}

Method Two

Using Map

/**
 * Create a map object
 * For each char in S, add the first occurrence with a value of 1. For subsequent occurrence, increase the value by +1.
 * For each char in T, if it doesn't exist in map i.e undefined or value is <= 0, return false. If it does exist, do value -1, return true outside loop.
 * @param {*} s 
 * @param {*} t 
 */

function anagramTwo(s,t){
    // for our answer to be an anagram, the word must be rearranged, hence, if the length of the two words are not same, it is not an anagram.
    if(s.length !== t.length) return false;

    const map = {};
    for (let i of s) {
        if(map[i] !== undefined) {
            map[i]++
         } else map[i] = 1
    }

    for (let i of t){
        if (map[i] === undefined || map[i] <= 0) return false;
        map[i]--;
    }
    return true

}

console.log(anagramTwo("ab", "a"))

If you find this helpful, like, share and bookmark. :)

Implementing AutoLogout Feature in Web Applications (React-JS)

OlumideSamuel — Sun, 03 Apr 2022 06:06:25 +0000

You might have noticed that certain applications logs you out automatically after a certain time of inactivity. This feature is particularly important when dealing with sensitive web applications like financial apps.

In this article, I would be showing you how to implement auto logout feature in a web application with Javascript in React-JS.

Prerequisite

We need a basic application with an auth feature implemented.
We would be building on this basic application I wrote earlier on Implementing Protected Route and Authentication in React-JS. You can clone from here Github.

It is a basic application with two pages that demonstrate user authentication.

Login Page
Home Page
- On the home page, there is a logout button.

Login Credentials

Username: admin
Password: 123456

Implementation

We want to make sure the application logs user out automatically after 10 seconds of inactivity.

Basics

To start, we create an AppLogout component which will wrap the authenticated components and in which we shall implement the logout feature.

const AppLogout = ({ children }) => {
  return children;
};
export default AppLogout;

NOTE: This can be done in the entry file of our main layout. But it's okay to create a separate component for separation of concerns.

In MainDashboardEntry (this should be the base entry file for all authenticated routes),

const MainDashboardEntry = () => {
    return (
        <AppLogout>
            <Home />
        </AppLogout>
    )
}
export default MainDashboardEntry

In App.js,

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/signin" component={Signin} />
      <ProtectedRoute exact path="/" component={MainDashboardEntry} />
    </BrowserRouter>
  );
}
export default App;

Now that the basics are covered, let's dive deep into AppLogout.js component.

A quick walkthrough of the solution is

List in an array events that determines user activity.
When component mounts, add listeners to the window that listens to the events.
Create a function that logs out user after 10 secs using setTimeout.
Each time any of the event is triggered, i.e mousemove, click, scroll, keypress etc, the timer to logout user after 10 secs of inactivity resets.
However, if none of the event is triggered within 10 secs, that is app is inactive, the app automatically logs out.

Below are some of the user events to guarantee user activity on the application

const events = [
  "load",
  "mousemove",
  "mousedown",
  "click",
  "scroll",
  "keypress",
];

So, on successful login,

const events = [
  "load",
  "mousemove",
  "mousedown",
  "click",
  "scroll",
  "keypress",
];

const AppLogout = ({ children }) => {
  let timer;

// this function sets the timer that logs out the user after 10 secs
const handleLogoutTimer = () => {
  timer = setTimeout(() => {
    // clears any pending timer.
    resetTimer();
    // Listener clean up. Removes the existing event listener from the window
    Object.values(events).forEach((item) => {
      window.removeEventListener(item, resetTimer);
    });
    // logs out user
    logoutAction();
  }, 10000); // 10000ms = 10secs. You can change the time.
};

// this resets the timer if it exists.
const resetTimer = () => {
  if (timer) clearTimeout(timer);
};

// when component mounts, it adds an event listeners to the window
// each time any of the event is triggered, i.e on mouse move, click, scroll, keypress etc, the timer to logout user after 10 secs of inactivity resets.
// However, if none of the event is triggered within 10 secs, that is app is inactive, the app automatically logs out.
useEffect(() => {
  Object.values(events).forEach((item) => {
    window.addEventListener(item, () => {
      resetTimer();
      handleLogoutTimer();
    });
  });
}, []);

// logs out user by clearing out auth token in localStorage and redirecting url to /signin page.
const logoutAction = () => {
  localStorage.clear();
  window.location.pathname = "/signin";
};

  return children;
};

export default AppLogout;

To see the demo of the application, check autoLogout.netlify.com

Here's a link to the Github Repository.
You can clone the app and test on your local machine.

If you enjoy reading this, like, share and bookmark this post. 💙

"Where do I start from?": Newbie Guide to Programming

OlumideSamuel — Thu, 08 Jul 2021 10:01:32 +0000

So many people want to get into tech now and the prevailing question experienced coders get asked the most is > “where do I start from?”

Truth is, that’s a good question to ask actually because “Tech” is “Vast”.

Introduction

There are so many branches and different forms of “tech” that it’s just too much for one person to know it all.

Usually, like everything else, one has to pick one single entry point, then gradually build your way up into other branches therein.

There are two forms of tech basically,

the Hardware Engineers - folks that almost always build and / or program devices, robots and the likes using softwares like Arduino,
the Software Engineers - folks that build stuff using what tech bros/sis call “Programming Languages”.

I’ve heard people legit ask, "what do you mean by programming language again?" Do we have to learn “French” or something 😀 Lol, no. It’s not French or German.

Programming Languages that exist

In layman terms, Programming languages are languages (codes) computers or any electronic devices understands. It’s why you hear people in tech say stuff like “I’m coding”, they basically mean, I’m instructing a computer or a device to act or do something.

Like humans of different race, different computers/ devices understand different languages. It’s why people say I know this programming language, I don’t know that one.. etc..

So which popular software programming languages exist and what are they used for;

JAVA, C#, C: for building Android apps, Enterprise Applications(MS word, Photoshop etc)
Web scripting languages(HTML, CSS, JavaScript, PHP): for building web applications.. (Facebook, websites, etc)
Oh, there’s also python, (calm down, not a real snake😅) - for building web applications too, AI and machine learning stuff as well...
and so many more other programming languages.

Picking which Programming Language to learn

So if you want to get into tech, first question you ask yourself is “what kind of software would I like to build?”
Mobile? Desktop? Web? Etc.. This will inform your choice of the programming language you should learn.

Also, If your reason for wanting to learn is “So you can Make Money”, that’s also a valid reason my friend! Don't let anyone tell you otherwise.

Is it easy?

Depends on who you ask.
If you ask me, I’ll say like any new skill you’re trying to learn, it requires patience, consistency and long hours of practice time.

So, No, it’s NOT easy. It requires you to be ready to learn, sometimes on your own, most times using the Oracle - Google.

"Tech" is not a walk in the park. However, anyone can get into it. It doesn’t matter what you study in the university. But you have to be ready to study.

It’s sometimes boring, sometimes interesting, just like any other profession I guess. Difference with tech is that, you don’t have to go to a university before you start building stuff. You can start where you are. With what you have - Google & Will & Discipline. 🙂

In conclusion, not everyone can learn on their own, sometimes, people need a little guide here and there. So you can signup to FreeCodeCamp, Coding BootCamps, subscribe to Youtube playlist - Net-Ninja, buy courses on Udemy... basically, whatever works for you.

I wish you all the best in your future endeavors. Go get em!

Implementing Protected Route and Authentication in React-JS

OlumideSamuel — Sat, 13 Mar 2021 23:49:11 +0000

Almost every web application require some form of authentication to prevent unauthorized users from having access to the inner workings of the applications.

For this tutorial, I'll be showing how to set up an authentication route and protect other routes from been accessed by unauthorized users.

First things first,

Install all dependencies

npm i react-router react-router-dom
Add link to bootstrap CDN in ./public/index.html header

React-router will handle our routing, i.e switching from one page to another within the web application.

Note: We'll be building ontop of the last project from Structuring redux in a web app

Home Component

First, in ./src/view/Home let's create an Home component which will serve as our homepage. Note: onComponentDidMount, some demo data are fetched from https://jsonplaceholder.typicode.com/users to populate the landing page.

Signin Component

In ./src/view/Authentication/Signin.js, let's create the Signin component,

OnInputChange, update the userData state with the current value;

 const handleInputChange = (e) => {
    setUserData((prevState) => {
      return {
        ...prevState,
        [e.target.name]: e.target.value,
      };
    });
  };

OnSubmit, if username and password supplied by user matches admin and 123456 respectively,

save isAuthenticated as true in localStorage,
else display appropriate error message. The data saved in localStorage will be used later to confirm Authentication status.

const handleSubmit = (e) => {
    e.preventDefault();

    //if username or password field is empty, return error message
    if (userData.username === "" || userData.password === "") {
      setErrorMessage((prevState) => ({
        value: "Empty username/password field",
      }));

    } else if (
      userData.username.toLowerCase() === "admin" &&
      userData.password === "123456"
    ) {
      //Signin Success
      localStorage.setItem("isAuthenticated", "true");
      window.location.pathname = "/";
    } else {
      //If credentials entered is invalid
      setErrorMessage((prevState) => ({ value: "Invalid username/password" }));
      return;
    }
  };

App.js Component

In ./src/App.js, add the created component to the BrowserRouter from react-router-dom,

...

At this point, if the project is launched, we'll be redirected to the landing page because the path="/" points to the Home component. However, it'll be great to protect the route such that only authenticated users can have access to that route and every other user redirected to the Signin Page. This leads us to the concept of Protected Route in React-JS.

Protected Route

Protected Routes are routes that can only be accessed if a condition is met(usually, if user is properly authenticated). It returns a Route that either renders a component or redirects a user to another route based on a set condition.

In ./src/components/ProtectedRoute.js,

create a functional component that accepts component and other route details as props, and then
check a condition to confirm if user is authenticated or not. (In our case, we'll be getting isAutheticated from localStorage)
if the value is true, render the component, else, Redirect route to /signin page.

import React from "react";
import { Redirect, Route } from "react-router-dom";

function ProtectedRoute({ component: Component, ...restOfProps }) {
  const isAuthenticated = localStorage.getItem("isAuthenticated");
  console.log("this", isAuthenticated);

  return (
    <Route
      {...restOfProps}
      render={(props) =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/signin" />
      }
    />
  );
}

export default ProtectedRoute;

In ./src/App.js, import the ProtectedRoute and pass the Home component into it,

Let's add logout button to the Homepage, onClick the logout button, clear the isAuthenticated value in localStorage, and then redirect the route to Sign-in page.

Test run the Application

When the application is launched, it'll redirect to the Sign-in page,

To test if the protected route work as it should, edit the route to visit the homepage as http://localhost:3001/ , you'll notice the app will be redirected back to the Signin page at http://localhost:3001/signin page.

Landing Page
After a successful login with the set credentials: Username: admin, Password: 123456,

...
Here is a link to the code on github.
I hope this is helpful to someone. Like, share and bookmark. :)
...

If you would be interested in implementing an automatic logout feature after some seconds of user inactivity, read this next article I wrote - Implementing AutoLogout Feature in Web Applications (React)

DEV Community: OlumideSamuel

With the advent of AI, is there still a need for Frontend Engineers?

What to do?

Using AI to finish up!

In conclusion

Undo and Redo Counter - A must know Vanilla Javascript Frontend Interview Question (Part 3)

Undo and Redo Counter

Requirements

Solution Walkthrough

Defining the base html

In Javascript script.js file

Add Listener to all the Buttons

Handling Undo Action

Handling Redo Action

Nice to Have - Implement Ctrl+Z (undo) and Ctrl+Shift+Z (redo)

Final Result

Undo and Redo Counter - A must know React Javascript Frontend Interview Question (Part 4)

Undo and Redo Counter

Requirements

Solution Walkthrough

Defining the base states

Defining the base components

Main Controls

Rendering History of Past Operations

On History Update

Handling Undo Operation

Handling Redo Operation

The End Result

Shopping List - A Must Know React Javascript problem for any Frontend Interview (Part 2)

Problem

Requirements

Key Skills to be tested

Walkthrough...

Solution

Debounce

Rendering Search Results

Rendering the results

Deleting and Marking Item as Complete

Hide Search Lists container

The final look here

Shopping List - A Must Know Vanilla Javascript problem for any Frontend Interview (Part 1)

Problem

Requirements

Key Skills to be tested

Solution

Walkthrough...

Fetch Data

Debounce Function

Bind the Search Field

Render Search Suggestions

Rendering selected items

Hiding the search results on click out

The Final Look here

Winning Card (DSA Series)

Problem

Solution

The infamous Two Sum problem. (DSA Series 3)

Problem

Solution

Test Examples

Group Anagram. (DSA Series 2)

Problem

Solution

Valid Anagram. (Javascript DSA Series)

Problem

Solution

Method One

Method Two

Implementing AutoLogout Feature in Web Applications (React-JS)

Prerequisite

Login Credentials

Implementation

Basics

"Where do I start from?": Newbie Guide to Programming

Introduction

Programming Languages that exist

Picking which Programming Language to learn

Is it easy?

Implementing Protected Route and Authentication in React-JS

First things first,

In Javascript `script.js` file