Switching between three classes with different names

I have a header and three different classes defines three different sizes. On click of the different buttons I need to apply the size class to the header and remove the existing heading size class.

I have a header and three different classes defines three different sizes. On click of the different buttons I need to apply the size class to the header and remove the existing heading size class.

JS Fiddle

<div class="row">
  <div class="col-sm-12">
    <div class="layout-attachments">
      <ul class="list-inline layout-components">
        <li class="list-inline-item"><a id="smallHeader">S</a></li>
        <li class="list-inline-item"><a id="mediumHeader">M</a></li>
        <li class="list-inline-item"><a id="largeHeader">L</a></li>
  &lt;/ul&gt;
  &lt;h1 class="img-responsive img-thumbnail w-75-p"&gt;Change the class of this element&lt;/h1&gt;

</div>

jQuery:

this.$('.list-inline-item').click(function() {

if ($('.layout-attachments h1').hasClass('w-50-p')) {
    $('.layout-attachments h1').removeClass('w-50-p').addClass('w-75-p ');
} else if ($('.layout-attachments h1').hasClass('w-75-p ')) {
    $('.layout-attachments h1').removeClass('w-75-p ').addClass('w-100-p');
} else if ($('.layout-attachments h1').hasClass('w-100-p')) {
    $('.layout-attachments h1').removeClass('w-100-p').addClass('w-50-p');
}

});
});


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!

Material Login & Signup Form with CSS, HTML and JavaScript

Material Login & Signup Form with CSS, HTML and JavaScript

How we can create a login and signup form with the material design using HTML CSS JavaScript? Solution: See this CSS Material Login & Signup Form With jQuery, Material Design Form.

Basically, Material Design is a type of design and it is developed by Google. Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Languages like angular, react has an inbuilt material design for elements but we can create that kind of design using CSS.

Today you will learn to create Material Design Form using HTML and CSS. Basically, there is a login form and a button on the right-top of the form, when you will click on that then the signup or registration form will appear. And all the input fields and the layout designed as material design, and transitions are also like that.

So, Today I am sharing CSS Material Login & Signup Form With jQuery. There I have used pure HTML and CSS but jQuery is only for the toggle feature. And there material design effect is a combination of shadow, size, animation, etc. Believe me, this is a very good designed login/registration form you can use it on your website after backed integration.

If you are thinking now how this material design form actually is, then see the preview given below.

CSS Material Login & Signup Form With jQuery Source Code

Before sharing source code, let’s talk about it. First I have created two different sections one for login and one for the registration form. Inside a single card, I have placed a button, input, and label to creating the complete form. And also in the HTML file, I have linked external files like jQuery, font-awesome, and other files.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. There I have created two cards and a toggle button which is for the register section. There is a class name .active which is handling the whole function. I have put the condition when it’s active then do these things to element. For signup form expand feature I have used CSS transform: scale (); command (info).

jQuery just handling the toggle feature by adding and removing the active class. All the design and animation are based on pure CSS, and the register icon is powered by font-awesome library. And this form is responsive means it will fit on every screen size, I have used CSS @media query for creating this. There I have created many things using CSS, I can’t explain all you will understand after getting the codes.

For Creating this program, you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this 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>Material Login Form | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="style.css">
 
</head>
<body>
 
<div class="container">
  <div class="card">
    <h1 class="title">Login</h1>
    <form>
      <div class="input-container">
        <input type="text" id="usern" required="required"/>
        <label for="usern">Username</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="text" id="passw" required="required"/>
        <label for="passw">Password</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button><span>Go</span></button>
      </div>
      <div class="footer"><a href="#">Forgot your password?</a></div>
    </form>
  </div>
  <div class="card alt">
    <div class="toggle"></div>
    <h1 class="title">Register
      <div class="close"></div>
    </h1>
    <form>
      <div class="input-container">
        <input type="text" id="usernR" required="required"/>
        <label for="usernR">Username</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="text" id="passwR" required="required"/>
        <label for="passwR">Password</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="text" id="repeatpass" required="required"/>
        <label for="repeatpass">Repeat Password</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button><span>Next</span></button>
      </div>
    </form>
  </div>
