Coding: Random Writing Prompt Generator

I’ve been working on this project for the last three days. I admit, the first day was spent looking for a good theme/idea and the last two was dreading to start the Javascript portion. I was really happy how it all came together, I can spend more time fixing the font sizes and playing around with it, but I think it’s time to move on to my next project. I appreciate any feedback!

Creative Writing Prompt Generator

  • A random quote generator that spits out a new creative writing prompt every time you click on ‘next’
  • When ‘write on!’ is clicked, the current prompt can be shared via twitter in a new window.
  • The back end is connected to Google Sheets.
  • Prompts are from SF Grotto’s 642 Things to Write About
  • I wanted the theme to be minimalist, exuding those millennial vibes that I love to hate. That means, peachy pink gradients, Roboto fonts, and contrasting bold blue blocks

Randon Writing Prompt Generator

Concepts I learned and problems I overcame during this project:

HTML: Open Links in a New Window or Tab by using adding a target=”_blank” attribute to your links (anchor tags). It’s worth noting that this method primarily works in desktop browsers. target=”new” can be used on mobile browsers.

Use a Google Spreadsheet as your JSON backend. I didn’t exactly use an API for this project because I had a specific idea of what I wanted the prompts to be (creative writing prompts for 642 Things to Write About). I used Google Sheets to create a list that would be pulled and linked  to my JSON backend. Doing so, I can add and quickly edit the growing list of creative writing prompts. First publish the sheet and obtain the Key from the URL and pasting it on ‘Put Key Here’. CoderWall had a great resource, I didn’t need to obtain the API from Google. (I have yet to experiment with API, yikes!)

For my own development, I broke down the pure JSON data into objects, until I found the column and item I wanted from the array.

$.getJSON("http://cors.io/spreadsheets.google.com/feeds/list/PUT-KEY-HERE/od6/public/values?alt=json", function(data) {
  //first row "title" column
  console.log(data.feed.entry[0]['gsx$title']['$t']);
});

Add JQuery script in Codepen’s JS Settings. At first I was wondering why my Jquery code was not working, and then I learned how to ‘quick-add’ JQuery in the settings, no need to write a single line of code. However, codepen, will still allow us to just SCRIPT up resources, as well. (That means, adding the resources to the HTML in the head section.) Super helpful, here’s additional resources on Adding External Resources on CodePen.

<link rel="stylesheet" href="http://website.com/style.css">
http://website.com/script.js

Twitter’s Dev Documentation on the Tweet Button.  Twitter has an amazing documentation on adding the Tweet Button. While I started using the Tweet Button on my project, I ended up just breaking it down to opt for a simpler anchor to be able to parse the links in text and add to the minimalist feel.

Dynamically change Tweet Button “data-text” attribute. This can only be done once, as discussed here, where changing the data-text attribute can be done before loading the script.

<a href="http://twitter.com/share"
 class="twitter-share-button"
 data-text="This is what we want to change dynamically"
 data-count="none" data-via="chris_camps">Tweet</a>

<script> 
$(document).ready(function(){
    $('a[data-text]').each(function(){
      $(this).attr('data-text', "This works!");
    });
    $.getScript('http://platform.twitter.com/widgets.js');
});

Getting a random number between two values

function getRandomArbitrary(min, max) {   
return Math.random() * (max - min) + min; 
}

Additional Resources:

See the Pen freeCodeCamp: Random Writing Prompts by Angel Certeza (@acertz) on CodePen.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s