Problem:-
Solution:-
button.css
#btn {
width: 96px;
height: 48px;
font-size: 24px;
}
button.js
var btn = document.createElement("Button");
btn.innerHTML = "0";
btn.id = "btn";
document.body.appendChild(btn);
btn.onclick = function() {
btn.innerHTML++;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Button</title>
<link rel="stylesheet" href="css/button.css" type="text/css">
</head>
<body>
<script src="js/button.js" type="text/javascript"></script>
</body>
</html>
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
idisbtn. - 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
innerHTMLproperty. - The button has the following style properties:
- A
widthof96px. - A
heightof48px. - The
font-sizeattribute is24px.
- A
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 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 clicks, it looks like this:
After more clicks, it looks like this:
Solution:-
button.css
#btn {
width: 96px;
height: 48px;
font-size: 24px;
}
button.js
var btn = document.createElement("Button");
btn.innerHTML = "0";
btn.id = "btn";
document.body.appendChild(btn);
btn.onclick = function() {
btn.innerHTML++;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Button</title>
<link rel="stylesheet" href="css/button.css" type="text/css">
</head>
<body>
<script src="js/button.js" type="text/javascript"></script>
</body>
</html>
No comments:
Post a Comment