10 Days Of JavaScript

Day 8: Create A Button Solution

Hello Friends in this article i am gone to share Hackerrank 10 days of javascript solutions with you. | Day 8: Create A Button Solution.


Also visit this link:  Day 7: Regular Expressions III Solution


 

Day 8: Create A Button Solution

Objective

In this challenge, we practice creating buttons in JavaScript.

Task

Complete the code in the editor so that it creates a clickable button satisfying the following properties:

  • The button’s id is btn.
  • The button’s initial text label is . After each click, the button must increment by . Recall that the button’s text label is the JS object’s innerHTML property.

The button has the following style properties:

  • A width of 96px.
  • A height of 48px.
  • The font-size attribute is 24px.

The .js and .css files are in different directories, so use the link tag to provide the CSS file path and the script tag to provide the JS file path:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/button.css" type="text/css">
    </head>
    
    <body>
    	<script src="js/button.js" type="text/javascript"></script>
    </body>
</html>

Submissions

This is a new style of challenge involving Front-End rendering. It may take up to 10 seconds to see the result of your code, so please be patient after clicking Submit. The Submissions page contains screenshots to help you gauge how well you did.

Explanation

Initially, the button looks like this: 0

After the first 4 clicks, it looks like this: 4

After 5 more clicks, it looks like this: 9

 

Solution – Day 8: Create A Button

index.html

<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel ="stylesheet" href = "css/button.css" type ="text/css">
        <title>Button</title>
    </head>
    <body>
        <button class = "button" id = "btn">0</button>
        <script src = "js/button.js" type= "text/javascript"></script>
    </body>
</html>

button.js

var btn = document.getElementById("btn");
    btn.addEventListener("click", function(){
        var current_value = this.innerHTML;
        this.innerHTML  = parseInt(current_value)+1;
    });

button.css

.button {
    width: 96px;
    height: 48px;
    font-size: 24px;
}

 

 

Complete the function in the editor. It has two parameters: a and b. It must return an object modeling a rectangle that has the following properties: Complete the function in the editor. It has two parameters: a and b. It must return an object modeling a rectangle that has the following properties: