DEV Community: Abdjalil Brihoum

Solving FreeCodeCamp JavaScript Algorithms and Data Structures projects

Abdjalil Brihoum — Mon, 20 Mar 2023 23:15:11 +0000

Introduction

On this post, I'll explain and help you understand in detail how to solve every FreeCodeCamp JavaScript Algorithms and Data Structures Project in a simple way. I have found that many of the code explanations I came across are somewhat weird or complicated, especially for problems 2 and 5.

Problem N°1 : Palindrome Checker
Problem N°2 : Roman Numeral Converter
Problem N°3 : Caesars Cipher
Problem N°4 : Telephone Number Validator
Problem N°5 : Cash Register

Problem N°1 : Palindrome Checker

DESCRIPTION

Return true if the given string is a palindrome. Otherwise, return false.

A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.

Note: You'll need to remove all non-alphanumeric characters (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.

We'll pass strings with varying formats, such as racecar, RaceCar, and race CAR among others.

We'll also pass strings with special symbols, such as 2A3*3a2, 2A3 3a2, and 2_A3*3#A2.

Solution ✅

function palindrome(str) {
  const filteredStr = str.toLowerCase().replace(/[^a-z0-9]/g, "");
  const reversedStr = filteredStr.split("").reverse().join("");
  return filteredStr === reversedStr;
}
palindrome("eye");

Explanation ℹ

This problem is direct and simple :

The first thing to do is to convert our string to lower case using toLowerCase() method.

We need to because "eyE" !== "Eye"

   console.log("TesT".toLowerCase());
   //output : "test"

After that we filter any non-alphanumeric characters with the help of regEx and replace() method.

   console.log("_test55^".replace(/[^a-z0-9]/g, ""));
   //output : "test55"

Now we need to reverse our string so we can compare it to the original :

split() our string so we have an array of strings.
reverse() the array.
join() to return a string from the reversed array.

   let str = "happy";
   console.log(str.split(""));
   //output : [ 'h', 'a', 'p', 'p', 'y' ]
   console.log(str.split("").reverse());
   //output : [ 'y', 'p', 'p', 'a', 'h' ]
   console.log(str.split("").reverse().join(""));
   //output : 'yppah'

The last step is to compare the original string to the reversed one, if returned true, the latter is a palindrome

return str === strReversed;

Problem N°2 : Roman Numeral Converter

DESCRIPTION

Convert the given number into a roman numeral.

Solution ✅

const table = {
  M: 1000,
  CM: 900,
  D: 500,
  CD: 400,
  C: 100,
  XC: 90,
  L: 50,
  XL: 40,
  X: 10,
  IX: 9,
  V: 5,
  IV: 4,
  I: 1,
};

function convertToRoman(num) {
  let roman = "";
  for (const key in table) {
    const value = table[key]; // ex 1000
    while (num >= value) {
      num -= value;
      roman += key;
    }
  }
  return roman;
}

convertToRoman(1234);

Explanation ℹ

This problem is very simple if you just know the rules to follow.

To convert a number to its Roman equivalent, you need to do some basic maths with the help of the table above.

Let's imagine we have number = 999

From the table (cf. Problem description), we search for the number that's (≥) greater than or equal to 999.
- This number would be 900.
We subtract 999 from 900 and save the Roman letter.
- On this case, we save : CM
We repeat the same procedure but with the result of the subtraction.
- The result is : 99

999 >= 900, so :
we sub : 999 - 900, save CM,
----
99 >= 90, so :
we sub : 99 - 90, save XC,
----
9 >= 9, so
we sub : 9 - 9, save IX
----
Result : CMXCIX

Full Examples

✳ Now, let's write some JavaScript.

We need to create an object starting from the table above.

   const table = {
     M: 1000,
     CM: 900,
     D: 500,
     CD: 400,
     C: 100,
     XC: 90,
     L: 50,
     XL: 40,
     X: 10,
     IX: 9,
     V: 5,
     IV: 4,
     I: 1,
   };

After that we need an empty string so we can save our Roman letters to it.

   let roman = "";

And finally we loop thought the object with the help of for in and :

