비전공자 개발일기

Find leap year 본문

Javascript

Find leap year

HiroDaegu 2022. 12. 29. 00:10
728x90
SMALL

윤달 조회

<html lang="ko">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Leap Years Between A Range</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
    <!-- Script -->
    <script defer src="main.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="input-wrapper">
                <label for="start-year">Start Year:</label>
                <input type="number" value="1900" id="start-year" />
            </div>
            <div class="input-wrapper">
                <label for="end-year">End Year:</label>
                <input type="number" value="2022" id="end-year" />
            </div>
        </div>
        <button id="get-leap-years">Get Leap Years</button>
        <div id="result"></div>
    </div>

</body>

</html>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  body {
    background-color: #bb2649;
  }
  .container {
    background-color: #ffffff;
    width: 90vw;
    max-width: 37.5em;
    position: absolute;
    padding: 3em 1.8em;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    border-radius: 8px;
    box-shadow: 0 1em 2em rgba(112, 90, 23, 0.3);
  }
  .row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1.8em;
  }
  .input-wrapper {
    width: 100%;
  }
  label {
    font-weight: 600;
    color: #bb2649;
  }
  input {
    display: block;
    width: 100%;
    font-size: 1.3em;
    color: #363a5f;
    margin-top: 0.5em;
    padding: 0.25em 0.5em;
    border: none;
    outline: none;
    border-bottom: 2px solid #bb2649;
  }
  input:focus {
    border-bottom-color: #bb2649;
  }
  button {
    font-size: 1.25em;
    margin: 1.25em 0 1.75em 0;
    width: 100%;
    background-color: #bb2649;
    color: #fff;
    border: none;
    padding: 0.6em 0;
    border-radius: 1.25em;
  }
  #result span {
    display: block;
    line-height: 2;
    text-align: justify;
    color: #bb2649;
    margin-top: 1em;
  }
  #result b {
    font-size: 1.2em;
    display: block;
    line-height: 1.4em;
    font-weight: 600;
    color: #bb2649;
    text-align: center;
  }
//Initial References
let result = document.getElementById("result");
let btn = document.getElementById("get-leap-years");

//Get Leap years when the button is clicked
btn.addEventListener("click", () => {
  //Get values from the input fields
  //Number() converts string value to number
  let startYear = Number(document.getElementById("start-year").value);
  let endYear = Number(document.getElementById("end-year").value);

  //If both start and end year are invalid
  if (
    (startYear < 1582 || startYear > 2999) &&
    (endYear < 1582 || endYear > 2999)
  ) {
    result.innerHTML = `<b>The start year and end year should be greater than 1581 and less than 3000.</b>`;
  }

  //If start year is greater than end year
  else if (startYear > endYear) {
    result.innerHTML = `<b>End year should be greater than the start year.</b>`;
  }

  //If start year is invalid
  else if (startYear < 1582 || startYear > 2999) {
    result.innerHTML = `<b>The start year should be greater than 1581 and less than 3000.</b>`;
  }

  //If end year is invalid
  else if (endYear < 1582 || endYear > 2999) {
    result.innerHTML = `<b>The end year should be greater than 1581 and less than 3000.</b>`;
  }

  //If both start and end years are valid
  else {
    //Empty array to store the leap years
    let leapYears = [];
    for (let i = startYear; i <= endYear; i++) {
      //Determine if a year is a leap year
      //If true push it into leapYears[]

      if ((i % 4 == 0 && i % 100 != 0) || i % 400 == 0) {
        leapYears.push(i);
      }
    }
    //Display leap years in result div
    //toString() returns a string with comma seperated values
    //Use combo of split() and join() to replace ',' with ', '
    result.innerHTML = `<b>There are ${
      leapYears.length
    } leap years between ${startYear} & ${endYear}.</b><span>${leapYears
      .toString()
      .split(",")
      .join(", ")}</span>`;
  }
});
728x90
LIST

'Javascript' 카테고리의 다른 글

Copy to Text  (0) 2023.01.01
Testimonial Slider  (0) 2022.12.30
Product Image Zoom  (0) 2022.12.28
Decimal - Binary Converter  (0) 2022.12.27
Pixel Art Maker  (0) 2022.12.25
'Javascript' Related Articles more