An open API service indexing awesome lists of open source software.

https://github.com/itzdiv/ttrl

reconfiguring skills
https://github.com/itzdiv/ttrl

Last synced: 9 months ago
JSON representation

reconfiguring skills

Awesome Lists containing this project

README

          

๐Ÿ“ Question: Rectangle Area Calculator Web App


You are required to create a simple Rectangle Area Calculator using
HTML and JavaScript. The application should allow users to input
the length and breadth of a rectangle, and upon clicking a button,
it should calculate and display the area.

๐Ÿ“ Files Provided:




  • index.html โ€“ The HTML structure of the application.


  • script.js โ€“ A separate JavaScript file linked to index.html to handle the functionality.

โœ… Your Task Is to:

๐Ÿ”น In index.html:



  • Create a form-like layout that includes:

    • A labeled input field for length (number input).

    • A labeled input field for breadth (number input).

    • A button labeled "Calculate Area".

    • A <div> element with id="result" where the calculated area will be displayed.



  • Link the external JavaScript file script.js just before the closing </body> tag.

๐Ÿ”น In script.js:



  • Write JavaScript code to:

    • Get the values entered for length and breadth.

    • Calculate the area using the formula:

      Area = length ร— breadth

    • Update the text inside <div id="result"> to display the calculated area.



  • Ensure the calculation is triggered only when the user clicks the "Calculate Area" button.

๐Ÿ’ก Additional Notes:



  • Use DOM methods like document.getElementById() or querySelector() to access and update elements.

  • Validate inputs: If either field is empty, zero, or not a number, show an appropriate error message in the result div.

  • Styling is optional but may be rewarded if time permits.


๐Ÿงช Example:


User enters:



  • Length: 5

  • Breadth: 4


On clicking "Calculate Area", the output should be:


Area of Rectangle: 20