Day 8: Create a Button ( 10 Days of 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>

Solution:

HTML:

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

#btn{
    width:96px;
    height:48px;
    font-size:24px;
}

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', () => {
     const button = document.getElementById('btn');
 button.addEventListener('click', (e) => {
           const count = Number(e.currentTarget.innerText) + 1;
       e.currentTarget.innerText = count;  }); });

Leave a Reply Cancel reply