Ứng dụng JavaScript To-Do

Bây giờ bạn đã tạo ứng dụng đầu tiên của mình dựa trên JavaScript, hãy chuyển sang xây dựng ứng dụng JavaScript tiếp theo của chúng tôi, đây sẽ là danh sách việc cần làm. Vì vậy, không cần phải quảng cáo thêm, hãy bắt đầu

Quả sung. Ứng dụng JavaScript To-Do

thư mục dự án

Cuối cùng, thư mục dự án sẽ trông giống như hình bên dưới

Quả sung. thư mục dự án

mục lục. html

Tệp này chứa bố cục chung của danh sách việc cần làm. Các phần tử được tạo kiểu thêm trong tệp CSS và được tạo tương tác trong một tệp JavaScript riêng

<. LOẠI TÀI LIỆU html>

<đầu>

      

    

• Nhập cả biểu định kiểu CSS cũng như tệp JavaScript vào tệp HTML này để phản ánh các kiểu trong ứng dụng
• Use HTML
  tag to design the to-do list container.
• Thêm một nút mới để thêm các mục vào danh sách này
• Use the
  (unordered list) ) tag to add items to the todo-list by default.
  • Add a Simplilearn logo to the web application

  app. js

  Tệp này chứa các tập lệnh được đính kèm với tệp HTML và làm cho từng phần tử trong ứng dụng có tính tương tác. Chúng tôi đã thêm nhận xét trong mã để hiểu rõ hơn về từng chức năng trong tệp này

  // Tạo nút "đóng" và thêm nó vào từng mục trong danh sách

  var myNodelist = tài liệu. getElementsByTagName("LI");

  tôi;

  for (i = 0; i < myNodelist. chiều dài;

  var span = tài liệu. createElement("SPAN");

  var txt = tài liệu. createTextNode("\u00D7");

  nhịp. className = "đóng";

  nhịp. appendChild(txt);

  myNodelist[i]. appendChild(span);

  }

   

  // Bấm vào nút đóng để ẩn mục danh sách hiện tại

  var đóng = tài liệu. getElementsByClassName("đóng");

  tôi;

  cho (i = 0; i < đóng. chiều dài;

  đóng [tôi]. onclick = chức năng () {

  var div = cái này. phần tử cha mẹ;

  div. Phong cách. hiển thị = "không";

  }

  }

   

  // Thêm ký hiệu "đã kiểm tra" khi nhấp vào một mục trong danh sách

  danh sách var = tài liệu. querySelector('ul');

  danh sách. addEventListener('click', function(ev) {

  nếu (ev. mục tiêu. tagName === 'LI') {

  ev. mục tiêu. danh sách lớp học. chuyển đổi ('đã kiểm tra');

  }

  }, sai);

   

  // Tạo một mục danh sách mới khi nhấp vào nút "Thêm"

  hàm newElement() {

  var li = tài liệu. createElement("li");

  var inputValue = tài liệu. getElementById("mục"). giá trị;

  var t = tài liệu. tạoTextNode(inputValue);

  li. appendChild(t);

  nếu (giá trị đầu vào === '') {

  alert("Trường này không được để trống. ");

  } khác {

  tài liệu. getElementById("danh sách"). appendChild(li);

  }

  tài liệu. getElementById("mục"). giá trị = "";

   

  var span = tài liệu. createElement("SPAN");

  var txt = tài liệu. createTextNode("\u00D7");

  nhịp. className = "đóng";

  nhịp. appendChild(txt);

  li. appendChild(span);

   

  cho (i = 0; i < đóng. chiều dài;

  đóng [tôi]. onclick = chức năng () {

  var div = cái này. phần tử cha mẹ;

  div. Phong cách. hiển thị = "không";

  }

  }

  }

  • Tạo một nút đóng và nối nó vào từng mục danh sách
  • Nhấp vào nút đóng để ẩn mục danh sách hiện tại
  • Thêm biểu tượng 'đã kiểm tra' khi nhấp vào mục danh sách
  • Tạo mục danh sách mới khi nhấp vào nút 'Thêm'

  phong cách. css

  Tệp này chứa biểu định kiểu để tạo kiểu cho các phần tử HTML được sử dụng trong ứng dụng này. Tất cả các kiểu CSS đều rõ ràng và được áp dụng cho từng lớp được xác định trong tệp HTML. Vui lòng chơi với các kiểu CSS này và cung cấp cho ứng dụng này dấu ấn cá nhân của bạn

  @mặt chữ {

  họ phông chữ. Montserrat;

  src. url(phông chữ/Montserrat-Regular. ttf);

  }

   

  * {

  kích thước hộp. hộp viền;

  họ phông chữ. Montserrat;

  }

   

  cơ thể người {

  màu nền. lightsteelblue;

  hình nền. url("bg. jpg");

  chiều cao. 600px;

  vị trí nền. trung tâm;

  Bối cảnh Lặp lại. không lặp lại;

  kích thước nền. che phủ;

  }

   

  thùng đựng hàng {

  chiều rộng. 50%;

  màu nền. #ffff;

  tự sắp xếp. trung tâm;

  trưng bày. khối;

  lề. tự động 120px;

  bóng hộp. 5px 10px 20px màu đen;

  }

   

  ul {

  lề. 0;

  biên giới bên trái. 6px màu xanh mòng két;

  kiểu danh sách. không có;

  đệm. 0;

  }

   

  ul li {

  con trỏ. con trỏ;

  chức vụ. liên quan đến;

  đệm. 12px 8px 12px 40px;

  lý lịch. #eee;

  cỡ chữ. 18px;

  chuyển tiếp. 0. 2s;

   

  -webkit-người dùng-chọn. không có;

  -moz-người dùng-chọn. không ai;

  -ms-người dùng-chọn. không có;

  người dùng chọn. không ai;

  }

   

  ul li. con thứ n(lẻ) {

  lai lịch. #f9f9f9;

  }

   

  ul li. bay lượn {

  lai lịch. #ddd;

  }

   

  ul li. đã kiểm tra {

  lai lịch. #888;

  màu. #ffff;

  trang trí văn bản. đường cắt ngang;

  }

   

  ul li. đã kiểm tra. trước {

  nội dung. "";

  chức vụ. tuyệt đối;

  màu viền. #ffff;

  kiểu viền. chất rắn;

  chiều rộng biên giới. 0 2px 2px 0;

  đứng đầu. 10px;

  bên trái. 16px;

  biến đổi. xoay (45 độ);

  chiều cao. 15px;

  bề rộng. 7px;

  }

   

  Thoát {

  chức vụ. tuyệt đối;

  đúng. 0;

  đứng đầu. 0;

  đệm. 12px 16px 12px 16px;

  }

   

  Thoát. bay lượn {

  màu nền. #f44336;

  màu. trắng;

  }

   

  tiêu đề {

  màu nền. mòng két;

  đệm. 30px 30px;

  màu. trắng;

  căn chỉnh văn bản. trung tâm;

  }

   

  tiêu đề. sau đó {

  nội dung. "";

  trưng bày. bàn;

  thông thoáng. cả hai;

  }

   

  đầu vào {

  lề. 0;

  ranh giới. không có;

  bán kính đường viền. 0;

  chiều rộng. 75%;

  đệm. 10px;

  trôi nổi. bên trái;

  cỡ chữ. 16px;

  }

   

  thêmBtn {

  đệm. 10px;

  bề rộng. 25%;

  lai lịch. #d9d9d9;

  màu. #555;

  trôi nổi. bên trái;

  căn chỉnh văn bản. trung tâm;

  cỡ chữ. 16px;

  con trỏ. con trỏ;

  chuyển tiếp. 0. 3s;

  bán kính đường viền. 0;

  }

   

  addBtn. bay lượn {

  màu nền. #bbb;

  }

   

  div. liên quan đến {

  chức vụ. tuyệt đối;

  đứng đầu. 600px;

  Phải. 75px;

  }

  Kết quả cuối cùng

  Danh sách việc cần làm cuối cùng sẽ trông như thế này. Mặc dù bạn có thể tự do điều chỉnh logic và phong cách của ứng dụng này và biến nó thành của riêng bạn

  Quả sung. Ứng dụng JavaScript To-Do (Kết quả cuối cùng)_JavaScript Projects

