[go: up one dir, main page]
Scribd
Upload
72 views28 pages

123 Kamble Aditya CSS

This document is a project report for an Age Calculator application created using HTML, CSS, and JavaScript. The report includes an introduction describing the features and functionality of the Age Calculator app. It also includes the HTML, CSS, and JavaScript code used to build the application.

Uploaded by

Aditya kamble
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
72 views28 pages

123 Kamble Aditya CSS

This document is a project report for an Age Calculator application created using HTML, CSS, and JavaScript. The report includes an introduction describing the features and functionality of the Age Calculator app. It also includes the HTML, CSS, and JavaScript code used to build the application.

Uploaded by

Aditya kamble
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

A

PROJECT REPORT ON

“AGE CALCULATOR”
Subject – Client Side Scripting Language (22517)

SUBMITTED BY
Kamble Aditya Balasaheb (200340414)

Submitted to

Sanjivani Rural Education Society’s


Sanjivani. K. B. P. Polytechnic,
Kopargaon-423 601

Affiliated to

Maharashtra State Board of Technical Education (MSBTE), Mumbai


SANJIVANI K. B. P. POLYTECHNIC, KOPARGAON
Department of Computer Technology

CERTIFICATE
This is to certify that Mr Kamble Aditya Balasaheb , a student of Department of
Computer Technology having Enrollment No.:2000340414 has completed the micro
project satisfactorily in the subject Client Side Scripting language (CSS) (22517) for the
Academic
Year: 2022-23 & Sem: Fifth(ODD) as prescribed in the curriculum on

“AGE CALCULATOR”

Place: Date:

Mr. V. Lachake Mr. G.N Jorvekar Mr. A.R Mirikar


Course Teacher H.O.D Principal

Seal of
Institute
MAHARASHTRA STATE BOARD OF TECHNICAL
EDUCATION, MUMBAI

EXAMINERS CERTIFICATE

This is to certify that the project work entitled

“AGE CALCULATOR”
Submitted by Kamble
Aditya Balasaheb (2000340414)

For the partial fulfilment of the requirement of Diploma in Computer


Technology is examined and certified

Internal Examiner External Examiner


(Name of Internal) (Name of External)

Date:
Place: Kopargaon
INTRODUCTION

 Age calculator android project as the name indicate is used to calculate any persons
present age and make analysis for future reference. To start using this android project,
you need to fill the information of persons as contact list and get required information in just one click.
Even not this, using the edit option you can makes changes to the saved data and if such data is not
required, you may delete such contacts.
To make your work more identical, you can add images to particular person’s profile, so that it can
easily be recognized.

Features of this project:


1. This system will automatically integrate with server date and time or your local system time and
information will be provided in the format of years, months, hours, days, and minutes and in seconds.
2. You can add important events date for your particular friends by knowing their birthdays.
3. To make your friends recognizable, you can add their profile pictures and other contact information’s.
HMTL CODING: -

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="shortcut icon" href="assests/age-calculator.png" type="image/x-icon" />

<link rel="stylesheet" href="style.css" />

<title>Age Calculator</title>

</head>

<div></div>

<body>

<div class="hedi">Age Calculator</div>

<div class="container">

<div class="inputs-wrapper">

<input type="date" id="date-input">

<button onclick="ageCalculate()">Calculate</button>

</div>

<div class="outputs-wrapper">

<div>

<span id="years">

</span>

<p>

Years
</p>

</div>

<div>

<span id="months">

</span>

<p>

Months

</p>

</div>

<div>

<span id="days">

</span>

<p>

Days

</p>

</div>

</div>

</div>

<footer>

<p>

Disigned & Developed by <span style="Color:red; "> Aditya Kamble</span>

</p>

</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"

integrity="sha512-
qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="

crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="precise-range.min.js"></script>

<script src="script.js"></script>

</body>

</html>

CASH CADING STYLESHEET (CSS):

*{

padding: 0;

margin: 0;

box-sizing: border-box;

font-family: 'sans';

@font-face {

font-family: 'sans';

src: url(font/sans.ttf);

body {

background-color: #19172e;

.container{

width: 40%;

min-width: 300px;

position: absolute;

transform: translate(-50%,-50%);
left: 50%;

top: 50%;

.container *{

font-family: "Poppins",sans-serif;

border: none;

outline: none;

.inputs-wrapper{

background-color: #080808;

padding: 30px 25px;

border-radius: 8px;

box-shadow: 0 15px 20px rgba(0,0,0,0.3);

margin-bottom: 50px;

input,

button{

height: 50px;

background-color: #ffffff;

color: #080808;

font-weight: 500;

border-radius: 5px;

input{

width: 60%;

padding: 0 20px;

font-size: 14px;

button{

width: 30%;
float: right;

.outputs-wrapper{

width: 100%;

display: flex;

justify-content: space-between;

.outputs-wrapper div{

height: 100px;

width: 100px;

background-color: #080808;

border-radius: 5px;

color: #ffffff;

display: grid;

place-items: center;

padding: 20px 0;

box-shadow: 0 15px 20px rgba(0,0,0,0.3);

span{

font-size: 30px;

font-weight: 500;

p{

font-size: 14px;

color: #707070;

font-weight: 400;

footer {

color: white;
position: fixed;

text-align: center;

font-size: 1rem;

left: 0;

right: 0;

bottom: 0;

padding: 5px;

line-height: 3vh;

footer a:visited {

color: inherit;

@media (max-width: 800px) {

.container {

width: 80%;

.container #display {

font-size: 20px;

color: #fff;

padding-bottom: 61px;

.container code {

font-size: 0.875em;

color: #d63384;

word-wrap: break-word;
}

.hedi{

justify-content: center;

font-size: 50px;

text-align: center;

color: #fff;

padding-top: 20px;

.foot{

position: fixed;

JAVASCRIPT:

/** Declare the required variable with DOM elements. */

const yearField = document.getElementById('year');

const monthField = document.getElementById('month');

const dayField = document.getElementById('day');

const calculateButton = document.getElementById('calculate-age');

const display = document.getElementById('display');

const today = new Date();

let selectedYear = today.getFullYear(),

selectedMonth = today.getMonth() + 1,

selectedDay = today.getDate(),

daysOfMonths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
window.addEventListener('DOMContentLoaded', () => {

updateDaysOfMonths(today.getFullYear());

fillYearField();

updateDayField(today.getFullYear(), today.getMonth() + 1);

selectMonth(today.getMonth() + 1);

selectDay(today.getDate());

yearField.addEventListener('change', handleYearChange);

monthField.addEventListener('change', handleMonthChange);

dayField.addEventListener('change', handleDayChange);

calculateButton.addEventListener('click', handleAgeCalculation);

});

/**

* Check if a year is a leap year or not.

* @param {number} year

* @returns boolean true if this is a leap year, false otherwise.

*/

function isLeapYear(year) {

if (year % 400 === 0) return true;

if (year % 100 === 0) return false;

if (year % 4 === 0) return true;

return false;

/**

* Update the february month on year value change.

* If the year is a leap year that means the february month

* would be 29 days long, otherwise it's 28.


*

* @param {number} year

*/

function updateDaysOfMonths(year) {

daysOfMonths[1] = isLeapYear(year) ? 29 : 28;

/**

* Update the month field value.

* @param {number} month

*/

function selectMonth(month) {

monthField.value = month;

/**

* Update the day field value.

* @param {number} day

*/

function selectDay(day) {

dayField.value = day;

/**

* Fill the year field with the last 100 years.

*/

function fillYearField() {

const numberOfYears = 100;


const currentYear = today.getFullYear();

const startYear = currentYear - numberOfYears;

for (let i = startYear; i <= currentYear; i++) {

const option = document.createElement('option');

option.value = i;

option.textContent = i;

i === currentYear && option.setAttribute('selected', 'selected');

yearField.appendChild(option);

/**

* Update the day field on change of year and month value.

* This is needed to update the day field list with the change

* of the month field as the months contain different value.

* It is needed to change with year as the days change with leap year as well.

* @param {number} year

* @param {number} month

*/

function updateDayField(year, month) {

updateDaysOfMonths(year);

const totalDays = daysOfMonths[month - 1];

clearList(dayField);

console.log({ selectedDay });

for (let i = 1; i <= totalDays; i++) {

const option = document.createElement('option');


option.value = i;

option.textContent = i;

if (i === selectedDay) option.setAttribute('selected', 'selected');

dayField.appendChild(option);

/**

* Clear a select element's options.

* @param {HTMLSelectElement} element

*/

function clearList(element) {

for (let i = element.options.length - 1; i >= 1; i--) {

element.remove(i);

/**

* Create a Date object with the selected year, month, day.

* @returns {Date}

*/

function makeDate() {

return new Date(selectedYear, selectedMonth - 1, selectedDay);

/**

* The yearn field's change handler function.


*

* @param {ChangeEvent} event

*/

function handleYearChange(event) {

event.preventDefault();

const { value } = event.target;

selectedYear = +value;

updateDayField(value, selectedMonth);

const months = [31,28,31,30,31,30,31,31,30,31,30,31];

function ageCalculate(){

let today = new Date();

let inputDate = new Date(document.getElementById("date-input").value);

let birthMonth,birthDate,birthYear;

let birthDetails = {

date:inputDate.getDate(),

month:inputDate.getMonth()+1,

year:inputDate.getFullYear()

let currentYear = today.getFullYear();

let currentMonth = today.getMonth()+1;

let currentDate = today.getDate();

leapChecker(currentYear);

if(

birthDetails.year > currentYear ||


( birthDetails.month > currentMonth && birthDetails.year == currentYear) ||

(birthDetails.date > currentDate && birthDetails.month == currentMonth && birthDetails.year == currentYear)

){

alert("Not Born Yet");

displayResult("-","-","-");

return;

birthYear = currentYear - birthDetails.year;

if(currentMonth >= birthDetails.month){

birthMonth = currentMonth - birthDetails.month;

else{

birthYear--;

birthMonth = 12 + currentMonth - birthDetails.month;

if(currentDate >= birthDetails.date){

birthDate = currentDate - birthDetails.date;

else{

birthMonth--;

let days = months[currentMonth - 2];

birthDate = days + currentDate - birthDetails.date;

if(birthMonth < 0){

birthMonth = 11;

birthYear--;

}
displayResult(birthDate,birthMonth,birthYear);

function displayResult(bDate,bMonth,bYear){

document.getElementById("years").textContent = bYear;

document.getElementById("months").textContent = bMonth;

document.getElementById("days").textContent = bDate;

function leapChecker(year){

if(year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)){

months[1] = 29;

else{

months[1] = 28;

if (typeof moment === 'undefined' && typeof require === 'function') {

var moment = require('moment');

(function (moment) {

var STRINGS = {

nodiff: '',

year: 'year',

years: 'years',

month: 'month',

months: 'months',

day: 'day',

days: 'days',
hour: 'hour',

hours: 'hours',

minute: 'minute',

minutes: 'minutes',

second: 'second',

seconds: 'seconds',

delimiter: ' ',

};

function pluralize(num, word) {

return num + ' ' + STRINGS[word + (num === 1 ? '' : 's')];

function buildStringFromValues(yDiff, mDiff, dDiff, hourDiff, minDiff, secDiff) {

var result = [];

if (yDiff) {

result.push(pluralize(yDiff, 'year'));

if (mDiff) {

result.push(pluralize(mDiff, 'month'));

if (dDiff) {

result.push(pluralize(dDiff, 'day'));

if (hourDiff) {

result.push(pluralize(hourDiff, 'hour'));

if (minDiff) {

result.push(pluralize(minDiff, 'minute'));
}

if (secDiff) {

result.push(pluralize(secDiff, 'second'));

return result.join(STRINGS.delimiter);

function buildValueObject(yDiff, mDiff, dDiff, hourDiff, minDiff, secDiff, firstDateWasLater) {

return {

years: yDiff,

months: mDiff,

days: dDiff,

hours: hourDiff,

minutes: minDiff,

seconds: secDiff,

firstDateWasLater: firstDateWasLater,

};

moment.fn.preciseDiff = function (d2, returnValueObject) {

return moment.preciseDiff(this, d2, returnValueObject);

};

moment.preciseDiff = function (d1, d2, returnValueObject) {

var m1 = moment(d1),

m2 = moment(d2),

firstDateWasLater;

m1.add(m2.utcOffset() - m1.utcOffset(), 'minutes'); // shift timezone of m1 to m2


if (m1.isSame(m2)) {

if (returnValueObject) {

return buildValueObject(0, 0, 0, 0, 0, 0, false);

} else {

return STRINGS.nodiff;

if (m1.isAfter(m2)) {

var tmp = m1;

m1 = m2;

m2 = tmp;

firstDateWasLater = true;

} else {

firstDateWasLater = false;

var yDiff = m2.year() - m1.year();

var mDiff = m2.month() - m1.month();

var dDiff = m2.date() - m1.date();

var hourDiff = m2.hour() - m1.hour();

var minDiff = m2.minute() - m1.minute();

var secDiff = m2.second() - m1.second();

if (secDiff < 0) {

secDiff = 60 + secDiff;

minDiff--;

if (minDiff < 0) {

minDiff = 60 + minDiff;

hourDiff--;
}

if (hourDiff < 0) {

hourDiff = 24 + hourDiff;

dDiff--;

if (dDiff < 0) {

var daysInLastFullMonth = moment(m2.year() + '-' + (m2.month() + 1), 'YYYY-MM')

.subtract(1, 'M')

.daysInMonth();

if (daysInLastFullMonth < m1.date()) {

// 31/01 -> 2/03

dDiff = daysInLastFullMonth + dDiff + (m1.date() - daysInLastFullMonth);

} else {

dDiff = daysInLastFullMonth + dDiff;

mDiff--;

if (mDiff < 0) {

mDiff = 12 + mDiff;

yDiff--;

if (returnValueObject) {

return buildValueObject(yDiff, mDiff, dDiff, hourDiff, minDiff, secDiff, firstDateWasLater);

} else {

return buildStringFromValues(yDiff, mDiff, dDiff, hourDiff, minDiff, secDiff);

};

})(moment);
CONCLUSION
At the end, exact human age is required to be calculated in many sectors for various purposes.

With the development of technology, use of software is preferred to manual hand calculation of age.

Although this Age Calculator Android Project is developed as a semester

Android app development project, it seems to have bright future and scope in all Android devices.
It was a great experience to design and implement the Swing using Advanced
Java programming and also to work on its documentation. This project helped me in getting
the better understanding of Swings and AWT Components of Advanced Java Programming.
After doing this project, I am in position to explain concepts of Advanced Java Programming
and apply them to the modelling of real-world systems by utilizing its offered facilities. I am
now able to handle events of AWT and swing components and also develop programs using
networking concepts.

You might also like