How to Create Direct Shareable Link for Twitter with JavaScript

How to Create Direct Shareable Link for Twitter with JavaScript

How we can create a shareable link for twitter, which contains text and URL in the link and you can share just in a click? Solution: See this How to Create Direct Shareable Link for Twitter with JavaScript and CSS

Previously I have shared a random password generator, which is related to social media but this is a direct link generator for share content on twitter. Basically, A Tweeter intent makes it easy for your website visitors to compose and post a Tweet to their audience from a link on your webpage. Website developers can configure Tweet text and hashtags, pass a URL inside the link. On many websites or blogs, there is a share to the twitter button available, that also known as tweet this article. After click that button twitter share page will open with the article’s text and URL, which is a twitter intent or tweet web intent.

Today you will learn to create a Direct Shareable Link program for twitter which can store text and URL. Basically there are two input fields, the first one for text and the second one for putting URL. Also, there is a button for generating a shareable link, inside the text field you can put a maximum of 280 characters which is max-support of twitter.

So, Today I am sharing a Twitter Intent Generator With JavaScript and CSS. There I have used jQuery which is a JS library, that’s why I am calling this a JavaScript program. The program is completely based on JavaScript and styled using CSS. Also, twitter developed the intent feature and created a guide for developers. The official pre-built twitter’s web intent URL is https://twitter.com/intent/tweet .

If you are thinking now how this shareable link generator actually is, then see the preview given below.

Twitter Intent Generator With JavaScript and CSS Source Code

Before sharing source code, let’s talk about it. First I have created a main div and placed 2 text inputs, two divs, and a button inside it. Also, I have placed a label for each input to showing info to users. Inside the main div, Created the first inner div inside it for character count and second inner div for showing the intent link after generating.

Now using CSS I have placed all the items in the right place, as you can see in the preview. Using CSS, first I have placed all the contents in the center and after that gave style to elements using color, margin, padding, size, etc. Also, there are some other elements like character remaining warning and generated link which are based on CSS styling.

JavaScript handling here 3 main features of the program which are label animation, character length count, and generate web intent. The first function is for the label animation for creating that, JS adding and removing class name according to focus and blur. For counting the length of the character used JS .val().length command, and according to the length, it shows warning using the same add/remove class method.

The main work of the program which is generating an intent link is based if{} else{} statement. I have declared the link structure according to twitter’s official guide and stored in variables. Left all other things you will understand after getting the codes, I can’t explain all things here. For creating this program you have to create 3 files HTML, CSS, and JavaScript. Follow the steps to creating the program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Twitter Intent Generator | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">
 
</head>
<body>
 
<h1>Twitter intent generator</h1>
<div class="intent">
  <div class="css">
    <label for="txt">TWEET TEXT</label>
    <input id="txt" type="text" />
    <div id="character_remaining"></div>
  </div>
  <div class="css">
    <label for="link">URL</label>
    <input id="link" type="text" />
  </div>
  <a class="btn">Generate</a>
  <div id="intent"></div>
</div>
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

@import url("https://fonts.googleapis.com/css?family=Montserrat");
* {
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}
body {
  font: 16px/1 'Montserrat', sans-serif;
  color: #000;
  background: #fff;
  padding: 10px;
  text-align: center;
  margin-top: 15%;
}
 
h1 {
  color: #1da1f2;
  text-transform: uppercase;
}
 
.intent {
  padding: 35px 0;
}
.intent .btn {
  margin: 10px 0;
  display: inline-block;
  padding: 10px;
  background: #1da1f2;
  color: #fff;
}
 
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
  border: 0;
  outline: 0;
}
 
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
 
input[type='text'] {
  width: 500px;
  padding: 10px 10px 12px 60px;
  font-size: 12px;
  color: #555;
  border: 1px solid #aaa;
}
 
.css {
  display: block;
  position: relative;
}
.css input {
  transition: .1s all linear;
}
.css label {
  position: absolute;
  top: 13px;
  font-size: 12px;
  font-weight: bold;
  color: #000;
  transition: .1s all linear;
  cursor: text;
}
.css.active input {
  padding-left: 15px;
  border: 3px solid #1da1f2;
}
.css.active label {
  top: -18px;
}
.css #character_remaining {
  padding: 15px;
  font-size: 12px;
  color: #000000;
}
.css #character_remaining.warning {
  color: #1da1f2;
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

