HTML/CSS - Digital Watch⌚⛅️🌡 Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Digital Watch</title>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width initial-scale=1.0"/>
        <link type="text/css" rel="stylesheet" href="styles.css"/>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    </head>
    <body>
        <div class="watch-body">  
            <div class="screen">
                <div class="city">
                    <div class="inner">
                        <input id="input" type="text" placeholder="LONDON - (change city)"  autofocus/>
                    </div>
                </div>
                <div class="atmosphere">
                    <div id="temp">
                            00°C
                    </div>
                    <span id="icon" class="material-symbols-outlined">
                        umbrella
                    </span>
                    <!-- <img id="mood" src="https://openweathermap.org/img/wn/04n.png"/> -->

css

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@800&family=Quicksand&family=Sora:wght@500&display=swap");
body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    color:  white;
    font-family: Barlow, Arial, sans-serif;
    background: linear-gradient(90deg,  rgb(0, 0, 0) 10%,  rgb(38, 38, 38));
    background-attachment: fixed;
    filter: blur(14px);
    transition: filter 0.5s;
}
.watch-body {
    position: relative;
    padding: 0.6rem;
    border-radius: 40px;
    background-color:  black;
    box-shadow: inset 2px 2px 5px  #B3B3B3, inset -2px -2px 5px 2px  #262626;
}
.screen {
    position: relative;
    top: 1px;
    width: 200px;
    height: 220px;

window.onload = () => {
    // list of relevant icons
    const icons = {
        a01d: 'sunny', a01n: 'clear_night',
        a02: 'partly_cloudy_day', a03: 'cloud', '03n': 'cloud',
        a04: 'filter_drama', a09: 'rainy',
        a10: 'umbrella', a11: 'thunderstorm',
        a13: 'ac_unit', a50: 'foggy'
    };
    
    // object with methods that fetch, process
    // and manipulate weather data.
    const getWeather = {
        apiKey: 'fcd2edb074aa9dda40c24766ab635eef',
        fetchData: 
            async function (city) {
                try {
                    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${this.apiKey}`);
                    const data = await response.json();
                    this.showData(data);
                    // console.log(data);
                } catch {
                    //pass
                };
            },
        showData: data => {
            // destructure attributes 
            const { icon, main } = data.weather[0];

BROWSER

Console