This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component, Input } from '@angular/core'; | |
| @Component({ | |
| selector: 'product-list', | |
| template: ` | |
| <h1>Products List</h1> | |
| <div *ngFor="let product of products">{{product.name}}<div> | |
| `, | |
| styles: [`:host{border: 1px solid #000;}`] | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component, Input, Output, EventEmitter } from '@angular/core'; | |
| @Component({ | |
| selector: 'shopping-cart', | |
| template: ` | |
| <h1>Shopping Cart ({{calcTotal()}})</h1> | |
| <cart-product *ngFor="let product of products" [product]="product" (productRemoved)="removeProduct($event)"><cart-product> | |
| `, | |
| styles: [`:host{border: 1px solid #000;}`] | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| addProductToCart(product) { | |
| const productExistInCart = this.cartProductList.find( | |
| ({ name }) => name === product.name | |
| ); // find product by name | |
| if (!productExistInCart) { | |
| this.cartProductList.push({ ...product, num: 1 }); // enhance "porduct" object with "num" property | |
| return; | |
| } | |
| productExistInCart.num += 1; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { NgModule } from '@angular/core'; | |
| import { BrowserModule } from '@angular/platform-browser'; | |
| import { FormsModule } from '@angular/forms'; | |
| import { AppComponent } from './app.component'; | |
| import { ProductListComponent } from './product-list.component'; // hello replaced | |
| @NgModule({ | |
| imports: [BrowserModule, FormsModule], | |
| declarations: [ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function formatMessage(str: string, term: string, showMore: boolean) { | |
| if (term) { | |
| str = str.replace( | |
| new RegExp(term, "ig"), | |
| `<b style="color:red">${term}</b>` | |
| ); | |
| } | |
| if (showMore) return str; | |
| return `${str.slice(0, 100)}`; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { formatMessage } from "./util"; | |
| test("pass empty args", () => { | |
| const showMore = false; | |
| expect(formatMessage("", "", showMore)).toBe(""); | |
| }); | |
| test("pass 10 chars long str", () => { | |
| const showMore = false; | |
| expect(formatMessage("1".repeat(10), "", showMore).length).toBe(10); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.getElementById("app").innerHTML = ` | |
| <h1>Hello Vanilla!</h1> | |
| <ul id="ul"> | |
| <li>1 </li> | |
| <li>2 </li> | |
| <li>3 </li> | |
| <li>4 </li> | |
| <li>5 </li> | |
| </ul> | |
| `; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.getElementById("app").innerHTML = ` | |
| <h1>Hello Vanilla!</h1> | |
| <ul id="ul"> | |
| <li>1 </li> | |
| <li>2 </li> | |
| <li>3 </li> | |
| <li>4 </li> | |
| <li>5 </li> | |
| </ul> | |
| `; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>objectVsArray</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script> | |
| <script src="./suite.js"></script> | |
| </head> | |
| <body> | |
| <h1>Open the console to view the results</h1> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // using recursion | |
| const myFlat1 = arr => arr.reduce((acc, item) => [...acc, ...(Array.isArray(item) ? myFlat1(item) : [item])], []); | |
| // because recursion is less performant (space complexity) | |
| // it is better to use "while" loop and stack for traversing the array | |
| const myFlat2 = arr => { | |
| let results = [], stack = []; // using stack to store pointer to outer array | |
| while(true) { | |
| let item = arr.shift(); // each time we take next item we cutting it from the array | |
NewerOlder