Glassy Date Time Weather Widget Codepen

Procedure

Step 1 - Create an HTML Structure:
Begin with an HTML file, setting the document structure, charset, viewport, and title.

Step 2 - Import the External Resources:
Import external fonts from Google Fonts for a customized look. Then, choose a background image for the entire page to enhance aesthetics.

Step 3 - Page Styling:
Style the body for a full-height display using flex properties. Design the widget container (darksoul-notifications) with a blend of colors, transparency, and shadows.

Step 4 - Create Date/Time Section:
Now, inside the widget, create a section (datetime) to display the day of the week and real-time clock. Apply styles to enhance visibility and aesthetic appeal.

Step 5 - Create Weather Section:
Next, Design a section (weather) for weather information, incorporating notification icons and a combination of weather description and icon.

Step 6 - Make the Design Responsive:
Implement media queries to ensure the widget adapts gracefully to smaller screens, adjusting dimensions and styles accordingly.

Step 7 - Add JavaScript Functionality:
At the end of the body, add a script section to handle dynamic content. Use JavaScript to update the day of the week and real-time clock every second, providing a real-time experience for users. Leverage asynchronous operations for smooth animations, enhancing the visual appeal. Consider using JS for interactive elements, such as future enhancements or dynamic weather updates based on user location. Ensure the JS code is modular, making it easy to maintain and extend in the future.

Html

<!DOCTYPE html>
    <html lang="en">
    <head>
         /* Internal styles goes here.. */
    </head>
    <body>
        <div class="darksoul-notifications">
            <div class="datetime">
                <h4 id="day"></h4>
                <p id="time"></p>
            </div>
            <div class="weather">
                <div class="noti-icons">
                    <img width="20" height="20" src="https://img.icons8.com/external-sbts2018-lineal-color-sbts2018/58/FFFFFF/external-notification-ecommerce-basic-1-sbts2018-lineal-color-sbts2018.png" alt="external-notification-ecommerce-basic-1-sbts2018-lineal-color-sbts2018"/> </div>
                <div class="combine">   
                    <h4>Fog</h4>
                    <img width="64" height="64" src="https://img.icons8.com/fluency/48/fog-night.png" alt="fog-night"/>
                </div>
            </div>
        </div>
        <p class="disclaimer">Designed & Created by <a href="https://darksoul-codepen.github.io/" target="_blank">DarkSoul</a> | Icons by <a href="https://icons8.com/" target="_blank">Icons8</a></p>
        /* Script goes here.. */
    </body>
    </html>

Css

@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Rubik+Vinyl&display=swap');
   
    body
    {
        margin: 0;
        height: 100vh;
        width: 100%;
        display: flex;
        background-image: url("https://darksoul-codepen.github.io/DarkSoul.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        font-family: 'Belanosima', sans-serif;
        color: #564d93;
    }
    .darksoul-notifications
    {
        margin: auto;
        width: 350px;
        height: 20%;
        background-color: rgba(255, 255, 255, 0);
        box-shadow: 0.5px 0.5px 2px #ffffff,50px 50px 200px #8677e2,50px 50px 200px #39306e, -0.5px -0.5px 2px #ffffff;
        border-radius: 0px 10px 0px;
        backdrop-filter: blur(7px);
        display: flex;
        animation-name: anim;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 0s;
        animation-iteration-count: infinite;
       
    }
    .datetime
    {
        height: 100%;
        width: 50%;
        display: flex;
        flex-direction: column;
    }
    .datetime h4
    {
        margin: auto;
        margin-bottom: 1px;
        margin-left: 20px;
    }
    .datetime p
    {
        margin: auto;
        font-size: 65px;
        margin-top: 1px;
    }
    .weather
    {
        margin: auto;
        margin-right: 0px;
        display: flex;
        width: 50%;
        height: 100%;
        flex-direction: column;
        
        border-radius: 300px 30px 0px 0px;
        backdrop-filter: blur(500px);
        background-color: #ffffff4c;
    }
    .noti-icons
    {
        width: 100%;
        height: 30%;
        margin: auto;
        display: flex;
    }
    .noti-icons img
    {
        margin: auto;
        margin-right: 5px;
        margin-top: 5px;
        padding: 5px;
       
        background-color: rgba(125, 112, 213, 0.663);
        border-radius: 50%;
    }
    .noti-icons img:hover
    {
        background-color: #7d70d5;
        border-radius: 50%;
        cursor: pointer;
    }
 
    .combine
    {
        height: 80%;
        margin: auto;
        display: flex;
        width: 70%;
    }
    
    .combine h4
    {
        margin-top: 1px;
        margin: auto;
        color: white;
    }
    .combine img
    {
        margin-top: 1px;
        margin: auto;
    }
    @keyframes anim 
    {
        0%
        {
            transform: translateY(0px) translateX(0px);
        }
        50%
        {
            transform: translateY(10px) translateX(5px);
        }
        100%
        {
            transform: translateY(0px) translateX(0px);
        }
    }
    @media only screen and (max-width: 600px) 
    {
        .darksoul-notifications
        {
            margin: auto;
            width: 90%;
            height: 20%;
            background-color: rgba(255, 255, 255, 0);
            box-shadow: 0.5px 0.5px 2px #ffffff,50px 50px 200px #8677e2,50px 50px 200px #39306e, -0.5px -0.5px 2px #ffffff;
            border-radius: 0px 10px 0px;
            backdrop-filter: blur(7px);
            display: flex;
            animation-name: anim;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
        }    
    }
    .disclaimer
    {
        position: absolute;
        bottom: 0px; 
        left: 0; 
        margin-left: auto; 
        right: 0; 
        margin-right: auto; 
        width: fit-content;
        color: rgb(0, 0, 0);
        text-align: center;
    }
    .disclaimer a
    {
        text-decoration: none;
        color: #584f95;
    }
    .disclaimer a:hover
    {
        font-weight: bolder;
    }
    ::selection
    {
        background-color: #453b7b;
        color: white;
    }

Glassy date, time & weather widget CodePen

CodePen

Procedure

Html

Css

Js

Output Screenshot