Skip to content

Commit b63d3d9

Browse files
ShadBaltiShadBalti
authored
Merge pull request #32 from shaanguptaa/main
Fix Styling Issues for Contributor Section
2 parents 5dc4e3c + b0a5871 commit b63d3d9

File tree

3 files changed

+153
-121
lines changed

3 files changed

+153
-121
lines changed

‎index.html‎

Lines changed: 52 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8" />
56
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
67
<meta name="viewport" content="width=device-width, initial-scale=1" />
78
<meta name="author" content="ShadBalti Dilshad Hussain Shad Balti ([email protected])">
8-
<meta name="description" content="Introducing Age Calculator App, a user-friendly app that helps you calculate your age accurately in seconds. Enter your birthdate and instantly see your age in years, months, days, hours, minutes, and even seconds!">
9-
<meta name="keywords" content="Age Calculator, Age Calculator App, Age Tracker, Birthday Calculator, Date of Birth Calculator, Open Source App, Free App">
9+
<meta name="description"
10+
content="Introducing Age Calculator App, a user-friendly app that helps you calculate your age accurately in seconds. Enter your birthdate and instantly see your age in years, months, days, hours, minutes, and even seconds!">
11+
<meta name="keywords"
12+
content="Age Calculator, Age Calculator App, Age Tracker, Birthday Calculator, Date of Birth Calculator, Open Source App, Free App">
1013
<title>Age Calculator App</title>
1114
<link rel="stylesheet" href="style.css">
1215
</head>
16+
1317
<body>
1418
<div class="container">
1519
<header>
@@ -26,18 +30,21 @@ <h1>Age Calculator</h1>
2630
<div id="yourAgeContainer" style="float: left;width: 320px;height:200px">
2731
<h2>Your Age</h2>
2832
<h4>Time from your birth</h4>
29-
<p><span id="years"></span> years, <span id="months"></span> months, <span id="weeks"></span> weeks,<span id="days"></span> days
33+
<p><span id="years"></span> years, <span id="months"></span> months, <span id="weeks"></span> weeks,<span
34+
id="days"></span> days
3035
</div>
3136

