test/text.html at main · JonWong959/test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Article Details</title>
	<style type="text/css">
		body {
			font-family: Arial, sans-serif;
		}

		h1 {
			display: block;
			margin-bottom: 20px;
		}

		p {
			line-height: 30px;
			margin: 25px 0;
		}

		form {
			padding: 25px;
			border: none;
			background-color: #f7f7f7;
			max-width: 60%;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
			margin: auto;
			transition: border-radius 0.2s ease-out;
		}

		button[type=submit] {
			background-color: lightgreen;
			border: none;
			border-radius: 4px;
			padding: 10px 25px;
			cursor: pointer;
		}

		img {
			vertical-align: middle;
			margin: 0 15px 15px 0;
			object-fit: cover;
			width: auto;
		}
	</style>
</head>
<body>
	<div class="container">
		<header>
			<h1><a href="#"><%= title %></a></h1>
		</header>
	</div>

	<section class="article">
		<article>
			<%= content %>
			<hr/>
		</article>
	</section>

	<footer>
		<aside>
			<form action="/comments" method="post" accept-charset="utf-8">
				<input name="comment" placeholder="Enter comment here..."/>
				<input type="hidden" name="article_id" value="<%= id %>"/>
				<button type="submit">Submit Comment</button>
			</form>
		</aside>

		<aside>
			<button onclick="window.location='https://twitter.com/?url=https%3A//example.com/article/%X&via=%x'" style="background-color: lightblue;">Tweet this Article</button>&nbsp;&nbsp;
			<button onclick="like()" style="background-color: lightgreen;">Like this Article</button>
		</aside>
	</footer>

	<script>
	function like() {
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function () {
		    if (xhr.readyState === 4) {
		        var response = JSON.parse(xhr.responseText);
					if (response.success) {
						document.getElementById("likes").innerHTML += "<span>Likes: <%= likesCount + 1 %> </span>";
				} else {
					alert("Error occurred while adding Like.");
				}
		    }
	  };
		  xhr.open('POST', '/api/v1/articles/<%= id %>/like');
		  document.getElementById("js-like-btn").setAttribute("disabled", true);
		  xhr.send();
		};

	</script>
</body>
</html>```