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

Commitcde2cb9

Browse files
update last 4 projects
1 parent0894ef2 commitcde2cb9

File tree

9 files changed

+140
-154
lines changed

9 files changed

+140
-154
lines changed

‎projects/age-calculator/index.html

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<metacharset="UTF-8"/>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8">
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
57
<title>Age Calculator</title>
6-
<linkrel="stylesheet"href="style.css"/>
7-
</head>
8-
<body>
8+
<linkrel="stylesheet"href="style.css">
9+
</head>
10+
<body>
911
<divclass="container">
10-
<h1>Age Calculator</h1>
11-
<divclass="form">
12-
<labelfor="birthday">Enteryour date of birth:</label>
13-
<inputtype="date"id="birthday"name="birthday"/>
14-
<buttonid="calculate">Calculate Age</button>
15-
<pid="result"></p>
16-
</div>
12+
<h1>Age Calculator</h1>
13+
<divclass="form">
14+
<labelfor="birthday">Enteryou date of birth</label>
15+
<inputtype="date"id="birthday"name="birthday">
16+
<buttonid="btn">Calculate Age</button>
17+
<pid="result">Your age is 21 years old</p>
18+
</div>
1719
</div>
1820

1921
<scriptsrc="index.js"></script>
20-
</body>
21-
</html>
22+
</body>
23+
</html>

‎projects/age-calculator/index.js

Lines changed: 13 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,31 @@
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
1+
constbtnEl=document.getElementById("btn");
2+
constbirthdayEl=document.getElementById("birthday");
3+
constresultEl=document.getElementById("result");
104

