Week 3.1 — Brief Review
Importing and Pasting an OpenAPI to a Constructed Website
4 min readAug 4, 2021
--
While this post could be categorized as part of Project Updates, I thought I would share it as a review of the previous chapters, for importing the OpenAPI to a constructed website requires a number of the previously learned skills. Throughout this post, I will be importing a set of data from Naver Movies (South Korea’s biggest movies information website) to the My Memo Project so that each card displays a certain set of information for a movie.
I obtained the OpenAPI from the Sparta Coding Club, a programming community I am a member of.
<script>
$(document).ready(function () {
listing();
});
function listing() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/post",
data: {},
success: function (response) {
let rows = response['articles']
for (let i = 0; i < rows.length; i++) {
let comment = rows[i]['comment']
let desc = rows[i]['desc']
let image = rows[i]['image']
let title = rows[i]['title']
let url = rows[i]['url']
let temp_html = `<div class="card">
<img class="card-img-top"
src="${image}"
alt="Card image cap">
<div class="card-body">
<a class="card-title" href="${url}">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-comment">${comment}</p>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}
.
.
.
</script>Above is the final product, where the .ready() function initiates the entire process as soon as the webpage refreshes. Most of the functions have been covered before, so they should be intuitive! This way, the webpage will import from the OpenAPI comments, descriptions, images, titles, and URLs for the movies listed in the website.
So we can obtain the final product as shown below:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>My Article Memo | jQuery</title>
<style>
* {
font-family: 'Bree Serif', serif;
}
.wrap {
width: 900px;
margin: auto
}
.card-title {
color: dodgerblue;
font-size: 20px;
}
.posting-box {
width: 900px;
margin: auto;
border: 3px dashed grey;
border-radius: 10px;
margin-bottom: 30px;
padding: 30px 30px 30px 30px;
display: none;
}
</style>
<script>
$(document).ready(function () {
$('#cards-box').empty()
listing();
});
function listing() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/post",
data: {},
success: function (response) {
let rows = response['articles']
for (let i = 0; i < rows.length; i++) {
let comment = rows[i]['comment']
let desc = rows[i]['desc']
let image = rows[i]['image']
let title = rows[i]['title']
let url = rows[i]['url']
let temp_html = `<div class="card">
<img class="card-img-top"
src="${image}"
alt="Card image cap">
<div class="card-body">
<a class="card-title" href="${url}">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-comment">${comment}</p>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}
function posted() {
alert('Posted!');
}
function openclose() {
let status = $(`#post-box`).css('display');
if (status == 'block') {
$(`#post-box`).hide()
$(`#btn-posting-box`).text('Open Posting Box')
} else {
$(`#post-box`).show()
$(`#btn-posting-box`).text('Close Posting Box');
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">My Article Memo</h1>
<p class="lead">A place where you can keep important articles and visit anytime you need.</p>
<hr class="my-4">
<p class="lead">
<p onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" role="button">Open Posting Box</p>
</p>
</p>
</div>
<div class="posting-box" id="post-box">
<div class="form-group">
<label for="article-url">Article URL</label>
<input type="email" class="form-control" id="article-url" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Brief Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button onclick="posted()" class="btn btn-primary btn-lg" role="button" type="submit" class="btn btn-primary">
Save
</button>
</div>
<div class="card-columns" id="cards-box">
<div class="card">
<img class="card-img-top"
src="https://tourdragon.com/images/tour_images/HERO_UltimateRome_Hero_shutterstock789412159.jpg"
alt="Card image cap">
<div class="card-body">
<a class="card-title" href="https://www.naver.com/">Your title goes here</a>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt
ut labore et dolore magna aliqua.</p>
<p class="comment">Comments</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://tourdragon.com/images/tour_images/HERO_UltimateRome_Hero_shutterstock789412159.jpg"
alt="Card image cap">
<div class="card-body">
<a class="card-title" href="https://www.naver.com/">Your title goes here</a>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt
ut labore et dolore magna aliqua.</p>
<p class="comment">Comments</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://tourdragon.com/images/tour_images/HERO_UltimateRome_Hero_shutterstock789412159.jpg"
alt="Card image cap">
<div class="card-body">
<a class="card-title" href="https://www.naver.com/">Your title goes here</a>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt
ut labore et dolore magna aliqua.</p>
<p class="comment">Comments</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://tourdragon.com/images/tour_images/HERO_UltimateRome_Hero_shutterstock789412159.jpg"
alt="Card image cap">
<div class="card-body">
<a class="card-title" href="https://www.naver.com/">Your title goes here</a>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt
ut labore et dolore magna aliqua.</p>
<p class="comment">Comments</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://tourdragon.com/images/tour_images/HERO_UltimateRome_Hero_shutterstock789412159.jpg"
alt="Card image cap">
<div class="card-body">
<a class="card-title" href="https://www.naver.com/">Your title goes here</a>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt
ut labore et dolore magna aliqua.</p>
<p class="comment">Comments</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://tourdragon.com/images/tour_images/HERO_UltimateRome_Hero_shutterstock789412159.jpg"
alt="Card image cap">
<div class="card-body">
<a class="card-title" href="https://www.naver.com/">Your title goes here</a>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt
ut labore et dolore magna aliqua.</p>
<p class="comment">Comments</p>
</div>
</div>
</body>
</html>And the webpage finally looks like this:
Sweet! Now we know how to classify and import data from OpenAPIs. Next time, we will be learning Python to do “data crawling,” which (I believe) should be very relevant to what we have done for this project.
Well, I’ll see you then!!
Fin.