Posts

Showing posts from June, 2018

React-Class Component Rendering To The Dom

Image

React-Compose React Components

Image

React-Render Nested Components

Image

JS-React

Image

JS-Sass Loops

@for @for is used in two ways: "start through end" or "start to end". The main difference is that "start to end" excludes the end number, and "start through end" includes the end number. "Start  through  end" example: < style type = 'text/sass' > @for $i from 1 through 5 { .text-#{$i} { font-size: 10 * $i; } } </ style > < p class = "text-1" > Hello </ p > < p class = "text-2" > Hello </ p > < p class = "text-3" > Hello </ p > < p class = "text-4" > Hello </ p > < p class = "text-5" > Hello </ p > f-s will be 10px, 20px, 30px, 40px 50px respectively. @each On each iteration, the variable gets assigned to the current value from the list or map. < style type = 'text/sass' > @each $color in blue, black, red { .#{$color}-bg {backg...

JS-Sass-@if AND @else

These are my Sass trials at FreeCodeCamp @ If, @ else statement is the same as the logic in other programming languages. < style type = 'text/sass' > @mixin border-stroke($val){ @if $val ==light {border: 1px solid black;} @else if $val ==medium {border: 3px solid black;} @else if $val ==heavy {border: 6px solid black;} @else {border: none;} /*If value doesn't come*/ } #box { width: 150px; height: 150px; background-color: red; @include border-stroke(medium);/*We gave a value with @include*/ } </ style > < div id = "box" ></ div >

Bootstrap : img-responsive

Image
Bootstrap img-responsive WellComeBack Click here for bootstrap . You can set perfectly fit width of your page with img-responsive . Codes in the page ----------------------------------------------- " " .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-teal-border { border-color: teal; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } WellComeBack Click here for bootstrap . You can set perfectly fit width of your page with img-responsive . Things bootstrap: bad useful perfect Bootstrap for design inappropriate so so wonderful Submit Things bootstrap: bad useful perfect Bootstrap for design inappropriate so so wonderful Submit

Javascript >> Add Methods After Inheritance

A constructor function that inherits its  prototype   object from a  supertype   constructor function can still have its own methods in addition to inherited methods. For example, BlogRecord is a constructor that inherits its prototypefrom Record: function Record() { } Record.prototype.oldRecord= function () { console.log( "old record" ); }; function BlogRecord() { } BlogRecord.prototype = Object.create(Record.prototype); BlogRecord.prototype.constructor = BlogRecord; BlogRecord.prototype.newRecord= function (){console.log( "new record" );} let record= new BlogRecord(); record.oldRecord(); record.newRecord();

Javascript >> Reset an Inherited Constructor Property

When an object inherits its  prototype  from another object, it also inherits the  supertype 's constructor property. For example: function Blogger() { } Blogger .prototype = Object.create(BloggerClass.prototype); let myBlog= new Blogger(); myBlog.constructor // function BloggerClass(){...} You can manually set Blogger's constructor property to the Blogger object. Blogger .prototype.constructor =  Blogger ; myBlog .constructor // function  Blogger (){...}

Arrow Functions - Javascript

                                           If the entered number is even number add 1.  var h = [2,8,12,47];  var f=h.filter(x=> x%2==0).map(y=>y+1); In here, filter() does logical processing and map() function do addition process. Other example containing test(),replace() functions. const myReplace=str1=>{ "use strict"; const chStr=/old/; const myString="My old friend is very clever."; return chStr.test(myString) ? myString.replace(chStr,str1) : NaN; }; print(myReplace("best")); ----Old output---- My old friend is very clever. ---New output--- My best friend is very clever.