$(document).ready(function() {
  // label animation
  $('input').each(function() {
 
    $(this).on('focus', function() {
      $(this).parent('.css').addClass('active');
    });
 
    $(this).on('blur', function() {
      if ($(this).val().length == 0) {
        $(this).parent('.css').removeClass('active');
      }
    });
 
    if ($(this).val() != '') $(this).parent('.css').addClass('active');
 
  });
 
  // count characters
  var text_max = 280;
  var warning_msg = "";
  $('#character_remaining').html('Characters remaining: ' + text_max);
 
  $('input').keyup(function() {
    if ($('#link').val().length > 0) {
      text_max = 116;
    } else {
      var text_max = 140;
    }
 
    var text_length = $('#txt').val().length;
    var text_remaining = text_max - text_length;
    if (text_remaining < 0) {
      warning_msg = "- too long!";
      $('#character_remaining').addClass('warning');
    } else {
      warning_msg = "";
      $('#character_remaining').removeClass('warning');
    }
 
    $('#character_remaining').html('Characters remaining: ' + text_remaining + " " + warning_msg);
  });
  // generate intent
  $('.btn').on('click', function() {
    var start_text = 'https://twitter.com/intent/tweet?text=';
    var generated_tweet = encodeURIComponent($('#txt').val());
    if ($('#link').val().length > 0) {
      var generated_url = "&url=" + encodeURIComponent($('#link').val());
    } else {
      var generated_url = "";
    }
    if ($('#txt').val().length > 0) {
      $('#intent').html(start_text + generated_tweet + generated_url);
    } else {
      $('#intent').html("Your tweet is empty!")
    }
  })
});

That’s It. Now you have successfully created Twitter Intent Generator With JavaScript and CSS, Direct Shareable Link Generate for Tweet. If you have any doubt or question comment down below.

Thanks you for reading !

How to Check Password Strength with JavaScript, CSS and jQuery

How to Check Password Strength with JavaScript, CSS and jQuery

Password is most important way to secure your data.If password is weak in not so strong anybody can access your data it is very important to create a secure password wherever you need. In this post, we will create a Password Strength Checker using JavaScript,jQuery and CSS.

Password is most important way to secure your data.If password is weak in not so strong anybody can access your data it is very important to create a secure password wherever you need.In this tutorial we will learning "How to Check Password Strength with JavaScript, CSS and jQuery "

To create a Password Strength Checker Using JavaScript,jQuery and CSS it takes only two steps:-

1. Make a HTML file and define markup and script for Password Strength Checker

We make a HTML file and save it with a name password.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="password_style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#pass").keyup(function(){
  check_pass();
 });
});

function check_pass()
{
 var val=document.getElementById("pass").value;
 var meter=document.getElementById("meter");
 var no=0;
 if(val!="")
 {
  // If the password length is less than or equal to 6
  if(val.length<=6)no=1;

  // If the password length is greater than 6 and contain any lowercase alphabet or any number or any special character
  if(val.length>6 && (val.match(/[a-z]/) || val.match(/\d+/) || val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)))no=2;

  // If the password length is greater than 6 and contain alphabet,number,special character respectively
  if(val.length>6 && ((val.match(/[a-z]/) && val.match(/\d+/)) || (val.match(/\d+/) && val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) || (val.match(/[a-z]/) && val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/))))no=3;

  // If the password length is greater than 6 and must contain alphabets,numbers and special characters
  if(val.length>6 && val.match(/[a-z]/) && val.match(/\d+/) && val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/))no=4;

  if(no==1)
  {
   $("#meter").animate({width:'50px'},300);
   meter.style.backgroundColor="red";
   document.getElementById("pass_type").innerHTML="Very Weak";
  }

  if(no==2)
  {
   $("#meter").animate({width:'100px'},300);
   meter.style.backgroundColor="#F5BCA9";
   document.getElementById("pass_type").innerHTML="Weak";
  }

  if(no==3)
  {
   $("#meter").animate({width:'150px'},300);
   meter.style.backgroundColor="#FF8000";
   document.getElementById("pass_type").innerHTML="Good";
  }

  if(no==4)
  {
   $("#meter").animate({width:'200px'},300);
   meter.style.backgroundColor="#00FF40";
   document.getElementById("pass_type").innerHTML="Strong";
  }
 }

 else
 {
  meter.style.backgroundColor="white";
  document.getElementById("pass_type").innerHTML="";
 }
}
</script>
</head>
<body>

