Skip to content

Commit 99e37f2

Browse files
sahandghavidelsahandghavidel
committed
add new projects
1 parent d51b3e3 commit 99e37f2

File tree

17 files changed

+781
-0
lines changed

17 files changed

+781
-0
lines changed

‎projects/basic-calculator/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Simple Calculator</title>
5+
<link rel="stylesheet" href="style.css" />
6+
</head>
7+
<body>
8+
<div class="calculator">
9+
<input type="text" id="result" readonly /><br /><br />
10+
<div class="buttons">
11+
<button class="clear">C</button>
12+
<button class="operator">/</button>
13+
<button class="operator">*</button>
14+
<button class="operator">-</button>
15+
<button class="number">7</button>
16+
<button class="number">8</button>
17+
<button class="number">9</button>
18+
<button class="operator">+</button>
19+
<button class="number">4</button>
20+
<button class="number">5</button>
21+
<button class="number">6</button>
22+
<button class="equals">=</button>
23+
<button class="number">1</button>
24+
<button class="number">2</button>
25+
<button class="number">3</button>
26+
<button class="number">0</button>
27+
<button class="decimal">.</button>
28+
</div>
29+
</div>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎projects/basic-calculator/script.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const resultField = document.getElementById("result");
2+
const buttons = document.querySelectorAll("button");
3+
4+
for (let i = 0; i < buttons.length; i++) {
5+
const button = buttons[i];
6+
button.addEventListener("click", function () {
7+
const buttonValue = button.textContent;
8+
if (buttonValue === "C") {
9+
clearResult();
10+
} else if (buttonValue === "=") {
11+
calculate();
12+
} else {
13+
appendValue(buttonValue);
14+
}
15+
});
16+
}
17+
18+
function appendValue(val) {
19+
resultField.value += val;
20+
}
21+
22+
function clearResult() {
23+
resultField.value = "";
24+
}
25+
26+
function calculate() {
27+
const expression = resultField.value;
28+
const result = eval(expression);
29+
// In JavaScript, eval() is a built-in function that evaluates a string as if it were a JavaScript code and returns the result. It can be used to dynamically evaluate expressions or code that is generated at runtime.
30+
31+
// In the context of a calculator, eval() can be used to evaluate the arithmetic expression entered by the user and return the result.
32+
33+
// For example, if the user enters the expression "2 + 3 * 4", eval("2 + 3 * 4") will return 14, which is the result of evaluating the expression.
34+
resultField.value = result;
35+
}

‎projects/basic-calculator/style.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
/* By setting box-sizing: border-box on all elements, we are ensuring that any padding or border we add to an element will be included in its total size. */
6+
7+
.calculator {
8+
max-width: 400px;
9+
margin: 0 auto;
10+
margin-top: 30px;
11+
padding: 20px;
12+
background-color: #f2f2f2;
13+
border: 1px solid #ccc;
14+
border-radius: 5px;
15+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
16+
}
17+
18+
#result {
19+
width: 100%;
20+
padding: 10px;
21+
font-size: 24px;
22+
border: none;
23+
border-radius: 5px;
24+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset;
25+
26+
/* In this case, the box-shadow property is set to 0 2px 5px rgba(0, 0, 0, 0.3) inset. This means that the shadow will have no horizontal offset (0), a vertical offset of 2px, a blur radius of 5px, and a color of rgba(0, 0, 0, 0.3). The inset keyword is used to specify that the shadow should be an inset shadow, rather than an outset shadow. */
27+
}
28+
29+
.buttons {
30+
display: grid;
31+
grid-template-columns: repeat(4, 1fr);
32+
/* grid-template-columns: repeat(4, 1fr) is a CSS property that sets the size of each column in a grid container. In this case, the repeat(4, 1fr) value creates a grid with four equal-sized columns.
33+
34+
The fr unit stands for "fractional unit" and is used to divide the available space in a grid container. In this case, each column takes up an equal fraction of the available space, regardless of the size of the container.
35+
36+
So, with grid-template-columns: repeat(4, 1fr), the grid container will be divided into four equal-sized columns, which is what we want for our calculator layout. */
37+
grid-gap: 10px;
38+
margin-top: 20px;
39+
}
40+
41+
button {
42+
padding: 10px;
43+
font-size: 24px;
44+
border: none;
45+
border-radius: 5px;
46+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
47+
cursor: pointer;
48+
transition: background-color 0.3s ease;
49+
}
50+
51+
button:hover {
52+
background-color: #ddd;
53+
}
54+
55+
.clear {
56+
background-color: #ff4136;
57+
color: #fff;
58+
}
59+
60+
.operator {
61+
background-color: #0074d9;
62+
color: #fff;
63+
}
64+
65+
.number {
66+
background-color: #fff;
67+
color: #333;
68+
}
69+
70+
.equals {
71+
grid-row: span 3;
72+
/* grid-row: span 3; is a CSS property that sets the number of rows an element spans in a CSS grid container.
73+
74+
In this case, span 3 is used to make the element span three rows in the grid container. */
75+
background-color: #01ff70;
76+
color: #fff;
77+
}
78+
79+
.decimal {
80+
background-color: #fff;
81+
color: #333;
82+
}

