├── 2dgraphics
    ├── graphics.md
    ├── index.html
    ├── lib.js
    ├── select.html
    └── select.js
├── Learn Javascript Visually.pdf
├── README.md
├── You Dont Know JS Yet Scope Closures - 2nd Edition.pdf
├── algorithms.md
├── course.md
├── dragndrop
    ├── README.md
    ├── dragndrop.js
    ├── imagea.png
    ├── index.html
    └── styles.css
├── jsx.md
├── media.md
├── microverse.md
├── practice
    ├── code.js
    └── index.html
├── screens
    └── progress_report.png
├── speechtotext.md
└── web.md


/2dgraphics/graphics.md:
--------------------------------------------------------------------------------
  1 | # Programming 2D Computer Graphics
  2 | The goal is to understand how your computer programs can manipulate simpler 2D images.
  3 | 
  4 | ### Obectives:
  5 | Introduces you to the basics of 2D graphics programming, including the formulas needed to transform (move, rotate, scale, and so on) 2D shapes in
  6 | various ways. Although transforming 2D shapes requires that you know a set of formulas for manipulating the points that define a shape, you’ll discover that these formulas are easy to use, even if you don’t really understand exactly how they work.
  7 | 
  8 | `Transform --> move, rotate, scale and so on...`
  9 | 
 10 | ### Topics will be covered:
 11 | * About screen and Cartesian coordinates
 12 | * About using vertices to define 2D shapes
 13 | * About translating, scaling, and rotating 2D shapes
 14 | * How to use matrices to transform 2D shapes
 15 | 
 16 | ## Understanding Screen and Cartesian Coordinates
 17 | You probably know that to draw a line in a window, you must call the GDI function MoveToEx() to position the starting point of the line and then call the function LineTo() to draw the line. In a program, those two function calls would look something like this:
 18 | 
 19 | ```
 20 | MoveToEx(hDC, x, y, 0);
 21 | LineTo(hDC, x, y);
 22 | ```
 23 | 
 24 | ### What is Context?
 25 | the circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood.
 26 | 
 27 | ### What is Context in Communication? 
 28 | The context definition in communication refers to the factors that work together to determine the meaning of a message.
 29 | 
 30 | ### What is context in graphics programming?
 31 | A graphics context represents a drawing destination. It contains drawing parameters and all device-specific information that the drawing system needs to perform any subsequent drawing commands.
 32 | 
 33 | 
 34 | ## How to draw a line in a window (HTML5 canvas element) using JavaScript?
 35 | Canvas is a 2D drawing API. Essentially the browser gives you a rectanglar area on the screen that you can draw into. You can draw lines, shapes, images, text; pretty much anything you want.
 36 | 
 37 | ```js
 38 | 
 39 | let canvas = document.getElementById('mycanvas');
 40 | 
 41 | let ctx = canvas.getContext('2d'); //CanvasRenderingContext2D
 42 | 
 43 | console.log(`default width x height: ${canvas.width} x ${canvas.height}`);
 44 | 
 45 | ```
 46 | ### getContext()* may have the following parameter
 47 | * 2d
 48 | * webgl
 49 | * webgl2
 50 | * bitmaprenderer
 51 | * experimental-webgl
 52 | 
 53 | ### Get all the properties & Methods available in [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
 54 | console.log(ctx.canvas);
 55 | 
 56 | ### Properties
 57 | * [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
 58 | * direction
 59 | * strokeStyle
 60 | * fillStyle
 61 | * direction 
 62 | * lineWidth
 63 | 
 64 | ### Methods
 65 | * beginPath
 66 | * closePath
 67 | * stroke
 68 | * moveTo
 69 | * lineTo
 70 | * fill
 71 | * fillRect
 72 | 
 73 | 
 74 | ```js
 75 |   for (var key in ctx) {
 76 |     if (Object.getOwnPropertyNames(ctx)) {
 77 |         console.log(key,typeof ctx[key], ctx[key]); //all properties|methos and their default value
 78 |     }
 79 |   }
 80 |   ```
 81 | 
 82 | by default fill color is black, we can draw a rectangle using the following code and see the output in your browser.
 83 | ```js
 84 | ctx.fillRect(0,0,100,140);
 85 | ```
 86 | 
 87 | ### Measuring browser width & height
 88 | ```js
 89 | console.log("innerWidth x outerWidth",window.innerWidth, window.outerWidth);
 90 | console.log("innerHeight x outerHeight", window.innerHeight, window.outerHeight);
 91 | 
 92 | console.log("TotalWidth x TotalHeight:",window.screen.width, window.screen.height);
 93 | console.log("AvailableWidth",window.screen.availWidth);
 94 | console.log("AvailableHeight:",window.screen.availHeight);
 95 | 
 96 | ```
 97 | `window.screen.availWidth == window.outerWidth`
 98 | 
 99 | `window.screen.availHeight == window.outerHeight`
100 | 
101 | > window object properties and methods exploration
102 | 
103 | ```js
104 | console.log(window);
105 | console.log(window.clientInformation);
106 | console.log(window.clientInformation.clipboard);
107 | console.log(window.clientInformation.bluetooth.getAvailability());
108 | console.log(window.document.location.href);
109 | console.log("TotalWidth x TotalHeight:",window.screen.width, window.screen.height);
110 | console.log("AvailableWidth",window.screen.availWidth);
111 | console.log("AvailableHeight:",window.screen.availHeight);
112 | ```
113 | 
114 | 
115 | The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of `<canvas>` elements. The HTMLCanvasElement interface also inherits the properties and methods of the HTMLElement interface.
116 | ### [Properties & Methods of HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
117 | 
118 | ### Further study [HTML CANVAS DEEP DIVE](https://joshondesign.com/p/books/canvasdeepdive/toc.html)
119 | 
120 | Drawing a rectangle using lineTo method with blue border outline (strokeStyle)
121 | ```js
122 | ctx.moveTo(50,50); //starting point
123 | ctx.lineTo(100,50); //first line
124 | ctx.lineTo(100,100);//second line
125 | ctx.lineTo(50,100);//third line
126 | ctx.lineTo(50,50);//fourth line
127 | ctx.strokeStyle="blue";
128 | ctx.stroke();
129 | ```
130 | 
131 | Drawing a rectangle using lineTo method with fill style
132 | ```js
133 | ctx.moveTo(60,60); //starting point
134 | ctx.lineTo(120,60); //first line
135 | ctx.lineTo(120,120);//second line
136 | ctx.lineTo(60,120);//third line
137 | ctx.lineTo(60,60);//fourth line
138 | ctx.fillStyle="blue"; //default = black
139 | ctx.fill();
140 | ```


--------------------------------------------------------------------------------
/2dgraphics/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>2D Graphics Programming</title>
 8 |     <style>
 9 |         *{
10 |             margin:10px;
11 |         }
12 |     </style>
13 | </head>
14 | <body>
15 | 
16 |     <canvas id="mycanvas"></canvas>
17 |     
18 |     <script src="lib.js"></script>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/2dgraphics/lib.js:
--------------------------------------------------------------------------------
  1 | let canvas = document.getElementById('mycanvas');
  2 | let ctx = canvas.getContext('2d'); //CanvasRenderingContext2D
  3 | 
  4 | //canvas.style="background:red;";
  5 | canvas.style.border="2px solid blue";
  6 | 
  7 | console.log(`default width x height: ${canvas.width} x ${canvas.height}`);
  8 | //console.log(`canvas: ${canvas}`, typeof canvas);//HTMLCanvasElement
  9 | 
 10 | 
 11 | // for (const [key, value] of Object.entries(canvas)) {
 12 | //     console.log(`${key}: ${value}`);
 13 | // }
 14 | 
 15 | //console.log(canvas.toString());
 16 | 
 17 | //you can use the following to extract the Prototype []
 18 | //console.log("Object.entries",Object.entries(canvas));
 19 | 
 20 | //console.log(Object.getPrototypeOf(canvas));
 21 | //The HTMLCanvasElement interface also inherits the properties and methods of the HTMLElement interface.
 22 | //EventTarget -> Node -> Element -> HTMLElement -> HTMLCanvasElement
 23 | //HTMLCanvasElement -> HTMLElement -> Element -> Node -> EventTarget
 24 | 
 25 | // let object = canvas;
 26 | // do {
 27 | //     object = Object.getPrototypeOf(object);
 28 | //     console.log(object);
 29 | 
 30 | // } while (object);
 31 | 
 32 | 
 33 |   //console.log(ctx); //get the properties
 34 |   //console.log(Object.getPrototypeOf(ctx));
 35 |   //console.log(ctx.canvas);
 36 |   //console.log("ctx.entries", Object.getOwnPropertyNames(ctx));
 37 |   //console.log("Object.prototype.propertyIsEnumerable()", Object.prototype.propertyIsEnumerable(ctx));
 38 | 
 39 | 
 40 | 
 41 | //   for (var key in ctx) {
 42 | //     if (Object.getOwnPropertyNames(ctx)) {
 43 | //         console.log(key,typeof ctx[key], ctx[key]); //all properties|methos and their default value
 44 | //     }
 45 | //   }
 46 | 
 47 | //ctx.fillRect(10,10,100,140);
 48 | // console.log("innerWidth x outerWidth",window.innerWidth, window.outerWidth);
 49 | // console.log("innerHeight x outerHeight", window.innerHeight, window.outerHeight);
 50 | // console.log(window);
 51 | // console.log(window.clientInformation);
 52 | // console.log(window.clientInformation.clipboard);
 53 | // console.log(window.clientInformation.bluetooth.getAvailability());
 54 | // console.log(window.document.location.href);
 55 | // console.log("TotalWidth x TotalHeight:",window.screen.width, window.screen.height);
 56 | // console.log("AvailableWidth",window.screen.availWidth);
 57 | // console.log("AvailableHeight:",window.screen.availHeight);
 58 | 
 59 | //ctx.fillStyle="red";
 60 | //ctx.fillRect(20,20,500,500);
 61 | 
 62 | ctx.beginPath();
 63 | ctx.lineWidth = 2;
 64 | ctx.moveTo(50,50); //starting point
 65 | ctx.lineTo(100,50); //first
 66 | ctx.lineTo(100,100);//second
 67 | ctx.lineTo(50,100);//third
 68 | ctx.lineTo(50,50);//
 69 | ctx.strokeStyle='rgb(255,0,0)';
 70 | ctx.closePath();  
 71 | ctx.stroke();
 72 | 
 73 | ctx.beginPath();
 74 | ctx.moveTo(120,50); //*starting point
 75 | ctx.lineTo(170,50); //first line
 76 | ctx.lineTo(170,100);//second line
 77 | ctx.lineTo(120,100);//third line
 78 | ctx.lineTo(120,50);//*fourth line
 79 | ctx.strokeStyle="rgb(0,250,0)"; //default = black
 80 | ctx.closePath();
 81 | ctx.stroke();
 82 | 
 83 | //now fil both square
 84 | //ctx.fillStyle="rgb(255,0,0)";
 85 | ctx.fill();
 86 | 
 87 | //ctx.fillStyle="red";
 88 | //ctx.fillRect(50,50,50,50);
 89 | 
 90 | //ctx.fill="red";
 91 | let message;
 92 | window.addEventListener('load', (event) => {
 93 |     message = 'load\n';
 94 |     console.log(message);
 95 | 
 96 |     document.addEventListener("mousemove", (e) => {
 97 | 
 98 |         let c = e.target.getBoundingClientRect();
 99 | 
100 |         let x = e.clientX-c.left;
101 |         let y = e.clientY-c.top;
102 | 
103 |         //if(c.width>=x && c.height>=y){
104 |             //console.log(x,y, "clientX",e.clientX, "clientY",e.clientY, "top",c.top, "right",c.right, "bototm",c.bottom, "left",c.left, "width", c.width, "height", c.height);
105 |         //}
106 | 
107 |         //c.right=c.left+c.width 
108 |         //c.bottom=c.top+c.height
109 |         if(e.target.tagName=="CANVAS" && e.clientX >= c.left && e.clientX <= c.right && e.clientY >= c.top &&  e.clientY <= c.bottom){
110 | 
111 |             //"clientX",e.clientX, "clientY",e.clientY, "top",c.top, "right",c.right, "bototm",c.bottom, "left",c.left, "width", c.width, "height", c.height
112 |             console.log(x,y, "***", c.bottom,"==",c.top+c.height, "*",c.top,c.height);
113 |         }
114 | 
115 |         //console.log("e.clientX >= c.left",e.clientX, c.left, e.clientX >= c.left, e.target.tagName, canvas.width);
116 |         // "&&", e.clientX, "<=", c.left+c.width, "&&", e.clientY ,">=", c.top &&  e.clientY <= c.top+c.height)
117 | 
118 |       
119 | 
120 |         //console.log(e.target.getBoundingClientRect())
121 |         //console.log(e.clientX,e.clientY);
122 |         //console.log(x,y, "clientX",e.clientX, "clientY",e.clientY, "top",c.top, "right",c.right, "bototm",c.bottom, "left",c.left, "width", c.width, "height", c.height);
123 | 
124 | 
125 |     });
126 | 
127 | });
128 | 
129 | document.addEventListener('DOMContentLoaded', (event) => {
130 | 
131 |     message = `DOMContentLoaded\n`;
132 |     console.log(message);
133 |     //new Promise(resolve => setTimeout(resolve, 2000));
134 | 
135 |     setTimeout(() => {  }, 2000);
136 | 
137 | });
138 | 
139 | 
140 | // canvas.addEventListener("mousemove", function(e){
141 | 
142 | //  console.log(e);
143 | 
144 | // });


--------------------------------------------------------------------------------
/2dgraphics/select.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Canvas</title>
 8 |     <style>
 9 |         #container2 { position: relative; }
10 |         #canvas2 { border: 1px solid #000; }
11 |     </style>
12 | </head>
13 | 
14 | <body onLoad='init2()'>
15 | 
16 |     <div id="container2">
17 |         <canvas id="canvas2" width="400" height="300">
18 |           This text is displayed if your browser does not support HTML5 Canvas.
19 |         </canvas>
20 |     </div>
21 | 
22 |         <div style="font-family: Verdana; font-size: 12px;">
23 | 
24 |             <p>Click to select. Click on selection handles to resize. Double click to create a new node.</p>
25 | 
26 |             <p><a href="http://simonsarris.com/blog/225-canvas-selecting-resizing-shape">link to tutorial</a></p>
27 |             
28 |             <p><a href="http://simonsarris.com/blog/140-canvas-moving-selectable-shapes">link to tutorial part 1</a></p>
29 | 
30 |         </div>
31 |     
32 |   <script src="select.js"></script>
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/2dgraphics/select.js:
--------------------------------------------------------------------------------
  1 | // Last updated November 2010 by Simon Sarris
  2 | // www.simonsarris.com
  3 | // sarris@acm.org
  4 | //
  5 | // Free to use and distribute at will
  6 | // So long as you are nice to people, etc
  7 | 
  8 | // This is a self-executing function that I added only to stop this
  9 | // new script from interfering with the old one. It's a good idea in general, but not
 10 | // something I wanted to go over during this tutorial
 11 | //(function(window) {
 12 | 
 13 | 
 14 |     // holds all our boxes
 15 |     var boxes2 = []; 
 16 |     
 17 |     // New, holds the 8 tiny boxes that will be our selection handles
 18 |     // the selection handles will be in this order:
 19 |     // 0  1  2
 20 |     // 3     4
 21 |     // 5  6  7
 22 |     var selectionHandles = [];
 23 |     
 24 |     // Hold canvas information
 25 |     var canvas;
 26 |     var ctx;
 27 |     var WIDTH;
 28 |     var HEIGHT;
 29 |     var INTERVAL = 20;  // how often, in milliseconds, we check to see if a redraw is needed
 30 |     
 31 |     var isDrag = false;
 32 |     var isResizeDrag = false;
 33 |     var expectResize = -1; // New, will save the # of the selection handle if the mouse is over one.
 34 |     var mx, my; // mouse coordinates
 35 |     
 36 |      // when set to true, the canvas will redraw everything
 37 |      // invalidate() just sets this to false right now
 38 |      // we want to call invalidate() whenever we make a change
 39 |     var canvasValid = false;
 40 |     
 41 |     // The node (if any) being selected.
 42 |     // If in the future we want to select multiple objects, this will get turned into an array
 43 |     var mySel = null;
 44 |     
 45 |     // The selection color and width. Right now we have a red selection with a small width
 46 |     var mySelColor = '#CC0000';
 47 |     var mySelWidth = 2;
 48 |     var mySelBoxColor = 'darkred'; // New for selection boxes
 49 |     var mySelBoxSize = 6;
 50 |     
 51 |     // we use a fake canvas to draw individual shapes for selection testing
 52 |     var ghostcanvas;
 53 |     var gctx; // fake canvas context
 54 |     
 55 |     // since we can drag from anywhere in a node
 56 |     // instead of just its x/y corner, we need to save
 57 |     // the offset of the mouse when we start dragging.
 58 |     var offsetx, offsety;
 59 |     
 60 |     // Padding and border style widths for mouse offsets
 61 |     var stylePaddingLeft, stylePaddingTop, styleBorderLeft, styleBorderTop;
 62 |     
 63 |     
 64 |     
 65 |     
 66 |     // Box object to hold data
 67 |     function Box2() {
 68 |       this.x = 0;
 69 |       this.y = 0;
 70 |       this.w = 1; // default width and height?
 71 |       this.h = 1;
 72 |       this.fill = '#444444';
 73 |     }
 74 |     
 75 |     // New methods on the Box class
 76 |     Box2.prototype = {
 77 |       // we used to have a solo draw function
 78 |       // but now each box is responsible for its own drawing
 79 |       // mainDraw() will call this with the normal canvas
 80 |       // myDown will call this with the ghost canvas with 'black'
 81 |       draw: function(context, optionalColor) {
 82 |           if (context === gctx) {
 83 |             context.fillStyle = 'black'; // always want black for the ghost canvas
 84 |           } else {
 85 |             context.fillStyle = this.fill;
 86 |           }
 87 |           
 88 |           // We can skip the drawing of elements that have moved off the screen:
 89 |           if (this.x > WIDTH || this.y > HEIGHT) return; 
 90 |           if (this.x + this.w < 0 || this.y + this.h < 0) return;
 91 |           
 92 |           context.fillRect(this.x,this.y,this.w,this.h);
 93 |           
 94 |         // draw selection
 95 |         // this is a stroke along the box and also 8 new selection handles
 96 |         if (mySel === this) {
 97 |           context.strokeStyle = mySelColor;
 98 |           context.lineWidth = mySelWidth;
 99 |           context.strokeRect(this.x,this.y,this.w,this.h);
100 |           
101 |           // draw the boxes
102 |           
103 |           var half = mySelBoxSize / 2;
104 |           
105 |           // 0  1  2
106 |           // 3     4
107 |           // 5  6  7
108 |           
109 |           // top left, middle, right
110 |           selectionHandles[0].x = this.x-half;
111 |           selectionHandles[0].y = this.y-half;
112 |           
113 |           selectionHandles[1].x = this.x+this.w/2-half;
114 |           selectionHandles[1].y = this.y-half;
115 |           
116 |           selectionHandles[2].x = this.x+this.w-half;
117 |           selectionHandles[2].y = this.y-half;
118 |           
119 |           //middle left
120 |           selectionHandles[3].x = this.x-half;
121 |           selectionHandles[3].y = this.y+this.h/2-half;
122 |           
123 |           //middle right
124 |           selectionHandles[4].x = this.x+this.w-half;
125 |           selectionHandles[4].y = this.y+this.h/2-half;
126 |           
127 |           //bottom left, middle, right
128 |           selectionHandles[6].x = this.x+this.w/2-half;
129 |           selectionHandles[6].y = this.y+this.h-half;
130 |           
131 |           selectionHandles[5].x = this.x-half;
132 |           selectionHandles[5].y = this.y+this.h-half;
133 |           
134 |           selectionHandles[7].x = this.x+this.w-half;
135 |           selectionHandles[7].y = this.y+this.h-half;
136 |     
137 |           
138 |           context.fillStyle = mySelBoxColor;
139 |           for (var i = 0; i < 8; i ++) {
140 |             var cur = selectionHandles[i];
141 |             context.fillRect(cur.x, cur.y, mySelBoxSize, mySelBoxSize);
142 |           }
143 |         }
144 |         
145 |       } // end draw
146 |     
147 |     }
148 |     
149 |     //Initialize a new Box, add it, and invalidate the canvas
150 |     function addRect(x, y, w, h, fill) {
151 |       var rect = new Box2;
152 |       rect.x = x;
153 |       rect.y = y;
154 |       rect.w = w
155 |       rect.h = h;
156 |       rect.fill = fill;
157 |       boxes2.push(rect);
158 |       invalidate();
159 |     }
160 |     
161 |     // initialize our canvas, add a ghost canvas, set draw loop
162 |     // then add everything we want to intially exist on the canvas
163 |     function init2() {
164 | 
165 |       canvas = document.getElementById('canvas2');
166 |       HEIGHT = canvas.height;
167 |       WIDTH = canvas.width;
168 |       ctx = canvas.getContext('2d');
169 |       
170 |       ghostcanvas = document.createElement('canvas');
171 |       ghostcanvas.height = HEIGHT;
172 |       ghostcanvas.width = WIDTH;
173 |       gctx = ghostcanvas.getContext('2d');
174 |       
175 |       //fixes a problem where double clicking causes text to get selected on the canvas
176 |       canvas.onselectstart = function () { return false; }
177 |       
178 |       // fixes mouse co-ordinate problems when there's a border or padding
179 |       // see getMouse for more detail
180 |       if (document.defaultView && document.defaultView.getComputedStyle) {
181 |         stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10)     || 0;
182 |         stylePaddingTop  = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10)      || 0;
183 |         styleBorderLeft  = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0;
184 |         styleBorderTop   = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10)  || 0;
185 |       }
186 |       
187 |       // make mainDraw() fire every INTERVAL milliseconds
188 |       setInterval(mainDraw, INTERVAL);
189 |       
190 |       // set our events. Up and down are for dragging,
191 |       // double click is for making new boxes
192 |       canvas.onmousedown = myDown;
193 |       canvas.onmouseup = myUp;
194 |       canvas.ondblclick = myDblClick;
195 |       canvas.onmousemove = myMove;
196 |       
197 |       // set up the selection handle boxes
198 |       for (var i = 0; i < 8; i ++) {
199 |         var rect = new Box2;
200 |         selectionHandles.push(rect);
201 |       }
202 |       
203 |       // add custom initialization here:
204 |     
205 |       
206 |       // add a large green rectangle
207 |       addRect(260, 70, 60, 65, 'rgba(0,205,0,0.7)');
208 |       
209 |       // add a green-blue rectangle
210 |       addRect(240, 120, 40, 40, 'rgba(2,165,165,0.7)');  
211 |       
212 |       // add a smaller purple rectangle
213 |       addRect(45, 60, 25, 25, 'rgba(150,150,250,0.7)');
214 |     }
215 |     
216 |     
217 |     //wipes the canvas context
218 |     function clear(c) {
219 |       c.clearRect(0, 0, WIDTH, HEIGHT);
220 |     }
221 |     
222 |     // Main draw loop.
223 |     // While draw is called as often as the INTERVAL variable demands,
224 |     // It only ever does something if the canvas gets invalidated by our code
225 |     function mainDraw() {
226 |       if (canvasValid == false) {
227 |         clear(ctx);
228 |         
229 |         // Add stuff you want drawn in the background all the time here
230 |         
231 |         // draw all boxes
232 |         var l = boxes2.length;
233 |         for (var i = 0; i < l; i++) {
234 |           boxes2[i].draw(ctx); // we used to call drawshape, but now each box draws itself
235 |         }
236 |         
237 |         // Add stuff you want drawn on top all the time here
238 |         
239 |         canvasValid = true;
240 |       }
241 |     }
242 |     
243 |     // Happens when the mouse is moving inside the canvas
244 |     function myMove(e){
245 |       if (isDrag) {
246 |         getMouse(e);
247 |         
248 |         mySel.x = mx - offsetx;
249 |         mySel.y = my - offsety;   
250 |         
251 |         // something is changing position so we better invalidate the canvas!
252 |         invalidate();
253 |       } else if (isResizeDrag) {
254 |         // time ro resize!
255 |         var oldx = mySel.x;
256 |         var oldy = mySel.y;
257 |         
258 |         // 0  1  2
259 |         // 3     4
260 |         // 5  6  7
261 |         switch (expectResize) {
262 |           case 0:
263 |             mySel.x = mx;
264 |             mySel.y = my;
265 |             mySel.w += oldx - mx;
266 |             mySel.h += oldy - my;
267 |             break;
268 |           case 1:
269 |             mySel.y = my;
270 |             mySel.h += oldy - my;
271 |             break;
272 |           case 2:
273 |             mySel.y = my;
274 |             mySel.w = mx - oldx;
275 |             mySel.h += oldy - my;
276 |             break;
277 |           case 3:
278 |             mySel.x = mx;
279 |             mySel.w += oldx - mx;
280 |             break;
281 |           case 4:
282 |             mySel.w = mx - oldx;
283 |             break;
284 |           case 5:
285 |             mySel.x = mx;
286 |             mySel.w += oldx - mx;
287 |             mySel.h = my - oldy;
288 |             break;
289 |           case 6:
290 |             mySel.h = my - oldy;
291 |             break;
292 |           case 7:
293 |             mySel.w = mx - oldx;
294 |             mySel.h = my - oldy;
295 |             break;
296 |         }
297 |         
298 |         invalidate();
299 |       }
300 |       
301 |       getMouse(e);
302 |       // if there's a selection see if we grabbed one of the selection handles
303 |       if (mySel !== null && !isResizeDrag) {
304 |         for (var i = 0; i < 8; i++) {
305 |           // 0  1  2
306 |           // 3     4
307 |           // 5  6  7
308 |           
309 |           var cur = selectionHandles[i];
310 |           
311 |           // we dont need to use the ghost context because
312 |           // selection handles will always be rectangles
313 |           if (mx >= cur.x && mx <= cur.x + mySelBoxSize &&
314 |               my >= cur.y && my <= cur.y + mySelBoxSize) {
315 |             // we found one!
316 |             expectResize = i;
317 |             invalidate();
318 |             
319 |             switch (i) {
320 |               case 0:
321 |                 this.style.cursor='nw-resize';
322 |                 break;
323 |               case 1:
324 |                 this.style.cursor='n-resize';
325 |                 break;
326 |               case 2:
327 |                 this.style.cursor='ne-resize';
328 |                 break;
329 |               case 3:
330 |                 this.style.cursor='w-resize';
331 |                 break;
332 |               case 4:
333 |                 this.style.cursor='e-resize';
334 |                 break;
335 |               case 5:
336 |                 this.style.cursor='sw-resize';
337 |                 break;
338 |               case 6:
339 |                 this.style.cursor='s-resize';
340 |                 break;
341 |               case 7:
342 |                 this.style.cursor='se-resize';
343 |                 break;
344 |             }
345 |             return;
346 |           }
347 |           
348 |         }
349 |         // not over a selection box, return to normal
350 |         isResizeDrag = false;
351 |         expectResize = -1;
352 |         this.style.cursor='auto';
353 |       }
354 |       
355 |     }
356 |     
357 |     // Happens when the mouse is clicked in the canvas
358 |     function myDown(e){
359 |       getMouse(e);
360 |       
361 |       //we are over a selection box
362 |       if (expectResize !== -1) {
363 |         isResizeDrag = true;
364 |         return;
365 |       }
366 |       
367 |       clear(gctx);
368 |       var l = boxes2.length;
369 |       for (var i = l-1; i >= 0; i--) {
370 |         // draw shape onto ghost context
371 |         boxes2[i].draw(gctx, 'black');
372 |         
373 |         // get image data at the mouse x,y pixel
374 |         var imageData = gctx.getImageData(mx, my, 1, 1);
375 |         var index = (mx + my * imageData.width) * 4;
376 |         
377 |         // if the mouse pixel exists, select and break
378 |         if (imageData.data[3] > 0) {
379 |           mySel = boxes2[i];
380 |           offsetx = mx - mySel.x;
381 |           offsety = my - mySel.y;
382 |           mySel.x = mx - offsetx;
383 |           mySel.y = my - offsety;
384 |           isDrag = true;
385 |           
386 |           invalidate();
387 |           clear(gctx);
388 |           return;
389 |         }
390 |         
391 |       }
392 |       // havent returned means we have selected nothing
393 |       mySel = null;
394 |       // clear the ghost canvas for next time
395 |       clear(gctx);
396 |       // invalidate because we might need the selection border to disappear
397 |       invalidate();
398 |     }
399 |     
400 |     function myUp(){
401 |       isDrag = false;
402 |       isResizeDrag = false;
403 |       expectResize = -1;
404 |     }
405 |     
406 |     // adds a new node
407 |     function myDblClick(e) {
408 |       getMouse(e);
409 |       // for this method width and height determine the starting X and Y, too.
410 |       // so I left them as vars in case someone wanted to make them args for something and copy this code
411 |       var width = 20;
412 |       var height = 20;
413 |       addRect(mx - (width / 2), my - (height / 2), width, height, 'rgba(220,205,65,0.7)');
414 |     }
415 |     
416 |     
417 |     function invalidate() {
418 |       canvasValid = false;
419 |     }
420 |     
421 |     // Sets mx,my to the mouse position relative to the canvas
422 |     // unfortunately this can be tricky, we have to worry about padding and borders
423 |     function getMouse(e) {
424 |           var element = canvas, offsetX = 0, offsetY = 0;
425 |     
426 |           if (element.offsetParent) {
427 |             do {
428 |               offsetX += element.offsetLeft;
429 |               offsetY += element.offsetTop;
430 |             } while ((element = element.offsetParent));
431 |           }
432 |     
433 |           // Add padding and border style widths to offset
434 |           offsetX += stylePaddingLeft;
435 |           offsetY += stylePaddingTop;
436 |     
437 |           offsetX += styleBorderLeft;
438 |           offsetY += styleBorderTop;
439 |     
440 |           mx = e.pageX - offsetX;
441 |           my = e.pageY - offsetY
442 |     }
443 |     
444 |     // If you dont want to use <body onLoad='init()'>
445 |     // You could uncomment this init() reference and place the script reference inside the body tag
446 |     //init();
447 |     //window.init2 = init2;
448 | 
449 |     //})(window);
450 | 
451 |     
452 |     // Andy added, as a replacement for 
453 |     // <body onLoad="init2()">
454 |     // $(document).ready(function(){
455 |     //   // Your code here
456 |     //   init2();
457 |     // });
458 |         