<p id="heading">Password Strength Checker Using jQuery and CSS</p>
<input type="password" id="pass" placeholder="Enter Your Password">
<div id="meter_wrapper">
 <div id="meter"></div>
</div>
<br>

<span id="pass_type"></span>

</body>
</html>

In this step we use Regular Expression to find the Password Strength.We use three regular expressions:-

  • val.match(/[a-z]/) is used to find whether the password contain any alphabet.
  • val.match(/\d+/) is used to find whether the password contain any number.
  • val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) is used to find whether the password contain any special characters.

We use jQuery Animate to create animation on password strength.

2. Make a CSS file and define styling for Password Strength Checker

We make a CSS file and save it with name password_style.css.

body
{
 font-family:helvetica;
}
#heading
{
 margin-top:150px;
 text-align:center;
 font-size:27px;
 color:#2E2EFE;
}
#pass
{
 margin-left:25%;
 height:45px;
 width:500px;
 border-radius:3px;
 border:1px solid grey;
 padding:10px;
 font-size:18px;
}
#meter_wrapper
{
 border:1px solid grey;
 margin-left:38%;
 margin-top:20px;
 width:200px;
 height:35px;
 border-radius:3px;
}
#meter
{
 width:0px;
 height:35px;
 border-radius:
}
#pass_type
{
 font-size:20px;
 margin-top:20px;
 margin-left:45%;
 text-align:center;
 color:grey;
}

Thats all, this is how to Password Strength Checker using jQuery and CSS.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Thank you for reading ! If you liked this post, share it with all of your programming buddies!

Building a minesweeper game using Javascript, HTML and CSS

Building a minesweeper game using Javascript, HTML and CSS

In this article, you'll learn how to build minesweeper using JavaScript, HTML and CSS. I also used jQuery, a JavaScript library that is helpful for interacting with html. Whenever you see a function call with a leading dollar sign, that is jQuery at work

In this article, you'll learn how to build minesweeper using JavaScript, HTML and CSS. I also used jQuery, a JavaScript library that is helpful for interacting with html. Whenever you see a function call with a leading dollar sign, that is jQuery at work

If you want to learn how to build minesweeper with JavaScript, the first step is understanding how the game works. Let’s jump right in and talk about the rules.

Rules of the Game
  1. The minesweeper board is a 10 x 10 square. We could make it other sizes, like the classic Windows version, but for demonstration purposes we will stick to the smaller, “beginner” version of the game.
  2. The board has a predetermined number of randomly placed mines. The player cannot see them.
  3. Cells can exist in one of two states: opened or closed. Clicking on a cell opens it. If a mine was lurking there, the game ends in failure. If there is no mine in the cell, but there are mines in one or more of its neighboring cells, then the opened cell shows the neighboring mine count. When none of the cell’s neighbors are mined, each one of those cells is opened automatically.
  4. Right clicking on a cell marks it with a flag. The flag indicates that the player knows there is a mine lurking there.
  5. Holding down the ctrl button while clicking on an opened cell has some slightly complicated rules. If the number of flags surrounding the cell match its neighbor mine count, and each flagged cell actually contains a mine, then all closed, unflagged neighboring cells are opened automatically. However, if even one of these flags was placed on the wrong cell, the game ends in failure.
  6. The player wins the game if he/she opens all cells without mines.
Data Structures

Cell

JavaScript code representing a minesweeper cell.

Each cell is an object that has several properties:

  • id: A string containing the row and column. This unique identifier makes it easier to find cells quickly when needed. If you pay close attention you will notice that there are some shortcuts I take related to the ids. I can get away with these shortcuts because of the small board size, but these techniques will not scale to larger boards. See if you can spot them. If you do, point them out in the comments!
  • row: An integer representing the horizontal position of the cell within the board.
  • column: An integer representing the vertical position of the cell within the board.
  • opened: This is a boolean property indicating whether the cell has been opened.
  • flagged: Another boolean property indicating whether a flag has been placed on the cell.
  • mined: Yet another boolean property indicating whether the cell has been mined.
  • neighborMineCount: An integer indicating the number of neighboring cells containing a mine.

Board

