programming javascript

Làm cách nào chúng ta có thể tạo một máy tính đơn giản bằng HTML CSS và JavaScript?

Chào mừng đến với hướng dẫn hôm nay. Trong hướng dẫn hôm nay, chúng ta sẽ học cách tạo một máy tính đơn giản. Đối với hướng dẫn này, chúng tôi sẽ sử dụng HTML, CSS và Javascript. Đây là một hướng dẫn hoàn hảo cho người mới bắt đầu javascript. Hãy để chúng tôi bắt đầu với hướng dẫn

Video hướng dẫn

Nếu bạn thích viết mã cùng với tôi, tôi có phiên bản video của hướng dẫn này trên kênh youtube của mình. Bạn có thể kiểm tra nó dưới đây

Cấu trúc thư mục dự án

Hãy cho chúng tôi xem cấu trúc thư mục dự án trông như thế nào. Thư mục dự án được gọi là – 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
2. Trong thư mục này, chúng tôi có ba tệp – 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
3, 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
4 và 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
5. Chúng lần lượt là tài liệu HTML, biểu định kiểu và tập lệnh

HTML

Chúng ta bắt đầu với mã HTML. Sao chép mã bên dưới và dán vào tệp HTML của bạn.
Mã HTML bao gồm một div với lớp 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
6. Bên trong máy tính, chúng tôi có hai div chính. Đầu tiên là div 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
7 và thứ hai là div 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
8.

Div 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
7 bao gồm một phần tử 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
1 với kiểu văn bản. Chúng tôi đặt 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
2 thành không

Các nút bên trong, chúng tôi có 18 nút khác nhau. Đó là các số từ 0 đến 9, nút 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
3 và 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
4, 4 toán tử cơ bản, nút bằng và nút thập phân. Đối với tất cả các nút ngoại trừ AC, DEL và bằng, chúng tôi chỉ định một lớp gọi là nút đầu vào


  
    
    Calculator

CSS

Bây giờ hãy để chúng tôi định kiểu máy tính này bằng CSS. Sao chép mã được cung cấp bên dưới và dán vào biểu định kiểu của bạn

Chúng tôi bắt đầu bằng cách loại bỏ các lề và phần đệm không mong muốn khỏi tất cả các phần tử. Chúng tôi đặt nền của 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
5 thành một gradient tuyến tính với các điểm dừng màu đồng nhất

Tiếp theo, chúng tôi đặt chiều rộng của 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
6 thành 400px và căn giữa nó bằng các phép biến đổi. Chúng tôi thậm chí còn thêm một số bóng hộp để làm cho nó nổi bật. Để làm cho nó trông bóng bẩy hơn, chúng tôi thêm một số phần đệm vào nó

Trong bước tiếp theo, chúng tôi đặt chiều rộng của phần tử đầu vào và đầu vào 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
7 thành 100%. Chúng tôi cũng sử dụng quyền như một giá trị từ tài sản 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
8. Chúng tôi sử dụng bố cục lưới để định vị và sắp xếp các nút. Bạn có thể tùy chỉnh thêm các nút và hiển thị cho phù hợp với phong cách của mình

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}

Javascript

Bây giờ để thêm chức năng cho máy tính, chúng tôi sẽ sử dụng javascript. Sao chép mã bên dưới và dán vào tệp javascript của bạn

Tôi đã thêm các nhận xét giải thích vào mã để dễ hiểu nên tôi sẽ không giải thích chi tiết về mã Javascript

