Skip to content

Instantly share code, notes, and snippets.

@hakatashi

hakatashi/web11.html

Created November 2, 2016 09:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hakatashi/6fab7eb84530eeedae5bbf8c3d065381 to your computer and use it in GitHub Desktop.
Save hakatashi/6fab7eb84530eeedae5bbf8c3d065381 to your computer and use it in GitHub Desktop.
Download ZIP
Web分科会 第11回 実習
Raw
web11.html
<!DOCTYPE html>
<html>
<head>
<title>Ajax Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>
<script>
const template = ({url = '', imageUrl = '', title = '', date = '201-11-02', views = 0}) => `
<div class="ui card">
<div class="image">
<img src="${imageUrl}">
</div>
<div class="content">
<a class="header" href="${url}">${title}</a>
</div>
<div class="extra content">
<a class="right floated created">${date}</a>
<a class="views"><i class="users icon"></i>${views}</a>
</div>
</div>
`;
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('search-button').addEventListener('click', () => {
const text = document.getElementById('search-text').value;
// ここにボタンを押した時の処理を書く
// 結果を表示するには
document.getElementById('result').innerHTML = '<strong>Hello!</strong>';
});
});
</script>
</head>
<body>
<div class="ui container">
<h1 style="margin-top: 2em">TSG Photo Searcher</h1>
<div class="ui action left icon input">
<i class="search icon"></i>
<input id="search-text" type="text" name="name">
<button id="search-button" class="ui button">Search</button>
</div>
<div style="margin-top: 3em">
<div id="result" class="ui four cards">
<!-- ここにデータを突っ込む -->
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment