Day8 Create a Button
Algorithm / HackerRank / 10DaysOfJS

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

After the first 4 clicks, it looks like this:

After 5 more clicks, it looks like this:


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;
}
# 10DaysOfJS, Algorithm, HackerRank
프로그래머스 - 완주하지 못한 선수
Day7 Regular Expressions II

Comments

Follow

Recent

Categories

Archives

Tag Cloud

10DaysOfJS Algorithm ES6 HackerRank Hexo Javascript MongoDB NodeJS Primitive Types ProblemSolving Programmers Pug Reference Types blog call stack challenge functional github.io javascript lodash mac nomadcoders queue react seo sort stack 개발환경 기본설정 노마드코더 정렬 챌린지 프로그래머스 함수형
Your browser is out-of-date!

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

×