index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temperature Converter</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>
<body>
    <div class="converter">
        <h1><i class="fas fa-thermometer-half"></i> Temperature Converter</h1>
        <label for="celsius">Enter Temperature in Celsius:</label>
        <input type="number" id="celsius">
        <button onclick="convertTemperature()">Convert <i class="fas fa-arrow-right"></i></button>
        <p id="result"><i id="temperature-icon" class="fas fa-temperature-high"></i> <span id="conversion-result"></span></p>
        <div class="icons">
            <i id="weather-icon" class="fas fa-sun"></i>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>