JavaScript code representing our game board.

Our board is a collection of cells. We could represent our board in many different ways. I chose to represent it as an object with key value pairs. As we saw earlier, each cell has an id. The board is just a mapping between these unique keys and their corresponding cells.

After creating the board we have to do two more tasks: randomly assign the mines and calculate the neighboring mine counts. We’ll talk more about these tasks in the next section.

Algorithms

Randomly Assign Mines

JavaScript code for randomly assigning mines to cells.

One of the first things we have to do before a game of minesweeper can be played is assign mines to cells. For this, I created a function that takes the board and the desired mine count as parameters.

For every mine we place, we must generate a random row and column. Furthermore, the same row and column combination should never appear more than once. Otherwise we would end up with less than our desired number of mines. We must repeat the random number generation if a duplicate appears.

As each random cell coordinate is generated we set the *mined *property to true of the corresponding cell in our board.

I created a helper function in order to help with the task of generating random numbers within our desired range. See below:

Helper function for generating random integers.

Calculate Neighbor Mine Count

JavaScript code for calculating the neighboring mine count of each cell.

Now let’s look at what it takes to calculate the neighboring mine count of each cell in our board.

You’ll notice that we start by looping through each row and column on the board, a very common pattern. This will allow us to execute the same code on each of our cells.

We first check if each cell is mined. If it is, there is no need to check the neighboring mine count. After all, if the player clicks on it he/she will lose the game!

If the cell is not mined then we need to see how many mines are surrounding it. The first thing we do is call our **getNeighbors **helper function, which returns a list of ids of the neighboring cells. Then we loop through this list, add up the number of mines, and update the cell’s *neighborMineCount *property appropriately.

Won’t you be my neighbor?

Let’s take a closer look at that **getNeighbors **function, as it will be used several more times throughout the code. I mentioned earlier that some of my design choices won’t scale to larger board sizes. Now would be a good time to try and spot them.

JavaScript code for getting all of the neighboring ids of a minesweeper cell.

The function takes a cell id as a parameter. Then we immediately split it into two pieces so that we have variables for the row and the column. We use the **parseInt **function, which is built into the JavaScript language, to turn these variables into integers. Now we can perform math operations on them.

Next, we use the row and column to calculate potential ids of each neighboring cell and push them onto a list. Our list should have eight ids in it before cleaning it up to handle special scenarios.

A minesweeper cell and its neighbors.

While this is fine for the general case, there are some special cases we have to worry about. Namely, cells along the borders of our game board. These cells will have less than eight neighbors.

In order to take care of this, we loop through our list of neighbor ids and remove any id that is greater than 2 in length. All invalid neighbors will either be -1 or 10, so this little check solves the problem nicely.

We also have to decrement our index variable whenever we remove an id from our list in order to keep it in sync.

Is it mined?

Okay, we have one last function to talk about in this section: isMined.

JavaScript function that checks if a cell is mined.

The **isMined **function is pretty simple. It just checks if the cell is mined or not. The function returns a 1 if it is mined, and a 0 if it is not mined. This feature allows us to sum up the function’s return values as we call it repeatedly in the loop.

That wraps up the algorithms for getting our minesweeper game board set up. Let’s move on to the actual game play.

Opening A Cell

JavaScript code that executes when a minesweeper cell is opened.

Alright let’s dive right into this bad boy. We execute this function whenever a player clicks on a cell. It does a lot of work, and it also uses something called recursion. If you are unfamiliar with the concept, see the definition below:

Recursion: See recursion.

Ah, computer science jokes. They always go over so well at bars and coffee shops. You really ought to try them out on that cutie you’ve been crushing on.

Anyways, a recursive function is just a function that calls itself. Sounds like a stack overflow waiting to happen, right? That’s why you need a base case that returns a value without making any subsequent recursive calls.

Our function will eventually stop calling itself because there will be no more cells that need to be opened. We could have written this code without recursion, but I thought you all might want to see an example of it in action.

Handle Click Explained

The **handleClick **function takes a cell id as a parameter. We need to handle the case where the player pressed the ctrl button while clicking on the cell, but we will talk about that in a later section.

Assuming the game isn’t over and we are handling a basic left click event, there are a few checks we need to make. We want to ignore the click if the player already opened or flagged the cell. It would be frustrating for the player if an inaccurate click on an already flagged cell ended the game.

