[TIL] JavaScript Review, jQuery & Ajax

Today, I learned JavaScript, jQuery, and Ajax to make interactive web pages and import open APIs. For practice, I learned how to use Fetch to import API data in JSON format and adapt it to my webpage by using jQuery. By utilizing open APIs, I can make my web pages more dynamic and feature-rich.

Utilizing jQuery

• To make it much easier to use JavaScript on the website. It helps manipulate the DOM in a very easy and convenient way for developers

  • Pointing to the section in HTML: using id instead of class

  • How to point: $('#id-name').text(variable)

  • Fetch

      fetch("url") // GET: request through URL
          .then(res => res.json()) // Data received the request become JSON through res
          .then(data => { 
              console.log(data) 
      }) // Data changed to JSON format will be used as 'data'
    

Practice 1

• Utilize Real-time Particulate Matter API to list the result for all provinces

• Mark as red if the result is higher than 40

    function q1() {
            $("#names-q1").empty();
            fetch("http://spartacodingclub.shop/sparta_api/seoulair")
              .then((res) => res.json())
              .then((data) => {
                let rows = data["RealtimeCityAir"]["row"];
                rows.forEach((a) => {
                  let province = a["MSRSTE_NM"];
                  let status = a["IDEX_MVL"];
                  let temp_html = `<li>${province} : ${status}</li>`;
                  if (status > 40) {
                    temp_html = `<li class="danger-q1">${province} : ${status}</li>`;
                  }
                  $("#names-q1").append(temp_html);
                });
              });
          }
  

    <!-- CSS -->
    <style type="text/css">
          div.question-box {
            margin: 10px 0 20px 0;
          }
  
          .danger-q1 {
            color: red;
          }
    </style>
  
    <!-- HTML -->
    <div class="question-box">
       <h2>1. Seoul OpenAPI(Real-time Particulate Matter Estimation)</h2>
       <p>Update particulate matter result for all provinces.</p>
       <p>By clicking Update button, the result should be newly updated.      </p>
       <button onclick="q1()">Update</button>
       <ul id="names-q1"></ul>
    </div>
  

  

Practice 2

• Utilize Real-time Bicycle Availability Info API to list the result for all rack stations

• Mark as red if the available bikes are lower than 5

    function q1() {
                   fetch("http://spartacodingclub.shop/sparta_api/seoulbike")
                        .then((res) => res.json())
                        .then((data) => {
                            $("#q1-table").empty();
                            let rows = data["getStationList"]["row"];
                            rows.forEach((a) => {
                                let stationName = a["stationName"];
                                let numOfRacks = a["rackTotCnt"];
                                let numOfBikes = a["parkingBikeTotCnt"];
                                let temp_html = `<tr>
                                                    <td>${stationName}</td>
                                                    <td>${numOfRacks}</td>
                                                    <td>${numOfBikes}</td>
                                                </tr>`;
                                if (numOfBikes < 5) {
                                    temp_html = `<tr class="bikes-limit">
                                                    <td>${stationName}</td>
                                                    <td>${numOfRacks}</td>
                                                    <td>${numOfBikes}</td>
                                                </tr>`;
                                }
                                $("#q1-table").append(temp_html);
                            });
                        });
                }
  

  

What I Built

• By utilizing WeatherSeoul API, I added the weather feature to show the current weather in Seoul

• To make jQuery load API right after the page is opened or refreshed

    $(document).ready(function () {
               fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
                        .then((res) => res.json())
                        .then((data) => {
                            let temp = data["temp"];
                            $("#temp").text(temp);
                        });
               fetch("http://spartacodingclub.shop/web/api/movie")
                        .then((res) => res.json())
                        .then((data) => {
                            $("#cards").empty();
                            let movies = data["movies"];
                            movies.forEach((a) => {
                                let title = a["title"];
                                let desc = a["desc"];
                                let comment = a["comment"];
                                let image = a["image"];
                                let star = a["star"];
                                let star_image = "⭐".repeat(star);
                                let temp_html = `
                <div class="col">
                    <div class="card h-100">
                        <img src="${image}" class="card-img-top" alt="..."/>
                             <div class="card-body">
                                 <h5 class="card-title">${title}</h5>
                                      <p class="card-text">${desc}</p>
                                      <p>${star_image}</p>
                                      <p class="mycomment">${comment}</p>
                             </div>
                    </div>
                </div>
                                `;        
                                $("#cards").append(temp_html);
                            });
                        });
                });