32-
<div id="nextBirthday" class="nextBirthdayResults" style="display: none; float: right;width: 320px;height:200px">
37+
<div id="nextBirthday" class="nextBirthdayResults"
38+
style="display: none; float: right;width: 320px;height:200px">
3339
<h2>Next Birthday</h2>
3440
<h4>Time until next birthday</h4>
35-
<p><span id="nextBirthdayDays"></span> Days <span id="nextBirthdayHours"></span> Hours <span id="nextBirthdayMinutes"></span> Minutes <span id="nextBirthdaySeconds"></span> Seconds</p>
41+
<p><span id="nextBirthdayDays"></span> Days <span id="nextBirthdayHours"></span> Hours <span
42+
id="nextBirthdayMinutes"></span> Minutes <span id="nextBirthdaySeconds"></span> Seconds</p>
3643
</div>
37-
44+
3845
</section>
3946
<div style="clear: both;"></div>
40-
<section id="milestones" >
47+
<section id="milestones">
4148
<div id="milestonesContainer" style="float: left;width: 320px;height:250px">
4249
<h2 style="font-size: 25px;">Life Milestones</h2>
4350
<p>Retirement Age: <span id="retirementAge"></span></p>
@@ -48,48 +55,51 @@ <h2 style="font-size: 25px;">Life Milestones</h2>
4855
</div>
4956
<div id="ageInContainer" style=" float: right;width: 320px;height:250px">
5057
<h2 style="font-size: 25px;">Age In</h2>
58+
<p>Days: <span id="ageInDays"></span></p>
5159
<p>Hours: <span id="hours"></span></p>
5260
<p>Minutes: <span id="minutes"></span></p>
5361
<p>Seconds: <span id="seconds"></span></p>
5462
<p>Milliseconds: <span id="milliseconds"></span></p>
55-
</div>
63+
</div>
5664
</section>
5765
<div style="clear: both;"></div>
58-
66+
5967
</main>
6068
<div class="container">
61-
<h1 class="mt-5 mb-4">Project Contributors</h1>
62-
<div id="contributors" class="row">
63-
<!-- Contributors will be dynamically added here -->
69+
<h1 class="mt-5 mb-4">Project Contributors</h1>
70+
<div id="contributors" class="contributors-container">
71+
<!-- Contributors will be dynamically added here -->
72+
</div>
6473
</div>
65-
</div>
6674
<div>
67-
<button class="btn btn-primary"><a href="commits.html" style="text-decoration: none; color: inherit;">View Commits</a></button>
68-
</div>
75+
<button class="btn btn-primary"><a href="commits.html" style="text-decoration: none; color: inherit;">View
76+
Commits</a></button>
77+
</div>
6978
</div>
7079
<footer id="owner-section">
7180
<!-- <div class="container"> -->
72-
<div class="owner-info">
73-
<div class="info">
74-
<img src="https://upload.wikimedia.org/wikipedia/commons/6/65/Shadbalti.jpg" alt="Owner's Image" class="owner-image">
75-
<h4>Dilshad Hussain</h4>
76-
<p>Contact Information:</p>
77-
<p><i class="bi bi-telephone"></i> Phone: 03408452974</p>
78-
<p><i class="bi bi-envelope"></i> Email: [email protected]</p>
79-
<p>Physical Address: Barah Khaplu, Skardu, Pakistan</p>
80-
<p id="clock"></p> <!-- Dynamic clock -->
81-
</div>
82-
<div class="social-feed mt-3">
83-
<!-- Social media feed (use appropriate embed code or widget) -->
84-
<!-- Example Twitter embed code -->
85-
<a class="twitter-timeline" data-height="300" href="https://twitter.com/ShadBalti" data-tweet-limit="3"></a>
86-
</div>
81+
<div class="owner-info">
82+
<div class="info">
83+
<img src="https://upload.wikimedia.org/wikipedia/commons/6/65/Shadbalti.jpg" alt="Owner's Image"
84+
class="owner-image">
85+
<h4>Dilshad Hussain</h4>
86+
<p>Contact Information:</p>
87+
<p><i class="bi bi-telephone"></i> Phone: 03408452974</p>
88+
<p><i class="bi bi-envelope"></i> Email: [email protected]</p>
89+
<p>Physical Address: Barah Khaplu, Skardu, Pakistan</p>
90+
<p id="clock"></p> <!-- Dynamic clock -->
8791
</div>
88-
<div class="about-us">
89-
<h5>About Us</h5>
90-
<p>I'm Dilshad Hussain, a web developer. I love coding and creating websites that work beautifully.</p>
92+
<div class="social-feed mt-3">
93+
<!-- Social media feed (use appropriate embed code or widget) -->
94+
<!-- Example Twitter embed code -->
95+
<a class="twitter-timeline" data-height="300" href="https://twitter.com/ShadBalti" data-tweet-limit="3"></a>
9196
</div>
92-
97+
</div>
98+
<div class="about-us">
99+
<h5>About Us</h5>
100+
<p>I'm Dilshad Hussain, a web developer. I love coding and creating websites that work beautifully.</p>
101+
</div>
102+
93103
<!-- </div> -->
94104
</footer>
95105
<script src="main.js"></script>
@@ -101,14 +111,12 @@ <h5>About Us</h5>
101111
const contributorsContainer = document.getElementById('contributors');
102112
data.forEach(contributor => {
103113
const contributorCard = `
104-
<div class="col-md-4 contributor-card">
105-
<div class="card">
106-
<img src="${contributor.avatar_url}" class="card-img-top" alt="Profile Picture">
107-
<div class="card-body">
108-
<h5 class="card-title">${contributor.login}</h5>
109-
<p class="card-text">Contributions: ${contributor.contributions}</p>
110-
<a href="${contributor.html_url}" class="btn btn-primary">View Profile</a>
111-
</div>
114+
<div class="card contributor-card">
115+
<img src="${contributor.avatar_url}" class="card-img-top" alt="Profile Picture">
116+
<div class="card-body">
117+
<h5 class="card-title">${contributor.login}</h5>
118+
<p class="card-text">Contributions: ${contributor.contributions}</p>
119+
<a href="${contributor.html_url}" class="btn btn-primary">View Profile</a>
112120
</div>
113121
</div>
114122
`;
@@ -119,4 +127,5 @@ <h5 class="card-title">${contributor.login}</h5>
119127
</script>
120128
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
121129
</body>
122-
</html>
130+
131+
</html>

‎main.js‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ var countdownInterval;
33
function calculateAge() {
44
let userDate = document.getElementById('birthdate').value
55

6-
if (userDate == NaN || userDate == '') { 
6+
if (userDate == NaN || userDate == '') {
77
document.getElementById('error').style.display = 'block'
88
document.getElementById('error').textContent = 'Enter a valid date of birth. You may have not entered a complete date or entered a non-existent date information.'
99
return
@@ -28,8 +28,8 @@ function calculateAge() {
2828
const millisecondsInMonth = millisecondsInYear / 12
2929
const millisecondsInWeek = 7 * 24 * 60 * 60 * 1000
3030
const millisecondsInDay = 24 * 60 * 60 * 1000
31-
const millisecondsInHour = 60*60*1000;
32-
const millisecondsInMinute = 60*1000;
31+
const millisecondsInHour = 60 * 60 * 1000;
32+
const millisecondsInMinute = 60 * 1000;
3333
const millisecondsInSecond = 1000;
3434

3535
const years = Math.floor(ageInMilliseconds / millisecondsInYear)
@@ -40,35 +40,37 @@ function calculateAge() {
4040
const days = Math.floor(
4141
(remainingMilliseconds2 % millisecondsInWeek) / millisecondsInDay,
4242
)
43-
const ageInHours = Math.floor(ageInMilliseconds/millisecondsInHour);
44-
const ageInMinutes = Math.floor(ageInMilliseconds/millisecondsInMinute);
45-
const ageInSeconds = Math.floor(ageInMilliseconds/millisecondsInSecond);
43+
const ageInDays = Math.floor(ageInMilliseconds / millisecondsInDay);
44+
const ageInHours = Math.floor(ageInMilliseconds / millisecondsInHour);
45+
const ageInMinutes = Math.floor(ageInMilliseconds / millisecondsInMinute);
46+
const ageInSeconds = Math.floor(ageInMilliseconds / millisecondsInSecond);
4647

4748
document.getElementById('years').textContent = years
4849
document.getElementById('months').textContent = months
4950
document.getElementById('weeks').textContent = weeks
5051
document.getElementById('days').textContent = days
5152

5253
//Section Age in
53-
document.getElementById('hours').textContent = ageInHours;
54-
document.getElementById('minutes').textContent = ageInMinutes;
55-
document.getElementById('seconds').textContent = ageInSeconds;
56-
document.getElementById('milliseconds').textContent = ageInMilliseconds;
57-
58-
// Calculate life milestones
59-
const retirementAge = 65; // Change to the desired retirement age
60-
const halfLife = years / 2;
61-
const age18 = 18;
62-
const age21 = 21;
63-
const age30 = 30;
54+
document.getElementById('ageInDays').textContent = ageInDays;
55+
document.getElementById('hours').textContent = ageInHours;
56+
document.getElementById('minutes').textContent = ageInMinutes;
57+
document.getElementById('seconds').textContent = ageInSeconds;
58+
document.getElementById('milliseconds').textContent = ageInMilliseconds;
6459

65-
document.getElementById('retirementAge').textContent = retirementAge;
66-
document.getElementById('halfLife').textContent = halfLife.toFixed(2); // Show with two decimal places
67-
document.getElementById('age18').textContent = age18;
68-
document.getElementById('age21').textContent = age21;
69-
document.getElementById('age30').textContent = age30;
70-
// Add more milestones as needed
71-
if(countdownInterval){
60+
// Calculate life milestones
61+
const retirementAge = 65; // Change to the desired retirement age
62+
const halfLife = years / 2;
63+
const age18 = 18;
64+
const age21 = 21;
65+
const age30 = 30;
66+
67+
document.getElementById('retirementAge').textContent = retirementAge;
68+
document.getElementById('halfLife').textContent = halfLife.toFixed(2); // Show with two decimal places
69+
document.getElementById('age18').textContent = age18;
70+
document.getElementById('age21').textContent = age21;
71+
document.getElementById('age30').textContent = age30;
72+
// Add more milestones as needed
73+
if (countdownInterval) {
7274
clearInterval(countdownInterval)
7375
}
7476
countdownInterval = setInterval(() => calculateNextBirthday(birthdate), 1000);

0 commit comments

Comments
 (0)