If neither of those are true then we will proceed. If a mine is present in the cell we need to initiate the game over logic and display the exploded mine in red. Otherwise, we will open the cell.

If the opened cell has mines surrounding it we will display the neighboring mine count to the player in the appropriate font color. If there are no mines surrounding the cell, then it is time for our recursion to kick in. After setting the background color of the cell to a slightly darker shade of gray, we call **handleClick **on each unopened neighboring cell without a flag.

Helper Functions

Let’s take a look at the helper functions we are using inside the **handleClick **function. We’ve already talked about getNeighbors, so we’ll skip that one. Let’s start with the **loss **function.

JavaScript code that gets called whenever the player has lost the game.

When a loss occurs, we set the variable that tracks this and then display a message letting the player know that the game is over. We also loop through each cell and display the mine locations. Then we stop the clock.

Second, we have the **getNumberColor **function. This function is responsible for giving us the color corresponding to the neighboring mine count.

JavaScript code that gets passed a number and returns a color.

I tried to match up the colors just like the classic Windows version of minesweeper does it. Maybe I should have used a switch statement, but I already took the screen shot, and it’s not really a big deal. Let’s move on to what the code looks like for putting a flag on a cell.

Flagging A Cell

JavaScript code for putting a flag on a minesweeper cell.

Right clicking on a cell will place a flag on it. If the player right clicks on an empty cell and we have more mines that need to be flagged we will display the red flag on the cell, update its flagged property to true, and decrement the number of mines remaining. We do the opposite if the cell already had a flag. Finally, we update the GUI to display the number of mines remaining.

Opening Neighboring Cells

JavaScript code for handling ctrl + left click

We have covered the actions of opening cells and marking them with flags, so let’s talk about the last action a player can take: opening an already opened cell’s neighboring cells. The **handleCtrlClick **function contains the logic for this. This player can perform this action by holding ctrl and left clicking on an opened cell that contains neighboring mines.

The first thing we do after checking those conditions is build up a list of the neighboring flagged cells. If the number of flagged cells matches the actual number of surrounding mines then we can proceed. Otherwise, we do nothing and exit the function.

If we were able to proceed, the next thing we do is check if any of the flagged cells did not contain a mine. If this is true, we know that the player predicted the mine locations incorrectly, and clicking on all of the non-flagged, neighboring cells will end in a loss. We will need to set the local *lost *variable and call the **loss **function. We talked about the **loss **function earlier in the article.

If the player did not lose, then we will need to open up the non-flagged neighboring cells. We simply need to loop through them and call the **handleClick **function on each. However, we must first set the *ctrlIsPressed *variable to false to prevent falling into the **handleCtrlClick **function by mistake.

Starting A New Game

We are almost done analyzing all of the JavaScript necessary to build minesweeper! All that we have left to cover are the initialization steps necessary for starting a new game.

JavaScript code for initializing minesweeper

The first thing we do is initialize a few variables. We need some constants for storing the html codes for the flag and mine icons. We also need some constants for storing the board size, the number of mines, the timer value, and the number of mines remaining.

Additionally, we need a variable for storing if the player is pushing the ctrl button. We utilize jQuery to add the event handlers to the document, and these handlers are responsible for setting the *ctrlIsPressed *variable.

Finally, we call the **newGame **function and also bind this function to the new game button.

Helper Functions

JavaScript code for starting a new game of minesweeper.

Th **newGame **function is responsible for resetting our variables so that our game is in a ready-to-play state. This includes resetting the values that are displayed to the player, calling initializeCells, and creating a new random board. It also includes resetting the clock, which gets updated every second.

Let’s wrap things up by looking at initializeCells.

JavaScript code for attaching click handlers to cells and checking for the victory condition.

The main purpose of this function is to add additional properties to our html game cells. Each cell needs the appropriate id added so that we can access it easily from the game logic. Every cell also needs a background image applied for stylistic reasons.

We also need to attach a click handler to every cell so that we can detect left and right clicks.

The function that handles left clicks calls handleClick, passing in the appropriate id. Then it checks to see if every cell without a mine has been opened. If this is true then the player has won the game and we can congratulate him/her appropriately.