--------------------------------------------------------------------------------
/Learn Javascript Visually.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mateors/javascript/9bc7ea0c9455e8af5930403168938e4adac9d6bc/Learn Javascript Visually.pdf


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Javascript Tutorial
 2 | 
 3 | ## Basic to Advance JS
 4 | * [Fundamentals in one video](https://www.youtube.com/watch?v=hNYzV87wocY)
 5 | 
 6 | ## Advance
 7 | * [Event Loop](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
 8 | * [Event Loop](https://www.youtube.com/watch?v=lMKhJPbK0HE1)
 9 | 
10 | ## Aync
11 | * [Async-functions](https://developers.google.com/web/fundamentals/primers/async-functions)
12 | 
13 | ## IIFE
14 | [Immediately Invoked Function Expression](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)
15 | 
16 | ## Promises (JavaScript exceptions and promises)
17 | * https://web.dev/promises
18 | 
19 | ## Service Workers
20 | A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.
21 | 
22 | * [Service-workers](https://developers.google.com/web/fundamentals/primers/service-workers)
23 | * [Appcache](https://www.html5rocks.com/en/tutorials/appcache/beginner)
24 | * [Push-notifications](https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web)
25 | * [Background-sync](https://developers.google.com/web/updates/2015/12/background-sync)
26 | 
27 | ## Tool we use to explain steps
28 | * [Lope Explainer](http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)
29 | * [Code Explanation, Time Complexity, Docs](https://www.figstack.com/app/explain)
30 | 
31 | ## Async Javascript tutorial
32 | * [Traversey Media](https://www.youtube.com/watch?v=PoRJizFvM7s)
33 | * [JavaScript>](https://learnjavascript.online)
34 | 
35 | ## JavaScript Design Pattern
36 | * [Build Your First Javascript Library](https://www.youtube.com/watch?v=24GF5MVEEjE&list=PLREW9ZuU80uTfmxo61-acnUYk3P_4plIF&index=1)
37 | * [Javascript Design Patterns 2023](https://www.youtube.com/playlist?list=PLGtPzuDZkogKAyifLX1VG1i6x7FhipPSe)
38 | 
39 | ## Few more Advance Javascript Tutorial
40 | * [JavaScript DOM Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gfoKa5la9dsdCNpuey2s-V)
41 | * [Making sense of the tricky part of Javascript](https://www.youtube.com/watch?v=tiRhFGnCltw)
42 | * [Advance Javascript complete course](https://www.youtube.com/watch?v=4svkAH9TdrU)
43 | * [HTML5 APIs](https://www.youtube.com/playlist?list=PLyuRouwmQCjlBGMxI_0Ly_Dw-vrniOYNh)
44 | 


--------------------------------------------------------------------------------
/You Dont Know JS Yet Scope Closures - 2nd Edition.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mateors/javascript/9bc7ea0c9455e8af5930403168938e4adac9d6bc/You Dont Know JS Yet Scope Closures - 2nd Edition.pdf


--------------------------------------------------------------------------------
/algorithms.md:
--------------------------------------------------------------------------------
 1 | ## Algorithms (Divide & conquer)
 2 | Divide & conquer isn’t a simple algorithm that you can apply to a problem. Instead, it’s a way to think about a problem.
 3 | 
 4 | 
 5 | ### Recursion
 6 | > When you’re writing a recursive function involving an array, the base case is often an empty array or an array with one element.
 7 | 
 8 | > When you write a recursive function, you have to tell it when to stop recursing. hat’s why every recursive function has two parts: the base case, and the recursive case. he recursive case is when the function calls itself. he base case is when the function doesn’t call itself again … so it
 9 | doesn’t go into an ininite loop.
10 | 
11 | ### Problem Statement:
12 | Write a recursion function that takes an array of numbers and returns the sum of all the numbers in the array.
13 | 
14 | #### Args:
15 |   arrs: an array of numbers
16 | #### Returns:
17 |   The sum of the array
18 |   
19 | ```js
20 | function recursionSum(arrs){
21 |     if (arrs.length===0){
22 |         return 0
23 |     }else if (arrs.length==1){
24 |         return arrs[0]
25 |     }else{
26 |         return arrs[0]+recursionSum(arrs.slice(1))
27 |     }
28 | }
29 | ```
30 | ### Explanation:
31 | 1. The function takes in an array of numbers.
32 | 2. If the array is empty, it returns 0.
33 | 3. If the array has only one element, it returns that element.
34 | 4. If the array has more than one element, it returns the first element plus the sum of the rest of the elements.
35 | 
36 | 
37 | ### Time Complexity: O(n)
38 | 
39 | ### usage
40 | ```
41 | let result=recursionSum([2,6,10]);
42 | console.log(result); // 18
43 | ```
44 | 


--------------------------------------------------------------------------------
/course.md:
--------------------------------------------------------------------------------
  1 | # Learning Javascript from scratch!
  2 | JavaScript is famously known as the language of web browsers. While it originally was only used for website development, the language has continued to evolve and grow over time.
  3 | 
  4 | Today, JavaScript is a powerful and fast programming language used by professionals for almost any kind of programming you can imagine. That's exactly why we start our students off on the right foot with JavaScript.
  5 | 
  6 | ## What is "Code"?
  7 | > Code is just a series of instructions that computers can follow. Computers obey each instruction, one after another.
  8 | 
  9 | Programs can be comprised of many instructions. Like many. Like millions.
 10 | 
 11 | One of the common instructions in coding is the addition instruction.
 12 | 
 13 | ### Logging numbers
 14 | console.log() can print text using quotes:
 15 | ```console.log('some text here')```
 16 | 
 17 | but it can also print numbers without quotes:
 18 | ```js 
 19 | console.log(1)
 20 | ```
 21 | and you can do math directly inside the parentheses:
 22 | ```js
 23 | console.log(4 + 3)
 24 | // prints 3
 25 | ```
 26 | 
 27 | ### Multiple Instructions
 28 | Code runs in order, starting at the top of the program. For example:
 29 | ```js
 30 | console.log('this prints first')
 31 | console.log('this prints second')
 32 | console.log('this prints last')
 33 | ```
 34 | Each console.log() instruction prints on a new line.
 35 | 
 36 | 
 37 | ### Syntax Errors
 38 | Syntax is jargon for "valid code that the computer can understand". For example,
 39 | 
 40 | ```js 
 41 | consol.log('hello world')
 42 | ```
 43 | is invalid **syntax** because ```consol.log()``` is not a valid function, "consol" is spelled incorrectly. As a result, an error will be thrown and the code won't execute.
 44 | 
 45 | ### What does syntax mean?
 46 | > Valid code in a programming language.
 47 | 
 48 | JavaScript we can use single quotes: `'`, while in Go we need to use double quotes to enclose a string of text: `"`.
 49 | 
 50 | Code can have many different problems that prevent it from working as intended.
 51 | * A bug in the logic. (example: a program that should add numbers multiplies them instead)
 52 | * A problem with speed.
 53 | * A problem with syntax. This is the most common problem for new developers.
 54 | 
 55 | ### What happens if you try to run code with invalid syntax?
 56 | You will be provided a syntax error and the code would not execute.
 57 | 
 58 | 
 59 | ## Chapter-2 Variables
 60 | Variables are how we store data in our program.
 61 | 
 62 | A variable is a name that we define that will point to some data. For example, I could define a new variable called myHeight and set its value to 140. I could also define a variable called myName and set it equal to "Mostain Billah".
 63 | 
 64 | ### How we create variable?
 65 | 
 66 | ### Let
 67 | To create a new variable we use the let keyword:
 68 | 
 69 | ```js
 70 | let myHeight = 140;
 71 | let myName = "Mostain";
 72 | ```
 73 | 
 74 | ### Variables Vary
 75 | Variables are called "variables" because they can hold any value and that value can change (it varies).
 76 | 
 77 | For example, the following will print 20:
 78 | ```js
 79 | let speed = 10
 80 | speed = 20
 81 | console.log(speed)
 82 | ```
 83 | 
 84 | The line `speed = 20` reassigns the value of `speed` to 20. It overwrites whatever was being held in the `speed` variable before.
 85 | 
 86 | Notice that we don't use the keyword `let` again. That's because `let` is only used to declare a new variable. If we're just changing the value of an existing variable then we don't need to redeclare the variable name using `let`.
 87 | 
 88 | ## Let's do some math
 89 | Now that we know how to store and change the value of variables let's do some math!
 90 | 
 91 | Here are some examples of common mathematical operators in JavaScript syntax.
 92 | ```js
 93 | let sum = a + b
 94 | let difference = a - b
 95 | let product = a * b
 96 | let quotient = a / b
 97 | ```
 98 | 
 99 | ### Let's do some more math
100 | Creating negative numbers in JavaScript works the way you probably expect, just add a minus sign in front of a number.
101 | ```js
102 | let myNegativeNum = -1
103 | ```
104 | 
105 | ## Comments
106 | Comments don't run like code, they are ignored by the computer. Comments are useful for adding reminders or explaining what a piece of code does in plain english.
107 | 
108 | There are two ways to add comments to code in JavaScript.
109 | 
110 | ### Single line comment
111 | ```js
112 | // speed is a variable describing how fast your player moves
113 | let speed = 2
114 | ```
115 | 
116 | ### Multi-line comment
117 | ```js 
118 | /*
119 |     The armor value reduces
120 |     the amount of damage that is taken when
121 |     a character gets hit by a bullet
122 | */
123 | let armor = 20
124 | ```
125 | Single line comments are best for one or two line explanations. Multi-line comments are best when you have a larger comment so that you don't need to type `//` over and over to start each line.
126 | 
127 | ## Variable Names
128 | Variable names can't have spaces, they're continuous strings of characters.
129 | 
130 | In JavaScript you should use `"camelCase"` when creating variable names. Camel case is where the beginning of each new word except the first is capitalized so that it is easier to read:
131 | 
132 | `thisIsCamelCase`
133 | 
134 | `someMoreCamelCaseHere`
135 | 
136 | ### Casing Examples
137 | No casing:
138 | ```js
139 | let somevariablehere = 10
140 | ```
141 | 
142 | Camel Case:
143 | ```js
144 | let someVariableHere = 10
145 | ```
146 | 
147 | Snake Case:
148 | ```js
149 | let some_variable_here = 10
150 | ```
151 | 
152 | ### Answer the following question?
153 | Which is valid camel case?
154 | * myVariable
155 | * MYVARIABLE
156 | * my_variable
157 | 
158 | 
159 | ## Basic Variable Types
160 | In JavaScript there are several basic data types.
161 | 
162 | ### Number Type
163 | You're already familiar with the `Number` type. Numbers aren't surrounded by quotes when created, but they can have decimals and negative signs.
164 | 
165 | ```js
166 | let x = 50
167 | 
168 | let x = 50.20
169 | 
170 | let x = -50
171 | ```
172 | 
173 | ### String Type
174 | "Strings" are raw text in coding speak. They are called "strings" because they are a list of characters strung together. Strings are declared in JavaScript by using single quotes, double quotes, or backticks:
175 | ```js
176 | let nameWithSingleQuotes = 'Master'
177 | 
178 | let nameWithDoubleQuotes = "Master"
179 | 
180 | let nameWithBackticks = `Master`
181 | ```
182 | 
183 | ### Boolean Type
184 | A "Boolean" is a type that can only have one of two values: `true` or `false`. As you may have heard computers really only use 1's and 0's. These 1's and 0's are just `Boolean` values.
185 | 
186 | ```js
187 | 0 = false
188 | 1 = true
189 | ```
190 | 
191 | ```js
192 | let myBool = true
193 | ```
194 | 
195 | ## Undefined Variables
196 | Not all variables have a value. We can declare an empty variable:
197 | 
198 | ```js
199 | let empty
200 | ```
201 | The value of `empty` in this instance is `undefined` until we use the assignment operator, `=`, to give it a value.
202 | 
203 | ### Undefined is NOT a specific string
204 | Note that the `undefined` type is not the same as a string with a value of "undefined":
205 | 
206 | ```js
207 | let myUndefinedVar // this is an undefined variable
208 | let myDefinedVar = "undefined" // this is a defined string
209 | ```
210 | 
211 | ## Dynamic Typing
212 | JavaScript is dynamically typed. All this means is that a variable can store any type, and that type can change.
213 | 
214 | For example, if I make a number variable, I can later change that variable to be a string:
215 | 
216 | This is valid:
217 | ```js
218 | let speed = 5
219 | speed = "five"
220 | ```
221 | ### Just because you can doesn't mean you should!
222 | In almost all circumstances, it's a bad idea to change the type of a variable. The "proper" thing to do is to just create a new one. For example:
223 | 
224 | ```js
225 | let speed = 5
226 | let speedDescription = "five"
227 | ```
228 | 
229 | ### What if it weren't dynamically typed?
230 | Strongly typed languages like Go (which you'll learn in a later course) are strongly-typed instead of dynamically-typed. In a strongly-typed language, if you try to assign a value to a variable of the wrong type, an error would crash the program.
231 | 
232 | If JavaScript were strongly-typed, the first example from before would crash on the second line, `speed = "five"`. The computer would give an error along the lines of `you can't assign a string value ("five") to a number variable (speed)`
233 | 
234 | 
235 | ## Math With Strings
236 | Most math operators we went over earlier don't work with strings, but the exception is the `+` addition operator. When working with strings the `+` operator performs a "concatenation".
237 | 
238 | "Concatenation" is a fancy word that means the joining of two strings.
239 | ```js
240 | let firstName = "Lane "
241 | let lastName = "Wagner"
242 | let fullName = firstName + lastName
243 | ```
244 | 
245 | `fullName` now holds the value "Lane Wagner".
246 | 
247 | Notice the extra space at the end of `"Lane "` in the `firstName` variable. That extra space is there to separate the words in the final result: `"Lane Wagner"`.
248 | 
249 | ## Multi Variable Declaration
250 | We can save space when creating many new variables by declaring them on the same line:
251 | 
252 | ```js
253 | let stdName = "Tareq", stdAge = 25, stdHeight = 150
254 | ```
255 | 
256 | > Any number of variables can be declared on the same line.
257 | 
258 | Variables declared on the same line should be related to one another in some way so that the code remains easy to understand
259 | 
260 | We call code that's easy to understand "clean code"
261 | 
262 | ## Chapter-3 Comparisons
263 | When coding it's necessary to be able to compare two values. `Boolean logic` is the name for these kinds of comparison operations that always result in `true` or `false`.
264 | 
265 | The operators:
266 | 
267 | * `<` "less than"
268 | * `>` "greater than"
269 | * `<=` "less than or equal to"
270 | * `>=` "greater than or equal to"
271 | * `==` "equal value"
272 | * `===` "equal type and equal value"
273 | * `!=` "not equal value"
274 | * `!==` "not equal type or not equal value"
275 | 
276 | For example:
277 | ```js
278 | 5 < 6 // evaluates to true
279 | 5 > 6 // evaluates to false
280 | 5 >= 6 // evaluates to false
281 | 5 <= 6 // evaluates to true
282 | 5 == 6 // evaluates to false
283 | 5 === 6 // evaluates to false
284 | 5 != 6 // evaluates to true
285 | 5 !== 6 // evaluates to true
286 | ```
287 | 
288 | ### Note on equality
289 | Triple equals `===` and `!==` are used more often than `==` and `!=` because it's more common that developers want to ensure that two values are the same type AND the same value, rather than just an equivalent value.
290 | 
291 | For example:
292 | ```js
293 | let playHealthString = "100"
294 | let playHealthNumber = 100
295 | playHealthString == playHealthNumber // true
296 | playHealthString === playHealthNumber // false
297 | ```
298 | 
299 | ## Comparison Operator Evaluations
300 | When a comparison happens, the result of the comparison is just a boolean value, it's either `true` or `false`.
301 | 
302 | Take the following two examples:
303 | ```js
304 | let isBigger = 5 > 4
305 | ```
306 | ```js
307 | let isBigger = true
308 | ```
309 | 
310 | In both of the above cases, we're creating a `Boolean` variable called `isBigger` with a value of `true`.
311 | 
312 | Since `5 > 4` `isBigger` is always assigned the value of `true`.
313 | 
314 | ### Why Would I Use The Comparison If I Can Just Set it to "true"?
315 | You wouldn't in this case. However, let's imagine that instead of hard coding the numbers `5` and `4`, we had some dynamic variables that we don't know the values of. For example, perhaps you're making a video game and need to keep track of player scores.
316 | 
317 | In order to calculate who wins, you would need to write something like:
318 | 
319 | ```js
320 | // playerOnePoints and playerTwoPoints are defined and change somewhere else in the game's code
321 | let playerOneWins = playerOnePoints > playerTwoPoints
322 | console.log(playerOneWins)
323 | 
324 | // prints "true" when player one is winning, otherwise prints "false"
325 | ```
326 | 
327 | ## Changing In Place
328 | It's fairly common to want to change the value of a variable based on its current value.
329 | 
330 | ```js
331 | let playerScore = 4
332 | playerScore = playerScore + 1
333 | // playerScore now equals 5
334 | ```
335 | ```js
336 | let playerScore = 4
337 | playerScore = playerScore - 1
338 | // playerScore now equals 3
339 | ```
340 | 
341 | Don't let the fact that the expression `playerScore = playerScore - 1` is not a valid mathematical expression be confusing. It doesn't matter, it is valid code. It's valid because the way the expression should be read in english is:
342 | 
343 | `Assign to playerScore the old value of playerScore minus 1.`
344 | 
345 | ## Increment / Decrement
346 | If we're changing a number and simply want to increment (add one) or decrement (minus one) there are special operators for that.
347 | 
348 | ```js
349 | let myNum = 4
350 | myNum++
351 | // shieldArmor now equals 5
352 | ```
353 | ```js
354 | let myNum = 4
355 | myNum--
356 | // shieldArmor now equals 3
357 | ```
358 | 
359 | Notice that `myNum++` is just short-hand for `myNum = myNum + 1`
360 | 
361 | ## If Statements
362 | It's often useful to only execute code if a certain condition is met:
363 | 
364 | ```js
365 | if (CONDITION){
366 |   // do some stuff
367 | }
368 | ```
369 | 
370 | for example:
371 | ```js
372 | let math=50
373 | let english=80
374 | 
375 | if (math < english){
376 |   console.log('You should do good in math as well!')
377 | }
378 | ```
379 | 
380 | ## If-Else
381 | An if statement can be followed by zero or more else if statements, which can be followed by zero or one else statement. For example:
382 | 
383 | ```js
384 | if (score > highScore){
385 |   console.log('High score beat!')
386 | } else if (score > secondHighestScore){
387 |   console.log('You got second place!')
388 | } else if (score > thirdHighestScore){
389 |   console.log('You got third place!')
390 | } else {
391 |   console.log('Better luck next time')
392 | }
393 | ```
394 | 
395 | First the `if` statement is evaluated. If it is `true` then the if statement's body is executed and all the other `else`S are ignored.
396 | 
397 | If the first `if` is false then the next `else if` is evaluated. Likewise if it is true then its body is executed and the rest are ignored.
398 | 
399 | If none of the `if` statements evaluate to `true` then the final `else` statement will be the only body executed.
400 | 
401 | ### Here are some basic rules with if/else blocks.
402 | * You can't have an else if or an else without an if
403 | * You can have an else without an else if


--------------------------------------------------------------------------------
/dragndrop/README.md:
--------------------------------------------------------------------------------
 1 | # Drag N Drop
 2 | Drag and drop features will be used in our new form builder project for ashley.
 3 | 
 4 | Whenever the user mouse moves towards the Y axis, client.Y value decreases and when the user mouse moves away Y axis, client.Y value increases this is the key idea behind mouse movement direction. Based on this decision system decide which function needs to be applied.
 5 | 
 6 | 
 7 | ## Conventions to make our code cleaner and easier for quick understanding.
 8 | * Everything will be goes under `div` where possible.
 9 | * For nested `div` we will follow a naming convention
10 | * Inside HTML Body element there always will be a main container `div` which contains all the div inside (nesting)
11 | 
12 | ```css
13 | wi3 = wrapper item 3
14 | 
15 | ```
16 | 
17 | 
18 | ## Resource
19 | * [Web/Node API](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore)


--------------------------------------------------------------------------------
/dragndrop/dragndrop.js:
--------------------------------------------------------------------------------
  1 | console.log("Drag and drop test...");
  2 | 
  3 | const draggables = document.querySelectorAll('.container');
  4 | const dragListItems = document.querySelectorAll('.row');
  5 | 
  6 | draggables.forEach(draggable => {
  7 |   draggable.addEventListener('dragstart', dragStart);
  8 | });
  9 | 
 10 | dragListItems.forEach(item => {
 11 |   item.addEventListener('dragover', dragOver);
 12 |   item.addEventListener('drop', dragDrop);
 13 |   item.addEventListener('dragenter', dragEnter);
 14 |   item.addEventListener('dragleave', dragLeave);
 15 | });
 16 | 
 17 | 
 18 | 
 19 | let dragItem;
 20 | let starty=0;
 21 | let mouseupdown="down";
 22 | let dragOverItem;
 23 | 
 24 | document.addEventListener("mousedown", function(e){
 25 | 
 26 |     starty=e.clientY;
 27 |     console.log(e.clientY);
 28 | 
 29 | });
 30 | 
 31 | function dragStart(e) {
 32 |     // console.log('Event: ', 'dragstart');
 33 |     let dragStartIndex = e.target.getAttribute('data-id');
 34 |     console.log("dragStartIndex",dragStartIndex);
 35 |     dragItem=e.target;
 36 |    
 37 |     
 38 |   }
 39 |   
 40 |   function dragEnter() {
 41 |     console.log('Event: ', 'dragenter');
 42 |     //this.classList.add('over');
 43 |   }
 44 |   
 45 |   function dragLeave() {
 46 |     console.log('Event: ', 'dragleave');
 47 |     //this.classList.remove('over');
 48 |   }
 49 |   
 50 |   function dragOver(e) {
 51 |     // console.log('Event: ', 'dragover');
 52 |     e.preventDefault();
 53 |     //console.log("dragOver",this.getAttribute('data-id'));
 54 |     
 55 |     if(e.clientY<starty){
 56 |         mouseupdown="up";
 57 |     }else{
 58 |         mouseupdown="down";
 59 |     }
 60 |     //console.log(e.clientY,mouseupdown);
 61 |     dragOverItem=e.target.parentNode;
 62 |   }
 63 | 
 64 |   function isDescendant(parent, child) {
 65 |     var node = child.parentNode;
 66 |     while (node != null) {
 67 |         if (node == parent) {
 68 |             return true;
 69 |         }
 70 |         node = node.parentNode;
 71 |     }
 72 |     return false;
 73 |   }
 74 | 
 75 |   function dragDrop(e) { //drop
 76 | 
 77 |       const dragEndIndex = this.getAttribute('data-id');
 78 |       //console.log('Drop after: ', dragEndIndex, e.target.parentNode);
 79 |       //console.log(dragListItems, e.target.parentNode);
 80 |       //draggables.removeChild(e.target.parentNode);
 81 |       //document.getElementById("container").removeChild(e.target.parentNode);
 82 |       //document.getElementById("container").appendChild(dragItem);
 83 |     
 84 | 
 85 |     if(mouseupdown=="down"){
 86 | 
 87 |         let parent=document.getElementById("container");
 88 |         let child=e.target.parentNode.nextSibling;
 89 |         console.log("isDescendant:",isDescendant(parent, child), dragOverItem);
 90 | 
 91 |         if (isDescendant(parent, child)==true){
 92 |           document.getElementById("container").removeChild(dragItem);
 93 |           document.getElementById("container").insertBefore(dragItem, e.target.parentNode.nextSibling); //after
 94 |         }
 95 | 
 96 |     }
 97 | 
 98 |     if(mouseupdown=="up"){
 99 | 
100 |       let parent=document.getElementById("container");
101 |       let child=e.target.parentNode;
102 | 
103 |       screen.orientation.lock('portrait').catch(function(error) {
104 |         // whatever
105 |         console.log("DOMException");
106 |       });
107 | 
108 |       if (isDescendant(parent, child)==true){
109 |         document.getElementById("container").removeChild(dragItem);
110 |         document.getElementById("container").insertBefore(dragItem, e.target.parentNode);
111 |       }
112 | 
113 |     }
114 | 
115 |     starty=0;
116 |     mouseupdown="down";
117 |   }
118 | 
119 | /*
120 | 
121 | window.addEventListener("drag", function(e){
122 | 
123 |     //console.log("drag", e.target);
124 | 
125 | });
126 | 
127 | window.addEventListener("dragstart", function(e){
128 | 
129 |     console.log("dragstart", e.target);
130 | 
131 | });
132 | 
133 | 
134 | window.addEventListener("dragover", function(e){
135 | 
136 |     //console.log("dragover", e.target);
137 |     e.preventDefault();
138 |     dragOverItem=e.target;
139 | 
140 | });
141 | 
142 | window.addEventListener("dragend", function(e){
143 | 
144 |     let id=e.target.getAttribute('data-id');
145 | 
146 |     console.log(Object.getOwnPropertyNames(e.target))
147 | 
148 |     console.log("dragend", e.target, id);
149 | 
150 | });
151 | 
152 | window.addEventListener("click", function(e){
153 | 
154 |     var images = Array.prototype.slice.call(document.getElementById('container').children);
155 | 
156 |     var index = images.indexOf(e.target);
157 |     console.log(images, e.target.attributes);
158 | 
159 |     for (const obj of e.target.attributes) {
160 |         console.log(obj, obj.name, obj.value);
161 |     }
162 |    
163 |    console.dir(e.target.closest(".row").parentElement.children[0].attributes);
164 | 
165 |    //document.getElementById('container').children
166 | 
167 | //    console.log(document.getElementById('container').children);
168 | 
169 | //    const index = Array.from(document.getElementById('container').children).indexOf(e.target);
170 | //    console.log(index);
171 | 
172 | });
173 | 
174 | 
175 | window.addEventListener("drop", function(e){
176 | 
177 |     e.preventDefault();
178 |     console.log("drop", typeof e.target);
179 |     console.dir(e.target); //HTMLDivElement
180 | 
181 |     let elm=e.target.children[0];
182 |     let repElm=e.target.children[2];
183 | 
184 |     console.log("typeof",typeof elm,e.target);
185 | 
186 | 
187 |     e.target.insertAdjacentElement('afterend', elm)
188 | 
189 |     //e.target.removeChild(elm);
190 | 
191 |     //e.target.replaceChild(elm, repElm); //new, old
192 |     //e.target.appendChild(elm);
193 | 
194 |     //element.parentNode.insertBefore(newElement, element.nextSibling);
195 | 
196 |     // for (const iterator of e.target.children) {
197 |     //     console.log(iterator, typeof iterator);
198 |     // }
199 |    
200 | 
201 |     //for (const [key, value] of Object.entries(e.target.elements)) {
202 |         //console.log(`${key}: ${value}`);
203 |       //}
204 | 
205 |     // e.target.forEach(element => {
206 |     //     console.log(element);
207 |     // });
208 | 
209 | });
210 | 
211 | */


--------------------------------------------------------------------------------
/dragndrop/imagea.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mateors/javascript/9bc7ea0c9455e8af5930403168938e4adac9d6bc/dragndrop/imagea.png


--------------------------------------------------------------------------------
/dragndrop/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link rel="stylesheet" href="styles.css">
  8 |     <title>DragAndDrop</title>
  9 |     <style>
 10 |         /* .musfika{
 11 |             display: block;
 12 |             box-sizing: border-box;
 13 |             border: 0;
 14 |             width: 500px;
 15 |             min-height: 200px;
 16 |             height: auto;
 17 |             background-color: aqua;
 18 |             font-size: 80px;
 19 |             overflow:hidden;
 20 |             word-wrap: break-word;
 21 |         }
 22 | 
 23 |         .musfika:hover{
 24 |             border: 1px solid red;
 25 |         } */
 26 |     </style>
 27 | </head>
 28 | <body>
 29 | 
 30 |     <!-- <div class="field" contenteditable="true"></div> -->
 31 | 
 32 |     
 33 | 
 34 |     <div class="container" id="container">
 35 | 
 36 | 
 37 |         <div class="row" data-id="1" draggable="true">
 38 | 
 39 |             <!--move button goes here-->
 40 |            <div class="part1">move</div>
 41 | 
 42 | 
 43 |            <div class="part2">
 44 | 
 45 |                 <div class="wi3">
 46 | 
 47 |                     <div class="field" contenteditable="true">One</div>
 48 | 
 49 |                     <div class="i2button" role="button"><div class="abtn">span</div></div>
 50 |         
 51 |                     <div class="i3dropdown">
 52 |                         <div class="dropdown">
 53 |                             <select name="element_type">
 54 |                                 <option value="text">Single line Text</option>
 55 |                                 <option value="textarea">Multiline Text / Paragraph</option>
 56 |                                 <option value="radio">Multiple choice</option>
 57 |                                 <option value="checkbox">Checkboxes</option>
 58 |                                 <option value="dropdown">Dropdown</option>
 59 |                                 <option value="file">File upload</option>
 60 |                                 <option value="date">Date</option>
 61 |                                 <option value="time">Time</option>
 62 |                                 <option value="linear_scale">Linear scale</option>
 63 |                                 <option value="radio_grid">Multiple choice grid</option>
 64 |                                 <option value="radio_grid">Checkbox grid</option>
 65 |                             </select>
 66 |                         </div>
 67 |                     </div>
 68 | 
 69 |                 </div>
 70 | 
 71 |                 <div class="option_description"></div>
 72 | 
 73 |            </div> 
 74 | 
 75 | 
 76 |            <div class="part3">
 77 | 
 78 |                 <!---part1 related option will be displayed here--->          
 79 |                 <div class="upper">description</div>
 80 | 
 81 |                 <!----duplicate, delete, required and more_option--->
 82 |                 <div class="lower">copy, delete, required</div>
 83 | 
 84 |            </div>
 85 | 
 86 | 
 87 |         </div>
 88 | 
 89 | 
 90 | 
 91 |         <div class="row" data-id="2" draggable="true">
 92 |             <div class="field" contenteditable="true">Two</div>
 93 |         </div>
 94 | 
 95 |         <div class="row" data-id="3" draggable="true">
 96 |             <div class="field" contenteditable="true">Three</div>
 97 |         </div>
 98 | 
 99 |     </div> 
100 |     
101 |     <script src="./dragndrop.js"></script>
102 | </body>
103 | </html>


--------------------------------------------------------------------------------
/dragndrop/styles.css:
--------------------------------------------------------------------------------
  1 | :root{
  2 |     --font-color: #9aa0a6;
  3 |     --border-bg-color:#80868b;
  4 | }
  5 | 
  6 | *{
  7 |     box-sizing: border-box;
  8 | }
  9 | 
 10 | body{
 11 |     background-color: aquamarine;
 12 |     margin: 0;
 13 |     padding: 0;
 14 | }
 15 | 
 16 | 
 17 | [contenteditable] {
 18 |     outline: 0px solid transparent;
 19 |   }
 20 | 
 21 | .container{
 22 |     display: flex;
 23 |     flex-direction: column;
 24 |     justify-content:center;
 25 |     align-items:center;
 26 |     border: 1px solid #000;
 27 |     width: 100%;
 28 |     height: 100vh;
 29 |     /* transform: translate(0, -50%); */
 30 | }
 31 | 
 32 | .container .row{
 33 |     background-color:var(--font-color);
 34 |     margin: 5px;
 35 | }
 36 | 
 37 | .container .row:first-child{
 38 |     margin: 0;
 39 |     border: 1px solid red;
 40 | }
 41 | 
 42 | .container .row .field{
 43 | 
 44 |     /* all: revert; */
 45 |     display: flex;
 46 |     align-items: center; /*vertically*/
 47 |     padding: 3px;
 48 |     border: 0px;
 49 |     width: 300px;
 50 |     height: 30px;
 51 |     font-size: 20px;
 52 |     background-color: #f8f9fa;
 53 |     font-size: 12pt;
 54 |     font-family: 'docs-Roboto', Helvetica, Arial, sans-serif;
 55 |     letter-spacing: 0;
 56 |     
 57 | }
 58 | 
 59 | .font{
 60 |     font-family: Roboto,Arial,sans-serif;
 61 |     font-size: 16px;
 62 |     letter-spacing: .2px;
 63 |     line-height: 24px;
 64 |     font-weight: 400;
 65 | }
 66 | 
 67 | 
 68 | .wi3{
 69 |  display: flex;
 70 |  background-color: white;
 71 | }
 72 | 
 73 | .imguo{
 74 |  display: inline-block;
 75 |  width: 48px;
 76 |  height: 48px;
 77 |  border-radius: 24px;
 78 |  background-color: red;
 79 |  background-image: url('imagea.png');
 80 |  overflow: hidden;
 81 | }
 82 | 
 83 | .btn{
 84 |     -webkit-user-select: none;
 85 |     -webkit-transition: background .3s;
 86 |     transition: background .3s;
 87 |     border: 0;
 88 |     -webkit-border-radius: 50%;
 89 |     border-radius: 50%;
 90 |     cursor: pointer;
 91 |     display: inline-block;
 92 |     -webkit-flex-shrink: 0;
 93 |     flex-shrink: 0;
 94 |     height: 48px;
 95 |     outline: none;
 96 |     overflow: hidden;
 97 |     position: relative;
 98 |     text-align: center;
 99 |     -webkit-tap-highlight-color: transparent;
100 |     width: 48px;
101 |     z-index: 0;
102 | }
103 | 
104 | 
105 | .table {display:block; }
106 | .row { display:block;}
107 | .cell {display:inline-block;}
108 | 
109 | 


--------------------------------------------------------------------------------
/jsx.md:
--------------------------------------------------------------------------------
1 | # JSX
2 | ## What is JSX?
3 | * https://www.blog.duomly.com/what-is-jsx/#intro-to-what-is-jsx
4 | 


--------------------------------------------------------------------------------
/media.md:
--------------------------------------------------------------------------------
1 | # Media
2 | First learn [media-application-basics](https://web.dev/media-application-basics)
3 | 
4 | ## Prepare Media files for the web
5 | * [Prepare-media-files-for-the-web](https://web.dev/media/#prepare-media-files-for-the-web)
6 | * [Media-frameworks](https://web.dev/media-frameworks)
7 | * [PWA-with-offline-streaming](https://web.dev/pwa-with-offline-streaming)
8 | 


--------------------------------------------------------------------------------
/microverse.md:
--------------------------------------------------------------------------------
   1 | # Microverse Practice Repo
   2 | 
   3 | # [Level-1 (JavaScript Basics 1)](https://docs.google.com/presentation/d/1NOZmvjmX7Cy97cH_JeZ3yuIaIKTEvV5nMuXRMrIcCDA/edit?usp=sharing)
   4 | * [Presentation](https://docs.google.com/presentation/d/1NOZmvjmX7Cy97cH_JeZ3yuIaIKTEvV5nMuXRMrIcCDA/edit?usp=sharing)
   5 | 
   6 | ## Exercise 1
   7 | 1. Created an replit account with the username of [https://replit.com/@mateors](mateors)
   8 | 2. Created am empty Node.js project. [Javascript](https://replit.com/@mateors/Javascript#index.js)
   9 | 
  10 | ## Variable
  11 | [Why are variables useful?](https://youtu.be/IMDApd-aRoc)
  12 | 
  13 | ## Declaring and displaying variables
  14 | 
  15 | ## Exercise 2
  16 | 
  17 | ```js
  18 | let myname="Md Mostain";
  19 | console.log(myname);
  20 | ```
  21 | 
  22 | ## Data Types
  23 | [Data types in Javascript](https://youtu.be/odr19LorSZk)
  24 | 
  25 | ```js
  26 | let myname="Mostain"; //String
  27 | let height=154;  //Numerica
  28 | let isAdult=true; //Boolean
  29 | ```
  30 | ### [Undefined vs Null in Javascript](https://flexiple.com/javascript/undefined-vs-null-javascript)
  31 | In JavaScript, there are two special types of values – undefined and null. It is crucial for a beginner to understand the differences between them (null and undefined) and when to use what.
  32 | 
  33 | ### Introduction to undefined and null values
  34 | Many times we often get confused on what the difference between UNDEFINED and NULL is. Simply put, undefined means a variable has been declared but has not yet been assigned a value. undefined is a type by itself (undefined). Unassigned variables are initialized by JavaScript with a default value of undefined.
  35 | 
  36 | ```js
  37 | //demonstrating usage of undefined in javascript
  38 | var n;
  39 | 
  40 | console.log(n);
  41 | 
  42 | //undefined
  43 | ```
  44 |  > The variable by default is assigned a value of undefined.
  45 | 
  46 | 
  47 | ### Undefined vs null - the differences
  48 | 
  49 | 1. Data types:
  50 | ```js
  51 | console.log(typeof undefined); //“undefined”
  52 | console.log(typeof null); //“object”
  53 | ```
  54 | 2. In arithmetic operations
  55 | When used in arithmetic operations, undefined will result in NaN (not a number), whereas null will be converted to 0 behind the screens.
  56 | 
  57 | ```js
  58 | 
  59 | // demonstration of arithmetic operations using undefined and null
  60 | console.log(undefined + 1); // NaN
  61 | 
  62 | console.log(null + 1); // 1
  63 | ```
  64 | 
  65 | 3. Undefined and null are falsy
  66 | When used in conditional logic both undefined and null will return false.
  67 | ```js
  68 | console.log(!!undefined); //false
  69 | 
  70 | console.log(!!null); //false
  71 | ```
  72 | 
  73 | 4. Comparing undefined and null
  74 | Let’s see what happens when you compare undefined and null using the JavaScript equality operators.
  75 | 
  76 | ```js
  77 | // comparing undefined and null
  78 | console.log(undefined == null);//true
  79 | 
  80 | console.log(undefined === null);//false
  81 | ```
  82 | As you can see, when the equality operator is used it compares only the values. Both undefined and null are falsy by default. So == returns true.
  83 | 
  84 | But when we use the strict equality operator (===) which checks both type and value, since undefined and null are of different types (from the typeof Operator section), the strict equality operator returns false.
  85 | 
  86 | ## Exercise 4
  87 | ```js
  88 | let greeting = "Hello my name is";
  89 | let myname = "Mostain";
  90 | let str = "As I have"
  91 | let apples = 10;
  92 | let end= "apples";
  93 | console.log(greeting, myname, str,apples, end);
  94 | ```
  95 | 
  96 | ## Modifying variables
  97 | ```js
  98 | //String type concatenation
  99 | let name = "Mostain";
 100 | name = name + " Billah";
 101 | console.log(name); //Mostain Billah
 102 | //or
 103 | name += " Billah";
 104 | console.log(name); //Mostain Billah
 105 | 
 106 | //Numeric type concatenation
 107 | let apples = 10;
 108 | apples = apples +5;
 109 | console.log(apples); //15
 110 | 
 111 | //or
 112 | apples +=5;
 113 | console.log(apples); //15
 114 | ```
 115 | 
 116 | ## Exercise 6
 117 | ```js
 118 | let greeting = "Hello my name is";
 119 | let myname = "Mostain";
 120 | let lastname = "Billah";
 121 | let str = "As I have"
 122 | let apples = 10;
 123 | apples *= 5;
 124 | let end= "apples";
 125 | console.log(greeting, myname,lastname, str,apples, end);
 126 | ```
 127 | 
 128 | ## Final Assesment
 129 | 
 130 | ### Storing Values with the Assignment Operator
 131 | In JavaScript, you can store a value in a variable with the assignment operator (=).
 132 | ```js
 133 | myVariable = 5;
 134 | ```
 135 | [This assigns the Number value 5 to myVariable.](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator)
 136 | 
 137 | If there are any calculations to the right of the = operator, those are performed before the value is assigned to the variable on the left of the operator.
 138 | 
 139 | ```js
 140 | var myVar;
 141 | myVar = 5;
 142 | ```
 143 | First, this code creates a variable named myVar. Then, the code assigns 5 to myVar. Now, if myVar appears again in the code, the program will treat it as if it is 5.
 144 | 
 145 | ### [Assigning the Value of One Variable to Another](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another)
 146 | After a value is assigned to a variable using the assignment operator, you can assign the value of that variable to another variable using the assignment operator.
 147 | ```js
 148 | var myVar;
 149 | myVar = 5;
 150 | var myNum;
 151 | myNum = myVar;
 152 | ```
 153 | ### Above code explanation
 154 | * The above declares a myVar variable with no value 
 155 | * then assigns it the value 5. 
 156 | * Next, a variable named myNum is declared with no value. 
 157 | * Then, the contents of myVar (which is 5) is assigned to the variable myNum. 
 158 | * Now, myNum also has the value of 5.
 159 | 
 160 | ### [Understanding Case Sensitivity in Variables](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables)
 161 | 
 162 | In JavaScript all variables and function names are case sensitive. This means that capitalization matters.
 163 | 
 164 | `MYVAR` is not the same as `MyVar` nor `myvar`. It is possible to have multiple distinct variables with the same name but different casing. It is strongly recommended that for the sake of clarity, you do not use this language feature.
 165 | 
 166 | #### Best Practice
 167 | Write variable names in JavaScript in camelCase. In camelCase, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized.
 168 | 
 169 | #### Examples:
 170 | ```js
 171 | var someVariable;
 172 | var anotherVariableName;
 173 | var thisVariableNameIsSoLong;
 174 | ```
 175 | 
 176 | ```js
 177 | let arr=[];
 178 | 
 179 | for (let i=3; i<=12; i++ ){
 180 |   arr.push(i);
 181 |   console.log(arr);
 182 | }
 183 | ```
 184 | 
 185 | # [Level-2](https://docs.google.com/presentation/d/1aagkWAfDdFYWZul_WnhdlXicHHD3WNXZUZb13UyGijo/edit?usp=sharing)
 186 | 
 187 | ## How to use bubbles to do teamwork
 188 | We have created a whatsapp group of 7 members, the purpose of this group is to study and practice code together in a collaborative way.
 189 | 
 190 | ### mob programming in bubbles
 191 | One become a driver and the rest are navigators from the newly form bubbles/team
 192 | driver will  share his/her screen and code with the help of navigators.
 193 | 
 194 | ## Why teamwork is so important?
 195 | * Most of your time at Microverse will be spent doing teamwork with others, and doing teamwork in this level will prepare you for that.
 196 | * Teamwork will give you the opportunity to improve your coding communication skills.
 197 | * Being able to communicate your thought process while coding is essential at real-world tech job interviews.
 198 | 
 199 | > so teamwork helps to improve our coding communication skills as well as thinking process.
 200 | 
 201 | To get recommendation from the microverse representitive we need to form a team and work together and participate all the event specially hackathon on wednesday at 8pm. Remember only participant will get recommendation to join microverse program.
 202 | 
 203 | 
 204 | ## Basic aritmetics in JavaScript
 205 | 
 206 | ### Exercise 1
 207 | ```js
 208 | let A= 4 + 7;
 209 | let B = 5 * 9;
 210 | let C= B/A;
 211 | console.log(C); //4.090909090909091
 212 | ```
 213 | 
 214 | ### Why if-then-else statements matter
 215 | Like real world in programming we need to take decisions and `if`, `else if`, `else` this are the keywords help us to take decision or select a specific block of code in our program and execute.
 216 | 
 217 | ### Switch case syntax
 218 | ```js
 219 | 
 220 | 
 221 | let steps=0;
 222 | 
 223 | //if else
 224 | if (steps==0){
 225 |   console.log("You have not started yet!, you are at steps 0");
 226 | }else if(steps==1){
 227 |   console.log("You are at steps 1");
 228 | }else{
 229 |   console.log("You need help to get started?");
 230 | }
 231 | 
 232 | //same but using switch case
 233 | switch(steps){
 234 |   case 0:
 235 |     console.log("You have not started yet!, you are at steps 0");
 236 |     break;
 237 |     
 238 |   case 1:
 239 |     console.log("You are at steps 1");
 240 |     break;
 241 | 
 242 |   default:
 243 |     console.log("You need help to get started?");
 244 | }
 245 | //above line of code will output
 246 | //You have not started yet!, you are at steps 0
 247 | ```
 248 | * [Which one to pick? if-else or switch-case?](https://dasha.ai/en-us/blog/javascript-if-else-or-switch-case)
 249 | 
 250 | 
 251 | ## Excersise 2
 252 | ```js 
 253 | let X = 32;
 254 | 
 255 | if (X==9){
 256 |   console.log("True");
 257 | }else{
 258 |   console.log("False");
 259 | }
 260 | 
 261 | let Y = "Green";
 262 | if (Y=="Blue"){
 263 |   console.log("Blue detected!");
 264 | 
 265 | } else if(Y=="Green"){
 266 |    console.log("Green detected!");
 267 | 
 268 | }else{
 269 |   console.log("No green or blue detected!");
 270 | }
 271 | ```
 272 | 
 273 | ## Comparison Operators
 274 | * `==`	equal to
 275 | * `===`	equal value and equal type
 276 | * `!=`	not equal
 277 | * `!==`	not equal value or not equal type
 278 | * `>`	greater than
 279 | * `<`	less than
 280 | * `>=`	greater than or equal to
 281 | * `<=`	less than or equal to
 282 | 
 283 | ```js
 284 | if (age < 18) text = "Too young to buy alcohol";
 285 | ```
 286 | 
 287 | ## Logical Operators
 288 | * `&&` and -> (x < 10 && y > 1) is true
 289 | * `||` or
 290 | * `!`	 not
 291 | 
 292 | ## Conditional (Ternary) Operator
 293 | JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
 294 | 
 295 | ### Syntax
 296 | > variablename = (condition) ? value1:value2 
 297 | ```js
 298 | let voteable = (age < 18) ? "Too young":"Old enough";
 299 | console.log(voteable);
 300 | ```
 301 | 
 302 | ### Make sure that you understand the difference between:
 303 | * `==` and `===`
 304 | * `!=` and `!==`
 305 | 
 306 | > Double equals (`==`) is a comparison operator, which transforms the operands having the same type before comparison.
 307 | 
 308 | > `===` (Triple equals) is a strict equality comparison operator in JavaScript
 309 | 
 310 | ## Exercise 3
 311 | ```js
 312 | let n = 71; //50
 313 | if ( n > 45 ){
 314 |    if ( n < 65 ){
 315 |     console.log(n);
 316 |    }
 317 | }
 318 | ```
 319 | 
 320 | ## While loop
 321 | ### Exercise 4
 322 | ```js
 323 | let i = 2;
 324 | while(i<=9){
 325 |  console.log(i);
 326 |  i++;
 327 | }
 328 | ```
 329 | 
 330 | ## For loop
 331 | ### Exercise 5
 332 | ```js
 333 | for(let i=7; i<13; i++){
 334 |   console.log(i);
 335 | }
 336 | ```
 337 | 
 338 | ## Data Structure - Array
 339 | ### Exercise 6
 340 | ```js
 341 | let numbers = [8,9,10,11,12,13,14,15];
 342 | console.log(numbers[3]); //4th value
 343 | console.log(numbers);
 344 | ```
 345 | 
 346 | ## Combining arrays, loops and if-then-else
 347 | ### Exercise 7 (Google Slide 23)
 348 | ```js
 349 | let numbers = [1,2,3,4,5,6,7,8,9,10];
 350 | let size=numbers.length;
 351 | 
 352 | for(let i=0; i<size; i++){
 353 |   //if(i>4){
 354 |     console.log(i);
 355 |   //}
 356 | }
 357 | ```
 358 | 
 359 | ## JavaScript coding challenges
 360 | Google slide 26 & 27
 361 | 
 362 | * [Understanding Boolean Values](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values)
 363 | * [Use Conditional Logic with If Statements](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements)
 364 | ```js
 365 | function trueOrFalse(wasThatTrue) {
 366 |     // Only change code below this line
 367 |   if(wasThatTrue){
 368 |     return "Yes, that was true";
 369 |   }else{
 370 |     return "No, that was false";
 371 |   }
 372 |     // Only change code above this line
 373 | }
 374 | ```
 375 | * [Comparison with the Equality Operator](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator)
 376 | 
 377 | In order for JavaScript to compare two different data types (for example, `numbers` and `strings`), it must convert one type to another. This is known as Type Coercion. Once it does, however, it can compare terms as follows:
 378 | 
 379 | ```js
 380 | 1   ==  1  // true
 381 | 1   ==  2  // false
 382 | 1   == '1' // true
 383 | "3" ==  3  // true
 384 | ```
 385 | ```js
 386 | // Setup
 387 | function testEqual(val) {
 388 |   if (val==12) { // Change this line
 389 |     return "Equal";
 390 |   }
 391 |   return "Not Equal";
 392 | }
 393 | 
 394 | testEqual(10);
 395 | ```
 396 | * [Comparison with the Inequality Operator](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator)
 397 | * [Comparison with the Greater Than Or Equal To Operator](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator)
 398 | ```js
 399 | function testGreaterOrEqual(val) {
 400 | 
 401 |   if (val>=20) {  // Change this line
 402 |     return "20 or Over";
 403 |   }
 404 |   if (val>=10) {  // Change this line
 405 |     return "10 or Over";
 406 |   }
 407 |   return "Less than 10";
 408 | }
 409 | 
 410 | testGreaterOrEqual(10);
 411 | ```
 412 | *[Store Multiple Values in one Variable using JavaScript Arrays](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays)
 413 | ```js
 414 | // Only change code below this line
 415 | const myArray = ["Mostain", 38];
 416 | ```
 417 | * [Access Array Data with Indexes](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes)
 418 | ```js
 419 | const array = [50, 60, 70];
 420 | console.log(array[0]);
 421 | const data = array[1];
 422 | 
 423 | //Create a variable called myData and set it to equal the first value of myArray using bracket notation.
 424 | const myArray = [50, 60, 70];
 425 | let myData = myArray[0];
 426 | ```
 427 | 
 428 | * [Modify Array Data With Indexes](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes)
 429 | Unlike strings, the entries of arrays are mutable and can be changed freely, even if the array was declared with const.
 430 | ### Example
 431 | ```js
 432 | const ourArray = [50, 40, 30];
 433 | ourArray[0] = 15;
 434 | ourArray now has the value [15, 40, 30].
 435 | 
 436 | // Setup
 437 | const myArray = [18, 64, 99];
 438 | 
 439 | // Only change code below this line
 440 | myArray[0]=45;
 441 | ```
 442 | * [Iterate with JavaScript While Loops](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops)
 443 | You can run the same code multiple times by using a loop.
 444 | 
 445 | The first type of loop we will learn is called a while loop because it runs while a specified condition is true and stops once that condition is no longer true.
 446 | 
 447 | ```js
 448 | const ourArray = [];
 449 | let i = 0;
 450 | 
 451 | while (i < 5) {
 452 |   ourArray.push(i);
 453 |   i++;
 454 | }
 455 | 
 456 | //Add the numbers 5 through 0 (inclusive) in descending order to myArray using a while loop.
 457 | // Setup
 458 | const myArray = [];
 459 | // Only change code below this line
 460 | let i=5;
 461 | while(i>=0){
 462 |   myArray.push(i);
 463 |   i--;
 464 | }
 465 | console.log(myArray);
 466 | ```
 467 | * [Iterate with JavaScript For Loops](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops)
 468 | You can run the same code multiple times by using a loop.
 469 | 
 470 | The most common type of JavaScript loop is called a for loop because it runs for a specific number of times.
 471 | 
 472 | For loops are declared with three optional expressions separated by semicolons:
 473 | 
 474 | `for (a; b; c)`, where `a` is the initialization statement, `b` is the condition statement, and `c` is the final expression.
 475 | ```js
 476 | // Setup
 477 | const myArray = [];
 478 | 
 479 | // Only change code below this line
 480 | for(let i=1; i<=5; i++){
 481 |   myArray.push(i);
 482 | }
 483 | ```
 484 | * [Count Backwards With a For Loop](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop)
 485 | A for loop can also count backwards, so long as we can define the right conditions.
 486 | 
 487 | In order to decrement by two each iteration, we'll need to change our initialization, condition, and final expression.
 488 | 
 489 | We'll start at `i = 10` and loop while `i > 0`. We'll decrement `i` by 2 each loop with `i -= 2`.
 490 | ```js
 491 | const ourArray = [];
 492 | 
 493 | for (let i = 10; i > 0; i -= 2) {
 494 |   ourArray.push(i);
 495 | }
 496 | 
 497 | //Push the odd numbers from 9 through 1 to myArray using a for loop.
 498 | // Setup
 499 | const myArray = [];
 500 | // Only change code below this line
 501 | for(let i=9; i>0; i-=2){
 502 |   myArray.push(i);
 503 | }
 504 | ```
 505 | * [Iterate Through an Array with a For Loop](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop)
 506 | ```js
 507 | //Declare and initialize a variable total to 0. Use a for loop to add the value of each element of the myArr array to total.
 508 | 
 509 | // Setup
 510 | const myArr = [2, 3, 4, 5, 6];
 511 | 
 512 | // Only change code below this line
 513 | let total=0;
 514 | for(let i=0; i<myArr.length; i++){
 515 |   total+=myArr[i];
 516 |   //console.log(total);
 517 | }
 518 | ```
 519 | 
 520 | ## Recommendation for doing teamwork
 521 | We did some teamwork in this level 2 so we are a valid candidate for asking the recommendation, please submit the recommendation form https://airtable.com/shrDs5hEGXsGTh8OT
 522 | 
 523 | 
 524 | ## Don't forget to submit progress report
 525 | After completeing every level we must submit our progress report using the gather board.
 526 | ![progress](./screens/progress_report.png)
 527 | 
 528 | [Progress report form](https://airtable.com/shrcivQt85T4vhc3V)
 529 | 
 530 | 
 531 | ## [Level-3](https://docs.google.com/presentation/d/15-Db3kK2SM55dxFxJWoTP8MiRI40rVDTUVIumV4tfp4/edit?usp=sharing)
 532 | 
 533 | ### Tweaking `for` loops
 534 | 
 535 | ### Exercise 1
 536 | ```js
 537 | 
 538 | for(let i=102; i>=27; i-=3){
 539 |   console.log(i);
 540 | }
 541 | 
 542 | ```
 543 | 
 544 | ### Array operations
 545 | ```js
 546 | let arr = ["Apple", "Banana", 10, 20, 50];
 547 | 
 548 | //push to arr = add to the ending
 549 | arr.push("Orange");
 550 | console.log(arr);
 551 | 
 552 | //pop from arr = remove from the ending
 553 | let popped=arr.pop();
 554 | console.log(popped);
 555 | console.log(arr);
 556 | 
 557 | //shifting = remove from the beginning
 558 | let shifted=arr.shift();
 559 | console.log(shifted, arr);
 560 | 
 561 | //add from the beginning
 562 | arr.unshift(50);
 563 | console.log(arr);
 564 | 
 565 | //remove multiple element from array
 566 | let spliced=arr.splice(1,2);
 567 | console.log(spliced, arr);
 568 | 
 569 | //copy section of an array
 570 | let copys=arr.slice(0,2);
 571 | console.log(copys);
 572 | ```
 573 | ### Exercise 2
 574 | ```js
 575 | let arr = [];
 576 | 
 577 | for(let i=3; i<=12; i++){
 578 |   arr.push(i);
 579 | }
 580 | console.log(arr);
 581 | ```
 582 | 
 583 | ## Basic logical operators
 584 | ### Exercise 3
 585 | ```js
 586 | let arr =[3, 10, 9, 5, 2, 11, 7, 15, 12, 4, 1, 13, 6, 14, 8];
 587 | for(let i=0; i<arr.length; i++){
 588 |   if (arr[i] >=3 && arr[i] <=7){
 589 |     console.log(arr[i]);
 590 |   }
 591 | }
 592 | //--------
 593 | function testLogicalAnd(val) {
 594 |   // Only change code below this line
 595 |   if (val >=25 && val <=50) {
 596 |       return "Yes";
 597 |   }
 598 |   // Only change code above this line
 599 |   return "No";
 600 | }
 601 | testLogicalAnd(10);
 602 | 
 603 | function testLogicalOr(val) {
 604 |   // Only change code below this line
 605 |   if (val<10 || val>20) {
 606 |     return "Outside";
 607 |   }
 608 |   // Only change code above this line
 609 |   return "Inside";
 610 | }
 611 | testLogicalOr(15);
 612 | ```
 613 | 
 614 | ## Exercise 4
 615 | ```js
 616 | let arr =[3, 10, 9, 5, 2, 11, 7, 15, 12, 4, 1, 13, 6, 14, 8];
 617 | for(let i=0; i<arr.length; i++){
 618 |   if (arr[i]<3 || arr[i]>7){
 619 |     console.log(arr[i]);
 620 |   }
 621 | }
 622 | ```
 623 | ## String truncation
 624 | ### Exercise 5
 625 | ```js
 626 | let name="Microverse";
 627 | console.log(name.substring(0,5));
 628 | console.log(name.substring(0,5));
 629 | ```
 630 | 
 631 | ## Exercise 6
 632 | ```js
 633 | let arr= [1,2,3,4,5,6,7,8,9,10,13];
 634 | let number=13;
 635 | 
 636 | for(let x of arr){
 637 |   if(x==number){
 638 |     console.log("Found it!");
 639 |   }else{
 640 |     console.log("Not found");
 641 |   }
 642 | }
 643 | ```
 644 | 
 645 | ## Exercise 7
 646 | ```js
 647 | let numbers= [1,2,3,4,5,6,7,8,9,10];
 648 | let arr= [];
 649 | 
 650 | for(let i=0; i<numbers.length; i++){
 651 |  if(numbers[i]>=4 && numbers[i]<=9){
 652 |   arr.push(numbers[i]);
 653 |  }
 654 | }
 655 | console.log(arr);
 656 | 
 657 | ```
 658 | 
 659 | ### Exercise 8
 660 | ```js
 661 | let arr = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ];
 662 | let size=arr.length;
 663 | 
 664 | for(let i=size-1; i>=0; i--){
 665 | 
 666 |   //console.log(arr[i]);
 667 |   let sa=arr[i];
 668 |   for(let j=sa.length-1; j>=0; j--){
 669 |     console.log(sa[j]);
 670 |   }
 671 | }
 672 | ```
 673 | 
 674 | 
 675 | ### Exercise 9
 676 | ```js
 677 | let bigarr= [];
 678 | let extc=9;
 679 | 
 680 | for(let i=0; i<3; i++){
 681 | 
 682 |   let little=[];
 683 |   for(let j=0; j<3; j++){
 684 |     little.push(extc);
 685 |     extc--;
 686 |   }
 687 |  bigarr.push(little);
 688 | }
 689 | console.log(bigarr);
 690 | ```
 691 | 
 692 | ## Function arguments
 693 | * less code or no code repetition
 694 | * arguments
 695 | 
 696 | ### Exercise 10
 697 | ```js
 698 | function multiplier(){
 699 |   let a=5;
 700 |   let b=6;
 701 |   console.log(a*b);
 702 | }
 703 | 
 704 | function greet(name){
 705 |   console.log(`Hello ${name}`);
 706 | }
 707 | ```
 708 | > How to use return to produce the output of a function
 709 | 
 710 | ### Exercise 11
 711 | ```js
 712 | 
 713 | function myFunc(arr){
 714 |   let output = [];
 715 |   for(let x of arr){
 716 |      output.push(x*5);
 717 |   }
 718 |   return output;
 719 | }
 720 | 
 721 | let out=myFunc([1,5,10]);
 722 | console.log(out);
 723 | ```
 724 | 
 725 | 
 726 | * [Reversing and translating arrays with functions](https://www.youtube.com/watch?v=UAI7jTJg3OM&t=1s)
 727 | 
 728 | ### Exercise 12
 729 | ```js
 730 | 
 731 | function reverse(arr){
 732 |   
 733 |  let output = [];
 734 |  for (let i= arr.length-1; i>=0; i--){
 735 |    output.push(arr[i])
 736 |  }
 737 |  return output;
 738 | }
 739 | console.log(reverse([1,2,3]));
 740 | 
 741 | function revTran(arr){
 742 |   let output=[];
 743 |   for(let i=arr.length-1; i>=0; i--){
 744 |     output.push(arr[i])
 745 |   }
 746 | 
 747 |   let result=[];
 748 |   for(let i=0; i<output.length; i++){
 749 |    
 750 |     if(output[i]==1){
 751 |        result.push("one");
 752 |     }
 753 |     if(output[i]==2){
 754 |        result.push("two");
 755 |     }
 756 |     if(output[i]==3){
 757 |        result.push("three");
 758 |     }
 759 |     if(output[i]==4){
 760 |        result.push("four");
 761 |     }
 762 |   }
 763 |   return result;
 764 | }
 765 | //console.log(revTran([1,2,3,4])); 
 766 | //console.log(revTran([4,1,1,2])); //
 767 | console.log(revTran([1,2,1,2])); //
 768 | ```
 769 | 
 770 | ## [Level-4](https://docs.google.com/presentation/d/1qX08h9muuE-iFb0TlkhbPrV4rmcBjnvpIQRuIQEdFAU/edit?usp=sharing)
 771 | Slide 4, Convert Celsius to Fahrenheit 
 772 | 
 773 | ```js
 774 | function convertCtoF(celsius) {
 775 |   let fahrenheit;
 776 |   fahrenheit=celsius*(9/5)+32;
 777 |   return fahrenheit;
 778 | } 
 779 | console.log(convertCtoF(30));
 780 | ```
 781 | 
 782 | ### [Reverse a String](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/reverse-a-string)
 783 | slide 8
 784 | 
 785 | > How do i turn the string into an array?
 786 | There are 4 Ways to Convert String to Character Array in JavaScript.
 787 | ```js
 788 | const string = 'word';
 789 | ```
 790 | 1. string.split(''); `console.log(string.split(''));`
 791 | 2. [...string]; `console.log([...string]);`
 792 | 3. Array.from(string); `console.log(Array.from(string));`
 793 | 4. Object.assign([], string); `console.log(Object.assign([],string));`
 794 | 
 795 | 
 796 | ```js
 797 | function reverseString(str){
 798 |   let reverse="";
 799 |   //read/access each letter from the str variable
 800 |   for(let i=str.length-1; i>=0; i--){
 801 |     //console.log(str[i]);
 802 |     reverse+=str[i];
 803 |   }
 804 |   return reverse;
 805 | }
 806 | 
 807 | reverseString("hello");
 808 | 
 809 | //Another way using .split() function
 810 | function reverseString(str){
 811 |   
 812 |   let reverse="";
 813 |   //let narr=str.split(""); //option 1
 814 |   //let narr=[...str]; //option 2
 815 |   //let narr=Array.from(str); //option 3
 816 |   let narr=Object.assign([], str); //option 4
 817 | 
 818 |   //reading each letter from the narr array
 819 |   for(let i=narr.length-1; i>=0; i--){
 820 |     reverse+=narr[i];
 821 |   }
 822 |   return reverse;
 823 | }
 824 | ```
 825 | ### [Factorialize a number](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/factorialize-a-number)
 826 | Slide 12, Return the factorial of the provided integer.
 827 | Factorials are often represented with the shorthand notation n!
 828 | For example: `5! = 1 * 2 * 3 * 4 * 5 = 120`
 829 | ```js
 830 | //Manual factorial calculation
 831 | let x = 1;
 832 | 
 833 | x *=2;
 834 | 
 835 | x *=3;
 836 | console.log(x); //3!=6
 837 | 
 838 | x *=4;
 839 | console.log(x); //4!=24
 840 | 
 841 | x *=5;
 842 | console.log(x); //5!=120
 843 | 
 844 | x *=6;
 845 | console.log(x); //6!=720
 846 | 
 847 | //Now turn the above idea/concept into a function
 848 | //Time Complexity: O(n)
 849 | function factorialize(num) {
 850 |   let result=1;
 851 |   for(let i=2; i<=num; i++){
 852 |    result *= i;
 853 |    //console.log(result);
 854 |   }
 855 |   return result;
 856 | }
 857 | 
 858 | //Time Complexity: O(n)
 859 | function recursiveFactorial(num){
 860 | 
 861 |   //base case
 862 |   if (num==1 || num==0){
 863 |     return 1;
 864 |   }
 865 |   //recursive case
 866 |   num=num*rfactor(num-1);
 867 |   return num;
 868 | }
 869 | 
 870 | ```
 871 | 
 872 | 
 873 | ### [Truncate a String](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/truncate-a-string)
 874 | Slide 16, Truncate a string (first argument) if it is longer than the given maximum string length (second argument). Return the truncated string with a `...` ending.
 875 | 
 876 | ```js
 877 | function truncateString(str, num) {
 878 |   let size=str.length;
 879 |   str=str.substring(0,num);
 880 |   if (size>num){
 881 |     str=str+"...";
 882 |   }
 883 |   return str;
 884 | }
 885 | ```
 886 | 
 887 | ### [Where do I Belong](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/where-do-i-belong)
 888 | 
 889 | * [How javascript array sorting works?](https://www.javascripttutorial.net/javascript-array-sort/)
 890 | ```js
 891 | let arr = [5, 2, 10, 4, 3, 1];
 892 | console.log(arr);
 893 | arr.sort(function(a, b) {
 894 | 
 895 |   if (a > b) { //first argument is greater than second
 896 |     return 1; //positive
 897 |   }
 898 |   if (a < b) { //first argument is less than second
 899 |     return -1; //negative
 900 |   }
 901 |   return 0; //a==b, both are equal so zero
 902 | });
 903 | console.log(arr);
 904 | 
 905 | //10,2
 906 | //10>2==true = 10-2=8 positive -> 1
 907 | //10<2==false => 2-10=-8 negative -> -1
 908 | //otherwise zero
 909 | 
 910 | let nums=[3,5,20];
 911 | console.log(nums.sort((a,b)=>a-b)); 
 912 | ```
 913 | 
 914 | ### [Where do i belong?](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/where-do-i-belong)
 915 | Slide 20 \
 916 | Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.
 917 | 
 918 | For example, `getIndexToIns([1,2,3,4], 1.5)` should return 1 because it is greater than `1` (index 0), but less than `2` (index 1).
 919 | 
 920 | ```js
 921 | //Time Complexity: O(n)
 922 | function getIndexToIns(arr, num) {
 923 |   
 924 |   let index=0;
 925 |   arr.sort((a,b)=>a-b);
 926 |   for(let i=0; i<arr.length; i++){
 927 | 
 928 |     let cn=arr[i];
 929 |     let nn=arr[i+1];
 930 |     
 931 |     if(num == cn && num<nn){
 932 |       index=i;
 933 |       return index;
 934 |       
 935 |     } else if(num> cn && num<nn){
 936 |       index=i+1;
 937 |       return index; 
 938 |       
 939 |     }else{
 940 |       index++;
 941 |     }  
 942 |   }
 943 |   return index;
 944 | }
 945 | 
 946 | console.log(getIndexToIns([10,20,30,40,50], 35));//3
 947 | console.log(getIndexToIns([10,20,30,40,50], 30));//2
 948 | console.log(getIndexToIns([40,60], 50));//1
 949 | console.log(getIndexToIns([3, 10,5], 3));//0
 950 | console.log(getIndexToIns([5, 3, 20, 3], 5));//2
 951 | console.log(getIndexToIns([2, 20, 10], 19)); //2
 952 | console.log(getIndexToIns([2, 5, 10], 15));//3
 953 | console.log(getIndexToIns([], 1));//0
 954 | 
 955 | //the easy method, using hint from slide 21
 956 | //Time Complexity: O(n)
 957 | function getIndexToIns(arr, num) {
 958 |   let index=0;
 959 |   for(let i=0; i<arr.length; i++){
 960 |     if(num>arr[i]){
 961 |       index++;
 962 |     }
 963 |   }
 964 |  return index;
 965 | }
 966 | 
 967 | console.log(getIndexToIns([10,20,30,40,50], 35));//3
 968 | console.log(getIndexToIns([10,20,30,40,50], 30));//2
 969 | console.log(getIndexToIns([40,60], 50));//1
 970 | console.log(getIndexToIns([3, 10,5], 3));//0
 971 | console.log(getIndexToIns([5, 3, 20, 3], 5));//2
 972 | console.log(getIndexToIns([2, 20, 10], 19)); //2
 973 | console.log(getIndexToIns([2, 5, 10], 15));//3
 974 | console.log(getIndexToIns([], 1));//0
 975 | ```
 976 | 
 977 | ### [Chunky monkey](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/chunky-monkey)
 978 | slide 23 challenge
 979 | 
 980 | ```js
 981 | //Time Complexity: O(n)
 982 | function chunkArrayInGroups(arr, size) {
 983 |   let aSize=arr.length;
 984 |   let twoDim=[];
 985 |   let loopEnd=Math.ceil(aSize/size);
 986 |   let start=0;
 987 |   //console.log(loopEnd);
 988 |   for(let i=0; i<loopEnd; i++){
 989 |     twoDim.push(arr.slice(start,start+size));
 990 |     start+=size
 991 |   }
 992 |   return twoDim;
 993 | }
 994 | 
 995 | console.log(chunkArrayInGroups(["a", "b", "c", "d"], 2));//[ [ 'a', 'b' ], [ 'c', 'd' ] ]
 996 | console.log(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)); //[ [ 0, 1 ], [ 2, 3 ], [ 4, 5 ], [ 6, 7 ], [ 8 ] ]
 997 | 
 998 | 
 999 | function chunkArrayInGroups(arr, size) {
1000 | 
1001 |   let output = []; 
1002 |   let subarr=[];
1003 |   let subc=0;
1004 |   
1005 |   //console.log(loopEnd);
1006 |   for(let i=0; i<arr.length; i++){
1007 |     
1008 |     if(subc===size){
1009 |       subc=0;
1010 |       output.push(subarr);
1011 |       subarr=[];
1012 |     }
1013 |     
1014 |     subarr.push(arr[i]);
1015 |     subc++;
1016 |   }
1017 |   output.push(subarr);
1018 |   //console.log(subarr);
1019 |   return output;
1020 | }
1021 | ```
1022 | 
1023 | ### [Sum All Numbers in a Range](https://docs.google.com/presentation/d/1qX08h9muuE-iFb0TlkhbPrV4rmcBjnvpIQRuIQEdFAU/edit?usp=sharing)
1024 | Slide 27, We'll pass you an array of two numbers. Return the sum of those two numbers plus the sum of all the numbers between them. The lowest number will not always come first.
1025 | 
1026 | For example, `sumAll([4,1])` should return `10` because sum of all the numbers between 1 and 4 (both inclusive) is `10`.
1027 | 
1028 | ```js
1029 | function sumAll(arr) {
1030 | 
1031 |   let result=0;
1032 |   let start=arr[0];
1033 |   let end=arr[1];
1034 | 
1035 |   if(end<start){
1036 |     start=arr[1];
1037 |     end=arr[0];
1038 |   }
1039 |   
1040 |   for(let i=start; i<=end; i++){
1041 |     //console.log(i);
1042 |     result+=i;
1043 |   }
1044 |   return result;
1045 | }
1046 | let res=sumAll([10, 5]);
1047 | console.log(res);
1048 | ```
1049 | 
1050 | ### Seek and Destroy
1051 | You will be provided with an initial array (the first argument in the destroyer function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments.
1052 | 
1053 | Note: You have to use the `arguments object`.
1054 | ```js
1055 | function destroyer(arr){
1056 | 
1057 |   let input=arguments[0]; //arguments object
1058 |   let farr=[]; //
1059 |   let output=[];
1060 |   
1061 |   for (let i = 1; i < arguments.length; i++) {
1062 |     let cv=arguments[i];
1063 |     farr.push(cv);
1064 |   }
1065 | 
1066 |   for(let i=0; i<input.length; i++){
1067 |     //console.log(farr[i]);
1068 |     let elm=input[i];
1069 |     if(farr.includes(elm)==false){
1070 |       output.push(elm);
1071 |     }
1072 |     
1073 |   }
1074 |   //console.log(output);
1075 |   return output;
1076 | }
1077 | console.log(destroyer([1,6,5,7,5,7], 5,7));//[ 1, 6 ]
1078 | ```
1079 | 
1080 | ### [Pig Latin](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin)
1081 | I used to solve using [Slide 37 hints 2](https://www.youtube.com/watch?v=D1VzsCiA4mI)
1082 | 
1083 | Pig Latin is a way of altering English Words. The rules are as follows:
1084 | 
1085 | - If a word begins with a consonant, take the first consonant or consonant cluster, move it to the end of the word, and add `ay` to it.
1086 | 
1087 | - If a word begins with a vowel, just add `way` at the end.
1088 | 
1089 | ```js
1090 | function translatePigLatin(str) {
1091 | 
1092 |   let fchar=str[0];
1093 |   let vowels="aeiou";
1094 |   let output="";
1095 | 
1096 |   if (vowels.includes(fchar)){
1097 |       output=str+"way";
1098 | 
1099 |   }else{
1100 | 
1101 |       let i=0;
1102 |       while(vowels.includes(str[i])==false){
1103 |         //console.log(str[i]);
1104 |         i++;
1105 |       }
1106 | 
1107 |       let prefix=str.substring(0,i);
1108 |       let rest=str.substring(i);
1109 |       output=`${rest}${prefix}ay`;
1110 |   }
1111 |   return output;
1112 | }
1113 | console.log(translatePigLatin("schwartz"));
1114 | console.log(translatePigLatin("algorithm"));
1115 | console.log(translatePigLatin("california"));
1116 | ```
1117 | 
1118 | 
1119 | ### [DNA Pairing](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing)
1120 | Slide 39, freecodecamp problem description was not clear to me, I googled and found the following info to make it understand how DNA strand base pair forms.
1121 | 
1122 | #### Pairs of DNA strands / dna strand base pairs
1123 | > The four bases in DNA are adenine (A), cytosine (C), guanine (G), and thymine (T). These bases form specific pairs (A with T, and G with C).
1124 | 
1125 | ```js
1126 | function pairElement(str) {
1127 | 
1128 |   let output=[]; //2d array
1129 |   let at="AT";
1130 |   let cg="CG";
1131 |   
1132 |   for (let i = 0; i < str.length; i++) {
1133 |     
1134 |     let singlepair=str[i];
1135 |     //console.log(singlepair);
1136 |     let subarr=[]//1d array
1137 |     if(at.includes(singlepair)){
1138 | 
1139 |       if(singlepair=='A'){
1140 |         subarr=['A','T'];
1141 |       }else if(singlepair=='T'){
1142 |         subarr=['T','A'];
1143 |       }
1144 |     }
1145 | 
1146 |     if(cg.includes(singlepair)){
1147 |       
1148 |       if(singlepair=='C'){
1149 |         subarr=['C','G'];
1150 |       }else if(singlepair=='G'){
1151 |         subarr=['G','C'];
1152 |       }
1153 |     }
1154 |     output.push(subarr);
1155 |   }
1156 |   return output;
1157 | }
1158 | 
1159 | console.log(pairElement("GCG"));
1160 | console.log(pairElement("ATCGA"));
1161 | console.log(pairElement("TTGAG"));
1162 | console.log(pairElement("CTCTA"));
1163 | 
1164 | //Another easy of of implementation the same function
1165 | function pairElement(str) {
1166 | 
1167 |   let output=[]; //2d array
1168 | 
1169 |     for (let i = 0; i < str.length; i++) {
1170 |       
1171 |       let singlepair=str[i];
1172 |       if (singlepair=='A'){
1173 |         output.push(['A','T']);
1174 |         
1175 |       }else if (singlepair=='T'){
1176 |         output.push(['T','A']);
1177 |         
1178 |       }else if (singlepair=='C'){
1179 |         output.push(['C','G']);
1180 |         
1181 |       }else {
1182 |         output.push(['G','C']);
1183 |       }
1184 |   }
1185 |   return output;
1186 | }
1187 | ```
1188 | 
1189 | 
1190 | ## Next Level
1191 | * Level 5 - JavaScript Intermediate Challenges.
1192 | * Level 6 - JavaScript Advance Challenges
1193 | * Level 7 - Intro to web development
1194 | * Level 8 - HTML
1195 | * Level 9 - CSS 1
1196 | * Level 10 - CSS 2
1197 | * Level 11 - Git Experience
1198 | * Level 12 - HTML/CSS Project
1199 | 
1200 | 
1201 | # Level 5
1202 | ## JavaScript Intermediate Challenges
1203 | 
1204 | * Challenge #11: Convert HTML Entities (freeCodeCamp) 
1205 | * Challenge #12: Sum All Primes (freeCodeCamp) 
1206 | * Challenge #13: A Very Big Sum (HackerRank) 
1207 | * Challenge #14: Plus Minus (HackerRank) 
1208 | * Challenge #15: Staircase (HackerRank) 
1209 | * Challenge #16: Birthday Cake Candles (HackerRank) 
1210 | * Challenge #17: Breaking the Records (HackerRank) 
1211 | * Challenge #18: Bon Appétit (HackerRank) 
1212 | * Challenge #19: Cats and a Mouse (HackerRank) 
1213 | * Challenge #20: The Hurdle Race x(HackerRank) 
1214 | 
1215 | ### Challenge #11
1216 | [Convert HTML Entities](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities)
1217 | 
1218 | ```js
1219 | // let str="Dolce & Gabbana";
1220 | // console.log(str.replace(/&/gi, "&amp;"));
1221 | 
1222 | // let str="Hamburgers < Pizza < Tacos";
1223 | // console.log(str.replace(/</gi, "&lt;"));
1224 | 
1225 | // let str="Sixty > twelve";
1226 | // console.log(str.replace(/>/gi, "&gt;"));
1227 | 
1228 | // let str=`Stuff in "quotation marks"`;
1229 | // console.log(str.replace(/"/gi, "&guote;"));
1230 | 
1231 | // let str="Schindler's List"
1232 | // console.log(str.replace(/'/gi, "&apos;"));
1233 | 
1234 | 
1235 | function convertHTML(str) {
1236 |   
1237 |     if (str.includes("&")==true){
1238 |       str=str.replace(/&/gi, "&amp;");
1239 |     }
1240 | 
1241 |     if (str.includes("<")==true){
1242 |       str=str.replace(/</gi, "&lt;");
1243 |     }
1244 | 
1245 |     if (str.includes(">")==true){
1246 |       str =str.replace(/>/gi, "&gt;");
1247 |     }
1248 | 
1249 |     if (str.includes(`"`)==true){
1250 |       str=str.replace(/"/gi, "&quot;");
1251 |     }
1252 | 
1253 |     if (str.includes(`'`)==true){
1254 |       str=str.replace(/'/gi, "&apos;");
1255 |     }
1256 |   return str;
1257 | }
1258 | 
1259 | ```
1260 | ### [Leet code Two Sum coding challenge](https://leetcode.com/problems/two-sum/)
1261 | Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.
1262 | 
1263 | You may assume that each input would have exactly one solution, and you may not use the same element twice.
1264 | 
1265 | You can return the answer in any order.
1266 | 
1267 | ```js
1268 |  //Time Complexity: O(n^2)
1269 |  function twoSum(nums, target) {
1270 |    
1271 |    let output=[];
1272 | 
1273 |    if(nums.length<2){
1274 |      return output;
1275 |    }
1276 | 
1277 |    if(nums.length==2){
1278 |      if(nums[0]+nums[1]==target){
1279 |        output.push(0,1);
1280 |        return output;
1281 |      }
1282 |    }
1283 | 
1284 |    for(let i=0; i<nums.length; i++){
1285 | 
1286 |      for(let j=0; j<nums.length; j++){
1287 | 
1288 |        if(nums[i]!==nums[j]){
1289 |          let result=nums[i]+nums[j];
1290 |          if(result==target){
1291 |            output.push(i,j);
1292 |            return output;
1293 |          }
1294 |          //console.log(j, nums[j]);
1295 |        }
1296 |        
1297 |      }
1298 |    }
1299 |    return output;
1300 | }
1301 | 
1302 | //console.log(twoSum([1,4,5], 6));
1303 | //console.log(twoSum([2,7,11,15],9));
1304 | //console.log(twoSum([3,2,4],6));
1305 | console.log(twoSum([3,3],6));
1306 | ```
1307 | 
1308 | ### Challenge #12
1309 | * [Sum All Primes](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes)
1310 | 
1311 | A prime number is a whole number greater than 1 with exactly two divisors: 1 and itself. For example, 2 is a prime number because it is only divisible by 1 and 2. In contrast, 4 is not prime since it is divisible by 1, 2 and 4.
1312 | 
1313 | ```js
1314 | //Time Complexity: O(n^2)
1315 | //Time Complexity: O(n^2)
1316 | function sumPrimes(num){
1317 |   
1318 |   //let prime=[];
1319 |   let result=0;
1320 | 
1321 |   for(let i=2; i<=num; i++){
1322 |     // if(isPrime(i)){
1323 |     //   prime.push(i);
1324 |     // }
1325 |     let isPrime=true;
1326 |     for(let j=2; j<i/2; j++){
1327 |       if (i%j==0){
1328 |         isPrime=false;
1329 |       }
1330 |     }
1331 |     
1332 |     if(isPrime){
1333 |       //prime.push(i);
1334 |       result+=i;
1335 |     }
1336 |     
1337 |   }
1338 |   return result;
1339 | }
1340 | //console.log(sumPrimes(10));
1341 | console.log(sumPrimes(977));
1342 | 
1343 | //function to check if a number is prime or not.
1344 | function isPrime(number){
1345 |   
1346 |   for(let i=2; i<number; i++){
1347 |     //console.log(number%i);
1348 |     if (number%i==0){
1349 |       return false;
1350 |     }
1351 |   }
1352 |   return true;
1353 | }
1354 | function getPrimes(number){
1355 |   
1356 |   let prime=[];
1357 |   for(let i=2; i<number; i++){
1358 |     
1359 |     let isPrime=true;
1360 |     for(let j=2; j<i/2; j++){
1361 |       if (i%j==0){
1362 |         isPrime=false;
1363 |       }
1364 |       console.log(i,j,i%j);
1365 |     }
1366 |     if(isPrime){
1367 |       prime.push(i);
1368 |     }
1369 |   }
1370 |   return prime;
1371 | }
1372 | 
1373 | //Time Complexity: O(n^2)
1374 | //https://dev.to/atebarhaider/sieve-of-eratosthenes-algorithm-4ol
1375 | function primeSieve(num){
1376 | 
1377 |   let prime=[];
1378 |   for(let i=2; i<=num;i++){
1379 |     prime.push(i);
1380 |   }
1381 |   //console.log(prime, prime.length);
1382 |   let p=2;
1383 |   while( p*p <= num ){
1384 | 
1385 |     for(let i=0; i<prime.length;i++){
1386 | 
1387 |       let cn=prime[i];
1388 |       //console.log(p, cn);
1389 |       if(cn%p==0 && cn!=p){
1390 |         prime[i]=0;
1391 |       }
1392 |     }
1393 |     //console.log(p, prime);
1394 |     p++;
1395 |   }
1396 |    let res=prime.filter(x=>x>0);
1397 | }
1398 | 
1399 | ```
1400 | 
1401 | ### Maps vs Set which one should you pick?
1402 | [choosing-your-data-structure](https://blog.logrocket.com/javascript-maps-vs-sets-choosing-your-data-structure)
1403 | 
1404 | ### Challenge #13: A Very Big Sum (HackerRank) 
1405 | [A Very Big Sum](https://www.hackerrank.com/challenges/a-very-big-sum/problem)
1406 | 
1407 | [Before we solve Big Sum we must learn what a BigInt is?](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
1408 | > A BigInt value, also sometimes just called a BigInt, is a bigint primitive, created by appending n to the end of an integer literal, or by calling the BigInt() function (without the new operator) and giving it an integer value or string value.
1409 | 
1410 | ```js
1411 | function aVeryBigSum(ar) {
1412 |     // Write your code here
1413 |   let result=0n;
1414 |   for(let i=0;i<ar.length; i++){
1415 |     result+=BigInt(ar[i]);
1416 |   }
1417 |   return result;
1418 | }
1419 | ```
1420 | 
1421 | ### Challenge #14: Plus Minus (HackerRank) 
1422 | [Plus Minus](https://www.hackerrank.com/challenges/plus-minus/problem)
1423 | 
1424 | ```js
1425 | function plusMinus(arr) {
1426 |     // Write your code here
1427 |   let positive=0;
1428 |   let negative=0;
1429 |   let zero=0;
1430 |   let acount=arr.length;
1431 |   
1432 |   for (let i = 0; i < acount; i++) {
1433 | 
1434 |     if (arr[i]>0){
1435 |       positive++;
1436 |       
1437 |     }else if(arr[i]<0){
1438 |       negative++;
1439 |       
1440 |     }else{
1441 |       zero++;
1442 |     }
1443 |   }
1444 |   
1445 |   //console.log(positive,negative,zero);
1446 |   let p=(positive/acount);
1447 |   let n=(negative/acount);
1448 |   let z=(zero/acount);
1449 |   //console.log(p+n+z);
1450 |   console.log(p.toFixed(6));
1451 |   console.log(n.toFixed(6));
1452 |   console.log(z.toFixed(6));
1453 | }
1454 | ```
1455 | 
1456 | ### Challenge #15: Staircase (HackerRank) 
1457 | [Staircase](https://www.hackerrank.com/challenges/staircase/problem)
1458 | ```js
1459 | //Time Complexity: O(n)
1460 | function staircase(n) {
1461 |     // Write your code here
1462 |   let stair="#";
1463 |   
1464 |   for (let index = 1; index <= n; index++) {
1465 |     console.log(stair.repeat(index).padStart(n,' '));
1466 |   }
1467 | }
1468 | 
1469 | // let stair="#";
1470 | // console.log(stair.repeat(1).padStart(6, ' '));
1471 | // console.log(stair.repeat(2).padStart(6, ' '));
1472 | // console.log(stair.repeat(3).padStart(6, ' '));
1473 | // console.log(stair.repeat(4).padStart(6, ' '));
1474 | // console.log(stair.repeat(5).padStart(6, ' '));
1475 | // console.log(stair.repeat(6).padStart(6, ' '));
1476 | console.log(staircase(4));
1477 | ```
1478 | * [String/padStart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart)
1479 | 
1480 | 
1481 | ### Challenge #16: Birthday Cake Candles (HackerRank) 
1482 | [Birthday Cake Candles](https://www.hackerrank.com/challenges/birthday-cake-candles/problem)
1483 | You are in charge of the cake for a child's birthday. You have decided the cake will have one candle for each year of their total age. They will only be able to blow out the tallest of the candles. Count how many candles are tallest.
1484 | 
1485 | #### Example
1486 | ```js
1487 | let candles = [4,4,1,3];
1488 | ```
1489 | The maximum height candles are  units high. There are  of them, so return .
1490 | 
1491 | * [HashMap](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
1492 | 
1493 | ```js
1494 | /*
1495 |  * Complete the 'birthdayCakeCandles' function below.
1496 |  *
1497 |  * The function is expected to return an INTEGER.
1498 |  * The function accepts INTEGER_ARRAY candles as parameter.
1499 |  */
1500 | 
1501 | //Time Complexity: O(n)
1502 | function birthdayCakeCandles(candles) {
1503 |   
1504 |   // Write your code here
1505 |   let max=0;
1506 |   let hashmap = new Map();
1507 |   //console.log(typeof max, typeof hashmap);
1508 | 
1509 |   for (let i = 0; i < candles.length; i++) {
1510 | 
1511 |     let c=candles[i];
1512 |     if(c>max){
1513 |       max=c;
1514 |     }
1515 |     if(hashmap.has(c)){
1516 |       let ev=hashmap.get(c);
1517 |       ev=ev+1;
1518 |       hashmap.set(c,ev); //updating existing value
1519 |     }else{
1520 |       hashmap.set(c,1);
1521 |     }
1522 |   }
1523 |   return hashmap.get(max);
1524 | }
1525 | 
1526 | // let cc=new Map();
1527 | // cc.set(4,1);
1528 | // console.log(cc);
1529 | // cc.set(4,2);
1530 | // console.log(cc);
1531 | // console.log(cc.has(4));
1532 | // console.log(cc.get(4));
1533 | let tallest=birthdayCakeCandles([4,4,1,3]);
1534 | console.log(tallest);
1535 | ```
1536 | 
1537 | ### Challenge #17: Breaking the Records (HackerRank) 
1538 | [Breaking the Records](https://www.hackerrank.com/challenges/breaking-best-and-worst-records/problem)
1539 | 
1540 | ```js
1541 | function breakingRecords(scores) {
1542 |   
1543 |   // Write your code here
1544 |   let min=scores[0], max=scores[0], minc=0, maxc=0;
1545 |   let arr=[];
1546 | 
1547 |   for (let i = 0; i < scores.length; i++) {
1548 | 
1549 |     let score=scores[i];
1550 |     if(score<min){
1551 |       min=score;
1552 |       minc++;
1553 |     }
1554 |     if (score>max){
1555 |       max=score;
1556 |       maxc++;
1557 |     }
1558 |   
1559 |   }
1560 |   arr=[maxc,minc];
1561 |   return arr;
1562 | }
1563 | //console.log(breakingRecords([12,24,10,24]));
1564 | //console.log(breakingRecords([3, 4, 21, 36, 10, 28, 35, 5, 24, 42]));
1565 | console.log(breakingRecords([10, 5, 20, 20, 4, 5, 2, 25, 1]));
1566 | ```
1567 | 
1568 | ### Challenge #18: Bon Appétit (HackerRank)
1569 | bonAppetit [Bill Division](https://www.hackerrank.com/challenges/bon-appetit/problem) 
1570 | 
1571 | ```js
1572 | function bonAppetit(bill, k, b) {
1573 |   
1574 |   // Write your code here
1575 |   let dont=bill[k]/2;
1576 |   let result;
1577 |   let sum=0;
1578 | 
1579 |   for(let i=0; i<bill.length; i++){
1580 |    sum+=bill[i];  
1581 |   }
1582 | 
1583 |   let share=sum/2; 
1584 |   let anasbill = share-dont;
1585 |   let refund= b-anasbill;
1586 |   result=refund;
1587 | 
1588 |   if(refund===0){
1589 |     result="Bon Appetit";
1590 |   }
1591 |   console.log(result);
1592 | }
1593 | 
1594 | bonAppetit([3, 10, 2, 9], 1, 12); //5
1595 | 
1596 | ```
1597 | 
1598 | ### Challenge #19: Cats and a Mouse (HackerRank) 
1599 | Started at 12:45 PM, Ended at: 01:05 PM, It tooks 20 minutes to solve.
1600 | [Cats and a Mouse](https://www.hackerrank.com/challenges/cats-and-a-mouse/problem)
1601 | 
1602 | ```js
1603 | function catAndMouse(x, y, z) {
1604 |     
1605 |   let output="";
1606 | 
1607 |   let catA = Math.abs(z-x);
1608 |   let catB = Math.abs(z-y);
1609 | 
1610 |   if (catA>catB) {
1611 |     output="Cat B";
1612 |     
1613 |   }else if(catA<catB) {
1614 |     output="Cat A";
1615 |     
1616 |   }else{
1617 |     output="Mouse C";
1618 |   }
1619 |   return output;
1620 | }
1621 | //console.log(catAndMouse(2,5,4));
1622 | ```
1623 | 
1624 | ### Challenge #20: The Hurdle Race (HackerRank) 
1625 | this takes 16 minutes to solve 
1626 | [The Hurdle Race](https://www.hackerrank.com/challenges/the-hurdle-race/problem)
1627 | 
1628 | ```js
1629 | function hurdleRace(k, height) {
1630 |   // Write your code here
1631 |   let dose=0;
1632 |   let max=0;
1633 | 
1634 |   for (let i = 0; i < height.length; i++) {
1635 |     let c=height[i];
1636 |     if (max<c){
1637 |       max=c;
1638 |     }
1639 |   }
1640 |   if(k<max){
1641 |     dose=max-k;
1642 |   }
1643 |   return dose;
1644 | }
1645 | //console.log(hurdleRace(4, [1, 6, 3, 5, 2]));
1646 | console.log(hurdleRace(7,[2, 5, 4, 5, 2]));
1647 | ```
1648 | 
1649 | 
1650 | # [Level 6 - JavaScript Advance Challenges](https://docs.google.com/document/d/1oE1T7hmnpX1-a2TDqgZWCKqY_tRCQ7w_6JwSNZcPvEc/edit?usp=sharing)
1651 | 
1652 | ## Day 1
1653 | Please watch this [introductory video](https://www.loom.com/share/4505897045d24760aa541d42f183ec8b) before getting started
1654 | 
1655 | Please watch the intro video and review the resources if the problem includes them.
1656 | 
1657 | ### [Challenge-1](https://www.hackerrank.com/domains/tutorials/10-days-of-javascript)
1658 | 
1659 | ```js
1660 | function getGrade(score) {
1661 |     let grade;
1662 |     if (25 < score && score <=30){
1663 |       grade="A";
1664 |       
1665 |     }else if(20 < score && score <=25){
1666 |       grade="B";
1667 |       
1668 |     }else if(15 < score && score <=20){
1669 |       grade="C";
1670 |       
1671 |     }else if(10 < score && score <=15){
1672 |       grade="D";
1673 |       
1674 |     }else if(5 < score && score <=10){
1675 |       grade="E";
1676 |       
1677 |     }else if(0 <= score && score <=5){
1678 |       grade="F";
1679 |     }
1680 |     return grade;
1681 | }
1682 | console.log(getGrade(11));
1683 | ```
1684 | 
1685 | ### [Challenge#2, Simple Array Sum](https://www.hackerrank.com/challenges/simple-array-sum/problem)
1686 | ```js
1687 | function simpleArraySum(ar) {
1688 |     // Write your code here
1689 |     let sum=0;
1690 |     for(let n of ar){
1691 |         sum +=n;
1692 |     }
1693 |     return sum;
1694 | }
1695 | ```
1696 | 
1697 | ### Learning Resource / Accumulator Pattern
1698 | * [Accumulator-pattern](https://education.launchcode.org/intro-to-professional-web-dev/chapters/loops/accumulator-pattern.html)
1699 | > accumulator: a register used to contain the results of an arithmetical or logical operation.
1700 | > The accumulator pattern comes up regularly in programming
1701 | 
1702 | ### Reversing a String
1703 | While some programming languages have a string method that will reverse a given string, JavaScript does not. Let's see how we can write our own program that reverses a string using the accumulator pattern.
1704 | ```js
1705 | let str="Hello";
1706 | let reverse="";
1707 | 
1708 | for( let i=0; i<str.length; i++){
1709 |   reverse=str[i]+reverse;
1710 | }
1711 | 
1712 | console.log(reverse); //olleH
1713 | ```
1714 | 
1715 | ### Summing an Array
1716 | Another common use of the accumulator pattern is to compute some value using each of the elements of an array.
1717 | 
1718 | ## Day 2 / Problem #2
1719 | [Sherlock and Array](https://www.hackerrank.com/challenges/sherlock-and-array/problem)
1720 | ```js
1721 | Time Complexity: O(n)
1722 | */
1723 | function balancedSums(arr) {
1724 | 
1725 |     // Write your code here
1726 |     for(let i=0;i<arr.length; i++){
1727 | 
1728 |         let left=arr.slice(0, i);
1729 |         let right=arr.slice(i+1, arr.length);
1730 | 
1731 |         let lsum=sum(left);//0
1732 |         // for(let j=0;j<left.length; j++){
1733 |         //     lsum+=left[j];
1734 |         // }
1735 | 
1736 |         let rsum=sum(right);
1737 |         //for(let j=0;j<right.length; j++){
1738 |             //rsum+=right[j];
1739 |         //}
1740 | 
1741 |         //console.log(i, arr[i], lsum, rsum);
1742 |         if(lsum>rsum){
1743 |             return "NO";
1744 |         }
1745 | 
1746 |         //console.log('>',p,left, arr[i], right);
1747 |         if(lsum===rsum){
1748 |             return "YES";
1749 |         }
1750 |     }
1751 |     return "NO";
1752 | }
1753 | 
1754 | //efficient solution
1755 | //Time Complexity: O(n)
1756 | function balanceSumsA(arr){
1757 | 
1758 |  let sum = arr.reduce( (acc, val) => acc+val);
1759 |  //console.log('startInitial',sum);
1760 | 
1761 |  let leftSum=0;
1762 |  for(let i=0; i < arr.length; i++){
1763 |     
1764 |     sum -= arr[i];
1765 |     console.log(i, arr[i], sum, leftSum);
1766 |     if(sum===leftSum){
1767 |         return "YES";
1768 |     }
1769 |     leftSum += arr[i];
1770 |     //console.log(i,arr[i], sum, leftSum);
1771 |  }
1772 |  return "NO";
1773 | }
1774 | 
1775 | let bigstr="1822 2612 1573 2578 2552 1863 970 959 1296 1379 1801 2613 1089 1572 2466 1482 1813 1538 1504 2217 1706 1273 1464 2200 1224 1599 1792 1809 983 1717 1797 2050 1533 2268 2300 2469 2343 1554 2764 2758 1680 2326 2433 1045 1890 1484 1285 1176 2503 2543 990 2104 1145 2390 1536 2032 1230 2529 1953 2640 2621 2115 1015 1134 1109 2509 954 1632 1465 2243 2418 1235 1953 1729 1575 1453 2593 2342 1093 1761 2203 2501 998 2279 1923 2750 1638 2176 2491 2014 1344 2342 2178 2696 2068 2620 2556 1686 1123 1966 1140 1077 1327 1539 2789 1928 2184 2620 2453 2517 1647 1830 1039 1512 1727 1332 1196 1249 2252 2444 1708 1820 2671 2562 1835 2235 2227 2503 2079 2527 1046 2535 2457 1140 2453 2060 1641 1083 941 939 2465 2055 2796 930 2087 2596 1276 2258 1927 1457 1615 1863 2405 2559 2148 2764 2416 1441 1343 2413 1624 1915 2068 1191 2044 2319 1321 2533 2183 1890 1854 1144 2315 1922 2543 1111 2193 1520 1123 2777 1070 2629 1098 1784 926 1355 2777 1166 1399 1876 1200 1301 2123 1995 2631 1201 1522 1541 1466 2199 2357 2059 2651 2483 2025 2258 1017 2683 1308 2706 1524 923 2518 1716 2399 1993 2379 2623 974 1845 2539 2672 2562 2808 2186 982 1716 1753 2347 1541 1232 2711 1572 2640 1164 1145 1083 2399 1246 2522 2483 2264 2220 1580 1874 1431 2592 2694 2277 1066 2495 1763 1407 1638 1846 2637 1193 1462 2341 1869 2170 2695 2083 2411 1622 2173 2618 1588 2323 2297 2804 1339 1559 1683 2088 1402 1115 2780 2197 2271 1407 2732 2629 1151 1179 2788 1716 1766 2223 2608 1840 1733 1951 2661 1668 1113 2188 1194 1019 2352 1799 2199 2047 1340 2200 2289 1744 2509 1321 1827 1807 1325 2173 2727 2480 988 1057 1081 2131 1443 1359 2577 1190 2505 1598 1707 1293 1120 2179 2493 1861 2744 1035 2369 2522 2504 1203 1422 1452 2047 989 957 1830 1520 2514 1115 1500 2611 2581 2574 1385 1142 1985 2050 1502 2465 1794 2773 2291 2792 2608 1952 2243 922 1210 1678 2218 1559 1667 1872 1866 2175 1826 1728 1547 2241 2626 1679 2370 2025 1875 2279 1432 2450 2744 2273 1087 2041 1079 2479 1274 1023 1976 1962 2250 1578 2381 1520 1211 983 2779 1647 1299 1955 1899 2216 2530 1004 1318 227 1489 1674 1829 1569 1270 936 1117 824 1570 818 667 1807 928 1555 1264 1087 1526 823 1949 1962 1178 1364 1098 709 1223 1633 1832 1608 1910 1045 1833 1201 1602 678 1632 1807 1037 1212 1310 1762 1843 796 1502 1171 887 868 1810 1259 1747 1927 751 881 1809 1027 1567 1779 1057 915 1307 1194 880 1271 1742 1579 1034 1165 1512 1899 1613 1310 1785 1909 686 1102 1756 1951 1177 1216 1917 1639 1311 1785 750 1206 1426 1484 1066 1209 1868 1672 1946 970 1530 1821 1204 1865 1535 1414 1193 1741 756 1882 1052 1219 850 975 1092 1283 1860 714 913 1744 777 1547 1121 1757 858 1415 1046 1806 1878 1822 1226 749 1122 1593 827 1379 1716 1421 1152 1128 825 1539 818 1012 1904 1075 1399 914 1227 1243 1569 1360 1073 687 994 981 1852 1922 1361 1300 783 790 1471 1329 678 835 1341 951 889 1409 1102 1494 1325 1775 1793 1906 935 1804 951 1584 933 1966 1864 1655 1288 1096 1866 1244 1397 1254 1080 1963 957 1912 1167 1061 1264 1803 837 1676 1873 1125 1041 1807 1877 1191 737 1860 1486 1749 1604 995 1334 1104 1195 681 1144 1238 1167 1440 1176 1190 1871 1538 843 1210 815 1185 737 1339 1724 1735 1530 910 844 962 1068 832 1010 1868 1076 1775 1712 1664 1289 1858 1670 1965 1686 1962 983 1778 1445 1227 1593 1910 1918 1114 1043 1605 1417 1346 1554 1074 1901 1736 1360 936 1052 762 1067 1200 707 785 1510 1287 1742 1214 1021 1403 1628 870 987 1519 1820 1609 1057 1803 984 1053 1316 1323 1006 984 1809 1570 954 1596 698 1587 825 1915 1714 1730 1160 1325 1646 1789 1391 1870 1265 1145 953 1762 1635 1061 702 1355 715 1457 1860 1225 1673 913 996 857 1180 847 1102 816 1828 1866 797 1911 1961 1575 880 822 1266 663 1267 1213 1880 807 831 902 1114 706 1274 1580 786 1840 1808 844 949 1951 1929 1429 973 1957 1727 1573 846 1197 897 756 992 1229 1159 1613 1548 1423 1250 1040 704 898 1767 832 1726 865 903 1152 1613 1367 1016 765 763 1468 1136 1326 1407 667 1231 968 1604 1445 1845 1439 1673 770 1846 1345 1173 1068 1823 1534 1746 980 1024 1700 1633 1030 881 1314 1075 1816 1537 1225 710 933 1310 1200 796 940 1450 1898 1859 1881 1318 1175 1590 1093 1409 1582 1757 1963 1093 1272 1304 1718 1206 699 1781 1076 1140 1520 1704 1409 1002 1384 802 1681 1038 1737 855 899 1547 1542 984 1386 1633 1549 875 1539 806 1567 789 1370 1387 1013 697 1780 1065 1667 1542 1509 1450 1178 905 1088 1345 1098 1397 913 931 862 1788 1392 1426 1550 1336 1375 1242 1315 1073 1350 1006 1463 992 1020 871 1561 936 985 1054 899 1887 1394 1286 1288 925 755 1000 1028 813 1409 904 1848 1133 1081 1429 1928 1615 1337 1386 1039 1855 1157 977 1296 976 975 1337 1431 1614 1287 1310 1587 808 684 915 1142 1575 1127 1424 1491 1941 1786 706 1508 880 1007 1475 1799 868 1458 1659 1966 680 1098 1680 1316 1711 1624 1264 1643 946 810 1421 1453 993 866 1533 963 874 1452 820 1325 1577 1250 1929 1560 1061 1498 911 935 837 924 1201 1482 1688 1254 695 1921 937 748 772 1514 727";
1776 | const arr = bigstr.split(' ').map(arrTemp => parseInt(arrTemp, 10));
1777 | console.log(balanceSumsA([5,7,6,4,3,2,3]));
1778 | ```
1779 | 
1780 | Learning Resource
1781 | * [Array reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
1782 |   
1783 | 
1784 | ### Day 2 / Problem #2 [Count Objects](https://www.hackerrank.com/challenges/js10-count-objects/problem)
1785 | 
1786 | ```js
1787 | function getCount(objects) {
1788 | 
1789 |   let count=0;
1790 |   let size=objects.length;  
1791 |   //console.log(size);
1792 |   for (let i = 0; i < size; i++) {
1793 |     //console.log(objects[i].x,objects[i]["x"]);
1794 |     if(objects[i].x===objects[i].y){
1795 |       count++;
1796 |     }
1797 |   }
1798 |   return count;
1799 | }
1800 | ```
1801 | 
1802 | ### Day 2 Problem #4 Missing Numbers
1803 | * [Missing Numbers](https://www.hackerrank.com/challenges/missing-numbers/problem)
1804 | * [Learning Resource-JavaScript Object Entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
1805 | 
1806 | ```js
1807 | function missingNumbers(arr, brr) {
1808 |   // Write your code here
1809 |   let hash={};
1810 | 
1811 |   for (let i = 0; i < arr.length; i++) {
1812 |     let key=arr[i];
1813 |     hash[key]=0;
1814 |   }
1815 |   //console.log(hash);
1816 |   
1817 |   for (let i = 0; i < arr.length; i++) {
1818 |     let key=arr[i];
1819 |     hash[key] += 1;
1820 |   }
1821 |   //console.log(hash);
1822 |   
1823 |     for (let i = 0; i < brr.length; i++) {
1824 |       let key=brr[i];
1825 |       hash[key] -= 1;
1826 |     }
1827 | 
1828 |   //Object.entries(hash)
1829 |   //Object.keys(hash)
1830 |   //console.log(typeof hash, typeof Object.entries(hash), typeof Object.keys(hash));
1831 |   let missing=[];
1832 |   for(let [key,val] of Object.entries(hash)){
1833 |     //console.log(key,val, typeof val);
1834 |     if(val!==0){
1835 |       missing.push(key);
1836 |     }
1837 |   }
1838 |   return missing;
1839 | }
1840 | let arr=[203, 204, 205, 206, 207, 208, 203, 204, 205, 206];
1841 | let brr= [203, 204, 204, 205, 206, 207, 205, 208, 203, 206, 205, 206, 204];
1842 | console.log(missingNumbers(arr, brr));
1843 | ```
1844 | 
1845 | ### Day 2 Unguided challenge
1846 | * [Gemstones](https://www.hackerrank.com/challenges/gem-stones/problem)
1847 | 
1848 | ```js
1849 | function gemstones(arr) {
1850 |   // Write your code here
1851 |  let gemstone=0;
1852 |  let mhash={};
1853 |  //  for (let i = 97; i < 124; i++) {
1854 |  //    var str =String.fromCharCode(i);
1855 |  //    //console.log(str);
1856 |  //    hash[str]=0;
1857 |  //  }
1858 |   //console.log(hash);
1859 |   
1860 |   for (let i = 0; i < arr.length; i++) {
1861 |     let hash={};
1862 |     let item=arr[i];
1863 |     let minerals=item.split('');
1864 |     for(let m of minerals){
1865 |       if(hash[m]===undefined){
1866 |         hash[m] = 1;
1867 |       }else{
1868 |          hash[m] += 1;
1869 |       }
1870 |     }
1871 |     mhash[item]=hash;
1872 |     //console.log(item, hash);
1873 |   }
1874 |   
1875 |   //console.log(mhash);
1876 |   let commons=[];
1877 |   let ncommons=[];
1878 | 
1879 |   let citem=mhash[arr[0]];
1880 |   //console.log(arr[0], mhash[arr[0]]);
1881 | 
1882 |   for(let [okey,oval] of Object.entries(mhash)){
1883 |     
1884 |     //console.log(okey,oval, Object.keys(citem));
1885 |     let akeys=Object.keys(citem);
1886 |     //console.log(akeys,akeys[1],oval);
1887 | 
1888 |     for(let v of Object.keys(citem)){
1889 |       //console.log(typeof v);
1890 |       if (v in oval){
1891 |         //console.log(v,"inside",okey, oval);
1892 |       }else{
1893 |         //console.log(v,"NotInside",okey, oval);
1894 |         ncommons.push(v);
1895 |       }
1896 |     }
1897 |     
1898 |   }
1899 | 
1900 |   //find common
1901 |   for(let v of Object.keys(citem)){
1902 |     //console.log(v, typeof v, ncommons.includes(v));
1903 |     if(ncommons.includes(v)==false){
1904 |       commons.push(v);
1905 |       gemstone++;
1906 |     }
1907 |     
1908 |   }
1909 |   //console.log(commons);
1910 |   return gemstone;
1911 | }
1912 | 
1913 | // let arr=['abc','abc','bc'];
1914 | // console.log(gemstones(arr));
1915 | let arr=['abcdde', 'baccd', 'eeabg'];
1916 | console.log(gemstones(arr));
1917 | ```
1918 | 
1919 | ### Day 3 challenge
1920 | * [sum-of-all-odd-length-subarrays](https://leetcode.com/problems/sum-of-all-odd-length-subarrays)
1921 | 
1922 | ```js
1923 | //Time Complexity: O(n^2)
1924 | function SumofAllOddLength(arr){
1925 | 
1926 |   let sum=0;
1927 |   let size=arr.length;
1928 |   //let sarr=[];
1929 |   let ola=[]; //odd length array
1930 |   for(let i=1; i<=size; i++){
1931 |     if(i%2!=0){
1932 |       ola.push(i);
1933 |     }
1934 |   }
1935 |   //console.log(ola); //1,3,5
1936 | 
1937 |   for(let length of ola){
1938 |     
1939 |     //console.log('>',length);
1940 |     // console.log(arr.slice(0,0+1));
1941 |     // console.log(arr.slice(1,1+1));
1942 |     // console.log(arr.slice(2,2+1));
1943 |     // console.log(arr.slice(3,3+1));
1944 |     // console.log(arr.slice(4,4+1));
1945 |     for (let i = 0; i < size; i++) {
1946 | 
1947 |       if(i+length<=size){
1948 |         //console.log(arr.slice(i,i+length));
1949 |         let suba=arr.slice(i,i+length);
1950 |         //sarr.push(arr.slice(i,i+length));
1951 |         for(let x of suba){
1952 |            sum+=x;
1953 |         }
1954 |       }
1955 |     }
1956 |   }
1957 |   //console.log(sarr);
1958 |   return sum;
1959 | }
1960 | 
1961 | ```
1962 | 
1963 | ### Day 3 
1964 | [Apple and Orange](https://www.hackerrank.com/challenges/apple-and-orange/problem)
1965 | 
1966 | ```js
1967 | function countApplesAndOranges(s, t, a, b, apples, oranges) {
1968 |     // Write your code here
1969 | 
1970 |   //range between s and t
1971 |   let ac=0;
1972 |   let oc=0;
1973 |   
1974 |   let arr=[];
1975 |   let oarr=[];
1976 | 
1977 |   for (let i = 0; i < apples.length; i++) {
1978 |     let apple=apples[i];
1979 |     let fapple=a+apple;
1980 |     //arr.push(fapple);
1981 |     if (fapple>=s && fapple<=t){
1982 |       ac++;
1983 |     }
1984 |   }
1985 | 
1986 |   for (let i = 0; i < oranges.length; i++) {
1987 |     let orange=oranges[i];
1988 |     let forange=b+orange;
1989 |     //arr.push(fapple);
1990 |     if (forange>=s && forange<=t){
1991 |       oc++;
1992 |     }
1993 |   }
1994 | 
1995 |   console.log(ac);
1996 |   console.log(oc);
1997 |   //console.log(arr);
1998 | }
1999 | console.log(countApplesAndOranges(7,11,5,15,[-2,2,1],[5,-6]));
2000 | ```
2001 | 
2002 | ### Day 4
2003 | #### Square Wave problem (Microverse original, Modulus + Flags )
2004 | > Write a function squareWave(arr) that takes in the following array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18], and starts replacing the numbers, one by one, with zeroes, until it reaches a multiple of 5. From that point onwards, start replacing the numbers with 1s, until you reach the next multiple of 5.
2005 |  
2006 | Then, from that point onwards, start replacing with 0s again, then 1s again,and so on until you reach the end of the array.
2007 |  
2008 | `HINT:` You should use the flag pattern to switch between 0s and 1s in the loop. Example:
2009 | 
2010 | ```
2011 | Input:
2012 | [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
2013 |  
2014 | Output:
2015 | [0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1]
2016 | */
2017 | ```
2018 | 
2019 | 
2020 | ```js
2021 | 
2022 | function squareWave(arr){
2023 |    // Answer here
2024 |  let zeros = true;
2025 | 
2026 |   for (let i = 0; i < arr.length; i++) {
2027 | 
2028 |     if(arr[i]%5==0 && zeros==true){
2029 |        zeros=false;
2030 |       
2031 |     }else if(arr[i]%5==0 && zeros==false){
2032 |        zeros=true;
2033 |     }
2034 | 
2035 |     //console.log(arr[i], arr[i]%5==0, "zeros", zeros);
2036 |     if (zeros) {
2037 |       arr[i]=0;
2038 |     }else{
2039 |       arr[i]=1;
2040 |     }
2041 |     
2042 |   }
2043 |   return arr;
2044 | }
2045 | 
2046 | let input = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
2047 | // Test cases. Don't change this code!
2048 | const out1 = JSON.stringify(squareWave(input));
2049 | const out2 = JSON.stringify([0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1]);
2050 |  
2051 | if(out1 == out2){
2052 |  console.log("SUCCESS!");
2053 | } else {
2054 |  console.log("Whoops, try again!");
2055 | }
2056 | ```
2057 | 
2058 | #### Solve "Second Greatest" problem
2059 | [Second Greatest](https://www.hackerrank.com/challenges/js10-arrays/problem)
2060 | 
2061 | ```js
2062 | /**
2063 | *   Return the second largest number in the array.
2064 | *   @param {Number[]} nums - An array of numbers.
2065 | *   @return {Number} The second largest number in the array.
2066 | **/
2067 | 
2068 | //Time Complexity: O(n)
2069 | function getSecondLargest(nums) {
2070 |   
2071 |   // Complete the function
2072 |   let map = [];
2073 |   for (let i = 0; i < nums.length; i++) {
2074 | 
2075 |      let snum=nums[i];
2076 |      if(map.includes(snum)==false){
2077 |        map.push(snum); //unique array
2078 |      }
2079 |   }
2080 |   let sorted=map.sort((a,b)=> a-b);
2081 |   return sorted[sorted.length-2];
2082 | }
2083 | console.log(getSecondLargest([2, 3, 6, 6, 5,])); //5
2084 | 
2085 | ```
2086 | 
2087 | #### Find the Second Smallest number
2088 | Solve "Second Greatest" problem, but instead, find the Second Smallest number: but instead, find the Second Smallest number.
2089 | ```js
2090 | function getSecondSmallest(nums) {
2091 |   
2092 |   // Complete the function
2093 |   let map = [];
2094 |   for (let i = 0; i < nums.length; i++) {
2095 | 
2096 |      let snum=nums[i];
2097 |      if(map.includes(snum)==false){
2098 |        map.push(snum); //unique array
2099 |      }
2100 |   }
2101 |   let sorted=map.sort((a,b)=> a-b);
2102 |   return sorted[1];
2103 | }
2104 | console.log(getSecondSmallest([2, 3, 6, 6, 5])); //3
2105 | ```
2106 | 
2107 | ### Simple Hashes (Microverse original)
2108 | > Write a function frequencies(arr) that takes in the string:
2109 | `"lkazjsdfnvapsifdophoidhjsadlkfjgbplak"` and return a hash table containing all the different characters in it as the keys, and the number of times each character is repeated as the values
2110 |  
2111 | Example:
2112 | ```
2113 | input: "lkazjsdfnvapsifdophoidhjsadlkfjgbplak"
2114 |  
2115 | output:  
2116 | {"l":3,"k":3,"a":4,"z":1,"j":3,"s":3,"d":4,"f":3,"n":1,"v":1,"p":3,"i":2,"o":2,"h":2,”g”:1,”b”:1};
2117 | ```
2118 | 
2119 | ```js
2120 | function frequencies(str){
2121 |   
2122 |  // Answer here
2123 |  let sarr=str.split('');
2124 |  let hmap = {}
2125 | 
2126 |   for (let i = 0; i < sarr.length; i++) {
2127 |     
2128 |     let letter=sarr[i];
2129 |     if(hmap[letter]===undefined){
2130 |       hmap[letter]=1;
2131 |     }else{
2132 |       hmap[letter] +=1;
2133 |     }
2134 |   }
2135 |   //console.log(hmap);
2136 |   return hmap;
2137 | }
2138 | 
2139 | const input = "lkazjsdfnvapsifdophoidhjsadlkfjgbplak";
2140 | //console.log(frequencies(input));
2141 | ```
2142 | 
2143 | ## Daye 5
2144 | > Day 5 - May the Coding Force be with you !
2145 | 
2146 | ### Hello Fast-trackers!
2147 | You’ve made it to the FINAL DAY! We are so incredibly proud of you. Now you should start learning HTML, CSS, Git and GitHub! You can learn these technologies from Level 7 to Level 12.
2148 | 
2149 | You are also ready for the [Admissions Challenges](https://apply.microverse.org) but take into consideration that you will need to complete the rest of the levels before moving on with the trials.
2150 | 
2151 | Soon, each one of you will be putting your newly learned skills to work, trying our Admissions Coding Challenges. Hopefully, you will be one step closer to joining Microverse!
2152 | 
2153 | We'll be hosting a webinar where we'll be answering questions about the Admissions Process, and the Microverse Program in general. Make sure to register and mark it in your calendar using this link: [Ask Me Anything](https://microverse.zoom.us/webinar/register/4716504473343/WN_vDUMzCw3QHua9y4nhQtK3Q).
2154 | 
2155 | On behalf of the entire TEAM here at Microverse, we wish to thank you Micronauts, for the dedication and effort contributed this week. All the BEST in your Coding Challenge!
2156 | 
2157 | Let's have an incredible and successful day!
2158 | 
2159 | ### Coding challenge submit
2160 | 
2161 | ### Applicant Check-In
2162 | Please confirm that you are available to spend 12 hours collaborating with 3 different partners as part of the Microverse Trials. *
2163 | Over the next 1-2 business days, you will be paired with 3 other applicants 👩🏻‍💻👨🏾‍💻👨🏼‍💻, and will meet with each of them for 4 hours to build 3 different programming projects. 
2164 | 
2165 | 
2166 | [Choose your timezone](https://www.timeanddate.com/worldclock/converter.html?iso=20220818T161500&p1=3903&p2=73)
2167 | [Internet speed test](http://microverse.speedtestcustom.com)
2168 | 
2169 | [Internet speed test result](http://microverse.speedtestcustom.com/result/4e222130-1eef-11ed-a682-074cee258296)
2170 | * Download: 9MB
2171 | * Upload: 4.7 MB
2172 | * Jitter: 3ms
2173 | * Ping: 2ms
2174 | * Packet Lost: 0%
2175 | 
2176 | In order to join our full-time program, the following Internet connectivity requirements [must be met](http://bit.ly/Microverse-Internet-reqs):
2177 | 
2178 | - Download speed must be ABOVE 3 Mbps
2179 | 
2180 | - Upload speed must be 1 Mbps and ABOVE
2181 | 
2182 | - Jitter must be BELOW 30 ms
2183 | 
2184 | - Ping/Latency must be BELOW 150 ms
2185 | 
2186 | - Packet loss must be BELOW, or equal to, 1%
2187 | 
2188 | > `ping -n 100 8.8.8.8`
2189 | 
2190 | 
2191 | ### Record a 1-2 minute video introducing yourself and telling us why you want to join Microverse.
2192 | Remember to:
2193 | - Use your computer 💻, not your phone
2194 | - Enable and test your webcam and microphone🎙
2195 | - Introduce yourself (name and location)
2196 | - Explain why you want to join Microverse (please don't read from a script)
2197 | 
2198 | > Any quesion in your mind? [Ask me anything](https://microverse.zoom.us/webinar/register/4716504473343/WN_vDUMzCw3QHua9y4nhQtK3Q)
2199 | 
2200 | ## Feedback after 6 hours
2201 | 
2202 | * [What will I learn at Microverse?](https://support.microverse.org/en/articles/1908266-what-will-i-learn-at-microverse)
2203 | * [Microverse Full-Stack Web Development Syllabus](https://drive.google.com/file/d/1dCDwTatfExRFBhGzzpDYwx1MTYXRAWQj/view)
2204 | 
2205 | Course coordinator - Ruben Pire rubenpire7@gmail.com
2206 | 
2207 | 
2208 | ## Level 7
2209 | Official and Unofficial resource to learn
2210 | 
2211 | [ultimate-guide-to-preparing-for-the-coding-interview](https://www.microverse.org/blog/ultimate-guide-to-preparing-for-the-coding-interview)
2212 | 
2213 | [A hands-on introduction to all of the essential tools you'll need to build real, working websites.](https://www.theodinproject.com/paths/foundations/courses/foundations#the-front-end)
2214 | 
2215 | [grokking-the-coding-interview](https://designgurus.org/course/grokking-the-coding-interview)
2216 | 
2217 | * Computer Science fundamentals
2218 | Spaced repetition, also known as distributed practice, is an extremely effective approach for internalizing knowledge into long-term memory.
2219 | 
2220 | * [Learn the patterns and solve any problem](https://algo.monster/?sscid=d1k6_2fmo6&)
2221 | * Binary search
2222 | * Breadth-first search
2223 | * Depth-first search
2224 | * Two pointers
2225 | * Priority Queue
2226 | 
2227 | 
2228 | * [Web Development 101 course](https://www.theodinproject.com/paths/foundations/courses/foundations#the-front-end)
2229 | * [ultimate-guide-to-preparing-for-the-coding-interview](https://www.microverse.org/blog/ultimate-guide-to-preparing-for-the-coding-interview)
2230 | * [English Test](https://www.efset.org)
2231 | * [software-engineering-interview-guide](https://www.techinterviewhandbook.org/software-engineering-interview-guide)
2232 | * [Front-end web developer](https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer)
2233 | * [CSS building blocks](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
2234 | * [Any language docs](https://devdocs.io)
2235 | 
2236 | #### cascade, specificity, and inheritance
2237 | These three concepts (cascade, specificity, and inheritance) together control which CSS applies to what element
2238 | 
2239 | * an element selector has low specificity and can be overwritten by a class.
2240 | * a class selector has more weight than an element selector
2241 | * identifier has more weight than class selector
2242 | 
2243 | #### Inline styles
2244 | Inline styles take precedence over all normal styles, no matter the specificity,  their specificity can be construed as 1-0-0-0
2245 | 
2246 | #### !important
2247 | There is a special piece of CSS that you can use to overrule all of the above calculations, even inline styles - the !important flag. However, you should be very careful while using it.
2248 | 
2249 | One situation in which you may have to use the !important flag is when you are working on a CMS where you can't edit the core CSS modules, and you really want to override an inline style or an important declaration that can't be overridden in any other way. But really, don't use it if you can avoid it.
2250 | 
2251 | #### The effect of CSS location
2252 | Finally, it is important to note that the precedence of a CSS declaration depends on what stylesheet and cascade layer it is specified in.
2253 | 
2254 | you can make non-layered styles override styles declared in layers or you can make styles declared in later layers override styles from earlier declared layers. 
2255 | 
2256 | > non-layered/un-layered styles have the highest priority
2257 | 
2258 | 
2259 | * [Microverse Trials: Collaborative Project](https://microverse.pathwright.com/library/microverse-trials-collaborative-project-32595/68742/path)
2260 | 
2261 | ### Microverse Success Story
2262 | [Microverse Student Landed a Remote Job in Silicon Valley](https://www.microverse.org/blog/finding-focus-how-microverse-alumni-musa-jabbaaru-ntege-landed-a-job-in-silicon-valley)
2263 | 
2264 | # Level 7
2265 | [Just an introduction to Web development](https://docs.google.com/presentation/d/1MoZbBtLZbves69fBNsuxl-rHr5PwhpqQlmRtciDm2ro/edit?usp=sharing)
2266 | 
2267 | # Level 8
2268 | * Learn Basic HTML and HTML5: Say Hello to HTML Elements | freeCodeCamp.org
2269 | * Learn Basic HTML and HTML5: Headline with the h2 Element | freeCodeCamp.org
2270 | * Learn Basic HTML and HTML5: Inform with the Paragraph Element | freeCodeCamp.org
2271 | * Learn Basic HTML and HTML5: Add Images to Your Website | freeCodeCamp.org
2272 | * Learn Basic HTML and HTML5: Link to External Pages with Anchor Elements | freeCodeCamp.org
2273 | * Learn Basic HTML and HTML5: Nest an Anchor Element within a Paragraph | freeCodeCamp.org
2274 | * Learn Basic HTML and HTML5: Make Dead Links Using the Hash Symbol | freeCodeCamp.org
2275 | * Learn Basic HTML and HTML5: Turn an Image into a Link | freeCodeCamp.org
2276 | * Learn Basic HTML and HTML5: Create a Bulleted Unordered List | freeCodeCamp.org
2277 | * Learn Basic HTML and HTML5: Create an Ordered List | freeCodeCamp.org
2278 | * Learn Basic HTML and HTML5: Create a Text Field | freeCodeCamp.org
2279 | * Learn Basic HTML and HTML5: Create a Form Element | freeCodeCamp.org
2280 | * Learn Basic HTML and HTML5: Add a Submit Button to a Form | freeCodeCamp.org
2281 | * [Learn Basic HTML and HTML5: Nest Many Elements within a Single div Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element) | freeCodeCamp.org
2282 | * [Learn Basic HTML and HTML5: Define the Head and Body of an HTML Document](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document) | freeCodeCamp.org
2283 | 
2284 | 
2285 | # Level 9
2286 | CSS 1
2287 | 
2288 | * Learn Basic CSS: Change the Color of Text | freeCodeCamp.org
2289 | * Learn Basic CSS: Use CSS Selectors to Style Elements | freeCodeCamp.org
2290 | * Learn Basic CSS: Use a CSS Class to Style an Element | freeCodeCamp.org
2291 | * Learn Basic CSS: Style Multiple Elements with a CSS Class | freeCodeCamp.org
2292 | * Learn Basic CSS: Change the Font Size of an Element | freeCodeCamp.org
2293 | * Learn Basic CSS: Set the Font Family of an Element | freeCodeCamp.org
2294 | * Learn Basic CSS: [Import a Google Font](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/import-a-google-font) | freeCodeCamp.org
2295 | * Learn Basic CSS: [Specify How Fonts Should Degrade](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/specify-how-fonts-should-degrade) | freeCodeCamp.org
2296 | * Learn Basic CSS: [Size Your Images](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/size-your-images) | freeCodeCamp.org
2297 | * Learn Basic CSS: [Add Borders Around Your Elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-borders-around-your-elements) | freeCodeCamp.org
2298 | 
2299 | 
2300 | # Level 10
2301 | 
2302 | * Learn Basic CSS: Give a Background Color to a div Element | freeCodeCamp.org
2303 | * [Create Texture by Adding a Subtle Pattern as a Background Image](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image) | freeCodeCamp.org
2304 | * Learn Basic CSS: Set the id of an Element | freeCodeCamp.org
2305 | * Learn Basic CSS: Use an id Attribute to Style an Element | freeCodeCamp.org
2306 | * Learn Basic CSS: [Adjust the Padding of an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/adjust-the-padding-of-an-element) | freeCodeCamp.org
2307 | * Learn Basic CSS: Adjust the Margin of an Element | freeCodeCamp.org
2308 | * Learn Basic CSS: [Use Clockwise Notation to Specify the Padding of an Element](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element) | freeCodeCamp.org
2309 | * Learn Basic CSS: [Understand Absolute versus Relative Units](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/understand-absolute-versus-relative-units) | freeCodeCamp.org
2310 | * Learn Basic CSS: Style the HTML Body Element | freeCodeCamp.org
2311 | * Learn Basic CSS: Use Hex Code for Specific Colors | freeCodeCamp.org
2312 | * Change an Element's Relative Position | freeCodeCamp.org
2313 | * Move a Relatively Positioned Element with CSS Offsets | freeCodeCamp.org
2314 | * Lock an Element to its Parent with Absolute Positioning | freeCodeCamp.org
2315 | * [Lock an Element to the Browser Window with Fixed Positioning](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning) | freeCodeCamp.org
2316 | * [Push Elements Left or Right with the float Property](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property) | freeCodeCamp.org
2317 | * [Change the Position of Overlapping Elements with the z-index Property](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property) | freeCodeCamp.org
2318 | 
2319 | 
2320 | # Level 11 / Git
2321 | 
2322 | Complete this exercise [click on the link](https://github.com/microverseinc/curriculum-levelup/blob/main/git-github/git_basics_exercise.md)
2323 | 
2324 | > NOTE: You will need a partner to complete the exercise.
2325 | 
2326 | 
2327 | 
2328 | # Level 12
2329 | 
2330 | 
2331 | ### What JavaScript Can't Do
2332 | JavaScript is a client-side language; that is, it is designed to do its work on your machine, not on the server. Because of this, JavaScript has some limitations built-in, mostly for security reasons:
2333 | 
2334 | * JavaScript does not allow the reading or writing of files on client machines. That's a good thing, because you certainly don't want a Web page to be able to read files off of your hard disk, or be able to write viruses onto your disk, or be able to manipulate the files on your computer. The only exception is that JavaScript can write to the browser's cookie file, and even then there are limitations (for more information about cookies, see Chapter 10).
2335 | 
2336 | * JavaScript does not allow the writing of files on server machines. There are a number of ways in which this would be handy (such as storing page hit counts or filled-out form data), but JavaScript isn't allowed to do that. Instead, you'll need to have a program on your server to handle and store this data. This can be, for example, a CGI written in a language such as Perl or PHP, or a Java program.
2337 | 
2338 | * JavaScript cannot close a window that it hasn't opened. This is to avoid a situation where a site takes over your browser, closing windows from any other sites.
2339 | 
2340 | * JavaScript cannot read information from an opened Web page that came from another server. In other words, a Web page can't read any information from other open windows and find out what else a surfer visiting the site is up to.
2341 | 
2342 | ## Project
2343 | Remember - the point here is to learn how to work with GitHub Classroom assignments.
2344 | 
2345 | ### How to use Github classroom
2346 | [How to use GitHub Classroom?](https://www.youtube.com/watch?v=IctIsXa-1eI)
2347 | 
2348 | In order to accept the “Play with GH Classroom” assignment - [click this link](https://github.com/login/oauth/authorize?client_id=Iv1.a84bfcae38835499&redirect_uri=https%3A%2F%2Fclassroom.github.com%2Fauth%2Fgithub%2Fcallback&response_type=code&state=e33d03abb55232ef86bd9de51ec8a8c357be5702ea14ea64)
2349 | 
2350 | ## Building your website
2351 | 
2352 | ### Troubleshooting GitHub Classroom assignments
2353 | If you cannot see any workflows on the Actions page, learn [how to fix it](https://github.com/microverse-students/autograding-troubles-js/blob/main/README.md)
2354 | 
2355 | 
2356 | 
2357 | ## Submit Your Project & Provide Feedback
2358 | You are one step closer to joining Microverse! 🙌
2359 | 
2360 | Use this form to submit each of the projects you complete with your partners. Each project must have been completed synchronously using pair programming over video conferencing.
2361 | 
2362 | You will also answer some questions about your experience with your coding partner. We value your opinion greatly, so please be truthful in your answers.   If you both give each other good reviews and get accepted, you may become coding partners for the full-time program.
2363 | 
2364 | Your project will not be evaluated until both you and your partner submit this form, so please make sure you both complete this in a timely manner.
2365 | 
2366 | *If your partner did not show up or respond to your emails, please submit the re-pairing request form listed in your partner introductory email. DO NOT submit this form.*


--------------------------------------------------------------------------------
/practice/code.js:
--------------------------------------------------------------------------------
  1 | 
  2 | // console.log("Hello and welcome to the JavaScript world of practice!");
  3 | // let grade, finalGrade, remainder, difference;
  4 | // grade=73;
  5 | // remainder=grade%5;
  6 | // difference=5-remainder;
  7 | // finalGrade=grade;
  8 | 
  9 | // if (difference<3 && grade>39){
 10 | //     finalGrade=grade+difference;
 11 | // }
 12 | // console.log(`${remainder}-${difference}-${finalGrade}`);
 13 | 
 14 | // let grades = [10, 73, 50, 67];
 15 | // for (const grd of grades) {
 16 | //     console.log(grd);
 17 | // }
 18 | 
 19 | // grades.forEach(element => {
 20 | //     console.log(element);
 21 | // });
 22 | 
 23 | function possibleChanges(usernames) {
 24 |     var ans = [];
 25 |     for (var i = 0; i < usernames.length; i++) {
 26 |         for (var j = 0; j < usernames[i].length - 1; j++) {
 27 | 
 28 |             console.log(`${usernames[i][j]}-${usernames[i][j+1]}`);
 29 |             if (usernames[i][j] > usernames[i][j + 1]) {
 30 |                 ans.push("YES");
 31 |                 break;
 32 |             }
 33 |         }
 34 |         if (ans.length == i) {
 35 |             ans.push("NO");
 36 |         }
 37 |     }
 38 |     return ans;
 39 | }
 40 | 
 41 | 
 42 | // console.log(typeof undefined);//“undefined”
 43 | // console.log(typeof null);
 44 | 
 45 | // console.log(undefined + 1); // NaN
 46 | // console.log(null + 1); // 1
 47 | 
 48 | // console.log(!!undefined); //false
 49 | // console.log(!!null); //false
 50 | 
 51 | // let greeting = "Hello my name is";
 52 | // let myname = "Mostain";
 53 | // let lastname = "Billah";
 54 | // let str = "As I have"
 55 | // let apples = 10;
 56 | // apples *= 5;
 57 | // let end= "apples";
 58 | // console.log(greeting, myname,lastname, str,apples, end);
 59 | 
 60 | function gradingStudents(grades) {
 61 |     // Write your code here
 62 |     let result=[];
 63 |     for (let x of grades){ //33
 64 | 
 65 |         let grade=x;
 66 |         let remainder=x%5; //3
 67 |         let diff=5-remainder; //5-3=2
 68 |     
 69 |         if (diff<3 && grade>=38){
 70 |             grade=x+diff;//38+2=40
 71 |         }
 72 |         result.push(grade);
 73 |     }
 74 |     return result;
 75 | }
 76 | 
 77 | // let res=gradingStudents([73,67,38,33]);
 78 | // console.log(res);
 79 | 
 80 | 
 81 | function sockMerchant(n, ar) {
 82 |     // Write your code here
 83 |     var hashmap = new Map();
 84 |     let result=0;
 85 | 
 86 |         for(let i=0; i<n; i++){
 87 | 
 88 |             let cval=ar[i];
 89 |             //console.log(hashmap,hashmap.keys());
 90 |             if (hashmap.has(cval)){
 91 |                 let ev=hashmap.get(cval);
 92 |                 //console.log("yesss",ev);
 93 |                 hashmap.set(cval,ev=ev+1);
 94 |                 //console.log(cval,"found cval",ev);
 95 |             }else{
 96 |                hashmap.set(cval,1);
 97 |                //console.log(cval,"not found so ","1");
 98 |             }
 99 |         }
100 |         //console.log(hashmap);
101 |         //console.log(typeof hashmap.keys());
102 |         for (let key of hashmap.keys()){
103 |             let val=hashmap.get(key);
104 |             if (val>1){
105 |                 result+=Math.floor(val/2);
106 |             }
107 |             //console.log(hashmap.get(key));
108 |         }
109 |      return result;
110 | }
111 | 
112 | //var hashmap = new Map();
113 | // console.log(hashmap);
114 | // hashmap.set(10,100);
115 | // console.log(hashmap.get(10));
116 | // console.log(hashmap.has(10));
117 | // console.log(hashmap);
118 | //[1,2,1,2,1,3,2]
119 | //[10, 20, 20, 10, 10, 30, 50, 10, 20]
120 | //console.log(sockMerchant(7, [1,2,1,2,1,3,2]));
121 | 
122 | //let pv={'U':1,'D':-1};
123 | //console.log(pv['D']);
124 | 
125 | function countingValleys2(steps, path) {
126 |     //let steps=8;
127 |     //let path="UDDDUDUU";
128 |     let pv={'U':1,'D':-1};
129 |     let count=0;
130 |     let vcount=0;
131 |         
132 |     for(let i=0; i<steps; i++){
133 |         let step=path[i];
134 |         let sv=pv[step];
135 |         //console.log(step,sv);
136 |         count=count+sv;
137 |         //console.log(count);
138 |         // if(count>0){
139 |         //     vcount++;
140 |         // }
141 |         if(count==0){
142 |             vcount++;
143 |         }
144 |     }
145 |   return vcount-1;
146 | }
147 | 
148 | function countingValleys(steps, path) {
149 | 
150 |     //https://www.youtube.com/watch?v=MMmFELo0QjM
151 |     //let steps=8;
152 |     //let path="UDDDUDUU";
153 |     let vcount=0;
154 |     let alt=0;
155 |     for(let i=0; i<steps; i++){
156 |         let step=path[i];
157 |         if (step=='U'){
158 |             alt++;
159 |             if (alt==0){
160 |                 vcount++;
161 |             }
162 |         }else{
163 |             alt--;
164 |         }
165 |     }
166 |   return vcount;
167 | }
168 | 
169 | //console.log(countingValleys(12, "DDUUDDUDUUUD"));
170 | 
171 | 
172 | function findItem(arr){
173 | 
174 |     if(arr.length<3){
175 |         return 0;
176 |     }
177 | 
178 |     for(let i=0;i<arr.length; i++){
179 | 
180 |         let left=arr.slice(0,i);
181 |         let right=arr.slice(i+1,arr.length);
182 | 
183 |         let lsum=sum(left);
184 |         let rsum=sum(right);
185 | 
186 |         if(lsum>rsum){
187 |             return "NO";
188 |         }
189 |         
190 |         if(lsum===rsum){
191 |             return "YES";
192 |         }
193 |     }
194 |     return "NO";
195 | }
196 | 
197 | function sum(nums){
198 | 
199 |     let sum=0;
200 |     for(let i=0;i<nums.length; i++){
201 |         sum+=nums[i];
202 |     }
203 |     return sum;
204 | }
205 | 
206 | /*
207 | Time Complexity: O(n)
208 | */
209 | function balancedSums(arr) {
210 | 
211 |     // Write your code here
212 |     for(let i=0;i<arr.length; i++){
213 | 
214 |         let left=arr.slice(0, i);
215 |         let right=arr.slice(i+1, arr.length);
216 | 
217 |         let lsum=sum(left);//0
218 |         // for(let j=0;j<left.length; j++){
219 |         //     lsum+=left[j];
220 |         // }
221 | 
222 |         let rsum=sum(right);
223 |         //for(let j=0;j<right.length; j++){
224 |             //rsum+=right[j];
225 |         //}
226 | 
227 |         //console.log(i, arr[i], lsum, rsum);
228 |         if(lsum>rsum){
229 |             return "NO";
230 |         }
231 | 
232 |         //console.log('>',p,left, arr[i], right);
233 |         if(lsum===rsum){
234 |             return "YES";
235 |         }
236 |     }
237 |     return "NO";
238 | }
239 | 
240 | //Binary version of it
241 | /*
242 | Time Complexity: O(n)
243 | */
244 | function balancedSumsBin(arr) {
245 | 
246 |     // Write your code here
247 |     let p=arr.length/2;
248 |     let pc=0;
249 | 
250 |     while(pc<arr.length){
251 | 
252 |         let left=arr.slice(0, p);
253 |         let right=arr.slice(p+1, arr.length);
254 | 
255 |         let lsum=sum(left);//0
256 |         let rsum=sum(right);
257 | 
258 |         //console.log(i, arr[i], lsum, rsum);
259 |         if(lsum>rsum){
260 |             //return "NO";
261 |             p--;
262 |         }
263 |         if(lsum<rsum){
264 |             p++;
265 |         }
266 | 
267 |         if(lsum===rsum){
268 |             return "YES";
269 |         }
270 |         pc++;
271 |     }
272 | 
273 |     return "NO";
274 | }
275 | 
276 | //console.log(findItem([4,5,8,9]));//8
277 | //console.log(findItem([5,7,6,4,3,2,3]));//6
278 | //console.log(findItem([9,7,2,5,1,1]));//7
279 | //console.log(findItem([0, 0, 2, 0]));//0
280 | 
281 | //console.log(balancedSums([1, 1, 4, 1, 1]));
282 | //console.log(balancedSums([2, 0, 0, 0]));
283 | //console.log(balancedSums([0, 0, 2, 0]));
284 | //console.log(balancedSums([575, 426, 445, 772, 81, 447, 629, 497, 202, 775, 325]));
285 | //console.log(balancedSums([5,7,6,4,3,2,3]));//6
286 | 
287 | 
288 | 
289 | let bigstr="1822 2612 1573 2578 2552 1863 970 959 1296 1379 1801 2613 1089 1572 2466 1482 1813 1538 1504 2217 1706 1273 1464 2200 1224 1599 1792 1809 983 1717 1797 2050 1533 2268 2300 2469 2343 1554 2764 2758 1680 2326 2433 1045 1890 1484 1285 1176 2503 2543 990 2104 1145 2390 1536 2032 1230 2529 1953 2640 2621 2115 1015 1134 1109 2509 954 1632 1465 2243 2418 1235 1953 1729 1575 1453 2593 2342 1093 1761 2203 2501 998 2279 1923 2750 1638 2176 2491 2014 1344 2342 2178 2696 2068 2620 2556 1686 1123 1966 1140 1077 1327 1539 2789 1928 2184 2620 2453 2517 1647 1830 1039 1512 1727 1332 1196 1249 2252 2444 1708 1820 2671 2562 1835 2235 2227 2503 2079 2527 1046 2535 2457 1140 2453 2060 1641 1083 941 939 2465 2055 2796 930 2087 2596 1276 2258 1927 1457 1615 1863 2405 2559 2148 2764 2416 1441 1343 2413 1624 1915 2068 1191 2044 2319 1321 2533 2183 1890 1854 1144 2315 1922 2543 1111 2193 1520 1123 2777 1070 2629 1098 1784 926 1355 2777 1166 1399 1876 1200 1301 2123 1995 2631 1201 1522 1541 1466 2199 2357 2059 2651 2483 2025 2258 1017 2683 1308 2706 1524 923 2518 1716 2399 1993 2379 2623 974 1845 2539 2672 2562 2808 2186 982 1716 1753 2347 1541 1232 2711 1572 2640 1164 1145 1083 2399 1246 2522 2483 2264 2220 1580 1874 1431 2592 2694 2277 1066 2495 1763 1407 1638 1846 2637 1193 1462 2341 1869 2170 2695 2083 2411 1622 2173 2618 1588 2323 2297 2804 1339 1559 1683 2088 1402 1115 2780 2197 2271 1407 2732 2629 1151 1179 2788 1716 1766 2223 2608 1840 1733 1951 2661 1668 1113 2188 1194 1019 2352 1799 2199 2047 1340 2200 2289 1744 2509 1321 1827 1807 1325 2173 2727 2480 988 1057 1081 2131 1443 1359 2577 1190 2505 1598 1707 1293 1120 2179 2493 1861 2744 1035 2369 2522 2504 1203 1422 1452 2047 989 957 1830 1520 2514 1115 1500 2611 2581 2574 1385 1142 1985 2050 1502 2465 1794 2773 2291 2792 2608 1952 2243 922 1210 1678 2218 1559 1667 1872 1866 2175 1826 1728 1547 2241 2626 1679 2370 2025 1875 2279 1432 2450 2744 2273 1087 2041 1079 2479 1274 1023 1976 1962 2250 1578 2381 1520 1211 983 2779 1647 1299 1955 1899 2216 2530 1004 1318 227 1489 1674 1829 1569 1270 936 1117 824 1570 818 667 1807 928 1555 1264 1087 1526 823 1949 1962 1178 1364 1098 709 1223 1633 1832 1608 1910 1045 1833 1201 1602 678 1632 1807 1037 1212 1310 1762 1843 796 1502 1171 887 868 1810 1259 1747 1927 751 881 1809 1027 1567 1779 1057 915 1307 1194 880 1271 1742 1579 1034 1165 1512 1899 1613 1310 1785 1909 686 1102 1756 1951 1177 1216 1917 1639 1311 1785 750 1206 1426 1484 1066 1209 1868 1672 1946 970 1530 1821 1204 1865 1535 1414 1193 1741 756 1882 1052 1219 850 975 1092 1283 1860 714 913 1744 777 1547 1121 1757 858 1415 1046 1806 1878 1822 1226 749 1122 1593 827 1379 1716 1421 1152 1128 825 1539 818 1012 1904 1075 1399 914 1227 1243 1569 1360 1073 687 994 981 1852 1922 1361 1300 783 790 1471 1329 678 835 1341 951 889 1409 1102 1494 1325 1775 1793 1906 935 1804 951 1584 933 1966 1864 1655 1288 1096 1866 1244 1397 1254 1080 1963 957 1912 1167 1061 1264 1803 837 1676 1873 1125 1041 1807 1877 1191 737 1860 1486 1749 1604 995 1334 1104 1195 681 1144 1238 1167 1440 1176 1190 1871 1538 843 1210 815 1185 737 1339 1724 1735 1530 910 844 962 1068 832 1010 1868 1076 1775 1712 1664 1289 1858 1670 1965 1686 1962 983 1778 1445 1227 1593 1910 1918 1114 1043 1605 1417 1346 1554 1074 1901 1736 1360 936 1052 762 1067 1200 707 785 1510 1287 1742 1214 1021 1403 1628 870 987 1519 1820 1609 1057 1803 984 1053 1316 1323 1006 984 1809 1570 954 1596 698 1587 825 1915 1714 1730 1160 1325 1646 1789 1391 1870 1265 1145 953 1762 1635 1061 702 1355 715 1457 1860 1225 1673 913 996 857 1180 847 1102 816 1828 1866 797 1911 1961 1575 880 822 1266 663 1267 1213 1880 807 831 902 1114 706 1274 1580 786 1840 1808 844 949 1951 1929 1429 973 1957 1727 1573 846 1197 897 756 992 1229 1159 1613 1548 1423 1250 1040 704 898 1767 832 1726 865 903 1152 1613 1367 1016 765 763 1468 1136 1326 1407 667 1231 968 1604 1445 1845 1439 1673 770 1846 1345 1173 1068 1823 1534 1746 980 1024 1700 1633 1030 881 1314 1075 1816 1537 1225 710 933 1310 1200 796 940 1450 1898 1859 1881 1318 1175 1590 1093 1409 1582 1757 1963 1093 1272 1304 1718 1206 699 1781 1076 1140 1520 1704 1409 1002 1384 802 1681 1038 1737 855 899 1547 1542 984 1386 1633 1549 875 1539 806 1567 789 1370 1387 1013 697 1780 1065 1667 1542 1509 1450 1178 905 1088 1345 1098 1397 913 931 862 1788 1392 1426 1550 1336 1375 1242 1315 1073 1350 1006 1463 992 1020 871 1561 936 985 1054 899 1887 1394 1286 1288 925 755 1000 1028 813 1409 904 1848 1133 1081 1429 1928 1615 1337 1386 1039 1855 1157 977 1296 976 975 1337 1431 1614 1287 1310 1587 808 684 915 1142 1575 1127 1424 1491 1941 1786 706 1508 880 1007 1475 1799 868 1458 1659 1966 680 1098 1680 1316 1711 1624 1264 1643 946 810 1421 1453 993 866 1533 963 874 1452 820 1325 1577 1250 1929 1560 1061 1498 911 935 837 924 1201 1482 1688 1254 695 1921 937 748 772 1514 727";
290 | //console.log(bigstr.split(' ').length);
291 | //let starr=bigstr.split(' ');
292 | 
293 | // for(let i=0;i<starr.length;i++){
294 | 
295 | //     let num=parseInt(starr[i], 10);
296 | //     console.log(i,starr[i], typeof num);
297 | // }
298 | 
299 | const arr = bigstr.split(' ').map(arrTemp => parseInt(arrTemp, 10));
300 | console.log(balanceSumsA([5,7,6,4,3,2,3]));
301 | 
302 | 
303 | /*
304 | Time Complexity: O(n)
305 | */
306 | function balanceSumsA(arr){
307 | 
308 |  let sum = arr.reduce( (acc, val) => acc+val);
309 |  console.log('startInitial',sum);
310 | 
311 |  let leftSum=0;
312 |  for(let i=0; i < arr.length; i++){
313 |     
314 |     sum -= arr[i];
315 |     console.log(i, arr[i], sum, leftSum);
316 |     if(sum===leftSum){
317 |         return "YES";
318 |     }
319 |     leftSum += arr[i];
320 |     //console.log(i,arr[i], sum, leftSum);
321 |  }
322 |  return "NO";
323 | 
324 | }
325 | 


--------------------------------------------------------------------------------
/practice/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>JS Practice</title>
 8 | </head>
 9 | <body>
10 |     <script src="code.js"></script>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/screens/progress_report.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mateors/javascript/9bc7ea0c9455e8af5930403168938e4adac9d6bc/screens/progress_report.png


--------------------------------------------------------------------------------
/speechtotext.md:
--------------------------------------------------------------------------------
1 | # Speech Recognition using Javascript
2 | 
3 | * [Web_Speech_API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API)
4 | * [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
5 | * [Building-a-speech-to-text-app](https://dev.to/princejoel/building-a-speech-to-text-app-with-javascript-4a4d)
6 | * [Speech Recognition Using Vanilla JavaScript](https://www.youtube.com/watch?v=-k-PgvbktX4)
7 | * [Speech-recognition-example](https://www.studytonight.com/post/javascript-speech-recognition-example-speech-to-text)
8 | 


--------------------------------------------------------------------------------
/web.md:
--------------------------------------------------------------------------------
 1 | # Web Development
 2 | Best Resource for PWA,CSS,Responsive design & html forms.
 3 | Pick any one from the following and learn till the end. If you follow sequencial order will be the best.
 4 | 
 5 | ## Responsive Design:
 6 | * https://web.dev/learn/design
 7 | 
 8 | ## PWA - Progressive Web App:
 9 | * https://web.dev/learn/pwa
10 | 
11 | ## Learn HTML Forms:
12 | * https://web.dev/learn/forms
13 | 
14 | ## Learn CSS:
15 | * https://web.dev/learn/css
16 | 
17 | ## Web Components
18 | Components are the building blocks of modern web applications.
19 | 
20 | * [Fundamentals](https://developers.google.com/web/fundamentals/web-components)
21 | * [Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements)
22 | * [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom)
23 | 


--------------------------------------------------------------------------------