Skip to content

Commit 2617699

Browse files
sahandghavidelsahandghavidel
committed
add 2 new projects
1 parent dfb834e commit 2617699

File tree

6 files changed

+311
-0
lines changed

6 files changed

+311
-0
lines changed

‎projects/dice-roll-simulator/dice-roll.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const diceElement = document.getElementById("dice");
2+
const rollButton = document.getElementById("roll-button");
3+
const rollHistory = document.getElementById("roll-history");
4+
let historyList = [];
5+
6+
function rollDice() {
7+
const rollResult = Math.floor(Math.random() * 6) + 1;
8+
const diceFace = getDiceFace(rollResult);
9+
diceElement.textContent = diceFace;
10+
historyList.push(rollResult);
11+
updateRollHistory();
12+
}
13+
14+
function getDiceFace(rollResult) {
15+
switch (rollResult) {
16+
case 1:
17+
return "⚀";
18+
case 2:
19+
return "⚁";
20+
case 3:
21+
return "⚂";
22+
case 4:
23+
return "⚃";
24+
case 5:
25+
return "⚄";
26+
case 6:
27+
return "⚅";
28+
default:
29+
return "";
30+
}
31+
}
32+
33+
function updateRollHistory() {
34+
rollHistory.innerHTML = "";
35+
for (let i = 0; i < historyList.length; i++) {
36+
const listItem = document.createElement("li");
37+
listItem.innerHTML = `Roll ${i + 1}: <span>${getDiceFace(
38+
historyList[i]
39+
)}</span>`;
40+
rollHistory.appendChild(listItem);
41+
}
42+
}
43+
44+
rollButton.addEventListener("click", () => {
45+
diceElement.classList.add("roll-animation");
46+
setTimeout(() => {
47+
diceElement.classList.remove("roll-animation");
48+
rollDice();
49+
}, 1000);
50+
});

‎projects/dice-roll-simulator/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Dice Roll Simulator</title>
5+
<link rel="stylesheet" href="style.css" />
6+
</head>
7+
<body>
8+
<h1>Dice Roll Simulator</h1>
9+
<div id="dice" class="dice">⚀</div>
10+
<button id="roll-button">Roll Dice</button>
11+
<ul id="roll-history">
12+
<li>Roll 1: <span>&#9856;</span></li>
13+
<li>Roll 2: <span>&#9856;</span></li>
14+
</ul>
15+
16+
<script src="dice-roll.js"></script>
17+
</body>
18+
</html>

‎projects/dice-roll-simulator/style.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body {
2+
font-family: "Open Sans", sans-serif;
3+
text-align: center;
4+
margin: 0;
5+
}
6+
7+
h1 {
8+
font-size: 3rem;
9+
margin-top: 2rem;
10+
}
11+
12+
.dice {
13+
font-size: 7rem;
14+
margin: 5px;
15+
animation-duration: 1s;
16+
animation-fill-mode: forwards;
17+
}
18+
19+
.roll-animation {
20+
animation-name: roll;
21+
}
22+
23+
@keyframes roll {
24+
0% {
25+
transform: rotateY(0deg) rotateX(0deg);
26+
}
27+
100% {
28+
transform: rotateY(720deg) rotateX(720deg);
29+
}
30+
}
31+
32+
button {
33+
background-color: #47a5c4;
34+
color: white;
35+
font-size: 1.5rem;
36+
border: none;
37+
padding: 1rem 2rem;
38+
margin: 5px;
39+
border-radius: 1rem;
40+
cursor: pointer;
41+
transition: background-color 0.3s ease;
42+
}
43+
44+
button:hover {
45+
background-color: #2e8baf;
46+
}
47+
48+
ul {
49+
list-style: none;
50+
padding: 0;
51+
margin: 2rem;
52+
max-width: 600px;
53+
margin: 0 auto;
54+
}
55+
56+
li {
57+
font-size: 1.5rem;
58+
padding: 0.5rem;
59+
margin: 0.5rem;
60+
background-color: #f2f2f2;
61+
border-radius: 0.5rem;
62+
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
63+
display: flex;
64+
justify-content: space-between;
65+
align-items: center;
66+
}
67+
68+
li span {
69+
font-size: 3rem;
70+
margin-right: 1rem;
71+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Recipe Book</title>
6+
<link
7+
href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:400,600,700&display=swap"
8+
rel="stylesheet"
9+
/>
10+
<link rel="stylesheet" href="style.css" />
11+
</head>
12+
<body>
13+
<header>
14+
<h1>Recipe Book</h1>
15+
</header>
16+
17+
<div class="container">
18+
<ul id="recipe-list"></ul>
19+
</div>
20+
21+
<script src="index.js"></script>
22+
</body>
23+
</html>

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const API_KEY = "275d58779ccf4e22af03e792e8819fff";
2+
3+
// Call the API and retrieve a list of recipes
4+
const recipeList = document.getElementById("recipe-list");
5+
6+
async function getRecipes() {
7+
const response = await fetch(
8+
`https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
9+
);
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 = `<strong>Ingredients:</strong> ${recipe.extendedIngredients
27+
.map((ingredient) => ingredient.original)
28+
.join(", ")}`;
29+
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);
38+
39+
recipeList.appendChild(recipeItem);
40+
});
41+
}
42+
43+
async function init() {
44+
const recipes = await getRecipes();
45+
displayRecipes(recipes);
46+
}
47+
48+
init();

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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: Arial, sans-serif;
5+
}
6+
7+
header {
8+
background-color: #0c2461;
9+
color: #fff;
10+
padding: 20px;
11+
text-align: center;
12+
}
13+
14+
h1 {
15+
margin: 0;
16+
font-size: 36px;
17+
}
18+
19+
.container {
20+
max-width: 1200px;
21+
margin: 0 auto;
22+
padding: 20px;
23+
}
24+
25+
.recipe-list {
26+
list-style: none;
27+
margin: 0;
28+
padding: 0;
29+
}
30+
31+
.recipe-item {
32+
display: flex;
33+
align-items: center;
34+
justify-content: space-between;
35+
margin-bottom: 20px;
36+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
37+
border-radius: 5px;
38+
overflow: hidden;
39+
}
40+
41+
.recipe-item img {
42+
width: 150px;
43+
height: 150px;
44+
object-fit: cover;
45+
}
46+
47+
.recipe-item h2 {
48+
margin: 0;
49+
font-size: 20px;
50+
min-width: 200px;
51+
padding: 10px;
52+
}
53+
54+
.recipe-item p {
55+
margin: 0;
56+
padding: 10px;
57+
}
58+
59+
.recipe-item a {
60+
padding: 10px;
61+
background-color: #0c2461;
62+
color: #fff;
63+
text-align: center;
64+
text-decoration: none;
65+
transition: background-color 0.2s ease-in-out;
66+
min-width: 150px;
67+
}
68+
69+
.recipe-item a:hover {
70+
background-color: #1e3799;
71+
}
72+
73+
@media only screen and (max-width: 800px) {
74+
.container {
75+
max-width: 90%;
76+
}
77+
78+
.recipe-item {
79+
flex-wrap: wrap;
80+
}
81+
82+
.recipe-item img {
83+
width: 100%;
84+
height: auto;
85+
margin-bottom: 10px;
86+
}
87+
88+
.recipe-item h2 {
89+
font-size: 20px;
90+
padding: 0;
91+
margin-bottom: 10px;
92+
}
93+
94+
.recipe-item p {
95+
font-size: 14px;
96+
margin-bottom: 10px;
97+
}
98+
.recipe-item a {
99+
width: 100%;
100+
}
101+
}

0 commit comments

Comments
 (0)