diff --git a/README.md b/README.md index 8d531fe..3709f2b 100644 --- a/README.md +++ b/README.md @@ -188,6 +188,17 @@ In order to run this project you need: +
  • +
    +Weight Converter +

    Weight Converter is a simple and efficient tool built using HTML, CSS, and JavaScript. The Weight Converter project is a beginner-friendly web development project designed to help users convert weight measurements seamlessly. Users can input a weight in kilograms and instantly see conversions to grams, pounds, and ounces.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/WeightConverter/index.html b/Source-Code/WeightConverter/index.html new file mode 100644 index 0000000..fb34312 --- /dev/null +++ b/Source-Code/WeightConverter/index.html @@ -0,0 +1,43 @@ + + + + + + Weight Converter + + + +
    +

    Weight Converter

    +
    +
    +
      +
    • + + +
      • +
    • + + +
      • +
    +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    +
    +
    +
    + + + diff --git a/Source-Code/WeightConverter/script.js b/Source-Code/WeightConverter/script.js new file mode 100644 index 0000000..6bf11b4 --- /dev/null +++ b/Source-Code/WeightConverter/script.js @@ -0,0 +1,35 @@ +document.addEventListener('DOMContentLoaded', () => { + const convertButton = document.getElementById('convertButton'); + const resetButton = document.getElementById('resetButton'); + + function convert() { + const kilograms = parseFloat(document.getElementById('kgs').value); + + if (Number.isNaN(kilograms) || kilograms <= 0) { + window.alert('Weight must be greater than zero!!'); + } else { + const gramsResult = kilograms * 1000; + const poundsResult = kilograms * 2.20462; + const ouncesResult = kilograms * 35.274; + + document.getElementById('grams').value = gramsResult.toFixed(2); + document.getElementById('pounds').value = poundsResult.toFixed(3); + document.getElementById('ounces').value = ouncesResult.toFixed(2); + } + } + + function clearResults() { + document.getElementById('grams').value = ''; + document.getElementById('pounds').value = ''; + document.getElementById('ounces').value = ''; + } + + convertButton.addEventListener('click', () => { + convert(); + }); + + resetButton.addEventListener('click', () => { + document.getElementById('converter').reset(); + clearResults(); + }); +}); diff --git a/Source-Code/WeightConverter/style.css b/Source-Code/WeightConverter/style.css new file mode 100644 index 0000000..39b0eee --- /dev/null +++ b/Source-Code/WeightConverter/style.css @@ -0,0 +1,75 @@ +/* stylelint-disable */ +body { + background: linear-gradient(to left, aqua, rgb(0, 128, 255)); + line-height: 0.5; + text-align: center; +} + +.main { + width: 500px; + position: absolute; + top: 40%; + left: 50%; + transition: 0.25px; + transform: translate(-50%, -50%); + justify-items: center; + text-align: center; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; +} + +.card { + box-shadow: 0 4px 8px 0; + transition: 0.4s; + width: 300px; + text-align: center; + font-size: 16px; + float: left; + margin: 10px; +} + +h1 { + font-size: 30px; + color: antiquewhite; + text-align: center; +} + +.values { + width: 240px; + text-align: center; + border: 2px solid transparent; + border-radius: 5px; + padding: 10px 0; +} + +li { + list-style-type: none; +} + +ul { + display: flex; + flex-direction: column; + gap: 15px; + justify-content: flex-start; +} + +.buttons { + border: 3px solid; + background-color: rgb(40, 211, 40); + color: white; + font-size: 16px; + border-radius: 5px; + cursor: pointer; + text-align: center; + width: 80px; + height: 40px; + margin-left: 40px; +} + +label { + font-size: 20px; +}