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

Commit55fd9ba

Browse files
update basic calculator project
1 parentd464c78 commit55fd9ba

File tree

3 files changed

+103
-85
lines changed

3 files changed

+103
-85
lines changed

‎projects/basic-calculator/index.html

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,35 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Simple Calculator</title>
5-
<linkrel="stylesheet"href="style.css"/>
6-
</head>
7-
<body>
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">
7+
<title>Basic Calculator</title>
8+
<linkrel="stylesheet"href="style.css">
9+
</head>
10+
<body>
811
<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>
12+
<inputtype="text"id="result"readonly>
13+
<divclass="buttons">
14+
<buttonclass="clear">C</button>
15+
<buttonclass="operator">/</button>
16+
<buttonclass="operator">*</button>
17+
<buttonclass="operator">-</button>
18+
<buttonclass="number">7</button>
19+
<buttonclass="number">8</button>
20+
<buttonclass="number">9</button>
21+
<buttonclass="operator">+</button>
22+
<buttonclass="number">4</button>
23+
<buttonclass="number">5</button>
24+
<buttonclass="number">6</button>
25+
<buttonclass="equals">=</button>
26+
<buttonclass="number">1</button>
27+
<buttonclass="number">2</button>
28+
<buttonclass="number">3</button>
29+
<buttonclass="number">0</button>
30+
<buttonclass="decimal">.</button>
31+
</div>
2932
</div>
30-
<scriptsrc="script.js"></script>
31-
</body>
32-
</html>
33+
<scriptsrc="index.js"></script>
34+
</body>
35+
</html>

‎projects/basic-calculator/index.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
constbuttonsEl=document.querySelectorAll("button");
2+
3+
constinputFieldEl=document.getElementById("result");
4+
5+
for(leti=0;i<buttonsEl.length;i++){
6+
buttonsEl[i].addEventListener("click",()=>{
7+
constbuttonValue=buttonsEl[i].textContent;
8+
if(buttonValue==="C"){
9+
clearResult();
10+
}elseif(buttonValue==="="){
11+
calculateResult();
12+
}else{
13+
appendValue(buttonValue);
14+
}
15+
});
16+
}
17+
18+
functionclearResult(){
19+
inputFieldEl.value="";
20+
}
21+
22+
functioncalculateResult(){
23+
inputFieldEl.value=eval(inputFieldEl.value);
24+
}
25+
26+
functionappendValue(buttonValue){
27+
inputFieldEl.value+=buttonValue;
28+
// inputFieldEl.value = inputFieldEl.value + buttonValue;
29+
}

‎projects/basic-calculator/style.css

Lines changed: 42 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,68 @@
11
* {
22
box-sizing: border-box;
3+
margin:0;
34
}
45

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-
76
.calculator {
7+
background-color:#f2f2f2;
8+
padding:20px;
89
max-width:400px;
910
margin:0 auto;
10-
margin-top:30px;
11-
padding:20px;
12-
background-color:#f2f2f2;
13-
border:1px solid#ccc;
14-
border-radius:5px;
11+
border: solid1px#ccc;
1512
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;
2313
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. */
14+
margin-top:40px;
2715
}
2816

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;
17+
#result{
18+
width:100%;
19+
padding:10px;
20+
font-size:24px;
21+
border: none;
22+
box-shadow:02px5pxrgba(0,0,0,0.3) inset;
23+
border-radius:5px;
3924
}
4025

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;
26+
.buttons{
27+
display: grid;
28+
grid-template-columns:repeat(4,1fr);
29+
grid-gap:10px;
30+
margin-top:20px;
4931
}
5032

51-
button:hover {
52-
background-color:#ddd;
53-
}
33+
button{
34+
padding:10px;
35+
font-size:24px;
36+
border: none;
37+
box-shadow:02px5pxrgba(0,0,0,0.3);
38+
border-radius:5px;
39+
cursor: pointer;
40+
transition: background-color0.3s ease;
5441

55-
.clear {
56-
background-color:#ff4136;
57-
color:#fff;
5842
}
5943

60-
.operator {
61-
background-color:#0074d9;
62-
color:#fff;
44+
button:hover{
45+
background-color:#ddd;
6346
}
6447

65-
.number{
66-
background-color:#fff;
67-
color:#333;
48+
.clear{
49+
background-color:#ff4136;
50+
color:#fff;
6851
}
6952

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.
53+
.number, .decimal{
54+
background-color:#fff;
55+
color:#333;
7356

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;
7757
}
7858

79-
.decimal{
80-
background-color:#fff;
81-
color:#333;
59+
.operator{
60+
background-color:#0074d9;
61+
color:#fff;
8262
}
63+
64+
.equals{
65+
background-color:#01ff70;
66+
grid-row: span3;
67+
color:#fff;
68+
}

0 commit comments

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