Ứng dụng thời tiết JavaScript

Đây là dự án thứ ba và cuối cùng trong bài viết này. Chúng tôi hy vọng bạn đã hiểu rõ hơn về JavaScript sau khi hoàn thành hai dự án trước đó. Dự án này sẽ giúp bạn củng cố mọi thứ bạn đã học cho đến nay. Bắt đầu nào

Quả sung. Ứng dụng thời tiết JavaScript

điều kiện tiên quyết

• Tạo tài khoản trên OpenWeatherMap vì chúng tôi đang sử dụng API của họ để hiển thị điều kiện thời tiết của một thành phố cụ thể

Quả sung. Trang web OpenWeatherMap

• Tạo khóa API miễn phí và sử dụng khóa đó trong ứng dụng này

• Ghi chú. Việc tạo khóa API của bạn rất quan trọng vì khóa trong mã sẽ không hoạt động

thư mục dự án

Thư mục dự án của bạn cuối cùng sẽ trông như thế này

mục lục. html

Tệp này chứa bố cục chung của ứng dụng thời tiết. Các phần tử được tạo kiểu thêm trong tệp CSS và được tạo tương tác trong một tệp JavaScript riêng

<. LOẠI TÀI LIỆU html>

<đầu>

      

    

• Nhập cả biểu định kiểu CSS cũng như tệp JavaScript để phản ánh trong ứng dụng
• Use HTML
  tag to design the weather container.