115
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
6+
constbirthdayValue=birthdayEl.value;
7+
if(birthdayValue===""){
188
alert("Please enter your birthday");
199
}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`;
10+
constage=getAge(birthdayValue);
11+
resultEl.innerText=`Your age is${age}${age>1 ?"years" :"year"} old`;
2712
}
2813
}
2914

30-
// Function to calculate the age
31-
functiongetAge(birthDay){
32-
// Get the current date
15+
functiongetAge(birthdayValue){
3316
constcurrentDate=newDate();
34-
35-
// Get the birthday date
36-
constbirthdayDate=newDate(birthDay);
37-
38-
// Calculate the age
39-
constage=currentDate.getFullYear()-birthdayDate.getFullYear();
40-
17+
constbirthdayDate=newDate(birthdayValue);
18+
letage=currentDate.getFullYear()-birthdayDate.getFullYear();
4119
constmonth=currentDate.getMonth()-birthdayDate.getMonth();
20+
4221
if(
4322
month<0||
4423
(month===0&&currentDate.getDate()<birthdayDate.getDate())
4524
){
4625
age--;
4726
}
4827

49-
// Return the age
5028
returnage;
5129
}
30+
31+
btnEl.addEventListener("click",calculateAge);

‎projects/age-calculator/style.css

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
/* General styles */
21
body {
32
margin:0;
43
padding:20px;
54
font-family:"Montserrat", sans-serif;
6-
font-size:16px;
7-
line-height:1.5;
85
background-color:#f7f7f7;
96
}
107

118
.container {
9+
background-color: white;
10+
box-shadow:0010pxrgba(0,0,0,0.2);
11+
padding:20px;
1212
max-width:600px;
1313
margin:0 auto;
14-
padding:20px;
15-
background-color:#fff;
16-
box-shadow:0020pxrgba(0,0,0,0.2);
1714
border-radius:5px;
15+
margin-top:50px;
1816
}
1917

2018
h1 {
@@ -35,24 +33,23 @@ label {
3533
margin-bottom:10px;
3634
}
3735

38-
input[type="date"] {
36+
input {
3937
padding:8px;
4038
border:1px solid#ccc;
41-
border-radius:4px;
39+
border-radius:5px;
4240
width:100%;
4341
max-width:300px;
44-
box-sizing: border-box;
4542
}
4643

4744
button {
4845
background-color:#007bff;
49-
color:#fff;
46+
color:white;
5047
border: none;
5148
padding:10px20px;
52-
border-radius:4px;
49+
border-radius:5px;
5350
margin-top:10px;
5451
cursor: pointer;
55-
transition: background-color0.2s ease;
52+
transition: background-color0.3s ease;
5653
}
5754

5855
button:hover {
@@ -63,5 +60,4 @@ button:hover {
6360
margin-top:20px;
6461
font-size:24px;
6562
font-weight: bold;
66-
text-align: center;
6763
}

‎projects/recipe-book-app/index.html

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,19 @@
22
<htmllang="en">
33
<head>
44
<metacharset="UTF-8"/>
5-
<title>Recipe Book</title>
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7+
<title>Document</title>
68
<linkrel="stylesheet"href="style.css"/>
79
</head>
810
<body>
911
<header>
10-
<h1>Recipe Book</h1>
12+
<h1>Recipe Book App</h1>
1113
</header>
1214

1315
<divclass="container">
14-
<ulid="recipe-list">
15-
<liclass="recipe-item">
16+
<ulid="recipe-list"class="recipe-list">
17+
<!-- <li>
1618
<img
1719
src="https://spoonacular.com/recipeImages/12345-312x231.jpg"
1820
alt="Recipe 1"
@@ -26,31 +28,30 @@ <h2>Recipe 1</h2>
2628
</li>
2729
<li class="recipe-item">
2830
<img
29-
src="https://spoonacular.com/recipeImages/67890-312x231.jpg"
31+
src="https://spoonacular.com/recipeImages/12545-312x231.jpg"
3032
alt="Recipe 2"
3133
/>
3234
<h2>Recipe 2</h2>
3335
<p>
34-
<strong>Ingredients:</strong> Ingredient4, Ingredient5, Ingredient
35-
6
36+
<strong>Ingredients:</strong> Ingredient1, Ingredient2, Ingredient
37+
3
3638
</p>
3739
<a href="#">View Recipe</a>
3840
</li>
3941
<li class="recipe-item">
4042
<img
41-
src="https://spoonacular.com/recipeImages/54321-312x231.jpg"
43+
src="https://spoonacular.com/recipeImages/12445-312x231.jpg"
4244
alt="Recipe 3"
4345
/>
4446
<h2>Recipe 3</h2>
4547
<p>
46-
<strong>Ingredients:</strong> Ingredient7, Ingredient8, Ingredient
47-
9
48+
<strong>Ingredients:</strong> Ingredient1, Ingredient2, Ingredient
49+
3
4850
</p>
4951
<a href="#">View Recipe</a>
50-
</li>
52+
</li> -->
5153
</ul>
5254
</div>
53-
5455
<scriptsrc="index.js"></script>
5556
</body>
5657
</html>

‎projects/recipe-book-app/index.js

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,45 @@
11
constAPI_KEY="275d58779ccf4e22af03e792e8819fff";
2+
constrecipeListEl=document.getElementById("recipe-list");
23

3-
// Call the API and retrieve a list of recipes
4-
constrecipeList=document.getElementById("recipe-list");
4+
functiondisplayRecipes(recipes){
5+
recipeListEl.innerHTML="";
6+
recipes.forEach((recipe)=>{
7+
constrecipeItemEl=document.createElement("li");
8+
recipeItemEl.classList.add("recipe-item");
9+
recipeImageEl=document.createElement("img");
10+
recipeImageEl.src=recipe.image;
11+
recipeImageEl.alt="recipe image";
12+
13+
recipeTitleEl=document.createElement("h2");
14+
recipeTitleEl.innerText=recipe.title;
15+
16+
recipeIngredientsEl=document.createElement("p");
17+
recipeIngredientsEl.innerHTML=`
18+
<strong>Ingredients:</strong>${recipe.extendedIngredients
19+
.map((ingredient)=>ingredient.original)
20+
.join(", ")}
21+
`;
22+
23+
recipeLinkEl=document.createElement("a");
24+
recipeLinkEl.href=recipe.sourceUrl;
25+
recipeLinkEl.innerText="View Recipe";
26+
27+
recipeItemEl.appendChild(recipeImageEl);
28+
recipeItemEl.appendChild(recipeTitleEl);
29+
recipeItemEl.appendChild(recipeIngredientsEl);
30+
recipeItemEl.appendChild(recipeLinkEl);
31+
recipeListEl.appendChild(recipeItemEl);
32+
});
33+
}
534

635
asyncfunctiongetRecipes(){
736
constresponse=awaitfetch(
837
`https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
938
);
10-
constdata=awaitresponse.json();
11-
returndata.recipes;
12-
}
13-
14-
functiondisplayRecipes(recipes){
15-
recipeList.innerHTML="";
16-
recipes.forEach((recipe)=>{
17-
constrecipeItem=document.createElement("li");
18-
recipeItem.classList.add("recipe-item");
19-
constrecipeImage=document.createElement("img");
20-
recipeImage.src=recipe.image;
21-
22-
constrecipeTitle=document.createElement("h2");
23-
recipeTitle.innerText=recipe.title;
24-
25-
constrecipeIngredients=document.createElement("p");
26-
recipeIngredients.innerHTML=`<strong>Ingredients:</strong>${recipe.extendedIngredients
27-
.map((ingredient)=>ingredient.original)
28-
.join(", ")}`;
2939

30-
constrecipeLink=document.createElement("a");
31-
recipeLink.href=recipe.sourceUrl;
32-
recipeLink.innerText="View Recipe";
33-
34-
recipeItem.appendChild(recipeImage);
35-
recipeItem.appendChild(recipeTitle);
36-
recipeItem.appendChild(recipeIngredients);
37-
recipeItem.appendChild(recipeLink);
40+
constdata=awaitresponse.json();
3841

39-
recipeList.appendChild(recipeItem);
40-
});
42+
returndata.recipes;
4143
}
4244

