I liked the way Grokking the coding interview organized problems into learnable patterns. However, the course is expensive and the majority of the time the problems are copy-pasted from leetcode. As the explanations on leetcode are usually just as good, the course really boils down to being a glorified curated list of leetcode problems.
So below I made a list of leetcode problems that are as close to grokking problems as possible.
| <app-backdrop (backdropClicked)="closeModal()"></app-backdrop> | |
| <div cdkDrag class="modal"> | |
| <div #resizeBox class="modal-box"> | |
| <span #dragHandleCorner class="dragHandle corner" cdkDrag | |
| (cdkDragMoved)="dragMove(dragHandleCorner, $event)"></span> | |
| <span #dragHandleRight cdkDragLockAxis="x" class="dragHandle right" cdkDrag | |
| (cdkDragMoved)="dragMove(dragHandleRight, $event)"></span> | |
| <span #dragHandleBottom cdkDragLockAxis="y" class="dragHandle bottom" cdkDrag | |
| (cdkDragMoved)="dragMove(dragHandleBottom, $event)"></span> |
| import { Component, EventEmitter, OnInit, Output } from '@angular/core'; | |
| @Component({ | |
| selector: 'app-backdrop', | |
| templateUrl: './backdrop.component.html', | |
| styleUrls: ['./backdrop.component.scss'] | |
| }) | |
| export class BackdropComponent implements OnInit { | |
| @Output() backdropClicked = new EventEmitter(); |
| <div cdkDrag class="modal"> | |
| <div #resizeBox class="modal-box"> | |
| <span #dragHandleCorner class="dragHandle corner" cdkDrag | |
| (cdkDragMoved)="dragMove(dragHandleCorner, $event)"></span> | |
| <span #dragHandleRight cdkDragLockAxis="x" class="dragHandle right" cdkDrag | |
| (cdkDragMoved)="dragMove(dragHandleRight, $event)"></span> | |
| <span #dragHandleBottom cdkDragLockAxis="y" class="dragHandle bottom" cdkDrag | |
| (cdkDragMoved)="dragMove(dragHandleBottom, $event)"></span> | |
| <div class="modal-header">Modal Header</div> |
| <div cdkDrag class="modal" cdkDrag> | |
| <div class="modal-header">Modal Header</div> | |
| <div class="modal-text">Lorem ipsum dolor sit amet.</div> | |
| <div class="modal-buttons"> | |
| <button (click)="closeModal()">Yes</button> | |
| <button (click)="closeModal()">Cancel</button> | |
| </div> | |
| </div> | |
| </div> |
| <div cdkDrag class="modal"> | |
| <div class="modal-header">Modal Header</div> | |
| <div class="modal-text">Lorem ipsum dolor sit amet.</div> | |
| <div class="modal-buttons"> | |
| <button (click)="closeModal()">Yes</button> | |
| <button (click)="closeModal()">Cancel</button> | |
| </div> | |
| </div> | |
| </div> |
| import { Router } from '@angular/router'; | |
| import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, NgZone } from '@angular/core'; | |
| import { CdkDragMove } from '@angular/cdk/drag-drop'; | |
| @Component({ | |
| selector: 'app-modal', | |
| templateUrl: './modal.component.html', | |
| styleUrls: ['./modal.component.scss'] | |
| }) | |
| export class ModalComponent implements OnInit, AfterViewInit { |
| import { BrowserModule } from '@angular/platform-browser'; | |
| import { NgModule } from '@angular/core'; | |
| import { AppRoutingModule } from './app-routing.module'; | |
| import { AppComponent } from './app.component'; | |
| import { NavbarComponent } from './navbar/navbar.component'; | |
| import { LandingComponent } from './landing/landing.component'; | |
| import { ModalComponent } from './modal/modal.component'; | |
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | |
| import { DragDropModule } from '@angular/cdk/drag-drop'; |
| import { Router } from '@angular/router'; | |
| import { Component, OnInit } from '@angular/core'; | |
| @Component({ | |
| selector: 'app-landing', | |
| templateUrl: './landing.component.html', | |
| styleUrls: ['./landing.component.scss'] | |
| }) | |
| export class LandingComponent implements OnInit { |
| <div class="landing"> | |
| <div class="landing-heading"> | |
| Like bootstrap modal but it's a fully customizable angular component <br> Resizable and Draggable and Much More | |
| </div> | |
| <div class="landing-subheading"> | |
| Make Your Own Modal, A Fully Customizable Angular Component | |
| </div> | |
| <div class="landing-desc"> |
