Day 8: Create a Button
Algorithm / HackerRank / 30Days of Code

Day 8: Create a Button

Objective

In this challenge, we practice creating buttons in JavaScript. Check out the attached tutorial for learning materials.

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:

1
2
3
4
5
6
7
8
9
10
<!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 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.

Ask questions in the Discussions forum and submit any bug reports to support@hackerrank.com. Enjoy!

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:


5



Solution

js

1
2
3
4
5
6
7
8
9
document.addEventListener('DOMContentLoaded', () => {
    const button = document.getElementById('btn');
    
    button.addEventListener('click', (e) => {
          const count = Number(e.currentTarget.innerText) + 1;
        
          e.currentTarget.innerText = count;
     });
});

html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Button</title>
        <link rel="stylesheet" href="css/button.css" type="text/css">
    </head>
    <body>
        <button id="btn" type="button">0</button>
        <script src="js/button.js" type="text/javascript"></script>
    </body>
</html>

css

1
2
3
4
5
#btn {
    width: 96px;
    height: 48px;
    font-size: 24px;
}
# 30Days of Code, Algorithm, ES6, HackerRank, JavaScript

Like this article? Support the author with

Buy Me A Coffee
Day 1: Data Types
Day 0: Hello, World

Comments

Follow

Categories

Recent

Archives

Tag Cloud

10Days of JS 30Days of Code Algorithm Android Debug Bridge Android Debugging Basic for Web Blog Browsers Chrome으로 Android Debugging 방법 Correctness and the Loop Invariant hackerrank solution in javascript Debug Tools Development Environment in MacOS ES6 Front-End Funny String of Algorithms hackerrank solution in javascript Funny String of Algorithms hackerrank solution in typescript Generator Github Page with Hexo Github Pages HackerRank HackerRank in a String of Algorithms hackerrank solution in javascript HackerRank in a String of Algorithms hackerrank solution in typescript Hexo Hexo Icarus theme Hexo 블로그 만들기 Hexo+Github How Browsers work Insertion Sort - Part 1 hackerrank solution in javascript Insertion Sort - Part 2 hackerrank solution in javascript JS Library JavaScript Level1 Level2 Loops MacOS 개발 환경 설정하기 Mobile web Debugging Node.js Pangrams of Algorithms hackerrank solution in javascript Pangrams of Algorithms hackerrank solution in typescript Problem Solving Programmers Quicksort 1 - Partition hackerrank solution in javascript React RoadMap Running Time of Algorithms hackerrank solution in javascript Safari Debugging Safari Technology Preview Settings Sorting String Strings Strong Password of Algorithms hackerrank solution in javascript TypeScript blog iPhone Safari Debugging 방법 insertion sort 모바일 웹 디버깅 아이폰 사파리를 디버깅하는 방법 안드로이드 디버그 브리지 안드로이드 디버깅하는 방법
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×