</div>
 
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/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.

body {
  background: #e9e9e9;
  color: #666666;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.container {
  position: relative;
  max-width: 460px;
  width: 100%;
  margin: 0 auto 100px;
  margin-top: 10%;
 
}
.container.active .card:first-child {
  background: #f2f2f2;
  margin: 0 15px;
}
.container.active .card.alt {
  top: 20px;
  right: 0;
  width: 100%;
  min-width: 100%;
  height: auto;
  border-radius: 5px;
  padding: 60px 0 40px;
  overflow: hidden;
}
.container.active .card.alt .toggle {
  position: absolute;
  top: 40px;
  right: -70px;
  box-shadow: none;
  -webkit-transform: scale(10);
  transform: scale(10);
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
}
.container.active .card.alt .toggle:before {
  content: '';
}
.container.active .card.alt .title,
.container.active .card.alt .input-container,
.container.active .card.alt .button-container {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: .3s ease;
}
.container.active .card.alt .title {
  transition-delay: .3s;
}
.container.active .card.alt .input-container {
  transition-delay: .4s;
}
.container.active .card.alt .input-container:nth-child(2) {
  transition-delay: .5s;
}
.container.active .card.alt .input-container:nth-child(3) {
  transition-delay: .6s;
}
.container.active .card.alt .button-container {
  transition-delay: .7s;
}
 
.card {
  position: relative;
  background: #ffffff;
  border-radius: 5px;
  padding: 60px 0 40px 0;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: .3s ease;
}
 
.card .title {
  position: relative;
  z-index: 1;
  border-left: 5px solid #ff4444;
  margin: 0 0 35px;
  padding: 10px 0 10px 50px;
  color: #ff4444;
  font-size: 32px;
  font-weight: 600;
  text-transform: uppercase;
}
.card .input-container {
  position: relative;
  margin: 0 60px 50px;
}
.card .input-container input {
  outline: none;
  z-index: 1;
  position: relative;
  background: none;
  width: 100%;
  height: 60px;
  border: 0;
  color: #212121;
  font-size: 24px;
  font-weight: 400;
}
.card .input-container input:focus ~ label {
  color: #9d9d9d;
  -webkit-transform: translate(-12%, -50%) scale(0.75);
          transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after {
  width: 50%;
}
.card .input-container input:valid ~ label {
  color: #9d9d9d;
  -webkit-transform: translate(-12%, -50%) scale(0.75);
          transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container label {
  position: absolute;
  top: 0;
  left: 0;
  color: #757575;
  font-size: 24px;
  font-weight: 300;
  line-height: 60px;
  transition: 0.2s ease;
}
.card .input-container .bar {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #757575;
  width: 100%;
  height: 1px;
}
.card .input-container .bar:before, .card .input-container .bar:after {
  content: '';
  position: absolute;
  background: #ff4444;
  width: 0;
  height: 2px;
  transition: .2s ease;
}
.card .input-container .bar:before {
  left: 50%;
}
.card .input-container .bar:after {
  right: 50%;
}
.card .button-container {
  margin: 0 60px;
  text-align: center;
}
.card .button-container button {
  outline: 0;
  cursor: pointer;
  position: relative;
  display: inline-block;
  background: 0;
  width: 240px;
  border: 2px solid #e3e3e3;
  padding: 20px 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  transition: .3s ease;
}
.card .button-container button span {
  position: relative;
  z-index: 1;
  color: #ddd;
  transition: .3s ease;
}
.card .button-container button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background: #ff4444;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  margin: -15px 0 0 -15px;
  opacity: 0;
  transition: .3s ease;
}
.card .button-container button:hover, .card .button-container button:active, .card .button-container button:focus {
  border-color: #ff4444;
}
.card .button-container button:hover span, .card .button-container button:active span, .card .button-container button:focus span {
  color: #ff4444;
}
.card .button-container button:active span, .card .button-container button:focus span {
  color: #ffffff;
}
.card .button-container button:active:before, .card .button-container button:focus:before {
  opacity: 1;
  -webkit-transform: scale(10);
  transform: scale(10);
}
.card .footer {
  margin: 40px 0 0;
  color: #d3d3d3;
  font-size: 24px;
  font-weight: 300;
  text-align: center;
}
.card .footer a {
  color: inherit;
  text-decoration: none;
  transition: .3s ease;
}
.card .footer a:hover {
  color: #bababa;
}
.card.alt {
  position: absolute;
  top: 40px;
  right: -70px;
  z-index: 10;
  width: 140px;
  height: 140px;
  background: none;
  border-radius: 100%;
  box-shadow: none;
  padding: 0;
  transition: .3s ease;
}
.card.alt .toggle {
  position: relative;
  background: #ff4444;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: #ffffff;
  font-size: 58px;
  line-height: 140px;
  text-align: center;
  cursor: pointer;
}
.card.alt .toggle:before {
  content: '\f040';
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.card.alt .title,
.card.alt .input-container,
.card.alt .button-container {
  left: 100px;
  opacity: 0;
  visibility: hidden;
}
.card.alt .title {
  position: relative;
  border-color: #ffffff;
  color: #ffffff;
}
.card.alt .title .close {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 60px;
  display: inline;
  color: #ffffff;
  font-size: 58px;
  font-weight: 400;
}
.card.alt .title .close:before {
  content: '\00d7';
}
.card.alt .input-container input {
  color: #ffffff;
}
.card.alt .input-container input:focus ~ label {
  color: #ffffff;
}
.card.alt .input-container input:focus ~ .bar:before, .card.alt .input-container input:focus ~ .bar:after {
  background: #ffffff;
}
.card.alt .input-container input:valid ~ label {
  color: #ffffff;
}
.card.alt .input-container label {
  color: rgba(255, 255, 255, 0.8);
}
.card.alt .input-container .bar {
  background: rgba(255, 255, 255, 0.8);
}
.card.alt .button-container button {
  width: 100%;
  background: #ffffff;
  border-color: #ffffff;
}
.card.alt .button-container button span {
  color: #ff4444;
}
.card.alt .button-container button:hover {
  background: rgba(255, 255, 255, 0.9);
}
.card.alt .button-container button:active:before, .card.alt .button-container button:focus:before {
  display: none;
}
@media (max-width: 750px) {
  .card.alt .toggle {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 25px;
  }
  .container.active .card.alt .toggle {
   transform: scale(27);
  }
  .container.active .card.alt{
   left: 0;
  }
}

function.js

The last step, create a JavaScript file named ‘function.js‘ and put the codes.

$('.toggle').on('click', function() {
  $('.container').stop().addClass('active');
});
 
$('.close').on('click', function() {
  $('.container').stop().removeClass('active');
});

That’s It. Now you have successfully created CSS Material Login & Signup Form With jQuery, Material Design Form. If you have any doubt or question comment down below.

Thanks for reading !

Bar Graphs with Animation using JavaScript, HTML, & CSS

Bar Graphs with Animation using JavaScript, HTML, & CSS

How we can create Bar Graphs With Animation using JavaScript, HTML, & CSS? Solution: JavaScript Animated Bar Graph. In Other Words, Bar Chart With Animation Effects.

Now this time to create a bar graphChart or Graphs are mostly used in backend site or admin panel, sometimes we have to show data to users then we use it on frontend also. Basically, the chart is an important part of web development.

Today you will learn to create a Bar Chart using jQuery. jQuery is JavaScript library, that’s why I am calling this a JS program. Basically, Libraries are created for easy to do works. You can use this bar graph anywhere as you want, this is a very simple and easy program. You just have to create a new div like other bars and have to put percentage values.

So, Today I am sharing JavaScript Animated Bar Graph, A jQuery Bar Chart With Animation. This program is very short but useful, you can create this easily after understanding the codes. You can place it anywhere as your requirement. It has a very pretty and flat UI, you can reskin easily.

If you are thinking now how this JavaScript Bar Graph actually is, then see the preview given below.

Preview Of Bar Chart With Animation

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

Now you can see this visually. If you like this, then get the source code of its.

JavaScript Animated Bar Graph Source Code

Before sharing source code, let’s talk about it. I have created a separated div for each bar, and a span for showing percentage. Used HTML Data-*attribute to store custom values as percentage values. Finally stored percentage values like this : data-percent="75%" , you have just change these values to make changes.

Now the full HTML with bar, percentage, label look like this: <div class="bar" data-percent="80%"><span class="label"> Name </span></div> In the CSS file I have manged all the position, colors, font, etc. I have used a google font to creating this program. Now the jQuery or JavaScriptfetched the data-percent attribute, now jquery push the backgound acording to given percentage values.

The background fills with 2sec delay, that creates the animation effect. As you can see in the preview one bar has a dark color & other has a lightcolor. For creating this I have used CSS :nth-of-type(odd) property.

There are a lot of basic commands, I can’t explain all in writing. You will understand this easily after getting the codes. For creating this program. you have to create 3 files, first for HTML, second for CSS, and third for JavaScript. 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>JavaScript Animated Bar Graphs | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Electrolize&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
 
<body>
   <div class="wrap">
<h1>JavaScript Animated Bar Graphs</h1>
<div class="holder"><div class="bar " data-percent="95%"><span class="label">HTML</span></div>
<div class="bar" data-percent="80%"><span class="label second">CSS</span></div>
<div class="bar" data-percent="65%"><span class="label">JavaScript</span></div>
<div class="bar" data-percent="75%"><span class="label second">jQuery</span></div>
<div class="bar" data-percent="90%"><span class="label">Bootstrap</span></div>
<div class="bar" data-percent="40%"><span class="label second">React</span></div>
<div class="bar" data-percent="45%"><span class="label ">Vue</span></div>
<div class="bar" data-percent="50%"><span class="label second">Angular</span></div>
<div class="bar" data-percent="95%"><span class="label">CMS</span></div>
<div class="bar" data-percent="70%"><span class="label second">Node JS</span></div>
  </div>
 
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/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.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
* {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  font-family: 'Electrolize', sans-serif;
}
body {
  color: #212121;
  -webkit-font-smoothing: antialiased;
  padding: 2%;
  line-height: 1;
}
h1 {
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
  padding: .5em 0;
  margin-bottom: 1em;
  border-bottom: 2px solid #212121;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.wrap {
  width: 50%;
  margin: 0 auto;
}
.bar {
  background: #ff413d;
  width: 0;
  margin: .25em 0;
  color: #fff;
  position: relative;
  transition: width 2s, background .2s;
  -webkit-transform: translate3d(0, 0, 0);
  clear: both;
}
.bar:nth-of-type(odd) {
  background: #ff6461;
}
.bar .label {
  font-size: .75em;
  padding: 1em;
  background: #212121;
  width: 7em;
  display: inline-block;
  position: relative;
  z-index: 2;
  font-weight: bold;
}
.bar .label.second {
  background: #333;
}
.count {
  position: absolute;
  right: .25em;
  top: .75em;
  padding: .15em;
  font-size: .75em;
  font-weight: bold;
}

function.js

The final step, create a JS file for jQuery named ‘function.js‘ and put the codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
setTimeout(function start (){
  
  $('.bar').each(function(i){  
    var $bar = $(this);
    $(this).append('<span class="count"></span>')
    setTimeout(function(){
      $bar.css('width', $bar.attr('data-percent'));      
    }, i*100);
  });
 
$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).parent('.bar').attr('data-percent')
    }, {
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now) +'%');
        }
    });
});
 
}, 500)

That’s It. Now you have successfully created the JavaScript Animated Bar GraphBar Chart With Animation. If you liked this post, share it with all of your programming buddies! Thank you!

Originally published on  https://webdevtrick.com