4345
asyncfunctioninit(){

‎projects/recipe-book-app/style.css

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ body {
55
}
66

77
header {
8-
background-color:#0c2461;
8+
background:#0c2461;
99
color:#fff;
1010
padding:20px;
1111
text-align: center;
@@ -17,8 +17,8 @@ h1 {
1717
}
1818

1919
.container {
20-
max-width:1200px;
2120
margin:0 auto;
21+
max-width:1200px;
2222
padding:20px;
2323
}
2424

@@ -33,7 +33,7 @@ h1 {
3333
align-items: center;
3434
justify-content: space-between;
3535
margin-bottom:20px;
36-
box-shadow:02px5pxrgba(0,0,0,0.1);
36+
box-shadow:02px5pxrgba(0,0,0,0.2);
3737
border-radius:5px;
3838
overflow: hidden;
3939
}
@@ -47,36 +47,37 @@ h1 {
4747
.recipe-itemh2 {
4848
margin:0;
4949
font-size:20px;
50-
min-width:200px;
5150
padding:10px;
51+
min-width:200px;
5252
}
5353

5454
.recipe-itemp {
5555
margin:0;
5656
padding:10px;
57+
color:#777;
5758
}
5859

5960
.recipe-itema {
60-
padding:10px;
61-
background-color:#0c2461;
61+
background:#0c2461;
6262
color:#fff;
63-
text-align: center;
64-
text-decoration: none;
65-
transition: background-color0.2s ease-in-out;
6663
min-width:150px;
64+
padding:10px;
65+
text-decoration: none;
66+
text-transform: uppercase;
67+
font-size:14px;
68+
transition: background0.3s ease;
6769
}
6870

6971
.recipe-itema:hover {
70-
background-color:#1e3799;
72+
background:#1e3799;
7173
}
7274

73-
@mediaonlyscreenand (max-width:800px) {
75+
@media screenand (max-width:768px) {
7476
.container {
7577
max-width:90%;
7678
}
77-
7879
.recipe-item {
79-
flex-wrap: wrap;
80+
flex-direction: column;
8081
}
8182

8283
.recipe-itemimg {
@@ -95,7 +96,9 @@ h1 {
9596
font-size:14px;
9697
margin-bottom:10px;
9798
}
99+
98100
.recipe-itema {
99101
width:100%;
102+
text-align: center;
100103
}
101104
}

0 commit comments

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