Light Mode

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

Commit cde2cb9

Browse files
update last 4 projects
1 parent 0894ef2 commit cde2cb9

File tree

9 files changed

+140
-154
lines changed
  • projects
    • age-calculator
      • index.html
      • index.js
      • style.css
    • recipe-book-app
      • index.html
      • index.js
      • style.css
    • tip-calculator
      • index.html
      • index.js
      • style.css

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
>
2-
<html>
3-
<head>
4-
<meta charset="UTF-8" />
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
57
<title>Age Calculatortitle>
6-
<link rel="stylesheet" href="style.css" />
7-
head>
8-
<body>
8+
<link rel="stylesheet" href="style.css">
9+
head>
10+
<body>
911
<div class="container">
10-
<h1>Age Calculatorh1>
11-
<div class="form">
12-
<label for="birthday">Enter your date of birth:label>
13-
<input type="date" id="birthday" name="birthday" />
14-
<button id="calculate">Calculate Agebutton>
15-
<p id="result">p>
16-
div>
12+
<h1>Age Calculatorh1>
13+
<div class="form">
14+
<label for="birthday">Enter you date of birthlabel>
15+
<input type="date" id="birthday" name="birthday">
16+
<button id="btn">Calculate Agebutton>
17+
<p id="result">Your age is 21 years oldp>
18+
div>
1719
div>
1820

1921
<script src="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-
const birthdayInput = document.getElementById("birthday");
3-
const calculateButton = document.getElementById("calculate");
4-
const resultElement = 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+
const btnEl = document.getElementById("btn");
2+
const birthdayEl = document.getElementById("birthday");
3+
const resultEl = document.getElementById("result");
104

115
function calculateAge() {
12-
// Get the value from the input
13-
const birthday = birthdayInput.value;
14-
15-
// Check if the value is empty
16-
if (birthday === "") {
17-
// If the value is empty, show an alert
6+
const birthdayValue = birthdayEl.value;
7+
if (birthdayValue === "") {
188
alert("Please enter your birthday");
199
} else {
20-
// If the value is not empty, calculate the age
21-
const age = 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+
const age = getAge(birthdayValue);
11+
resultEl.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old`;
2712
}
2813
}
2914

30-
// Function to calculate the age
31-
function getAge(birthDay) {
32-
// Get the current date
15+
function getAge(birthdayValue) {
3316
const currentDate = new Date();
34-
35-
// Get the birthday date
36-
const birthdayDate = new Date(birthDay);
37-
38-
// Calculate the age
39-
const age = currentDate.getFullYear() - birthdayDate.getFullYear();
40-
17+
const birthdayDate = new Date(birthdayValue);
18+
let age = currentDate.getFullYear() - birthdayDate.getFullYear();
4119
const month = 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
return age;
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: 0 0 10px rgba(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: 0 0 20px rgba(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: 10px 20px;
52-
border-radius: 4px;
49+
border-radius: 5px;
5350
margin-top: 10px;
5451
cursor: pointer;
55-
transition: background-color 0.2s ease;
52+
transition: background-color 0.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
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Recipe Booktitle>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Documenttitle>
68
<link rel="stylesheet" href="style.css" />
79
head>
810
<body>
911
<header>
10-
<h1>Recipe Bookh1>
12+
<h1>Recipe Book Apph1>
1113
header>
1214

1315
<div class="container">
14-
<ul id="recipe-list">
15-
<li class="recipe-item">
16+
<ul id="recipe-list" class="recipe-list">
17+
<!-- <li>
1618
1719
src="https://spoonacular.com/recipeImages/12345-312x231.jpg"
1820
alt="Recipe 1"
@@ -26,31 +28,30 @@

Recipe 1

2628
2729
  • 2830
    29-
    src="https://spoonacular.com/recipeImages/67890-312x231.jpg"
    31+
    src="https://spoonacular.com/recipeImages/12545-312x231.jpg"
    3032
    alt="Recipe 2"
    3133
    />
    3234

    Recipe 2

    3335

    34-
    <strong>Ingredients:strong> Ingredient 4, Ingredient 5, Ingredient
    35-
    6
    36+
    Ingredients: Ingredient 1, Ingredient 2, Ingredient
    37+
    3
    3638

    3739
    3840
    3941
  • 4042
    41-
    src="https://spoonacular.com/recipeImages/54321-312x231.jpg"
    43+
    src="https://spoonacular.com/recipeImages/12445-312x231.jpg"
    4244
    alt="Recipe 3"
    4345
    />
    4446

    Recipe 3

    4547

    46-
    <strong>Ingredients:strong> Ingredient 7, Ingredient 8, Ingredient
    47-
    9
    48+
    Ingredients: Ingredient 1, Ingredient 2, Ingredient
    49+
    3
    4850

    4951
    50-
    li>
    52+
    -->
    5153
    ul>
    5254
    div>
    53-
    5455
    <script src="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
    const API_KEY = "275d58779ccf4e22af03e792e8819fff";
    2+
    const recipeListEl = document.getElementById("recipe-list");
    23

    3-
    // Call the API and retrieve a list of recipes
    4-
    const recipeList = document.getElementById("recipe-list");
    4+
    function displayRecipes(recipes) {
    5+
    recipeListEl.innerHTML = "";
    6+
    recipes.forEach((recipe) => {
    7+
    const recipeItemEl = 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+
    Ingredients: ${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
    async function getRecipes() {
    736
    const response = await fetch(
    837
    `https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
    938
    );
    10-
    const data = await response.json();
    11-
    return data.recipes;
    12-
    }
    13-
    14-
    function displayRecipes(recipes) {
    15-
    recipeList.innerHTML = "";
    16-
    recipes.forEach((recipe) => {
    17-
    const recipeItem = document.createElement("li");
    18-
    recipeItem.classList.add("recipe-item");
    19-
    const recipeImage = document.createElement("img");
    20-
    recipeImage.src = recipe.image;
    21-
    22-
    const recipeTitle = document.createElement("h2");
    23-
    recipeTitle.innerText = recipe.title;
    24-
    25-
    const recipeIngredients = document.createElement("p");
    26-
    recipeIngredients.innerHTML = `Ingredients: ${recipe.extendedIngredients
    27-
    .map((ingredient) => ingredient.original)
    28-
    .join(", ")}`;
    2939

    30-
    const recipeLink = 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+
    const data = await response.json();
    3841

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

    4345
    async function init() {

    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: 0 2px 5px rgba(0, 0, 0, 0.1);
    36+
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    3737
    border-radius: 5px;
    3838
    overflow: hidden;
    3939
    }
    @@ -47,36 +47,37 @@ h1 {
    4747
    .recipe-item h2 {
    4848
    margin: 0;
    4949
    font-size: 20px;
    50-
    min-width: 200px;
    5150
    padding: 10px;
    51+
    min-width: 200px;
    5252
    }
    5353

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

    5960
    .recipe-item a {
    60-
    padding: 10px;
    61-
    background-color: #0c2461;
    61+
    background: #0c2461;
    6262
    color: #fff;
    63-
    text-align: center;
    64-
    text-decoration: none;
    65-
    transition: background-color 0.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: background 0.3s ease;
    6769
    }
    6870

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

    73-
    @media only screen and (max-width: 800px) {
    75+
    @media screen and (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-item img {
    @@ -95,7 +96,9 @@ h1 {
    9596
    font-size: 14px;
    9697
    margin-bottom: 10px;
    9798
    }
    99+
    98100
    .recipe-item a {
    99101
    width: 100%;
    102+
    text-align: center;
    100103
    }
    101104
    }

    0 commit comments

    Comments
    (0)