The function that handles right clicks calls handleRightClick, passing in the appropriate id. Then it simply returns false. This causes the context menu not to pop up, which is the default behavior of a right click on a web page. You wouldn’t want to do this sort of thing for a standard business CRUD application, but for minesweeper it is appropriate.

Conclusion

Congrats on learning how to build minesweeper with JavaScript! That was a lot of code, but hopefully it makes sense after breaking it up into modules like this. We could definitely make more improvements to this program’s reusability, extensibility, and readability. We also did not cover the HTML or CSS in detail. If you have questions or see ways to improve the code, I’d love to hear from you in the comments!

How to Create an autoplay Testimonial Slider with jQuery and CSS

How to Create an autoplay Testimonial Slider with jQuery and CSS

How we can create a testimonial slider using jQuery and CSS? Solution: Responsive Testimonial Slider With jQuery and CSS, an Automated Slider which slides automatically.

How we can create a testimonial slider using jQuery and CSS? Solution: Responsive Testimonial Slider With jQuery and CSS, an Automated Slider which slides automatically.

Basically, The slider shows the testimonial or feedback text submitted by your customers or users. You can see on many services providing websites, there is a section which is what our client says about us. In other words, the testimonial is a kind of review. Some of the reviews are featured by the websites that is testimonial.

Today you will learn to create an automated testimonial slider with responsive design. Most websites use testimonials on their home page for better user attraction. When we buy any services or products first we check reviews, that’s why we should use that on our website. If are using any CMS then are so many plugins available to create this feature. But if you have created your websites from scratch & it’s not based on any content management system then this post will helpful for you.

So, Today I am sharing a Responsive Testimonial Slider with jQuery and CSS. This is an automated or autoplay slider for testimonial based on jQuery. I have used a special jquery based library for creating this review slider because of that library made especially for this function. You can show one or multiple testimonials to visitors, just by changing the values.

If you are thinking now how this automatic testimonials slider actually is, then see the video preview given below.

Preview Of Automated Review Slider

See this video preview to getting an idea of how this program looks like.

Video Player

Now you can see this visually both versions desktop & mobile or small screen versions. If you like this, then get the source code of its.

Responsive Testimonial Slider With jQuery and CSS Source Code

Before sharing source code, let’s talk about it. As you know I have used a special library for creating this program, which is slick.js (get). Slick JS is developed for making slider or carousel. This library is based on jQuery function, that’s why I am putting this post in JavaScript category because of jQuery also a JavaScript library.

JavaScript or jquery has fewer lines of codes, but they are the main part of this slider. Most of the works is created with CSS, like the layout, UIstyling next/previous buttons, etc. I used the font-awesome library to creating the button‘s icon.

There are all the controls in the JS file, I added autoplay: true; you can also disable this by removing or putting false value. After that, you can control how many testimonials want to show on the webpage. For this, there is a command slidesToShow: 2 . After that, there is a command to set how many users review you want to slide on a single slide. That is slidesToScroll: 1 for controlling this. Also, I put a responsive condition.

There are so many things, I can’t explain it in writing. You will understand easily after getting the codes. For creating this program you have to create 3 files. First for HTML, second for CSS, & third for JS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
 
<head>
  <meta charset="UTF-8">
  <title>jQuery Testimonial Slideshow | Webdevtrick.com</title>
 
  <link href="https://fonts.googleapis.com/css?family=Lato|Patua+One&display=swap" rel="stylesheet">
  <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>
      <link rel="stylesheet" href="style.css">
 
  
</head>
 
<body>
 
  <div class="container">
  <div class="testiSlide">
    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="http://pbs.twimg.com/profile_images/829191018331385858/jxsj-ZmD.jpg" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Neil Patel</h3>
          <p class="indentity">SEO Expert</p>
        </div>
      </figure>
    </div>
 
    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="https://secure.gravatar.com/avatar/24a495e3a7316e619af62445f1a86886?s=96&d=mm&r=g" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Shaan</h3>
          <p class="indentity">Web Developer</p>
        </div>
      </figure>
    </div>
 
    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="https://yt3.ggpht.com/a/AGF-l7_ESQtd3r7nPdFdP_mmyxn65RFy9JlGT0dGyA=s900-mo-c-c0xffffffff-rj-k-no" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Brian Dean</h3>
          <p class="indentity">SEO / Blogger</p>
        </div>
      </figure>
    </div>
 
    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="https://design.sva.edu/wp-content/uploads/2018/08/Sagmeister.jpg" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Stefan Sagmeister</h3>
          <p class="indentity">Graphic Designer</p>
        </div>
      </figure>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
  <script src='http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
 
    <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
