Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0643a11

Browse files
add 2 more projects
1 parent2617699 commit0643a11

File tree

6 files changed

+231
-0
lines changed

6 files changed

+231
-0
lines changed

‎projects/age-calculator/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<title>Age Calculator</title>
6+
<linkrel="stylesheet"href="style.css"/>
7+
</head>
8+
<body>
9+
<divclass="container">
10+
<h1>Age Calculator</h1>
11+
<divclass="form">
12+
<labelfor="birthday">Enter your date of birth:</label>
13+
<inputtype="date"id="birthday"name="birthday"/>
14+
<buttonid="calculate">Calculate Age</button>
15+
<pid="result"></p>
16+
</div>
17+
</div>
18+
19+
<scriptsrc="index.js"></script>
20+
</body>
21+
</html>

‎projects/age-calculator/index.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Get the elements from the DOM
2+
constbirthdayInput=document.getElementById("birthday");
3+
constcalculateButton=document.getElementById("calculate");
4+
constresultElement=document.getElementById("result");
5+
6+
// Add click event listener to the calculate button
7+
calculateButton.addEventListener("click",calculateAge);
8+
9+
// Function to calculate the age
10+
11+
functioncalculateAge(){
12+
// Get the value from the input
13+
constbirthday=birthdayInput.value;
14+
15+
// Check if the value is empty
16+
if(birthday===""){
17+
// If the value is empty, show an alert
18+
alert("Please enter your birthday");
19+
}else{
20+
// If the value is not empty, calculate the age
21+
constage=getAge(birthday);
22+
23+
// Show the result
24+
resultElement.innerHTML=`Your age is${age}${
25+
age>1 ?"years" :"year"// Check if the age is more than 1
26+
} old`;
27+
}
28+
}
29+
30+
// Function to calculate the age
31+
functiongetAge(birthDay){
32+
// Get the current date
33+
constcurrentDate=newDate();
34+
35+
// Get the birthday date
36+
constbirthdayDate=newDate(birthDay);
37+
38+
// Calculate the age
39+
constage=currentDate.getFullYear()-birthdayDate.getFullYear();
40+
41+
constmonth=currentDate.getMonth()-birthdayDate.getMonth();
42+
if(
43+
month<0||
44+
(month===0&&currentDate.getDate()<birthdayDate.getDate())
45+
){
46+
age--;
47+
}
48+
49+
// Return the age
50+
returnage;
51+
}

‎projects/age-calculator/style.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/* General styles */
2+
body {
3+
margin:0;
4+
padding:20px;
5+
font-family:"Montserrat", sans-serif;
6+
font-size:16px;
7+
line-height:1.5;
8+
background-color:#f7f7f7;
9+
}
10+
11+
.container {
12+
max-width:600px;
13+
margin:0 auto;
14+
padding:20px;
15+
background-color:#fff;
16+
box-shadow:0020pxrgba(0,0,0,0.2);
17+
border-radius:5px;
18+
}
19+
20+
h1 {
21+
font-size:36px;
22+
text-align: center;
23+
margin-top:0;
24+
margin-bottom:20px;
25+
}
26+
27+
.form {
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
}
32+
33+
label {
34+
font-weight: bold;
35+
margin-bottom:10px;
36+
}
37+
38+
input[type="date"] {
39+
padding:8px;
40+
border:1px solid#ccc;
41+
border-radius:4px;
42+
width:100%;
43+
max-width:300px;
44+
box-sizing: border-box;
45+
}
46+
47+
button {
48+
background-color:#007bff;
49+
color:#fff;
50+
border: none;
51+
padding:10px20px;
52+
border-radius:4px;
53+
margin-top:10px;
54+
cursor: pointer;
55+
transition: background-color0.2s ease;
56+
}
57+
58+
button:hover {
59+
background-color:#0062cc;
60+
}
61+
62+
#result {
63+
margin-top:20px;
64+
font-size:24px;
65+
font-weight: bold;
66+
text-align: center;
67+
}

‎projects/tip-calculator/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Tip Calculator</title>
5+
<linkrel="stylesheet"href="style.css"/>
6+
</head>
7+
<body>
8+
<divclass="container">
9+
<h1>Tip Calculator</h1>
10+
<p>Enter the bill amount and tip percentage to calculate the total.</p>
11+
<labelfor="bill">Bill amount:</label>
12+
<inputtype="number"id="bill"/>
13+
<br/>
14+
<labelfor="tip">Tip percentage:</label>
15+
<inputtype="number"id="tip"/>
16+
<br/>
17+
<buttonid="calculate">Calculate</button>
18+
<br/>
19+
<labelfor="total">Total:</label>
20+
<spanid="total"></span>
21+
</div>
22+
<scriptsrc="index.js"></script>
23+
</body>
24+
</html>

‎projects/tip-calculator/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
constcalculateBtn=document.getElementById("calculate");
2+
constbillInput=document.getElementById("bill");
3+
consttipInput=document.getElementById("tip");
4+
consttotalSpan=document.getElementById("total");
5+
6+
calculateBtn.addEventListener("click",function(){
7+
constbill=billInput.value;
8+
consttip=tipInput.value;
9+
consttotal=bill*(1+tip/100);
10+
totalSpan.innerText=`$${total.toFixed(2)}`;
11+
});

‎projects/tip-calculator/style.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* Set body styles */
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
body {
7+
background-color:#f2f2f2;
8+
font-family:"Helvetica Neue", sans-serif;
9+
}
10+
11+
/* Set container styles */
12+
.container {
13+
margin:100px auto;
14+
max-width:600px;
15+
padding:20px;
16+
box-shadow:0010pxrgba(0,0,0,0.2);
17+
background-color:#fff;
18+
border-radius:10px;
19+
}
20+
21+
/* Set heading styles */
22+
h1 {
23+
margin-top:0;
24+
text-align: center;
25+
}
26+
27+
/* Set input styles */
28+
input[type="number"] {
29+
padding:10px;
30+
border:1px solid#ccc;
31+
border-radius:4px;
32+
margin:10px0;
33+
width:100%;
34+
}
35+
36+
/* Set button styles */
37+
button {
38+
background-color:#4caf50;
39+
color: white;
40+
padding:10px;
41+
border: none;
42+
border-radius:4px;
43+
cursor: pointer;
44+
margin:10px0;
45+
width:100%;
46+
}
47+
48+
button:hover {
49+
background-color:#45a049;
50+
}
51+
52+
/* Set result styles */
53+
#total {
54+
font-size:24px;
55+
font-weight: bold;
56+
margin-top:10px;
57+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp