paladique/index.html Secret

## readme.md

      
    Raw
  

              readme.md
            
          
    25 Days of Serverless Challenge: Day 10, Author's Solution

There are many ways to approach this challenge, this is my solution.

Create a Storage Account

Enable "Static Website" option.
Set index document name to index.html
Save the primary endpoint somewhere to visit later.


Create a Logic App with a recurrence trigger

Add Twitter connector and write the search syntax for desired Tweets. Here's a sample: (from:DealsUnderCost OR from:wirecutterdeals ) OR (#deal OR #deals) filter:links -filter:replies

This search gathers tweets that:

Are my favorite accounts for deals
Uses the #deals or #deal hashtags
Only have links in them
Are not replies


Create an variable action and save the search results body to a variable.
Create a blob creation action, select the blob container named $web from step 1 and name the blob something unique (the date time expressions are good option for this. Example: dayOfYear(utcNow())). Add .json to the end of its name.
Set the blob contents to the value of the variable. Alternatively, you can use the update blob action to modify the same blob each instead. 


Open VS Code and create an HTML page called index.html.

In index.html, create a basic barebones HTML page by typing html and pressing tab.
Add a script tag with JavaScript code that loops through the JSON blob from step 2 and adds/appends the TweetText content to the HTML page. Add as much information as you'd like from the Twitter data.
If you'd like Tweets with links to render as links on your webpage, use a library like anchorme.


Visit the page created in step 1.

Here's the end result:

Additional Approaches


Use a loop action in Logic Apps to loop through the Twitter search result body, grabs the tweet contents, and inserts it into the body of the HTML. JavaScript is not needed for this approach.
Using an HTTP triggered Azure Function to serve the JSON file through its endpoint.


## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="anchorme.min.js" type="text/javascript"></script>
    <script>

    let request = new XMLHttpRequest();
    request.responseType = 'text'
    request.open('GET', "blob_filename.json");
    request.send();

    request.onload = function() {
    var tweetData = JSON.parse(request.response);
    var list = document.getElementById("dealsList")

     for (const t of tweetData) {
         var li = document.createElement("li")
         li.innerHTML = anchorme(t.TweetText)
         list.appendChild(li)
     }
    }
    </script>
    <title>Today's Deals</title>
</head>
<body>
    <h1>Today's Deals</h1>
    <div id="dealContainer">
        <ul id="dealsList">

        </ul>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="anchorme.min.js" type="text/javascript"></script>
	<script>

	let request = new XMLHttpRequest();
	request.responseType = 'text'
	request.open('GET', "blob_filename.json");
	request.send();

	request.onload = function() {
	var tweetData = JSON.parse(request.response);
	var list = document.getElementById("dealsList")

	for (const t of tweetData) {
	var li = document.createElement("li")
	li.innerHTML = anchorme(t.TweetText)
	list.appendChild(li)
	}
	}
	</script>
	<title>Today's Deals</title>
	</head>
	<body>
	<h1>Today's Deals</h1>
	<div id="dealContainer">
	<ul id="dealsList">

	</ul>
	</div>
	</body>
	</html>