diff --git a/Age-calculator/.DS_Store b/Age-calculator/.DS_Store new file mode 100644 index 0000000..667f746 Binary files /dev/null and b/Age-calculator/.DS_Store differ diff --git a/Age-calculator/README.md b/Age-calculator/README.md new file mode 100644 index 0000000..bf59a6e --- /dev/null +++ b/Age-calculator/README.md @@ -0,0 +1,6 @@ +Age calculator website- + +This is a simple Age calculator website created with the help of HTML, CSS and JS.\ +It not only gives us the year but also the number of days and months!\ + +Feel free to improve this code if interested!} \ No newline at end of file diff --git a/Age-calculator/age_cal.css b/Age-calculator/age_cal.css new file mode 100644 index 0000000..44aeeb4 --- /dev/null +++ b/Age-calculator/age_cal.css @@ -0,0 +1,81 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + box-sizing: border-box; +} + +.container{ + width: 100%; + min-height: 100vh; + background: linear-gradient(135deg, rgb(213, 3, 3), yellow); + color: #fff; + padding: 10px; +} + +.calculator{ + width: 100%; + max-width: 600px; + margin-left: 10%; + margin-top: 10%; +} + +.calculator h1{ + font-size: 60px; +} + +.calculator h1 span{ + color: rgb(55, 244, 3); +} + +.input-box{ + margin: 40px 0; + padding: 35px; + border-radius: 10px; + background: rgba(255, 255, 255, 0.3); + display: flex; + align-items: center; +} + +.input-box input{ + flex: 1; + margin-right: 20px; + padding: 14px 20px; + border: 0; + outline: 0; + font-size: 18px; + border-radius: 5px; + position: relative; +} + +.input-box button{ + background: rgb(55, 244, 3); + border: 0; + outline: 0; + padding: 15px 30px; + border-radius: 5px; + font-weight: 500; + color: #333; + cursor: pointer; +} + +.input-box input::-webkit-calendar-picker-indicator{ + top: 0; + left: 0; + right: 0; + bottom: 0; + width: auto; + height: auto; + position: absolute; + background-position: calc(100% - 10px); + background-size: 30px; + cursor: pointer; +} + +#result{ + font-size: 20px; +} + +#result span{ + color: rgb(55, 244, 3); +} \ No newline at end of file diff --git a/Age-calculator/age_cal.html b/Age-calculator/age_cal.html new file mode 100644 index 0000000..aaae34f --- /dev/null +++ b/Age-calculator/age_cal.html @@ -0,0 +1,22 @@ + + + + + + Age calculator + + + +
+
+

Simple Javascript
age calculator

+
+ + +
+

+
+
+ + + \ No newline at end of file diff --git a/Age-calculator/age_cal.js b/Age-calculator/age_cal.js new file mode 100644 index 0000000..effc9bd --- /dev/null +++ b/Age-calculator/age_cal.js @@ -0,0 +1,39 @@ +let userInput = document.getElementById("date") +userInput.max = new Date().toISOString().split("T")[0]; +let result = document.getElementById("result"); +function calculateAge(){ + let birthDate = new Date(userInput.value) + let d1 = birthDate.getDate(); + let m1 = birthDate.getMonth() + 1; + let y1 = birthDate.getFullYear(); + let today = new Date() + let d2 = today.getDate(); + let m2 = today.getMonth() + 1; + let y2 = today.getFullYear(); + let d3, m3, y3; + y3 = y2 - y1; + if(m2 > m1) + { + m3 = m2 - m1; + } + else{ + y3--; + m3 = 12 + m2 - m1; + } + if(d2 >= d1){ + d3 = d2 - d1; + } + else{ + m3--; + d3 = getDaysInMonth(y1 , m1) + d2 - d1; + } + if(m3<0){ + m3 = 11; + y3--; + } + result.innerHTML = `You are ${y3} years, ${m3} months and ${d3} days old`; +} + +function getDaysInMonth(year,month){ + return new Date(year, month, 0).getDate(); +} \ No newline at end of file