index.html

<html lang="en">
<head>
    <title>Weather App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body style='background-color: #9EB384';>
    <div class="container mt-5">
        <form action="/" method="post" onsubmit="return validateForm()">
            <div class="mb-3">
                <h1> Welcome to Weather App</h1><br>
                <label for="cityInput" class="form-label">Enter a city name to know its weather condition : </label>
                <input type="text" class="form-control" id="cityInput" name="cityName" placeholder="Eg, London" autocomplete="off"/>
            </div>
            <button type="submit" class="btn btn-primary">Search</button>
        </form>
    </div>

    <script>
        function validateForm() {
            var inputValue = document.getElementById("cityInput").value;
      
            if (inputValue.trim() === "") {
                alert("Please enter some city name");
                return false; // Prevent form submission
            }
            // If input has value, allow the form to be submitted
        return true;
        }
    </script>
</body>
</html>