• Use another
  that contains the search bar, app title, and current location button.
• Use
  tag for notification whenever API fails to fetch the weather conditions.
• Use
  tag for sub box that contains the weather fetched by API.
• Các div liên tiếp cho các biểu tượng thời tiết, nhiệt độ, mô tả và vị trí tương ứng
• Thêm logo Simplilearn vào ứng dụng web

app. js

This file contains the scripts attached to the HTML file and makes each element in the application interactive

// CHỌN CÁC PHẦN TỬ

const iconElement = tài liệu. truy vấnSelector(". biểu tượng thời tiết");

const locationIcon = tài liệu. truy vấnSelector(". biểu tượng vị trí");

const tempElement = tài liệu. truy vấnSelector(". giá trị nhiệt độ p");

const descElement = tài liệu. truy vấnSelector(". mô tả nhiệt độ p");

const locationElement = tài liệu. truy vấnSelector(". vị trí p");

const notificationElement = tài liệu. truy vấnSelector(". thông báo");

// Lấy trường đầu vào

đầu vào var = tài liệu. getElementById("tìm kiếm");

hãy để thành phố = "";

đặt vĩ độ = 0. 0;

đặt kinh độ = 0. 0;

// Thực thi hàm khi người dùng nhả phím trên bàn phím

đầu vào. addEventListener("keyup", function (sự kiện) {

// Số 13 là phím "Enter" trên bàn phím

nếu (sự kiện. mã khóa === 13) {

// Hủy hành động mặc định nếu cần

sự kiện. ngăn chặn Mặc định();

// Kích hoạt phần tử nút bằng một cú nhấp chuột

thành phố = đầu vào. giá trị;

getSearchWeather(thành phố);

bảng điều khiển. nhật ký (thành phố);

}

});

// Dữ liệu chương trình

const thời tiết = {};

thời tiết. nhiệt độ = {

đơn vị. "độ C",

};

// ỨNG DỤNG CONSTS VÀ VARS

hằng KELVIN = 273;

// MÃ API

khóa const = "b8946f440b89108412a9559cc9e0707b";

// KIỂM TRA NẾU TRÌNH DUYỆT HỖ TRỢ VỊ TRÍ ĐỊA LÝ

if ("định vị địa lý" trong bộ điều hướng) {

hoa tiêu. định vị. getCienPosition(setPosition, showError);

} khác {

thông báoElement. phong cách. hiển thị = "khối";

  notificationElement.innerHTML = "

Browser doesn't Support Geolocation

}

// THIẾT LẬP VỊ TRÍ CỦA NGƯỜI DÙNG

hàm setPosition(vị trí) {

vĩ độ = vị trí. hợp âm. vĩ độ;

kinh độ = vị trí. hợp âm. kinh độ;

getWeather(vĩ độ, kinh độ);

}

