Author: Sanjay Kushwaha

Remove Duplicates from an Array with Set and Map

Set and Map are built-in data structures for storing collections of values, each with their own specific characteristics and use cases. Both Set and Map do not allow duplicate values, so we can use them to remove duplicates from an array by spreading the array into them: Example // create unique arrays with Map() const fruitsWithDuplicates2 = [ ‘Mango’, ‘Cashew’, ‘Barley’, ‘Mango’,… Continue reading Remove Duplicates from an Array with Set and Map

Use the trim(), trimStart(), and trimEnd() to Handle White Spaces

The trim() method gets rid of white spaces at both ends of the string. The trimStart() gets rid of white spaces at the start of the string. And trimEnd() removes white spaces at the end of the string.These three methods are useful when we need to clean up user inputs or remove leading/trailing whitespace from strings. Some Example are added below

To Add shadow Effect on Text using CSS

we can do a lot with text shadow effects in CSS, but it can be difficult to know exactly what’s possible. Get help with these visual examples Some example are shown belowHTML<h1 class=”mystic”>Mystic</h1>  <h1 class=”testShadow”>Monoton</h1> <h1 class=”bungee”>Bungee</h1>  <h1 class=”radioactive”>Radioactive</h1>  <h1 class=”sprint”>Sprint</h1>  <p class=”prickly”>Prickly</p>  <p class=”codystar”>Codystar</p>  <h1 class=”kingdom kingdom–shadow” data-text=”kingdom”>Kingdom</h1>  <div class=”elegant”>    <span>s</span>    <span>h</span>    <span>r</span>    <span>a</span>… Continue reading To Add shadow Effect on Text using CSS

To change Rating Review From Star to Number

Scenario  By Default in SCA Rating is showing as Star if want to change that Star into numbe we need to follow the below Solution Solution Create a extension  Extend ‘GlobalViews.StarRating.View’  in entry file write the code as shown below. Entry FIle Code    //To show Review rating of item in PLP page       _.extend(GlobalViewsStarRatingView.prototype,… Continue reading To change Rating Review From Star to Number

Bootstrap to display Multiple image 4 image in each row.

Scenario  if we want to add multiple responsive image, 4 image in each row with the help of bootstrap we can cosider the below code Solution <div class=”container”>    <div class=”row”> <div class=”col-md-3?>   <img src=”image1.jpg” alt=”Image 1? class=”img-fluid”>   </div>        <div class=”col-md-3?>       <img src=”image2.jpg” alt=”Image 2? class=”img-fluid”>   </div>   <div class=”col-md-3?>  <img src=”image3.jpg” alt=”Image 3? class=”img-fluid”> </div>    <div… Continue reading Bootstrap to display Multiple image 4 image in each row.

To Add image using img tag as background and place other content on the image.

Scenario if we add image as background using css it will cause issue in respnsivness  Solution HTML code  <div class=”main container”>   <img src=”image_ink.jpg” alt=” Background image”>   <div class=”overlay”>       <div class=”Any other Content”>Place your heading Here</div>     <p class=’Sub-content’>Place tour paragraph or any other content here</p>   </div> </div> CSS Code .main-container {… Continue reading To Add image using img tag as background and place other content on the image.

Error: Missing binding /home/jandj/Documents/GitHub/Rize_Home_USA_NS/Sandbox/Extension/node_modules/node-sass/vendor/linux-x64-93/binding.node

This path might be change According to Project. Scenario when we try to fetch or run local error message as shown above will display in our terminal. Solution open terminal  Select NVM 12.21.0 using below code  nvm use 12.21.0 install npm  run below comand to download the binding for our current environment. npm rebuild node-sass… Continue reading Error: Missing binding /home/jandj/Documents/GitHub/Rize_Home_USA_NS/Sandbox/Extension/node_modules/node-sass/vendor/linux-x64-93/binding.node