Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
        <div class="box">
            <div class="text">
                <form id="selections">
                    <select id="options-month">
                        <option disabled selected>Month</option>
                        <option value="Januray">January</option>
                        <option value="February">February</option>
                        <option value="March">March</option>
                        <option value="April">April</option>
                        <option value="May">May</option>
                        <option value="June">June</option>
                        <option value="July">July</option>
                        <option value="August">August</option>
                        <option value="September">September</option>
                        <option value="October">October</option>
                        <option value="November">November</option>
                        <option value="December">December</option>
                    </select>
                    <input type="number" name="Year" min="1000" max="3000" id="year-input" placeholder="Year">
                    <input type="submit" value="Go">
                </form> <!-- selections -->

                <h2><span class="todaysDay">01</span>, <span class="todaysWeekDay">Monday</span></h2>
                <p class="month">December</p>
                <p class="year">2010</p>
            </div> <!-- text -->

            <div class="dates">
                <div class="day">S</div>
                <div class="day">M</div>
                <div class="day">T</div>
                <div class="day">W</div>
                <div class="day">T</div>
                <div class="day">F</div>
                <div class="day">S</div>
            </div> <!-- dates -->
        </div> <!-- box -->
    </div> <!-- container -->
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Nunito&display=swap')

*
    margin: 0
    padding: 0
    box-sizing: border-box
body 
    font-family: 'Nunito', sans-serif
.container  
    width: 100%
    min-height: 100vh
    background-repeat: no-repeat
    background-size: cover
    background-position: center
    display: flex
    justify-content: center
    align-items: center
    position: relative
    transition: background-image 0.5s linear
    &::before
        content: ''
        position: absolute
        width: 100%
        height: 100%
        background: inherit
        filter: blur(5px) brightness(80%)
    .box    
        z-index: 1
        display: flex
        flex-direction: column
        justify-content: center
        width: 450px
        box-shadow: 0 5px 10px rgba(0,0,0, 0.6), 0 5px 15px rgba(0,0,0, 0.6)
        border-radius: 25px 
        .text
            border-top-left-radius: 25px
            border-top-right-radius: 25px
            height: 250px
            padding: 20px
            background-repeat: no-repeat
            background-size: cover
            background-position: center
            color: #ffffff
            position: relative
            transition: background-image 0.5s linear
            #selections
                text-align: center
                width: 100%
                & *
                    margin: 0 5px
                    padding: 5px 10px
                #year-input
                    width: 80px
                input[type=submit]
                    border-radius: 10px
            h2, p 
                text-shadow: 0 0 9px rgba(0,0,0,0.8)
            h2 
                font-size: 1.7em
            p 
                margin-top: 5px
                font-size: 1.3em
                letter-spacing: 2px

        .dates
            border-bottom-left-radius: 25px
            border-bottom-right-radius: 25px
            display: grid
            grid-template-columns: repeat(auto-fit, minmax(50px, 1fr))
            grid-gap: 10px
            height: 250px
            text-align: center
            justify-content: center
            align-items: center
            padding: 20px
            background: #ffffff
            color: #000
            div:nth-child(7n)
                color: red
                font-weight: bold
            .today
                background: #fbff0d
                border-radius: 10px
                font-weight: bold
              
@media ( max-width: 565px )
    .container 
        .box
            width: 350px
            .text
                height: 200px
                h2 
                    margin-top: 10px
                    font-size: 1.2em
                p 
                    margin-top: 5px
                    font-size: 1.1em
                    letter-spacing: 1px
            .dates
                grid-template-columns: repeat(7, 1fr)
                grid-gap: 0px

              
            
!

JS

              
                let date = new Date();
const todaysDay = date.getDate();
const todaysMonth = date.getMonth();
const todaysWeekDay = date.getDay();
const year = date.getFullYear();

const weekDays = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
];
const monthDays = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
]

const htmlTodaysDay = document.querySelector('.todaysDay');
const htmlTodaysWeekDay = document.querySelector('.todaysWeekDay');
const htmlMonth = document.querySelector('.month');
const htmlYear = document.querySelector('.year');
const htmlDatesDiv = document.querySelector('.dates');
const htmlSelections = document.querySelector('#selections');

const howManyDaysInMonth = daysInMonth(todaysMonth, year);
const numWeek = getFirstDayInMonth(todaysMonth, year);