biểu tượng vị trí. addEventListener("click", function (sự kiện) {

bảng điều khiển. nhật ký ("xin chào");

getWeather(vĩ độ, kinh độ);

});

// HIỂN THỊ LỖI KHI CÓ SỰ CỐ VỚI DỊCH VỤ ĐỊNH VỊ ĐỊA LÝ

hàm showError(lỗi) {

thông báoElement. phong cách. hiển thị = "khối";

  notificationElement.innerHTML = `

${error.message}

}

// TÌM KIẾM ĐIỀU KIỆN THỜI TIẾT TẠI VỊ TRÍ NGƯỜI DÙNG NHẬP

function getSearchWeather(city) {

hãy để api = `http. //api. bản đồ thời tiết mở. tổ chức/dữ liệu/2. 5/thời tiết?q=${city}&appid=${key}`;

tìm nạp (api)

    . sau đó (hàm (phản hồi) {

để dữ liệu = phản hồi. json();

trả về dữ liệu;

})

    . sau đó (hàm (dữ liệu) {

thời tiết. nhiệt độ. giá trị = Toán học. tầng (dữ liệu. chủ yếu. tạm thời - KELVIN);

thời tiết. mô tả = dữ liệu. thời tiết[0]. Sự miêu tả;

thời tiết. iconId = dữ liệu. thời tiết[0]. biểu tượng;

thời tiết. thành phố = dữ liệu. Tên;

thời tiết. quốc gia = dữ liệu. hệ thống. quốc gia;

})

    . sau đó (hàm () {

displayWeather();

});

}

// NHẬN THỜI TIẾT TỪ NHÀ CUNG CẤP API

hàm getWeather(vĩ độ, kinh độ) {

hãy để api = `http. //api. bản đồ thời tiết mở. tổ chức/dữ liệu/2. 5/thời tiết?lat=${vĩ độ}&lon=${kinh độ}&appid=${key}`;

tìm nạp (api)

    . sau đó (hàm (phản hồi) {

để dữ liệu = phản hồi. json();

trả về dữ liệu;

})

    . sau đó (hàm (dữ liệu) {

thời tiết. nhiệt độ. giá trị = Toán học. tầng (dữ liệu. chủ yếu. tạm thời - KELVIN);

thời tiết. mô tả = dữ liệu. thời tiết[0]. Sự miêu tả;

thời tiết. iconId = dữ liệu. thời tiết[0]. biểu tượng;

thời tiết. thành phố = dữ liệu. Tên;

thời tiết. quốc gia = dữ liệu. hệ thống. quốc gia;

})

    . sau đó (hàm () {

displayWeather();

});

}

// HIỂN THỊ THỜI TIẾT ĐẾN UI