Chúng tôi bắt đầu bằng cách tạo một biến có tên là 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
body {
  height: 100vh;
  background: linear-gradient[to bottom, #f9544c 50%, #090c31 50%];
}
.calculator {
  width: 400px;
  background-color: #15173c;
  padding: 50px 30px;
  position: absolute;
  transform: translate[-50%, -50%];
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba[0, 5, 24, 0.4];
}
.display {
  width: 100%;
}
.display input {
  width: 100%;
  padding: 15px 10px;
  text-align: right;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-size: 35px;
}
.display input::placeholder {
  color: #9490ac;
}
.buttons {
  display: grid;
  grid-template-columns: repeat[4, 1fr];
  grid-gap: 20px;
  margin-top: 40px;
}
.buttons input[type="button"] {
  font-size: 20px;
  padding: 17px;
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.buttons input[type="button"]:hover {
  box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
  grid-row: span 2;
  background-color: #f9544c;
}
input[type="button"][value="0"] {
  grid-column: span 2;
}
9 được đặt thành 0. Mỗi lần nhấn nút bằng, giá trị của biến bằng được thay đổi thành một

Vì vậy, sau khi bất kỳ đánh giá nào được hoàn thành và bằng với nút được nhấn, màn hình sẽ tự xóa khi người dùng nhập một số hoặc toán tử mới để đánh giá

Chúng tôi thêm trình xử lý sự kiện nhấp chuột vào nút 

let equal_pressed = 0;
//Refer all buttons excluding AC and DEL
let button_input = document.querySelectorAll[".input-button"];
//Refer input,equal,clear and erase
let input = document.getElementById["input"];
let equal = document.getElementById["equal"];
let clear = document.getElementById["clear"];
let erase = document.getElementById["erase"];

window.onload = [] => {
  input.value = "";
};

//Access each class using forEach
button_input.forEach[[button_class] => {
  button_class.addEventListener["click", [] => {
    if [equal_pressed == 1] {
      input.value = "";
      equal_pressed = 0;
    }
    //display value of each button
    input.value += button_class.value;
  }];
}];

//Solve the user's input when clicked on equal sign
equal.addEventListener["click", [] => {
  equal_pressed = 1;
  let inp_val = input.value;
  try {
    //evaluate user's input
    let solution = eval[inp_val];
    //True for natural numbers
    //false for decimals
    if [Number.isInteger[solution]] {
      input.value = solution;
    } else {
      input.value = solution.toFixed[2];
    }
  } catch [err] {
    //If user has entered invalid input
    alert["Invalid Input"];
  }
}];

//Clear Whole Input
clear.addEventListener["click", [] => {
  input.value = "";
}];
//Erase Single Digit
erase.addEventListener["click", [] => {
  input.value = input.value.substr[0, input.value.length - 1];
}];
0. Khi nhấn AC, toàn bộ màn hình sẽ bị xóa. Tương tự như vậy, chúng tôi thêm trình xử lý sự kiện nhấp chuột vào nút 
let equal_pressed = 0;
//Refer all buttons excluding AC and DEL
let button_input = document.querySelectorAll[".input-button"];
//Refer input,equal,clear and erase
let input = document.getElementById["input"];
let equal = document.getElementById["equal"];
let clear = document.getElementById["clear"];
let erase = document.getElementById["erase"];

window.onload = [] => {
  input.value = "";
};

//Access each class using forEach
button_input.forEach[[button_class] => {
  button_class.addEventListener["click", [] => {
    if [equal_pressed == 1] {
      input.value = "";
      equal_pressed = 0;
    }
    //display value of each button
    input.value += button_class.value;
  }];
}];

//Solve the user's input when clicked on equal sign
equal.addEventListener["click", [] => {
  equal_pressed = 1;
  let inp_val = input.value;
  try {
    //evaluate user's input
    let solution = eval[inp_val];
    //True for natural numbers
    //false for decimals
    if [Number.isInteger[solution]] {
      input.value = solution;
    } else {
      input.value = solution.toFixed[2];
    }
  } catch [err] {
    //If user has entered invalid input
    alert["Invalid Input"];
  }
}];

//Clear Whole Input
clear.addEventListener["click", [] => {
  input.value = "";
}];
//Erase Single Digit
erase.addEventListener["click", [] => {
  input.value = input.value.substr[0, input.value.length - 1];
}];
1. Ở đây chúng tôi sử dụng phương thức cơ sở để xóa/xóa chữ số được nhập cuối cùng khỏi màn hình

let equal_pressed = 0;
//Refer all buttons excluding AC and DEL
let button_input = document.querySelectorAll[".input-button"];
//Refer input,equal,clear and erase
let input = document.getElementById["input"];
let equal = document.getElementById["equal"];
let clear = document.getElementById["clear"];
let erase = document.getElementById["erase"];

window.onload = [] => {
  input.value = "";
};

//Access each class using forEach
button_input.forEach[[button_class] => {
  button_class.addEventListener["click", [] => {
    if [equal_pressed == 1] {
      input.value = "";
      equal_pressed = 0;
    }
    //display value of each button
    input.value += button_class.value;
  }];
}];

//Solve the user's input when clicked on equal sign
equal.addEventListener["click", [] => {
  equal_pressed = 1;
  let inp_val = input.value;
  try {
    //evaluate user's input
    let solution = eval[inp_val];
    //True for natural numbers
    //false for decimals
    if [Number.isInteger[solution]] {
      input.value = solution;
    } else {
      input.value = solution.toFixed[2];
    }
  } catch [err] {
    //If user has entered invalid input
    alert["Invalid Input"];
  }
}];

//Clear Whole Input
clear.addEventListener["click", [] => {
  input.value = "";
}];
//Erase Single Digit
erase.addEventListener["click", [] => {
  input.value = input.value.substr[0, input.value.length - 1];
}];

Vậy là xong hướng dẫn này Máy tính của bạn đã sẵn sàng. Trong trường hợp bạn có bất kỳ vấn đề nào trong khi viết mã này, bạn tải xuống mã nguồn bằng cách nhấp vào nút tải xuống bên dưới. Ngoài ra, hãy bỏ đề xuất và phản hồi của bạn trong phần bình luận bên dưới

Làm cách nào để tạo một máy tính đơn giản bằng HTML CSS và JavaScript?

Bạn có thể sử dụng bộ chọn DOM để nhắm mục tiêu các thành phần khác nhau của trang. .
hàm clearScreen[] { tài liệu. getElementById["kết quả"]. giá trị = "";
chức năng hiển thị [giá trị] { tài liệu. getElementById["kết quả"]. giá trị += giá trị;
hàm tính toán [] { var p = tài liệu. getElementById["kết quả"]. giá trị;

Làm cách nào để tạo máy tính trong HTML bằng JavaScript?

Ở đây chúng ta đã tạo một chương trình Máy tính sử dụng ngôn ngữ JavaScript, bao gồm lập trình web HTML và CSS. .

Bài Viết Liên Quan

Marathon cho tất cả đăng ký Paris 2024
Bhxh đóng bao nhiêu
Làm cách nào để tôi phủ dữ liệu trong biểu đồ excel?
Python có chậm hơn Nodejs không?
Làm cách nào để tạo chữ ký email HTML?
Hướng dẫn dùng concatenate define trong PHP
Ngày kỷ niệm quân sự 2023
Làm cách nào để gửi email từ localhost trong php bằng xampp?
Vòng lặp lồng nhau trong python
Databricks chạy SQL trong Python
Python có thể chạy trong trình duyệt không?
Ứng dụng TUT PGCE 2023 Ngày kết thúc
Chạy tập lệnh python trong cửa sổ môi trường ảo
Bộ điều khiển php
CSS đường viền cầu vồng động
Tồn tại mongodb
Whats new in AutoCAD 2023
Làm thế nào để bạn đảo ngược một mảng 3d trong python?
Xóa các bản sao liền kề trong Excel
Câu hỏi phỏng vấn trung cấp Python

Toplist mới

#1
Top 4 uống nước chanh sả mật ong có tác dụng gì 2023
7 tháng trước
#2
Top 10 bài tập làm văn số 5 lớp 7 de 4 2023
7 tháng trước
#3
Top 3 vừa chơi đã có tài khoản vương giả chap 1 2023
7 tháng trước
#4
Top 6 anh sẽ on thôi cover phạm nguyên ngọc lyrics 2023
7 tháng trước
#5
Top 7 tài liệu quản lý nhà nước và quản lý ngành giáo dục đào tạo 2023
7 tháng trước
#6
Top 7 hãy ra khỏi người đó đi hợp âm 2023
7 tháng trước
#7
Top 6 giáo án thơ về thăm nhà bác 2023
7 tháng trước
#8
Top 8 giáo án ngữ văn 6 cánh diều 2023
7 tháng trước
#9
Top 9 tinh bột tham gia phản ứng nào 2023
7 tháng trước

Bài mới nhất

Bài 18 trinh bày văn bản khi in năm 2024
Cá nhân tự quyết toán thuế 2 tháng thử việc năm 2024
Tiêm vitamin k cho trẻ sơ sinh khi nào năm 2024
Tội vu khống người khác bị phạt như thế nào năm 2024
Bút toán tính tiền thuế gtgt phải nộp năm 2024
Bài tập đồng vị nâng cao có đáp án năm 2024
Top game nhẹ cho laptop cấu hình yếu năm 2024
Hệ điều hành 12.3.1 dùng cho điên thoại nào năm 2024
Quy định về sửa đổi bổ sung văn bản năm 2024
250 phạm văn đồng phường 1 q.gò vấp năm 2024

Chủ Đề

programming Hỏi Đáp Mẹo Hay Toplist Là gì Địa Điểm Hay mẹo hay Học Tốt Công Nghệ Nghĩa của từ Khỏe Đẹp Bao nhiêu đánh giá Top List bao nhieu bao nhiêu hướng dẫn Bài tập So Sánh Tiếng anh So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Bài Tập Máy tính javascript Ở đâu Thế nào Hướng dẫn Dịch Tại sao Đại học Món Ngon Facebook Khoa Học