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


In this challenge, we practice creating buttons in JavaScript.


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>
        <link rel="stylesheet" href="css/button.css" type="text/css">
    	<script src="js/button.js" type="text/javascript"></script>


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.


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


<!-- Enter your HTML code here -->
<!DOCTYPEย 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>


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


.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: