jaeming/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Opal Experiments</title>
  <link rel="stylesheet" href="main.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/opal/0.3.43/opal.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/opal-parser/0.3.43/opal-parser.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/opal-jquery/0.0.8/opal-jquery.min.js"></script>
</head>
<body>
  <div id="posts"></div>
  <script type="text/ruby">
    module Render
      def self.posts_index(posts_data)
        location = Post.posts_section

        posts_data.each do |post|
          template = Post.posts_template(post)
          location.append(template)
        end

      end
    end

    class Post
      def self.posts_resource
        "http://benji.herokuapp.com/api/articles/"
      end

      def self.posts_section
        Element.find('#posts')
      end

      def self.posts_template(post)
        "<div class='entry'>"+
          "<h2>#{post['title']}</h2>"+
          "<p>#{post['text']}</p>"+
        "</div>"
      end
    end

    class PostsController < Post
      include Render

      def self.index
        HTTP.get(Post.posts_resource) do |response|
          data = response.json["articles"]
          Render.posts_index(data)
        end
      end

    end

    PostsController.index
  </script>
</body>
</html>

## main.css
.entry {
  padding: .4rem .8rem;
  background: #ededed;
  border-radius: 6px;
  margin: .2rem 3rem 1.6rem 3rem;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Opal Experiments</title>
	<link rel="stylesheet" href="main.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/opal/0.3.43/opal.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/opal-parser/0.3.43/opal-parser.min.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/opal-jquery/0.0.8/opal-jquery.min.js"></script>
	</head>
	<body>
	<div id="posts"></div>
	<script type="text/ruby">
	module Render
	def self.posts_index(posts_data)
	location = Post.posts_section

	posts_data.each do \|post\|
	template = Post.posts_template(post)
	location.append(template)
	end

	end
	end

	class Post
	def self.posts_resource
	"http://benji.herokuapp.com/api/articles/"
	end

	def self.posts_section
	Element.find('#posts')
	end

	def self.posts_template(post)
	"<div class='entry'>"+
	"<h2>#{post['title']}</h2>"+
	"<p>#{post['text']}</p>"+
	"</div>"
	end
	end

	class PostsController < Post
	include Render

	def self.index
	HTTP.get(Post.posts_resource) do \|response\|
	data = response.json["articles"]
	Render.posts_index(data)
	end
	end

	end

	PostsController.index
	</script>
	</body>
	</html>
	.entry {
	padding: .4rem .8rem;
	background: #ededed;
	border-radius: 6px;
	margin: .2rem 3rem 1.6rem 3rem;
	}