Age calculator | Vivek Singh

HTML

CSS

JAVA SCRIPT

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        <div class="container">
                            <div class="cal-button">
                                <input type="text" name="date" id="date"  onfocus="(this. type='date')"
                                placeholder="Select your birthdate">
                                <button onclick="calculateAge()">Calculate</button>
                            </div>
                            <div class="age-result">
                                <div class="items">
                                    <span id="years" class="count">0</span>
                                    <p>Year</p>
                                </div>
                                <div class="items">
                                    <span id="months" class="count">0</span>
                                    <p>Month</p>
                                </div>
                                <div class="items">
                                    <span id="days" class="count">0</span>
                                    <p>Day</p>
                                </div>
                            </div>
                        </div>

Copy Code

If Code is not visible please click on HIGHLIGHT area

                            .container{
                                width: 500px;
                                background-color: #fff;
                                padding: 30px;
                            }

                            .container .cal-button{
                                width: 100%;
                                padding: 15px 10px;
                                background-color: #f5f5f5;
                                margin-bottom: 30px;
                                box-shadow: 0px 5px 16px -8px rgba(0,0,0,0.2);
                            }

                            .container .cal-button input{
                                width: 70%;
                                padding: 10px 15px;
                                background-color: #fff;
                                outline: none;
                                border: 1px solid #0093E9;
                            }

                            .container .cal-button button{
                                outline: none;
                                border: 1px solid #0093E9;
                                padding: 10px 15px;
                                background-color: #0093E9;
                                color: #fff;
                                margin-left: 3%;
                                width: 25%;
                                cursor: pointer;
                            }

                            .container .age-result{
                                width: 100%;
                                display: inline-flex;
                                gap: 30px;
                                flex-wrap: wrap;
                            }

                            .container .age-result .items{
                                padding: 15px;
                                background-color: #f5f5f5;
                                flex: 1 1 ;
                                text-align: center;
                                box-shadow: 0px 5px 16px -8px rgba(0,0,0,0.2);
                            }

                            .container .age-result .items span{
                                font-size: 30px;
                                font-weight: 600;
                                transition: all 300ms linear;
                            }

                            @media (max-width:767px){
                                .container{
                                    width: 95%;
                                    margin: auto;
                                }

                                .container .cal-button input{
                                    width: 100%;
                                    margin-bottom: 10px;
                                }
                                
                                .container .cal-button button{
                                    width: 100%;
                                    margin: 0;
                                }

                                .container .age-result .items{
                                    flex: 1 1 100px;
                                }
                                
                            }

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        function countUp(element, value) {
                            const start = 0;
                            const duration = 1000; // 2 seconds
                            const step = (value - start) / (duration / 16);
                
                            let current = start;
                
                            const updateValue = () => {
                                current += step;
                                if (current < value) {
                                    element.textContent = Math.floor(current);
                                    requestAnimationFrame(updateValue);
                                } else {
                                    element.textContent = value;
                                }
                            };
                
                            updateValue();
                        }
                
                        function calculateAge() {
                            const inputDate = new Date(document.getElementById("date").value);
                            const currentDate = new Date();
                
                            const ageInMilliseconds = currentDate - inputDate;
                            const ageInSeconds = ageInMilliseconds / 1000;
                            const ageInMinutes = ageInSeconds / 60;
                            const ageInHours = ageInMinutes / 60;
                            const ageInDays = ageInHours / 24;
                
                            const years = Math.floor(ageInDays / 365);
                            const months = Math.floor((ageInDays % 365) / 30);
                            const days = Math.floor(ageInDays % 30);
                
                            countUp(document.getElementById("years"), years);
                            countUp(document.getElementById("months"), months);
                            countUp(document.getElementById("days"), days);
                        }