Posts
Showing posts from June, 2018
JS-Sass Loops
- Get link
- X
- Other Apps
@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
- Get link
- X
- Other Apps
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
- Get link
- X
- Other Apps
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
- Get link
- X
- Other Apps
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
- Get link
- X
- Other Apps
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
- Get link
- X
- Other Apps
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.