page 09 - generator

<!DOCTYPE html>

<!--

GENERATOR page (09) by PEACHTHMS | peachthms.tumblr.com
V1.0

- do not claim this page or any of the code as your own
- do not redistribute this page or any of the code as your own
- do not mix my code with another theme maker's code
- do not remove or edit the credit in anyway; it must remain visible in the code and on the page

saturnthms - credit icon

HOW TO EDIT

Please keep in mind that this generator will require a lot of manual editing.

TO EDIT CURRENT ARRAYS

var var1 = [
    'Fantasy',
    'Adventure',
    'Science Fiction',
    'Horror',
    'Romance'
]

This is the first array you will come across. In my example I have the items inside as different genres.

To edit the items that are currently there, just change what's in the single quotes to what you want.

E.G.

var var1 = [
    'Fantasy'
]

to

var var1 = [
    'Drama'
]

If you would like to add extra items make sure
    - you keep your data in single quotes
    - you add a comma to the very end of the line (outside the quotes!)
    - you don't leave a comma for the last item

E.G.

var var1 = [
    'Fantasy',
    'Adventure',
    'Science Fiction',
    'Horror',
    'Romance',
    'Drama',
    'Thriller',
    'Action'
]

Notice how after action there is no comma?

TO ADD NEW ARRAY

If you want to add a new array, copy and paste this template below the last array

var var#= [
    'CONTENT'
]

Change # to the next corresponding number, e.g. 5. This will make keeping track easier.

E.G.

var var5= [
    'CONTENT'
]

Fill out the items as you see fit.

Next, find

function generate() {
    there will already be code within this function/curly brackets
}

copy and paste this template below the last line in the function, making sure to keep it above the last curly bracket, }.

var random = Math.floor(Math.random() * (var#.length));
document.getElementById('var#').innerHTML = var#[random];

Change # to the number you gave the new array, e.g. 5.

E.G.

var random = Math.floor(Math.random() * (var5.length));
document.getElementById('var5').innerHTML = var5[random];

The very last step is to add in the new HTML. Go to the table and copy and paste this template just above </table>

<tr>
    <td>var#</td>
    <td id="var#"></td>
</tr>

Change var# in the SECOND LINE to the name you want displayed in the left column, e.g. Word Count.

Change var# in the THIRD LINE to the same number you used earlier on in the code, e.g. 5. This is where the items you added earlier will appear when generated.

<tr>
    <td>Word Count</td>
    <td id="var5"></td>
</tr>

-->

<head>

<title>random generator</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="shortcut icon" href="{Favicon}">

<link href="https://fonts.googleapis.com/css?family=Karla|Playfair+Display" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style type="text/css">

* {
    margin: 0;
    padding: 0;
}

::-moz-selection {
    background-color: #a1b895; /** accent colour **/
}

::selection {
    background-color: #a1b895; /** accent colour **/
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #a1b895; /** accent colour **/
}

::-webkit-scrollbar-track {
    background: #ffffff;
}

a {
    color: #686868;
    text-decoration: none;
    -webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

a:hover {
    color: #a1b895; /** accent colour **/
}

body {
    background: #f1f1f1;
    color: #686868;
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    line-height: 1.8em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Times New Roman, serif;
}

section {
    margin: 100px auto;
    padding-bottom: 20px;
    width: 70%;
    height: 80%;
    background: #ffffff;
}

header {
    width: calc(100% - 100px);
    padding: 10px 50px 20px;
    text-align: center;
    border-bottom: 2px solid #f1f1f1;
}

#generator-wrapper {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}

#generator-prompts {
    margin: 50px auto;
    padding: 20px;
}

#links {
    margin: 10px;
}

#links a {
    margin: 0 10px;
    color: #a1b895; /** accent colour **/
}

#links a:hover {
    color: initial;
}

button {
    margin: 30px auto;
    padding: 9px 10px 8px 10px;
    width: auto;
    font-family: 'Karla', Helvetica, sans-serif;
    text-transform: lowercase;
    box-sizing: border-box;
    border: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #f1f1f1;
    -webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

button:focus{
    outline: none
}

button:hover {
    color: #ffffff;
    background: #a1b895; /** accent colour **/
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

table, th, td {
    margin: 20px 0;
    border: 2px solid #f1f1f1;
}

th {
    padding: 5px 3px;
    background: #f1f1f1;
    font-weight: normal;
    text-transform: uppercase;
}

td {
    padding: 10px;
    vertical-align: middle;
}

td:first-of-type {
    width: 100px;
    background: #f1f1f1;
    text-transform: uppercase;
}

td:last-of-type {
    padding: 10px 50px;
    width: calc(100% - 100px);
}

#back {
    position: fixed;
    top: 7px;
    left: 10px;
    text-transform: uppercase;
}

.credit {
    position: fixed;
    bottom: 10px;
    left: 17px;
    font-size: 14px;
}

.credit a {
    font-weight: normal;
}

.credit span {
    font-size: 10px;
    background: #a1b895; /** accent colour **/
    color: #ffffff;
    padding: 6px 9px;
    border-radius: 6px;
    opacity: 0;
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

.credit:hover span {
    margin-left: 15px;
    opacity: 1;
}

.credit:before {
    content: '\e2b0';
    font-family: 'saturnicons';
}

.credit:hover:before {
    color: #a1b895; /** accent colour **/
}

@media only screen and (min-width : 737px) (max-width : 1400px) {
    section {
        margin: 25px auto;
    }
}

@media only screen and (min-width : 319px) and (max-width : 736px) {
    section {
        width: 90%;
    }
}
</style>

<script>

var var1 = [
    'Fantasy',
    'Adventure',
    'Science Fiction',
    'Horror',
    'Romance'
]

var var2 = [
    'Royalty',
    'Pirate',
    'College',
    'Zombie Apocalypse',
    'Reincarnation'
]

var var3 = [
    'Space',
    'Victorian Era',
    'Ancient Egypt',
    'Modern Paris',
    'Middle Ages'
]

var var4 = [
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis, arcu vitae viverra scelerisque, orci mi rutrum magna, et imperdiet urna odio ut tellus. Nulla auctor, justo pretium consequat aliquet, mi tortor convallis tortor, a consequat ipsum lorem eu est. Etiam lobortis, sem ac tempor venenatis, erat velit efficitur est, quis aliquet tellus dolor et metus.',
    'Vivamus ultricies turpis sem, vitae rutrum erat ultricies quis. Nunc efficitur elit eu blandit auctor. Sed sagittis velit nisl, feugiat tincidunt urna rutrum vitae. Sed in rutrum tellus. Maecenas quis lorem enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
    'Integer odio massa, tempus eu eleifend eget, porttitor at erat. Ut ut quam ut magna feugiat pharetra in sed augue. Pellentesque id dictum diam. Praesent faucibus lobortis porta. Aenean faucibus turpis ac odio posuere varius. Nunc et facilisis leo.',
    'Vivamus consectetur, quam quis viverra elementum, dolor dolor ultrices purus, nec auctor erat est eget orci. Etiam a bibendum dolor. Quisque nec auctor justo. Donec sit amet leo dapibus arcu vulputate finibus. Donec aliquet ex vel quam mollis volutpat. Aenean sed erat sapien. Quisque ullamcorper, diam a auctor fringilla, ex metus volutpat neque, quis placerat augue leo sit amet orci.',
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a leo tincidunt, consectetur sapien vitae, volutpat justo. Praesent tempor id nisl a laoreet. Etiam varius mauris sem, tincidunt luctus ante condimentum id.'
]

function generate() {
    var random = Math.floor(Math.random() * (var1.length));
    document.getElementById('var1').innerHTML = var1[random];
    var random = Math.floor(Math.random() * (var2.length));
    document.getElementById('var2').innerHTML = var2[random];
    var random = Math.floor(Math.random() * (var3.length));
    document.getElementById('var3').innerHTML = var3[random];
    var random = Math.floor(Math.random() * (var4.length));
    document.getElementById('var4').innerHTML = var4[random];
}
</script>

</head>

<body>

<section>
<header>
    <h1>random generator</h1>

    <div id="links">
        <a href="/">home</a>
        <a href="/ask">message</a>
        <a href="#">link</a>
        <a href="#">link</a>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</header>

<article id="generator-wrapper">

    <button id="generate-button" onclick="generate()">generate story details</button>

    <table id="generated" cellspacing="0">
        <tr>
            <td>genre</td>
            <td id="var1"></td>
        </tr>
        <tr>
            <td>au</td>
            <td id="var2"></td>
        </tr>
        <tr>
            <td>setting</td>
            <td id="var3"></td>
        </tr>
        <tr>
            <td>prompt</td>
            <td id="var4"></td>
        </tr>
    </table>

</article>

</section>

<div class="credit"><a href="http://peachthms.tumblr.com"><span>page by peachthms</span></a></div>

</body>

</html>