htmlTodaysDay.innerHTML = todaysDay;
htmlTodaysWeekDay.innerHTML = weekDays[todaysWeekDay];
htmlMonth.innerHTML = monthDays[todaysMonth];
htmlYear.innerHTML = year;


function daysInMonth(month, year) {
    return new Date(year, month + 1, 0).getDate();
}

function getFirstDayInMonth(month, year) {
    return new Date(year, month).getDay();
}

function createElement(n, d) {
    for (let i = 0; i < n; i++) {
        let div = document.createElement('div');
        div.className = 'number';
        div.innerHTML = '';
        htmlDatesDiv.append(div);
    }
    for (let i = 1; i <= d; i++) {

        let div = document.createElement('div');
        div.className = 'number';
        div.innerHTML = i;
        htmlDatesDiv.append(div);
    }
}
createElement(numWeek, howManyDaysInMonth);

const numbers = Array.from(document.querySelectorAll('.number'));

numbers.forEach(function (number) {
    if (number.innerHTML === todaysDay.toString()) {
        number.classList.add('today');
    }
});

function monthImg(monthImg) {
    const htmlConteiner = document.querySelector('.container');
    const htmlText = document.querySelector('.text');
    switch (monthImg) {
        case 1:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2019/12/15/18/24/winter-4697776_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2019/12/15/18/24/winter-4697776_960_720.jpg")';
            break;
        case 2:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/11/12/22/42/santa-claus-1819933_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/11/12/22/42/santa-claus-1819933_960_720.jpg")';
            break;
        case 3:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2014/02/27/16/10/spring-276014_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2014/02/27/16/10/spring-276014_960_720.jpg")';
            break;
        case 4:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2014/12/04/14/46/magnolia-trees-556718_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2017/05/08/13/15/spring-bird-2295436_960_720.jpg")';
            break;
        case 5:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2014/12/17/21/30/wild-flowers-571940_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2014/12/17/21/30/wild-flowers-571940_960_720.jpg")';
            break;
        case 6:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2014/12/15/17/16/pier-569314_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2014/12/15/17/16/pier-569314_960_720.jpg")';
            break;
        case 7:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_960_720.jpg")';
            break;
        case 8:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/08/30/12/13/beach-1630540_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/08/30/12/13/beach-1630540_960_720.jpg")';
            break;
        case 9:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/09/06/15/16/autumn-1649362_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/09/06/15/16/autumn-1649362_960_720.jpg")';
            break;
        case 10:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821_960_720.jpg")';
            break;
        case 11:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2019/10/31/06/58/avenue-4591121_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2019/10/31/06/58/avenue-4591121_960_720.jpg")';
            break;
        case 12:
            htmlConteiner.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/03/09/09/21/snowflake-1245748_960_720.jpg")';
            htmlText.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/03/09/09/21/snowflake-1245748_960_720.jpg")';
            break;
    }
}
monthImg(todaysMonth + 1);

htmlSelections.addEventListener('submit', function (e) {
    e.preventDefault();
    const htmlOptionsMonth = document.querySelector('#options-month');
    const htmlYearInput = document.querySelector('#year-input');

    if (htmlOptionsMonth.value != 'Month' && htmlYearInput.value != '') {
        date = new Date(`${htmlOptionsMonth.value} ${htmlYearInput.value}`);

        const newYear = parseInt(htmlYearInput.value);
        const newMonth = monthDays.indexOf(htmlOptionsMonth.value);

        const setMonthNum = daysInMonth(newMonth, newYear);
        const setWeekDay = getFirstDayInMonth(newMonth, newYear);
        htmlDatesDiv.innerHTML = '';
        htmlDatesDiv.innerHTML = `
            <div class="day">S</div>
            <div class="day">M</div>
            <div class="day">T</div>
            <div class="day">W</div>
            <div class="day">T</div>
            <div class="day">F</div>
            <div class="day">S</div>
        `;

        createElement(setWeekDay, setMonthNum);

        monthImg(newMonth + 1);

        document.querySelector('.text h2').style.display = 'none';
        htmlMonth.innerHTML = monthDays[newMonth];
        htmlYear.innerHTML = newYear;

    }
    htmlOptionsMonth.value = 'Month';
    htmlYearInput.value = '';
})
              
            
!
999px

Console