html {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	background: #fff;
	color: #333
}
body {
	margin:  0;
	background: #ff5057;
	height: 100vh;
}
h3 {
	font-family: 'Patua One', cursive;
	font-weight: 400;
	font-size: 1.4em;
	line-height: 1.4em;
	color: #fff
}
.container {
	box-sizing: content-box;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 40px;
	padding-bottom: 40px;
}
.indentity {
	margin: 0!important
}
figure.testimonial {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	padding: 0 20px;
	text-align: left;
	box-shadow: none !important;
}
figure.testimonial * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
figure.testimonial img {
	max-width: 100%;
	vertical-align: middle;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	margin: 40px 0 0 10px;
}
figure.testimonial blockquote {
	background-color: #fff;
	display: block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	margin: 0;
	padding: 25px 50px 30px;
	position: relative;
}
figure.testimonial blockquote:before, figure.testimonial blockquote:after {
	content: "\201C";
	position: absolute;
	color: #ff5057;
	font-size: 50px;
	font-style: normal;
}
figure.testimonial blockquote:before {
	top: 25px;
	left: 20px;
}
figure.testimonial blockquote:after {
	content: "\201D";
	right: 20px;
	bottom: 0;
}
figure.testimonial .btn {
	top: 100%;
	width: 0;
	height: 0;
	border-left: 0 solid transparent;
	border-right: 25px solid transparent;
	border-top: 25px solid #fff;
	margin: 0;
	position: absolute;
}
figure.testimonial .peopl {
	position: absolute;
	bottom: 45px;
	padding: 0 10px 0 120px;
	margin: 0;
	color: #ffffff;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
}
figure.testimonial .peopl h3 {
	opacity: 0.9;
	margin: 0;
}
.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.slick-list:focus {
	outline: none;
}
.slick-list.dragging {
	cursor: pointer;
	cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
	transform: translate3d(0, 0, 0);
}
.slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: block;
}
.slick-track:before, .slick-track:after {
	display: table;
	content: '';
}
.slick-track:after {
	clear: both;
}
.slick-loading .slick-track {
	visibility: hidden;
}
.slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}
.slick-slide img {
	display: block;
}
.slick-slide.slick-loading img {
	display: none;
}
.slick-slide.dragging img {
	pointer-events: none;
}
.slick-initialized .slick-slide {
	display: block;
}
.slick-loading .slick-slide {
	visibility: hidden;
}
.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent;
}
.slick-btn.slick-hidden {
	display: none;
}
 
.slick-prev, .slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 40%;
	display: block;
	width: 20px;
	height: 20px;
	padding: 0;
	transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
	color: transparent;
	outline: none;
	background: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
	opacity: 1;
}
.slick-prev:before, .slick-next:before {
	font-family: "FontAwesome";
	font-size: 40px;
	line-height: 1;
	opacity: .75;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
	left: -40px;
}
.slick-prev:before {
	content: "";
}
.slick-next {
	right: -40px;
}
.slick-next:before {
	content: "";
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
$(document).ready(function () {
	$('.testiSlide').slick({
		slidesToShow: 2,
		slidesToScroll: 1,
		autoplay: true,
		autoplaySpeed: 1500,
		responsive: [{
		breakpoint: 850,
		settings: {
		slidesToShow: 1,
		slidesToScroll: 1,
		infinite: true,
		}
		}]
	});
});

That’s It. You have successfully created a Responsive Testimonial Slider With jQuery and CSS, An Automated Slider or Carousel. If you have any doubt or question comment down below.

Thanks for reading. If you liked this post, share it with all of your programming buddies!

Further reading

☞ The Web Developer Bootcamp

☞ Build Responsive Real World Websites with HTML5 and CSS3

☞ Advanced CSS and Sass: Flexbox, Grid, Animations and More!

☞ Web Design for Beginners: Real World Coding in HTML & CSS

☞ Foundation CSS Framework - Crash Course for Beginners

☞ Animating SVG with CSS

☞ The CSS Handbook: a handy guide to CSS for developers

☞ 11 Amazing CSS You Shouldn’t Miss


This post was originally published here