chức năng hiển thịThời tiết() {

  iconElement.innerHTML = `

  tempElement.innerHTML = `${weather.temperature.value}°C`;

descElement. bên trongHTML = thời tiết. sự miêu tả;

yếu tố vị trí. innerHTML = `${thời tiết. thành phố}, ${thời tiết. nước}`;

}

• Chọn các phần tử HTML và lưu trữ chúng trong các biến riêng biệt
• Lấy trường đầu vào
• Xác định các hằng số cho dữ liệu ứng dụng, đơn vị và khóa API
• Kiểm tra xem trình duyệt có hỗ trợ định vị địa lý không
• Đặt vị trí của người dùng
• Hiển thị lỗi khi có sự cố với dịch vụ định vị địa lý
• Tìm nạp điều kiện thời tiết ở vị trí đã tìm kiếm
• Tìm nạp điều kiện thời tiết từ API tùy thuộc vào vị trí hiện tại của người dùng
• Hiển thị thời tiết lên giao diện người dùng

phong cách. css

Tệp này chứa biểu định kiểu để tạo kiểu cho các thành phần HTML được sử dụng trong ứng dụng này. Tất cả các kiểu CSS đều rõ ràng và được áp dụng cho từng lớp được xác định trong tệp HTML. Bạn có thể thay đổi các kiểu này theo lựa chọn thiết kế của mình

@mặt chữ {

họ phông chữ. Montserrat;

src. url("phông chữ/Montserrat-SemiBold. ttf");

}

* {

họ phông chữ. "Montserrat";

}

cơ thể người {

hình nền. url("bg. jpg");

màu nền. màu xanh thép;

chiều cao. 500px;

vị trí nền. trung tâm;

Bối cảnh Lặp lại. không lặp lại;

kích thước nền. che phủ;

}

thùng đựng hàng {

chiều rộng. 50%;

màu nền. #ffff;

tự sắp xếp. trung tâm;

trưng bày. khối;

lề. tự động 100px;

bán kính đường viền. 10px;

đệm-đáy. 50px;

bóng hộp. 5px 10px 20px màu đen;

}

tiêu đề ứng dụng {

chiều rộng. 100%;

chiều cao. 150px;

bán kính đường viền. 10px 10px 0 0;

trưng bày. uốn cong;

sắp xếp các mục. trung tâm;

biện minh cho nội dung. trung tâm;

hướng uốn. column;

}

tiêu đề ứng dụng p {

căn chỉnh văn bản. trung tâm;

đệm. 15px;

  margin. 0 ô tô;

cỡ chữ. 1. 2em;

màu. #333;

}

#Tìm kiếm {

trưng bày. khối;

lề trái. auto;

lề phải. tự động;

bề rộng. 40%;

đệm. 5px;

chiều cao. 20px;

bán kính đường viền. 5px;

  outline. none;

  border. 3px solid steelblue;

}

notification {

  background-color. #f8d7da;

  display. none;

}

notification p {

  color. #721c24;

cỡ chữ. 1. 2em;

lề. 0;

căn chỉnh văn bản. trung tâm;

  padding. 10px 0;

}

weather-container {

chiều rộng. 100%;

  height. 260px;

  background-color. #f4f9ff;

  margin-top. 20px;

}

weather-icon {

chiều rộng. 100%;

  height. 128px;

}

biểu tượng thời tiết img {

trưng bày. khối;

  margin. 0 ô tô;

}

location-icon {

chiều rộng. 100%;

chiều cao. 40px;

đệm. 10px;

}

biểu tượng vị trí img {

trưng bày. khối;

  width. 32px;

  height. 32px;

  margin. 10px auto;

con trỏ. con trỏ;

đệm. 5px;

  border. steelblue solid 2px;

bán kính đường viền. 10px;

  color. steelblue;

}

temperature-value {

chiều rộng. 100%;

  height. 60px;

}

temperature-value p {

đệm. 0;

lề. 0;

  color. #293251;

  font-size. 4em;

căn chỉnh văn bản. trung tâm;

}

temperature-value span {

  color. #293251;

  font-size. 0. 5em;

}

temperature-description p {

  padding. 8px;

lề. 0;

  color. #293251;

căn chỉnh văn bản. trung tâm;

cỡ chữ. 1. 2em;

}

location p {

lề. 0;

đệm. 0;

  color. #293251;

căn chỉnh văn bản. trung tâm;

  font-size. 0. 8em;

}

div. liên quan đến {

chức vụ. tuyệt đối;

đứng đầu. 600px;

đúng. 120px;

}

Kết quả cuối cùng

The weather application should look and feel like this in the end, though you are free to tweak the logic and style of this application and make it your own

Fig. JavaScript Weather Application (End Result)_JavaScript_Projects

Hope you learned the basics of JavaScript and enjoyed going through this ‘JavaScript Projects’ article

Get a firm foundation in Java, the most commonly used programming language in software development with the Java Certification Training Course

Get Ahead of the Curve and Master JavaScript Today

Are you wondering how you can gain the skills necessary to take advantage of JavaScript’s immense popularity now that you are familiar with fundamental concepts after working on these JavaScript Projects? We have your back. We offer a comprehensive JavaScript Training Course, that will help you become work-ready upon completion.  

To learn more about Javascript projects, check out our Youtube video to code these projects along with us, and understand the concepts used in this article, better. If you’re an aspiring web or/and mobile developer, this JavaScript training will broaden your skills and open up new career horizons

Do you have any questions for us? Do mention them in the comments section of this ‘JavaScript Projects’ article and we'll have our experts answer them for you