‎projects/image-search-app/app.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Set the access key for the Unsplash API
2+
const accessKey = "3I7M0FgMDBz0BC9OMC4e4wi9ByTMXZYt0Rk4fQ15TKs";
3+
4+
// Get elements from the HTML document using their IDs
5+
const searchForm = document.getElementById("search-form");
6+
const searchInput = document.getElementById("search-input");
7+
const searchResults = document.getElementById("search-results");
8+
const showMoreButton = document.getElementById("show-more-button");
9+
10+
// Initialize variables
11+
let page = 1;
12+
let query = "";
13+
14+
// Create an asynchronous function to search for images
15+
async function searchImages() {
16+
// Set the query value to the input value from the search form
17+
query = searchInput.value;
18+
// Create the URL for the Unsplash API with the page number, query, and access key
19+
const url = `https://api.unsplash.com/search/photos?page=${page}&query=${query}&client_id=${accessKey}`;
20+
// Send a request to the API and wait for the response
21+
const response = await fetch(url);
22+
// Parse the response data as JSON
23+
const data = await response.json();
24+
// Get the results array from the response data
25+
const results = data.results;
26+
27+
// If this is the first page of results, clear the search results div
28+
if (page === 1) {
29+
searchResults.innerHTML = "";
30+
}
31+
32+
// Loop through each result and create a div with an image and link for each one
33+
results.forEach((result) => {
34+
const imageWrapper = document.createElement("div");
35+
imageWrapper.classList.add("search-result");
36+
37+
const image = document.createElement("img");
38+
image.src = result.urls.small;
39+
image.alt = result.alt_description;
40+
41+
const imageLink = document.createElement("a");
42+
imageLink.href = result.links.html;
43+
imageLink.target = "_blank";
44+
imageLink.textContent = result.alt_description;
45+
46+
imageWrapper.appendChild(image);
47+
imageWrapper.appendChild(imageLink);
48+
searchResults.appendChild(imageWrapper);
49+
});
50+
51+
// Increment the page number for the next search
52+
page++;
53+
54+
// Show the "show more" button if there are more than one page of results
55+
if (page > 1) {
56+
showMoreButton.style.display = "block";
57+
}
58+
}
59+
60+
// Listen for a submit event on the search form, prevent the default action, and search for images
61+
searchForm.addEventListener("submit", (event) => {
62+
event.preventDefault();
63+
page = 1;
64+
searchImages();
65+
});
66+
67+
// Listen for a click event on the "show more" button and search for more images
68+
showMoreButton.addEventListener("click", () => {
69+
searchImages();
70+
});

‎projects/image-search-app/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Unsplash Image Search App</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<h1>Image Search App</h1>
10+
<form id="search-form">
11+
<input type="text" id="search-input" placeholder="Search for images..." />
12+
<button type="submit" id="search-button">Search</button>
13+
</form>
14+
<div id="search-results">
15+
<!-- <div class="search-result">
16+
<img
17+
src="https://images.unsplash.com/photo-1503696967350-ad1874122058?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=Mnw0MTc4MDN8MHwxfHNlYXJjaHwxfHxuaWNlfGVufDB8fHx8MTY3NzgxOTYwMg&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=400"
18+
alt="beach near road at daytime"
19+
/><a href="https://unsplash.com/photos/mpVZVCClgac" target="_blank"
20+
>beach near road at daytime</a
21+
>
22+
</div> -->
23+
</div>
24+
<button id="show-more-button">Show More</button>
25+
26+
<script src="app.js"></script>
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)