bringing calculator and heading block at center of the page

Rafiul-Omar2022 · Rafiul-Omar2022 · commit c1c634400236 · 2023-07-27T16:41:06.000+06:00
diff --git a/Projects/Age Calculator/index.html b/Projects/Age Calculator/index.html
@@ -1,75 +1,78 @@
 <!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">
     <title>Age Calculator</title>
     <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
     <div class="container">
         <div class="calculator">
             <h1>Age Calculator</h1>
             <div class="input-box">
-                
+
                 <input type="date" id="date">
                 <button onclick="calculateAge()">Calculate</button>
             </div>
             <p id="result"></p>
         </div>
-        
+
     </div>
 
     <script>
-        let userInput=document.getElementById("date")
-        userInput.max=new Date().toISOString().split("T")[0];
+        let userInput = document.getElementById("date")
+        userInput.max = new Date().toISOString().split("T")[0];
 
-        let result=document.getElementById("result");
+        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();
+        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 today = new Date();
 
-            let d2=today.getDate();
-            let m2=today.getMonth()+1;
-            let y2=today.getFullYear();
+            let d2 = today.getDate();
+            let m2 = today.getMonth() + 1;
+            let y2 = today.getFullYear();
 
-            let d3,m3,y3;
+            let d3, m3, y3;
 
-            y3=y2-y1;
-            if(m2>=m1){
-                m3=m2-m1;
+            y3 = y2 - y1;
+            if (m2 >= m1) {
+                m3 = m2 - m1;
             }
-            else{
+            else {
                 y3--;
-                m3=12+m2-m1;
+                m3 = 12 + m2 - m1;
             }
-            if(d2>=d1){
-                d3=d2-d1;
+            if (d2 >= d1) {
+                d3 = d2 - d1;
             }
-            else{
+            else {
                 m3--;
-                d3=getDaysInMonth(y1,m1)+d2-d1;
+                d3 = getDaysInMonth(y1, m1) + d2 - d1;
             }
-            if(m3<0){
-                m3=11;
+            if (m3 < 0) {
+                m3 = 11;
                 y3--;
             }
-            result.innerHTML=`You are <span>${y3}</span> years, <span>${m3}</span> months and <span>${d3}</span> days old `;
+            result.innerHTML = `You are <span>${y3}</span> years, <span>${m3}</span> months and <span>${d3}</span> days old `;
 
 
 
 
         }
-        function getDaysInMonth(year,month){
-            return new Date(year,month,0).getDate();
+        function getDaysInMonth(year, month) {
+            return new Date(year, month, 0).getDate();
         }
 
     </script>
 </body>
+
 </html>
diff --git a/Projects/Age Calculator/style.css b/Projects/Age Calculator/style.css
@@ -5,19 +5,22 @@
     box-sizing: border-box;
 }
 .container{
+    display: flex;
+    justify-content: center;
     width: 100%;
     min-height: 100vh;
     background: linear-gradient(90deg, rgba(9,9,121,1) 8%, rgba(0,241,255,1) 100%, rgba(0,212,255,1) 100%);
     color: #fff;
-    padding: 10px;
 }
 .calculator{
     width: 100%;
     max-width: 600px;
     margin-left: 10%;
     margin-top: 10%;
+    margin-right: 10%;
 }
 .calculator h1{
+    text-align: center;
     font-size: 60px;
     color: #ffff76;
 }

Original file line number	Diff line number	Diff line change
`@@ -5,19 +5,22 @@`
`5`	`5`	`box-sizing: border-box;`
`6`	`6`	`}`
`7`	`7`	`.container{`
	`8`	`+ display: flex;`
	`9`	`+ justify-content: center;`
`8`	`10`	`width: 100%;`
`9`	`11`	`min-height: 100vh;`
`10`	`12`	`background: linear-gradient(90deg, rgba(9,9,121,1) 8%, rgba(0,241,255,1) 100%, rgba(0,212,255,1) 100%);`
`11`	`13`	`color: #fff;`
`12`		`- padding: 10px;`
`13`	`14`	`}`
`14`	`15`	`.calculator{`
`15`	`16`	`width: 100%;`
`16`	`17`	`max-width: 600px;`
`17`	`18`	`margin-left: 10%;`
`18`	`19`	`margin-top: 10%;`
	`20`	`+ margin-right: 10%;`
`19`	`21`	`}`
`20`	`22`	`.calculator h1{`
	`23`	`+ text-align: center;`
`21`	`24`	`font-size: 60px;`
`22`	`25`	`color: #ffff76;`
`23`	`26`	`}`