While number >= (object value) we subtract number - (object value), and save the object key to the empty string we just created.

   for (const key in table) { // We loop
   const value = table[key]; // (Object value), ex : 1000
   while (num >= value) { // number >= (Object value)
   num -= value; // number - (Object value)
   roman += key; // saving the (Object key), ex : IX

⚠ Note :

   object = {
     name: "Doe", // name is the Object `key` , "Doe" is the Object `value`
   };

Pretty simple huh ?

Problem N°3 : Caesars Cipher

DESCRIPTION

One of the simplest and most widely known ciphers is a Caesar cipher, also known as a shift cipher. In a shift cipher the meanings of the letters are shifted by some set amount.

A common modern use is the ROT13 cipher, where the values of the letters are shifted by 13 places. Thus A ↔ N, B ↔ O and so on.

Write a function which takes a ROT13 encoded string as input and returns a decoded string.

All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on.

Solution ✅

function rot13(str) {
  const max = 90; // decimal value of Z
  return str
    .split("")
    .map((el) => {
      if (el.match(/[A-Z]/g)) {
        let charCode = el.charCodeAt() + 13;
        return charCode > max
          ? String.fromCharCode((charCode -= 26))
          : String.fromCharCode(charCode);
      } else {
        return el;
      }
    })
    .join("");
}

rot13("SERR PBQR PNZC");

Explanation ℹ

To decode ROT13 encoded strings, we need to move every letter by 13 places.

ROT13(a) = n
// 1 + 13 = 14, from the table, 14 is n
ROT13(c) = p
// 3 + 13 = 16, from the table, 16 is p

❓ What if the letter is for example w?

23 + 13 = 36 // no letter is 36th of the alphabet

We exceeded the number of the English alphabet letters, the maximum is 26.

ℹ To solve this, every time the total is greater (>) than 26, we need to subtract 26 so we start counting from the start again.

ROT13(w) = j
//23 + 13 = 36 ➡ (36>26)
//36 - 26 = 10, from the table, 10 is j

Thats it.

✳ How can we do that with JavaScript ?

In JavaScript we have a method that returns an integer representing the UTF-16 code unit of a string.

  console.log("a".charCodeAt()); // 97
  console.log("A".charCodeAt()); // 65
  console.log("z".charCodeAt()); // 122
  console.log("Z".charCodeAt()); // 90

Unlike the English alphabet, A is number 65, and Z is number 90.

⚠ Note : All letters will be uppercase [Cf. Problem description].

So, like we explained above, to decode ROT13 encoded strings, we need to move every letter by 13 places, but this time we won't follow the alphabet table, but this table :

Like mentioned above, A is 65, and Z is 90.

Now, because we are using the charCodeAt() method, we need to convert back the result to a string using String.fromCharCode() method.

  let charCode = "A".charCodeAt() + 13;
  console.log(charCode);
  // output : 78
  let str = String.fromCharCode(charCode);
  console.log(str);
  // output : N

❓ What if the letter is for example W?

ℹ Like before, if the number after adding 13 is greater (>) than the decimal value of Z (in this case 90), we subtract 26 (the total number the English Alphabet) so we start counting from the start again.

let charCode = "W".charCodeAt() + 13;
console.log(charCode);
// output : 100 > 90, so we subtract 26 :
charCode -= 26;
let str = String.fromCharCode(charCode);
console.log(str);
// output : J

✳ Now, lemme explain my code a lil bit.

First, we split() our string so we have an array of strings, after that we map() this array.
We convert each element of this array to its decimal equivalent using charCodeAt() and we add 13 to it if the latter is alphabetic, if not, we return it without touching it [Cf. problem description].
If after adding 13 the result exceeds the decimal value of Z, we subtract 26.
We convert back to a string with the help of String.fromCharCode() method.

Problem N°4 : Telephone Number Validator

DESCRIPTION

Return true if the passed string looks like a valid US phone number.

The user may fill out the form field any way they choose as long as it has the format of a valid US number. The following are examples of valid formats for US numbers (refer to the tests below for other variants):

555-555-5555
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555

For this challenge you will be presented with a string such as 800-692-7753 or 8oo-six427676;laskdjf. Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is 1. Return true if the string is a valid US phone number; otherwise return false.

Solution ✅

function telephoneCheck(str) {
  const reg = /^(1\s?)?(\d{3}|\(\d{3}\))[\s\-]?\d{3}[\s\-]?\d{4}$/gm;
  return reg.test(str);
}

telephoneCheck("1 555-555-5555");

Explanation ℹ

Explaining Regular expressions is another topic beyond this post.

Problem N°5 : Cash Register

DESCRIPTION

Design a cash register drawer function checkCashRegister() that accepts purchase price as the first argument (price), payment as the second argument (cash), and cash-in-drawer (cid) as the third argument.

cid is a 2D array listing available currency.

The checkCashRegister() function should always return an object with a status key and a change key.

Return{status: "INSUFFICIENT_FUNDS", change: []} if cash-in-drawer is less than the change due, or if you cannot return the exact change.

Return {status: "CLOSED", change: [...]} with cash-in-drawer as the value for the key change if it is equal to the change due.

Otherwise, return {status: "OPEN", change: [...]}, with the change due in coins and bills, sorted in highest to lowest order, as the value of the change key.

Currency Unit	Amount
Penny	$0.01 (PENNY)
Nickel	$0.05 (NICKEL)
Dime	$0.1 (DIME)
Quarter	$0.25 (QUARTER)
Dollar	$1 (ONE)
Five Dollars	$5 (FIVE)
Ten Dollars	$10 (TEN)
Twenty Dollars	$20 (TWENTY)
One-hundred Dollars	$100 (ONE HUNDRED)

See below for an example of a cash-in-drawer array:

[
  ["PENNY", 1.01],
  ["NICKEL", 2.05],
  ["DIME", 3.1],
  ["QUARTER", 4.25],
  ["ONE", 90],
  ["FIVE", 55],
  ["TEN", 20],
  ["TWENTY", 60],
  ["ONE HUNDRED", 100],
];

Solution ✅

const rate = {
  PENNY: 0.01,
  NICKEL: 0.05,
  DIME: 0.1,
  QUARTER: 0.25,
  ONE: 1,
  FIVE: 5,
  TEN: 10,
  TWENTY: 20,
  "ONE HUNDRED": 100,
};

function checkCashRegister(price, cash, cid) {
  const totalCid = Number(cid.reduce((sum, el) => sum + el[1], 0).toFixed(2));
  let change = Number((cash - price).toFixed(2));

  if (totalCid === change) {
    return { status: "CLOSED", change: cid };
  } else if (totalCid < change) {
    return { status: "INSUFFICIENT_FUNDS", change: [] };
  } else {
    let changeArray = [];
    cid.reverse().forEach((el) => {
      const coinName = el[0];
      const coinTotalValueInDollars = Number(el[1]);
      const selectedCurrency = Number(rate[coinName]);
      let coinsAvailable = Number(
        (coinTotalValueInDollars / selectedCurrency).toFixed(2)
      );
      let coinsToReturn = 0;
      while (change >= selectedCurrency && coinsAvailable > 0) {
        change = Number((change - selectedCurrency).toFixed(2));
        --coinsAvailable;
        ++coinsToReturn;
      }
      if (coinsToReturn > 0) {
        changeArray.push([coinName, coinsToReturn * selectedCurrency]);
      }
    });
    if (change === 0) {
      return { status: "OPEN", change: changeArray };
    } else {
      return { status: "INSUFFICIENT_FUNDS", change: [] };
    }
  }
}

checkCashRegister(3.26, 100, [
  ["PENNY", 1.01],
  ["NICKEL", 2.05],
  ["DIME", 3.1],
  ["QUARTER", 4.25],
  ["ONE", 90],
  ["FIVE", 55],
  ["TEN", 20],
  ["TWENTY", 60],
  ["ONE HUNDRED", 100],
]);

Explanation ℹ

Ahh! The famous Cash Register problem. It's actually quite easy to understand once you grasp it correctly. Trust me, once you get it, you'll see how straightforward it is.

✳ First of all, I need to explain to you the cash-in-drawer array

[
  ["PENNY", 1.01],
  ["NICKEL", 2.05],
  ["DIME", 3.1],
  ["QUARTER", 4.25],
  ["ONE", 90],
  ["FIVE", 55],
  ["TEN", 20],
  ["TWENTY", 60],
  ["ONE HUNDRED", 100],
];

Take a look at the PENNY element. 1.01 is the total value in dollars worth of PENNIES, in other words, the drawer have $1.01 worth of pennies, this means we have 101 PENNY, because every PENNY is worth $0.01
We also have $2.05 worth of NICKELS, this means the drawer have 41 NICKEL, because every NICKEL is worth $0.05, and so on...

✳ That in mind, let's have a real example first so we can move forward.

Imagine you buy something that costs $5, and you give the seller $20. The change would be $15.

Technically, the seller could return the change amount in dimes, nickels, or pennies if they have enough, but ideally they would return one $10 bill and one $5 bill (from the highest value bill to the lowest).

✳ Now, let's write some JavaScript.

We need first to calculate the change.

The change is the amount of cash the buyer gave minus the price of the purchased item.

   let change = Number((cash - price).toFixed(2));
   // we limited the decimals to two, using toFixed() method, it will also round the number
   // ex `5.1799.toFixed(2)` will output : 5.18
   // and converted the result to a number using `Number()` method

We need to calculate the total value of the money we have the drawer in dollars.

   const totalCid = Number(cid.reduce((sum, el) => sum + el[1], 0).toFixed(2));
   // cid is the `cash-in-drawer array`
   // to understand the `reduce()` method, watch : https://youtu.be/g1C40tDP0Bk

We need to know the value or the equivalent of each bill/coin in dollars.

   const rate = {
     PENNY: 0.01, // this means a PENNY is worth $0.01
     NICKEL: 0.05,
     DIME: 0.1,
     QUARTER: 0.25,
     ONE: 1,
     FIVE: 5,
     TEN: 10,
     TWENTY: 20,
     "ONE HUNDRED": 100,
   };

Now, we need to check :

If totalCid === change, we return CLOSED.
If totalCid < change, we return INSUFFICIENT_FUNDS.
If totalCid > change, we return OPEN and calculate the correct amount of the change to be returned.

   if (totalCid === change) {
     return { status: "CLOSED", change: cid };
   } else if (totalCid < change) {
     return { status: "INSUFFICIENT_FUNDS", change: [] };
   } else {
     // here, we calculate the correct amount of the change to be returned.
     // check step 5
   }

Now, inside the last else block, we need to :

Create a variable in which we will store the change to return.
Reverse the cid array so that it is in descending order (from the highest value to the lowest). See the real example I explained above for why this is necessary.

Loop the array.

 let changeArray = [];
 cid.reverse().forEach((el) => {
   // check step 6
 });

Now inside the loop, for each element of the array, we set some variables for :

The name of the coin, for example PENNY.
The total value of the coins we have in the drawer in dollars, for example 1.01.
The value or the equivalent of the coin in dollars, we pick it from the rates object we created in step 3, for example 20.

How many coins I have available, for example we have $1.01 worth of PENNIES, and each PENNY is worth $0.01, this means we have 101 PENNY.

 cid.reverse().forEach((el) => {
   const coinName = el[0]; // PENNY
   const coinTotalValueInDollars = Number(el[1]); // 1.01
   const selectedCurrency = Number(rate[coinName]);
   // rate['PENNY'] -> output : 0.01
   let coinsAvailable = Number(
     (coinTotalValueInDollars / selectedCurrency).toFixed(2)
   );
   // 1.01 / 0.01 -> output : 101
 });

✳ Before continuing, let's first have another real example on how we calculate the right amount of change to be returned using the following cash-in-drawer array :

[
  ["PENNY", 1.01],
  ["NICKEL", 2.05],
  ["DIME", 3.1],
  ["QUARTER", 4.25],
  ["ONE", 90],
  ["FIVE", 55],
  ["TEN", 20],
  ["TWENTY", 60],
  ["ONE HUNDRED", 100],
];

From the array, and with the help of the rates object, we have in the drawer :

Currency	Number of bills/coins
ONE HUNDRED	1
TWENTY	3
TEN	2
FIVE	11
ONE	90
QUARTER	17
DIME	31
NICKEL	41
PENNY	101

ℹ You read the table this way : We have 3 twenty-dollar bills

Now, if you buy something worth $9.50 and you give the seller $100, the change would be $90.5. To calculate the amount to return :
- From the currencies we have in the cash drawer (picture above), we search for the one that's (≤) less than or equal to the change :
- Can't be $100 because $90.5 > $100.
- The next currency is $20, and that's the right one.
- If we have enough bills/coins of the selected currency, we subtract, if not, we move to the next currency and so on.

Now, to implement this with code, we use the while statement :

While change ≥ selected currency and we have enough bills/coins, we subtract and save how many bills/coins we gave.

let coinsToReturn = 0; // we didn't give any bills/coins yet
while (change >= selectedCurrency && coinsAvailable > 0) {
  change = Number((change - selectedCurrency).toFixed(2));
  --coinsAvailable; // decrement the total by 1 (-1)
  ++coinsToReturn; // increment the total by 1 (+1)
}

If coinsToReturn > 0, it means we gave some bills/coins, so we push to the empty array we created on step 5 the currency name and the total in dollars we gave worth of this currency.

if (coinsToReturn > 0) {
  changeArray.push([coinName, coinsToReturn * selectedCurrency]);
}

Finally, we need to check, if change = 0, this means we can return the amount of change, if not, we have insufficient funds.

if (change === 0) {
  return { status: "OPEN", change: changeArray };
} else {
  return { status: "INSUFFICIENT_FUNDS", change: [] };
}

✅ Thats it, we finished 🎉🎉.

Note: I have tried to make this as beginner-friendly as possible, which may result in some repetition and potentially boring sections.

You can check the solutions on my github.

I made a 'Google keep' clone with most of its features using Angular

Abdjalil Brihoum — Fri, 30 Sep 2022 23:16:24 +0000

Introduction

For those who don’t know Google keep, it’s a note-taking service offered by Google.
Because I frequently use this service, I decided to make a clone that follows the same design pattern and include most of its features.

This project is made with the help of :

Demonstration

Thanks to Vercel, you can play with the project online

Project structure

It follows a simple structure :

Disclaimer :

⚠ This is not a tutorial on how to make a clone of Google keep. Here i'll show you the techniques i used to solve problems i encountered while making this project.

Getting started

I divided my project to 5 components, we'll discuss two(2) of them :

The input component.
The notes component.

The other three(3) are too simple to discuss.

1️⃣ The input component
1. Problem N°1
2. Solution to problem N°1
3. Problem N°2
4. Solution to problem N°2
  1. 1️⃣ Simple note (not the one with checkboxes)
  2. 2️⃣ List note (the one with checkboxes)
2️⃣ The note component
1. Problem N°1
2. Solution to problem N°1
3. Problem N°2
4. Solution problem N°2

1️⃣ The input component

Problem N°1

Watch the following video :

Solution to problem N°1

I created two (2) containers :

The first one is just for the design, a placeholder

The second one is where the users actually write their notes

Then i added a hidden attribute to the second container, so only the placeholder will be visible.

Now, when the user clicks on the placeholder, we call a method that :

Add a hidden attribute to the placeholder
Remove the hidden attribute from the second container

 notePhClick() {
    this.notePlaceholder.nativeElement.hidden = true;
    this.noteMain.nativeElement.hidden = false
 }

Now, inside the second container, i have a condition :

What template should I render, the note template or the list template.

So, i need to :

First , create a new boolean isCheckbox and set it to false :

isCheckbox = false

Second, inside my second container I need to check if isCheckbox is true, i render the list template, else the note template :

<div #noteMain class="note-main">
  <div *ngIf="isCheckbox">
    <!-- list content -->
  </div>
  <div *ngIf="!isCheckbox">
    <!-- note content -->
  </div>
</div>

ℹ This approach works fine, but i prefer using ngTemplateOutlet and have a cleaner code :

<div #noteMain class="note-main" hidden>
  <ng-container
    [ngTemplateOutlet]="isCheckbox ? checkboxTemplate : noteTemplate"
  >
  </ng-container>
</div>

And create two ng-template each one contains the proper HTML :

So, if isCheckbox is true checkboxTemplate will be rendered, else noteTemplate will be rendered.

✳ This also mean, when the user clicks on the placeholder (and not the check icon) noteTemplate will be rendered. So, we should have :

✳ But when the user clicks on the check icon, we need to change isCheckbox to true :

And because of the Event bubbling, notePhClick() will be called, as a result, checkboxTemplate will be rendered (because isCheckbox = true) :

❔ What about the autofocus you may ask ? simple :

Inside notePhClick() we add a condition and focus() the right element

 notePhClick() {
    this.notePlaceholder.nativeElement.hidden = true;
    this.noteMain.nativeElement.hidden = false
    //
    if (this.isCheckbox) this.noteBody.nativeElement.focus()
    else this.cboxBody.nativeElement.focus()
 }

Now, for the last part of this problem : closing the note when clicking outside.

The solution is to listen to mousedown event :

If the click is outside note box, hide noteMain and show notePlaceholder. The opposite of what we did earlier :

 notePhClick() {
    // we add the following :
    document.addEventListener('mousedown', (event: Event) => {
      let el = this.noteMain.nativeElement as any
      if (!(el).contains(event.target)) {
        // if the click is outside `el` (means outside the note box) do :
        this.notePlaceholder.nativeElement.hidden = false
        this.noteMain.nativeElement.hidden = true
      }
    })
  }

Problem N°2

Watch the following video :

Solution to problem N°2

First, let's create a tooltip, for that, i used PopperJs.

ℹ Note : for those wondering what's a tooltip :

By reading PopperJs Docs :

So i need two things :

A button : needs no further explanation.
A tooltip div : the tooltip shown in the picture above is too simple to discuss, so i'm going to show you how i managed to create the colors & backgrounds tooltip.

To create this tooltip :

➖ First, I need a list of colors & backgrounds, so i created two enums (you can also get this done with only simple objects) :

➖ Second, I need to iterate over my enum using *NgFor. And because I have an object and not an array, i need to add the keyvalue pipe :

<!-- tooltip div -->
<div #colorMenuTt hidden>
  <div class="first-row">
    <!-- first row : colors -->
    <ng-container *ngFor="let color of bgColors | keyvalue">
      <div
        [style.background-color]="color.value"
        (click)="changeColor(color.value)"
      ></div>
    </ng-container>
  </div>
  <div class="second-row">
    <!-- first row : backgrounds -->
    <ng-container *ngFor="let image of bgImages | keyvalue">
      <div
        [style.background-image]="'url('+image.value+')'"
        (click)="changeImage(image.value)"
      ></div>
    </ng-container>
  </div>
</div>
<!-- We will discuss changeImage() & changeColor() later -->

⚠ Note : notice the hidden attribute, we don't need this div to be visible, until we need it to be.

✳I have my button, I have my tooltip div, I can now create a new tooltip using PopperJs :

On the button element I need to bind a click event that calls a method, this method needs two parameters : a reference to this same button & to the tooltip div

<!-- colorMenuTt : reference to the tooltip div we created just above  -->
<div
  #colorMenuTtBtn
  (click)="openTooltip(colorMenuTtBtn,colorMenuTt)"
  class="color"
></div>

The method in question :

  openTooltip(button: HTMLDivElement, tooltipEl: HTMLDivElement) {
    // first, we need to remove the `hidden` attribute from the tooltip div
    this.tooltipEl.nativeElement.hidden = false;
    // then we call PopperJs
    createPopper(button, tooltipEl)
  }

ℹ Note : If you want the tooltip to close (or hide) when the user clicks away, you need to listen to mousedown event like we did earlier, and re-add the hidden attribute to the tooltip div. So, the method will look like this :

  openTooltip(button: HTMLDivElement, tooltipEl: HTMLDivElement) {
    this.tooltipEl.nativeElement.hidden = false
    createPopper(button, tooltipEl)
    //
    document.addEventListener('mousedown', (event: Event) => {
      let el = this.tooltipEl.nativeElement as any
      if (!(el).contains(event.target)) {
        this.tooltipEl.nativeElement.hidden = true
      }
    })
  }

✳ Now, let's retrieve what the user typed. And we start with :

1️⃣ Simple note (not the one with checkboxes)

To retrieve what the user typed, i need to add two template variables, one for the note title, and one for the note body (#noteTitle, #noteBody).

Now, with the help of ViewChild & innerHTML (because it's a div, not an input), i can retrieve what the user typed by executing the following method :

  saveNote() {
    let noteObj = {
      noteTitle: this.noteTitle.nativeElement.innerHTML,
      noteBody: this.noteBody.nativeElement.innerHTML
    }
    // we call another method to save this object on the database or whatever
    this...save(noteObj)
  }

⚠ So, it needs to be called every time the user closes the note, To do that, we need to add it to notePhClick(), inside the callback of the event listener :

  notePhClick() {
    //...
    document.addEventListener('mousedown', (event: Event) => {
      let el = this.noteMain.nativeElement as any
      if (!(el).contains(event.target)) {
        // ⚠ we add it here ⚠
        this.saveNote()
      }
    })
  }

TLDR : when the user clicks outside the note box, the callback function inside notePhClick() event listener calls saveNote().

2️⃣ List note (the one with checkboxes)

When the user clicks on the new list icon, isCheckbox becomes true and this time, checkboxTemplate will be rendered.

Before starting, I need first to create a new array :

 interface CheckboxI {
    done: boolean,
    data: any,
    id: number
}
checkBoxes: CheckboxI[] = []

After that, inside checkboxTemplate I have the following :

<!-- ------------- part 1 ------------- -->
<!-- looping through the array we just created -->
<ng-template #checkboxesTemplate>
  <ng-container *ngFor="let cb of checkBoxes">
    <!-- the check icon https://i.imgur.com/ANXf4Po.png -->
    <div
      [class.done]="cb.done"
      class="cbox-icon"
      (click)="cb.done = !cb.done"
    ></div>
    <!-- the checkbox content -->
    <div>
      <div
        [innerHTML]="cb.data"
        class="cbox-note"
        contenteditable="true"
        spellcheck="true"
      ></div>
    </div>
  </ng-container>
  <!-- ------------- part 2 ------------- -->
  <div
    #cboxPh
    (keydown.enter)="addCheckBox(cboxPh,$event)"
    class="cbox-note"
    contenteditable="true"
    spellcheck="true"
  ></div>
</ng-template>

➖ If you take a look at part 1 , you notice that we are looping through checkBoxes array, and because the latter is empty (we didn't push anything there yet), part 1 will render nothing.

➖ About part 2, this part is just an area where the user can type the content of the checkbox, and when he presses the Enter key, addCheckBox() method will be called, and pushes a new object to checkBoxes array

addCheckBox() method :

  addCheckBox(el: HTMLDivElement, $event: Event) {
    $event.preventDefault() // otherwise a line break will be added
    let value = el.innerHTML // we retrieve the entered value
    el.innerHTML = ''
    // we push the entered data
    this.checkBoxes.push({
      done: false,
      data: value,
      id: this.checkBoxes.length
    })
  }

ℹ After pushing a new checkbox this is the result :

✳ Finally, To save this array, we need to add it to noteObj :

  saveNote() {
    let noteObj = {
      //...
      isPinned: this.isPinned,
      isArchived: this.isArchived,
      isDeleted: this.isDeleted,
    }
    // we call another method to save this object on the database or whatever
    this...save(noteObj)
  }

ℹ Note : The simple note and the list note share the same title div. This means whether we have a note or a list, we retrieve the title from the same element.

✳ Now, retrieving the background color/image.

I recorded a video showing you how i did it :

And the last part of this problem : Checking if the note is pinned, archived or deleted :

Simple, I need to create 3 new variables, isPinned = false, isArchived = false, isDeleted = false

And when the user wants to pin/delete/archive the note, I change the corresponding variable to true

Ex : this.isPinned = true

So, noteObj will look like this :

saveNote() {
  let noteObj = {
    //...
    isPinned: this.isPinned,
    isArchived: this.isArchived,
    isDeleted: this.isDeleted,
    //save to db
    this...save(noteObj)
  }
}

✅ Some useful notes :

➖ If you want to avoid saving empty notes, you need to check if :

the note title ain't empty, or the note body ain't empty, or if there's any checkbox
- if any of the above conditions is truthy, save the note, else do nothing.

  saveNote() {
    let noteObj = {
      //...
    }
    if (noteObj.noteTitle.length || noteObj.noteBody.length || this.checkBoxes.length) {
      // if any of the conditions is truthy, save the note
      this...save(noteObj)
    }
  }

➖ Every time the user creates a note, you need to reset all the variables and entered data to the default values. Otherwise, when you try to create a new note, you find it already filled.

reset() {
  this.noteTitle.nativeElement.innerHTML = ''
  this.checkBoxes = []
  // ....
}

➖ If you want to have a masonry layout for your notes, I advise you to check Bricks.js

🎉 Congratulations. we just finished discussing the logic behind input component.

2️⃣ The note component

Problem N°1

Please watch the following video :

Solution to problem N°1

I need to create two containers, one for the pinned notes and the other for the other notes, and inside it, i need to loop through :

pinned notes inside the first container
other notes inside the second container

This means i also need two arrays one for each container. So when retrieving notes from the database, i need to separate them with the help of filter() :

    pinnedNotes:NoteI[] = []
    otherNotes:NoteI[] = []
    //
    notes() {
      this.Notes.notesList$.subscribe({
        next: (notes: NoteI[]) => {
          this.pinnedNotes = notes.filter(x => x.pinned === true).reverse()
          this.otherNotes = notes.filter(x => x.pinned === false).reverse()
        }
      })
    }

Now, my HTML should look like this :

<section>
  <p>pinned</p>
  <ng-container *ngFor="let note of pinnedNotes">
    <!-- ⚠ notice the property & style binding  -->
    <div
      class="note-main"
      [ngStyle]="{'background-color':note.bgColor,'border-color':note.bgColor,'background-image' : note.bgImage}"
    ></div>
    <div class="note-title">
      <span [innerHTML]="note.noteTitle"></span>
    </div>
    <!-- and so on ... -->
  </ng-container>
</section>

<section>
  <p>other</p>
  <ng-container *ngFor="let note of otherNotes">
    <div
      class="note-main"
      [ngStyle]="{'background-color':note.bgColor,'border-color':note.bgColor,'background-image' : note.bgImage}"
    ></div>
    <div class="note-title">
      <span [innerHTML]="note.noteTitle"></span>
    </div>
    <!-- and so on ... -->
  </ng-container>
</section>

⚠ The code inside first container and the second container is exactly the same, and repeating the same code is not a good practice.
The solution here is to use ngTemplateOutlet with ngTemplateOutletContext.

So, we should have :

<div>
  <p>pinned</p>
  <!-- here we pass pinnedNotes to noteTemplate -->
  <ng-container
    [ngTemplateOutlet]="noteTemplate"
    [ngTemplateOutletContext]="{notes:pinnedNotes}"
  >
  </ng-container>
</div>

<div>
  <p>other</p>
  <!-- and here we pass otherNotes to noteTemplate -->
  <ng-container
    [ngTemplateOutlet]="noteTemplate"
    [ngTemplateOutletContext]="{notes:otherNotes}"
  >
  </ng-container>
</div>
<!-- -- Templates -- -->

<!-- let-notes="notes" ◀ notes array passed from ngTemplateOutletContext -->
<ng-template #noteTemplate let-notes="notes">
  <ng-container *ngFor="let note of notes">
    <ng-container *ngFor="let note of otherNotes">
      <!-- ⚠ notice the property & style binding  -->
      <div
        class="note-main"
        [ngStyle]="{'background-color':note.bgColor,'border-color':note.bgColor,'background-image' : note.bgImage}"
      ></div>
      <div class="note-title">
        <span [innerHTML]="note.noteTitle"></span>
      </div>
      <!-- and so on ... -->
    </ng-container>
  </ng-container>
</ng-template>

✳ So, every time the user adds a new note, pinned or not, it will be rendered on the proper container.

❔ What if the user unpin or pin a saved note ?

ℹ For that, every time the user clicks on the pin icon, you should update the isPinned key of this note on the database :

  togglePin(noteId: number, pinned: boolean) {
    pinned = !pinned
    // call a method that updates your note on your database
    this...updateKey({ isPinned: pinned } , noteId)
  }

And, of course, on every change, you need to refresh pinnedNotes & otherNotes.

(Because i'm using DexieJs, the latter has a method that triggers whenever detects a change)

And the same thing goes for the other properties, like isArchived ...

Problem N°2

Please watch the following video :

Solution problem N°2

According to this video, clicking on a note opens a modal, from this modal we can edit this note. So inside note component, we need to add multiple methods that take care of every action the user can perform, for example :

A method for pinning/unpinning a note
A method that changes the background color/image
A method that saves the note when closed
....

😓 Seems like we are repeating what we have already done on the input component.

✅ The solution here is kinda simple :

Please watch the following video :

ℹ TLDR : Inside input component, we have a variable by the name of isEditing decorated with Input() and set to false by default:

@Input() isEditing = false

Inside notes component, we created a modal, this modal opens every time we click on a note, inside it, we added input component as child and pass isEditing to input component as true.

With the help of *ngIf, input component initiate every time the modal opens.

<div #modalContainer class="modal-container">
  <div #modal class="modal">
    <app-input [isEditing]="true" *ngIf="isModalOpen"></app-input>
  </div>
</div>

When the modal opens, input component will be initiated, and a method there will be executed. This method changes the values of title, body, background image... which are empty by default to the ones of the clicked note. Its like we are about to create a new note, but the title, body, and background are already filled by some data.
And when it comes to saving the note, and because isEditing is true, we update the note instead of creating a new one.

✳ I guess we finished, so 🎉🎉

⚠ Important note : The code & logic I demonstrated on this post are not 100% identical to the ones of the project, for the simple reason that I wanted to simplify every step I explained, so most of the interested readers won't have a bad time.

I still have a feeling that i missed or skipped some parts, but thats okay because you can always find the source code on github.

How I optimized my Angular website

Abdjalil Brihoum — Thu, 21 Jul 2022 23:57:00 +0000

Introduction

Building applications/websites using Angular has a downside - the bundle size. This directly affects the loading speed and user experience of our projects.

Reducing the bundle size is important, but there are other essential elements to consider for creating an ideal website.

Personally, I follow a four-step process when building apps/websites:

Designing
Coding
Ensuring Responsiveness
Optimizing

In this post, we will focus on the last step.

Getting started

I'll start by discussing the problems I encountered and how I addressed them, including the steps I took to reduce the bundle size.

1. Visual Problems

The following link showcases my website after the 3rd step.

From this video, I can identify 3 visual problems :

1.1. Visual Problem 1

The website looks broken for a split second, then loads normally.

1.2. Visual Problems 2 & 3

The font took ages to load, the same thing goes with the pizza picture and the other more important resources

2. Invisible problems

Let's open the dev console and see what's happening under the hood.

I can identify two issues from this video.

2.1. Invisible Problem 1

The website took 6.84s to fully load, with 109 requests and 4.4 MB of resources. This happened because the website loaded all its resources from pages 1 to 5, including unnecessary ones.

To put those numbers into perspective, it would take a 3G internet connection about ~24s to load all the resources.

2.2. Invisible Problem 2

The website is loading resources that are not needed initially, before loading the necessary ones, causing a delay in rendering critical resources.

For example :

The website first loaded all the used backgrounds, from page 1 to 5 (number.3).
Then, a picture located on page 4, which was not yet needed, was loaded (number.4).
Next, 7 other pictures located on page 2, also not yet needed, were loaded (number.5).
Lastly, the most critical resource, the pizza picture was loaded.

So, the pizza picture took approximately ~2.129s (1.92s + 0.209s) (number.1 & 2) to load, resulting in a broken slider being displayed to the user during this time.

The same goes for the font.

It was the last resource to load, taking approximately ~4.09s (1.72s + 2.37s) to render.

ℹ Note:

You may ask: Why did he pick the pizza picture from all the pictures ❓

I'll answer you with another question :

What picture do you see first when you visit the website ❓

Lighthouse Score

As expected, the LCP (largest Contentful paint) and the CLS (Cumulative Layout Shift) are bad, due to the Invisible Problem 2 and Visual Problem 1 respectively, surprisingly the FCP (First Contentful Paint) is decent.

Bundle size

We can do much much better.

✳ Before explaining and fixing said problems, let's first optimize the bundle size.

Improving the bundle size 📉

I would like to highlight something before starting :

⚠️ Never import third-party styles (CSS/Sass...) inside any of your Angular components, instead use the global styles.scss file.

There are many ways to reduce the bundle size, but that's not the focus of this article, here I will be showcasing how 'I' optimized my Angular website.

1. Lazy loading third-party libraries

The first thing I personally do is to Lazy Load noncritical third-party libraries. This means libraries that are not required the second the website loads, therefore their load can be delayed until all the more important resources are loaded and rendered. This reduces the main bundle size, which in turn improves the website's loading speed.

I'll give some examples to clarify more :

I have a plugin called lightGallery, which is only needed when a user wants to open an image gallery. Logically, its load can be delayed until the more critical resources of the website (such as the pizza picture and important styles/fonts) are downloaded and rendered in the view.
I also have Bootstrap installed. its JavaScript is only required when we need interactivity in our project, like for example: opening a modal, Using a collapse, a carousel… So we can delay its load too.

That's the list of non-critical third-party libraries used by the website :

Here, in the video below, I'll explain how to lazy load them.

⚠ Note: I made a small mistake on the video (1:30), it should be

"input": "node_modules/wow.js/dist/wow.js",

appendScript('wow.js');

ℹ The code I used on the video :



// app.component.ts
function appendScript(name: string) {
  let script = document.createElement("script");
  script.src = name;
  script.async = true;
  document.head.appendChild(script);
}

To summarize 📝 :

We instructed Angular to load our scripts as separate files during the build and not inject them, so they can be lazy-loaded.
Then, we used window.onload event to load our scripts after the entire website, including its content such as images and styles, has loaded. This approach ensures that our scripts are the last resources to load.

1.2. Bundle size

✅ Just like that, we eliminated (163.02 kB).

2. Removing unused modules

This website has no routes, as it only contains a single page, even though the RouterModule is installed. We need to remove it because it's basically useless.

On the app.module.ts file, we remove RouterModule from the imports array:

2.1. Bundle size

✅ We were able to eliminate (75.85 kB) by removing RouterModule.

This means we eliminated a total of (238.71 kB) from the initial build.

▶ You can check the website after reducing the bundle size.

Lighthouse Score

The website's Lighthouse score has slightly improved, but all the previously mentioned issues still persist. Therefore, we need to address them to optimize the website's performance further.

Explaining Visual Problem 1

This website uses Bootstrap and styles.css contains Bootstrap's CSS and other important styles. The reason for this problem is that Angular started rendering the website before styles.css finished downloading, causing the page to be displayed without the necessary styles.

To verify this, we can test by blocking the download of styles.css completely and observe if we still get the same results :

Yes, we do.

Solving Visual Problem 1

To solve this issue, we need to ensure that all critical CSS is loaded before Angular starts rendering the website.

Critical CSS means :

The CSS responsible for the content that's immediately visible when we open a website.

or :

The CSS of the first page you see when opening a website.

How can we know ❓ well, watch the video below :

So, we have as critical the following :

Bootstrap CSS;
SwiperJS CSS;
Custom CSS;
Animations;

⚠ Note: The font file is also critical, however, we will address it with Visual Problems 2 & 3. This is because the font file contains 3 fonts, whereas the homepage requires only 1. For now, we consider it non-critical.

And as non-critical :

Snackbar CSS
lightGallery CSS & its plugins
fonts file

Now, Instead of using a single file (like styles.scss) containing all styles, we can separate them based on their priority.

We create two files: pre_styles.scss & late_styles.scss and import our critical and non-critical styles into them, respectively.

If the .gif is not clear, that's the content of the two files (styles.scss is completely empty):

ℹ Note: Instead of importing the entire Bootstrap library, you can import only the specific components that you need.

Now, I need to preload pre_styles.scss & lazy load late_styles.scss.

1. Preloading critical styles

Just like we did before when we lazy loaded third-party libraries javascript, we need to tell angular to load pre_styles.scss as a separate file during the build and not inject it, so we can preload it.

Inside angular.json, under the styles[] array, we remove the default value :



// angular.json
"styles": ["src/styles.scss"],

and change it to :



// angular.json
  "styles": [
    {
      "input": "src/pre_styles.scss",
      "inject": false
    },
    {
      "input": "src/late_styles.scss", // <- we will use it later.
      "inject": false
    }
  ]

After we build, we can locate our two files, pre_styles.scss and late_styles.scss, inside the dist/ folder.

Now, in order to preload pre_styles.scss, we add the following code inside the <head> element of src/index.html:



<!-- index.html -->
<head>
  ...
  <link rel="preload" href="pre_styles.css" as="style" />
  <link rel="stylesheet" href="pre_styles.css" />
</head>

What I've done here is prioritize the loading of pre_styles.css as the first resource in the download queue. This means the browser will start downloading the website resources with pre_styles.css at the top of the list so that when Angular starts rendering, the critical styles are already loaded and ready.

You can read more about rel=preload : https://developer.mozilla.org

2. Lazy loading non-critical styles

In the previous step, we already told angular to load late_styles.scss as a separate file, it's time to use it.

Within the ngAfterContentInit() method of app.component.ts, we define a new function named appendStyle() below the appendScript() function that we created earlier :



// app.component.ts
ngAfterContentInit() {
  //...
  function appendScript() {
    //...
  }
  function appendStyle(name: string) {
    let style = document.createElement("link");
    style.rel = "stylesheet";
    style.type = "text/css";
    style.href = name;
    document.head.appendChild(style);
  }
}

Now, we use appendStyle() function to lazy load late_styles.scss by calling it within the window.onload event :



// app.component.ts
  ngAfterContentInit() {
    //...
    window.onload = () => {
      //...
      appendStyle('late_styles.css');
    };
  }

ℹ A reminder: The window.onload event is fired when the entire website loads.

Now, we restart the server and observe :

We can see that pre_styles.css is the first file to load, providing all the critical styles necessary for Angular to begin rendering, eliminating the broken website look.

late_styles.css is among the last files to load, making room for more critical styles to load faster.

✅ We completed our task, and Visual Problem 1 is now fixed.

❗ However, we may have a tiny problem :

pre_styles.css is quite large, and a significant portion of it contains dead code that is never used. This is mainly because we imported the entire Bootstrap library instead of selectively importing the required components.

✅ Using purgeCSS, we can eliminate all the unused code and optimize the performance further.

3. Installing PurgeCSS

On the command prompt :



# command prompt
npm i -D purgecss

Now, we create a new file named purgecss.config.js on the root of the project, and add the following code :



// purgecss.config.js
module.exports = {
  content: ["./dist/**/index.html", "./dist/**/*.js"],
  css: ["./dist/**/combined.css"],
  output: "./dist/[FOLDER]/combined.css",
  safelist: [/^swiper/],
};

⚠ Note: Replace [FOLDER] with your app name (within the output property).

ℹ Note: You may have noticed that I have set the safelist to [/^swiper/]. This is because I want to prevent PurgeCSS from removing any CSS related to SwiperJS. Since SwiperJS adds CSS classes dynamically after the page load, PurgeCSS may not be aware of them and could mistakenly remove them.

Next, we navigate to package.json and create a new script named purgecss :



"purgecss": "purgecss -c purgecss.config.js",

Then, we edit the build script from :



"build": "ng build"

To :



 "build": "ng build && npm run purgecss "

⚠️ Note: Build using npm run build instead of ng build, so purgecss script kicks in.

After building, the size of pre_styles.css dropped by (190.6 kB) :

Lighthouse

The CLS (Cumulative Layout Shift) has decreased, because, as expected, we fixed Visual Problem 1. However, LCP (largest Contentful paint) is still poor, because the pizza picture is always late to the party, AKA Visual Problems 2 & 3.

▶ Visit the website after this step :

Explaining Visual Problems 2 & 3

The cause of this problem is the order of resources in the download queue.
As you may already know, browsers have a limit on the number of parallel requests.

Source: blog.bluetriangle.com

Given this limitation, we must prioritize the order in which resources are loaded, making sure to load high-priority resources like the font and pizza picture before the lower-priority ones

Solving Visual Problems 2 & 3

This issue can be easily resolved by preloading the font and the pizza picture, as we did earlier.

Inside the <head> element of src/index.html, we add the following code :



<!-- index.html -->
<head>
  ...
  <link rel="preload" href="[YourPath]/pizza.webp" as="image" />
</head>

And we follow the same procedure with the font used on the home page (DayburyRegular.woff2) :



<!-- index.html -->
<head>
  ...
  <link
    rel="preload"
    href="[YourPath]/DayburyRegular.woff2"
    as="font"
    type="font/woff2"
    crossorigin="anonymous"
  />
</head>

⚠ Note: The use of crossorigin here is important.

Now, I need to transfer my font from fonts.css to pre_styles.scss

⚠️ Note: Make sure to use the correct path for the font src when transferring it.

✅ The task has been completed and the issue causing Visual Problems 2 & 3 has been resolved. This means no more delays in loading the font or the pizza picture.

▶ Visit the website after this step :

Explaining Invisible Problem 1

This issue occurs because the website loads all its resources from pages 1 to 5, even those that are not necessary.
Ideally, we should only load resources that are currently visible in the viewport and postpone the loading of the remaining resources until we scroll to them.
By following this approach, we accelerate the loading time of the visible resources by reducing the number of files that need to be downloaded initially.

ℹ️ TL;DR: We should only load resources that are visible on the screen.

Solving Invisible Problem 1

The solution to this issue is to use a library that loads only the visible resources and lazy loads the rest. My personal choice would be lazysizes By Alexander Farkas.

I would be happy to explain how I implemented lazy loading on my website using lazysizes, but this post is already long enough and that's not the primary focus for today. Instead, I will jump directly to the results. However, I am planning to create a detailed guide with step-by-step instructions, which I will link here for reference.

I implemented lazy loading for all the pictures and backgrounds on the website. The image below shows the difference before and after the implementation :

✅ The website made only 49 requests initially, transferred 1.1 MB of resources, and loaded all of them in just 1.28s.

ℹ Note: The results mentioned above were achieved without utilizing the browser cache as it was disabled during the test.

And by caching the resources, the load time can be reduced to a maximum of ~ 0.5s.

Now, resources will be loaded as we scroll to them :

✅ The issue causing Invisible Problem 1 has been successfully resolved.

▶ Visit the website after this step :

Lighthouse score

Mission accomplished ✅.

The load is fast as ⚡.

ℹ️ Note: Invisible Problem 2 was also resolved when we fixed the Visual Problems 2 & 3 issues.

MORE SPEED!

What if I told you we can reduce the bundle size even more and enhance the already impeccable Lighthouse score ❓

✳ The method I'm about to show you will allow us to initially load only the first visible page, and then lazy load the remaining pages afterward.

This means that instead of loading the entire website, we only load the first page component, resulting in a smaller initial page size and faster loading speed.

ℹ️ TL;DR: We only load components that are currently in view, and lazy load the remaining.

⚠ Note: Keep in mind this method comes with several downsides.

To start, Inside my app.component.ts, I need to remove all pages except for page 1 from rendering, meaning only page 1 can be loaded and displayed.

After that, I need to add a new <ng-container> and declare a template Variable named #injectHere inside it.

Next, in order to access <ng-container>, we declare the following :



@ViewChild('injectHere', { read: ViewContainerRef }) injectHere!: ViewContainerRef;

And below, we define a new method that will be responsible for loading the remaining components :



  async loadComponents() {
    const { Page2Component } = await import('./components/page2/page2.component');
    this.injectHere.createComponent(Page2Component);
    const { Page3Component } = await import('./components/page3/page3.component');
    this.injectHere.createComponent(Page3Component);
    const { Page4Component } = await import('./components/page4/page4.component');
    this.injectHere.createComponent(Page4Component);
    const { Page5Component } = await import('./components/page5/page5.component');
    this.injectHere.createComponent(Page5Component);
  }

Now, we need to call this method. In my opinion, it is better to wait for page 1 to fully load before loading the remaining components to ensure a faster initial loading speed. To achieve this, we call the method under the window.onload event :



window.onload = async () => {
  await this.loadComponents();
  //...
};

ℹ Note: loadComponents() is asynchronous and should be awaited before proceeding further.

And if we open the dev-console :

▶ Visit the website after this step :

Bundle size

✅ The main bundle size was reduced by (83.29 kB), resulting in a faster loading time and quicker display of page 1.

Lighthouse Score

We have achieved a slight improvement by gaining some milliseconds and completely eliminating the blocking time.

The Takeaways

Make sure that all of your critical styles are ready when your website starts rendering.
If necessary, preload some of your main resources, like we did with the pizza picture and the font.
Always, like always lazy load your images, and if possible, lazy load your non-critical JS & CSS.
Install the minimum required third-party libraries and uninstall any unused ones.
Always open your dev console, analyze and prioritize the order of your resources.

If you have suggestions or advice regarding the information I shared, please don't hesitate to let me know. Your feedback is always welcome.

I aimed to explain everything in a beginner-friendly way, which may have led to some repetition.

You can find the website's source code on Github if you're interested:

DEV Community: Abdjalil Brihoum

Solving FreeCodeCamp JavaScript Algorithms and Data Structures projects

Introduction

Table Of Contents

Problem N°1 : Palindrome Checker

Solution ✅

Explanation ℹ

Problem N°2 : Roman Numeral Converter

Solution ✅

Explanation ℹ

Full Examples

Problem N°3 : Caesars Cipher

Solution ✅

Explanation ℹ

Problem N°4 : Telephone Number Validator

Solution ✅

Explanation ℹ

Problem N°5 : Cash Register

Solution ✅

Explanation ℹ

I made a 'Google keep' clone with most of its features using Angular

Introduction

Demonstration

Project structure

Disclaimer :

Getting started

Table Of Contents

1️⃣ The input component

Problem N°1

Solution to problem N°1

Problem N°2

Solution to problem N°2

1️⃣ Simple note (not the one with checkboxes)

2️⃣ List note (the one with checkboxes)

2️⃣ The note component

Problem N°1

Solution to problem N°1

Problem N°2

Solution problem N°2

How I optimized my Angular website

Introduction

Getting started

1. Visual Problems

1.1. Visual Problem 1

1.2. Visual Problems 2 & 3

2. Invisible problems

2.1. Invisible Problem 1

2.2. Invisible Problem 2

Lighthouse Score

Bundle size

Improving the bundle size 📉

1. Lazy loading third-party libraries

1.2. Bundle size

2. Removing unused modules

2.1. Bundle size

Lighthouse Score

Explaining Visual Problem 1

Solving Visual Problem 1

1. Preloading critical styles

2. Lazy loading non-critical styles

3. Installing PurgeCSS

Lighthouse

Explaining Visual Problems 2 & 3

Solving Visual Problems 2 & 3

Explaining Invisible Problem 1

Solving Invisible Problem 1

Lighthouse score

MORE SPEED!

Bundle size

Lighthouse Score

The Takeaways