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

Commit99e37f2

Browse files
add new projects
1 parentd51b3e3 commit99e37f2

File tree

17 files changed

+781
-0
lines changed

17 files changed

+781
-0
lines changed

‎projects/basic-calculator/index.html

Lines changed: 32 additions & 0 deletions
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+
<linkrel="stylesheet"href="style.css"/>
6+
</head>
7+
<body>
8+
<divclass="calculator">
9+
<inputtype="text"id="result"readonly/><br/><br/>
10+
<divclass="buttons">
11+
<buttonclass="clear">C</button>
12+
<buttonclass="operator">/</button>
13+
<buttonclass="operator">*</button>
14+
<buttonclass="operator">-</button>
15+
<buttonclass="number">7</button>
16+
<buttonclass="number">8</button>
17+
<buttonclass="number">9</button>
18+
<buttonclass="operator">+</button>
19+
<buttonclass="number">4</button>
20+
<buttonclass="number">5</button>
21+
<buttonclass="number">6</button>
22+
<buttonclass="equals">=</button>
23+
<buttonclass="number">1</button>
24+
<buttonclass="number">2</button>
25+
<buttonclass="number">3</button>
26+
<buttonclass="number">0</button>
27+
<buttonclass="decimal">.</button>
28+
</div>
29+
</div>
30+
<scriptsrc="script.js"></script>
31+
</body>
32+
</html>

‎projects/basic-calculator/script.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
constresultField=document.getElementById("result");
2+
constbuttons=document.querySelectorAll("button");
3+
4+
for(leti=0;i<buttons.length;i++){
5+
constbutton=buttons[i];
6+
button.addEventListener("click",function(){
7+
constbuttonValue=button.textContent;
8+
if(buttonValue==="C"){
9+
clearResult();
10+
}elseif(buttonValue==="="){
11+
calculate();
12+
}else{
13+
appendValue(buttonValue);
14+
}
15+
});
16+
}
17+
18+
functionappendValue(val){
19+
resultField.value+=val;
20+
}
21+
22+
functionclearResult(){
23+
resultField.value="";
24+
}
25+
26+
functioncalculate(){
27+
constexpression=resultField.value;
28+
constresult=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

Lines changed: 82 additions & 0 deletions
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:02px5pxrgba(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:02px5pxrgba(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:02px5pxrgba(0,0,0,0.3);
47+
cursor: pointer;
48+
transition: background-color0.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: span3;
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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Set the access key for the Unsplash API
2+
constaccessKey="3I7M0FgMDBz0BC9OMC4e4wi9ByTMXZYt0Rk4fQ15TKs";
3+
4+
// Get elements from the HTML document using their IDs
5+
constsearchForm=document.getElementById("search-form");
6+
constsearchInput=document.getElementById("search-input");
7+
constsearchResults=document.getElementById("search-results");
8+
constshowMoreButton=document.getElementById("show-more-button");
9+
10+
// Initialize variables
11+
letpage=1;
12+
letquery="";
13+
14+
// Create an asynchronous function to search for images
15+
asyncfunctionsearchImages(){
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+
consturl=`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+
constresponse=awaitfetch(url);
22+
// Parse the response data as JSON
23+
constdata=awaitresponse.json();
24+
// Get the results array from the response data
25+
constresults=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+
constimageWrapper=document.createElement("div");
35+
imageWrapper.classList.add("search-result");
36+
37+
constimage=document.createElement("img");
38+
image.src=result.urls.small;
39+
image.alt=result.alt_description;
40+
41+
constimageLink=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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<title>Unsplash Image Search App</title>
6+
<linkrel="stylesheet"href="style.css"/>
7+
</head>
8+
<body>
9+
<h1>Image Search App</h1>
10+
<formid="search-form">
11+
<inputtype="text"id="search-input"placeholder="Search for images..."/>
12+
<buttontype="submit"id="search-button">Search</button>
13+
</form>
14+
<divid="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+
<buttonid="show-more-button">Show More</button>
25+
26+
<scriptsrc="app.js"></script>
27+
</body>
28+
</html>

0 commit comments

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