/Simple-Interest-Calculator

Hands-On Lab: Simple Interest Calculator from IBM

Primary LanguageHTMLApache License 2.0Apache-2.0

Simple Interest Calculator

Welcome to the Simple Interest Calculator project! This project is a hands-on lab designed to help you understand and implement a basic interest calculator using HTML, CSS, and JavaScript.

Project Overview

The Simple Interest Calculator allows users to input the principal amount, rate of interest, and time period to calculate the simple interest. This project involves modifying the provided HTML, CSS, and JavaScript files to meet specific requirements and ensure the webpage functions correctly.

Getting Started

Prerequisites

Before you begin, make sure you have a code editor (such as VSCode, Sublime Text, or Atom) and a web browser (such as Chrome, Firefox, or Edge) installed on your computer.

Project Folder

Download the project folder and extract it to your desired location on your computer.

Project Structure

The project folder contains the following files:

  • index.html: The HTML file that contains the structure of the webpage.
  • styles.css: The CSS file that contains the styling for the webpage.
  • script.js: The JavaScript file that contains the logic for the simple interest calculator.

Instructions

Follow these steps to complete the project:

1. Modify the HTML File

  • Open index.html in your code editor.
  • Ensure the HTML structure is correct and includes the necessary elements:
    • An input field for the principal amount.
    • An input field for the rate of interest.
    • An input field for the time period.
    • A button to calculate the simple interest.
    • An element to display the calculated interest.

2. Modify the CSS File

  • Open styles.css in your code editor.
  • Add styling to ensure the webpage is visually appealing and easy to use.
    • Style the input fields, button, and display element.
    • Ensure the layout is responsive and works well on different screen sizes.

3. Modify the JavaScript File

  • Open script.js in your code editor.
  • Implement the logic to calculate the simple interest based on user inputs.
    • Retrieve the values from the input fields.
    • Perform the simple interest calculation using the formula: Simple Interest = (Principal * Rate * Time) / 100.
    • Display the calculated interest in the appropriate element on the webpage.

4. Verify the Webpage

  • Open index.html in your web browser.
  • Enter values in the input fields and click the calculate button.
  • Ensure the calculated interest is displayed correctly.
  • Check for any errors or issues and debug as necessary.

Conclusion

Once you have completed the modifications and verified that the webpage is working properly, you will have successfully implemented a simple interest calculator. This hands-on lab is a great way to practice and enhance your HTML, CSS, and JavaScript skills.

Contribution

If you find any issues or have suggestions for improvement, feel free to create a pull request or open an issue in the GitHub repository.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Happy coding!