Zarar089/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>Silly story generator</title>
</head>

<body>
    <div>
        <label for="customname">Enter custom name:</label>
        <input id="customname" type="text" placeholder="">
    </div>
    <div>
        <label for="us">US</label><input id="us" type="radio" name="ukus" value="us" checked>
        <label for="uk">UK</label><input id="uk" type="radio" name="ukus" value="uk">
    </div>
    <div>
        <button class="randomize">Generate random story</button>
    </div>
    <!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
    <p class="story"></p>


    <script src="main.js"></script>
</body>

</html>

## script.js
const customName = document.getElementById('customname');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');


function randomValueFromArray(array) {
    const random = Math.floor(Math.random() * array.length);
    return array[random];
}


insertX = ['Willy the Goblin', 'Big Daddy', 'Father Christmas']
insertY = ['the soup kitchen', 'Disneyland', 'the White House']
insertZ = ['spontaneously combusted',
    'melted into a puddle on the sidewalk',
    'turned into a slug and crawled away'
]

randomize.addEventListener('click', result);

function result() {
    let name;
    if (customName.value !== '') {
        name = customName.value;
    } else {
        name = 'Bob';
    }

    if (document.getElementById("uk").checked) {
        let weight = Math.round(300);
        let temperature = Math.round(94);
    }

    rand_insertX = randomValueFromArray(insertX);
    rand_insertY = randomValueFromArray(insertY);
    rand_insertZ = randomValueFromArray(insertZ);

    storyText = `It was 94 fahrenheit outside, so ${rand_insertX} went for a walk. When they got to ${rand_insertY}, they stared in horror for a few moments, then ${rand_insertZ}. ${name} saw the whole thing, but was not surprised — "${rand_insertX}" weighs 300 pounds, and it was a hot day.`

    story.textContent = storyText;
    story.style.visibility = 'visible';
}

## silly-story-generator.markdown

      
    Raw
  

              silly-story-generator.markdown
            
          
    Silly Story Generator

A Pen by Zarar Mahmud on CodePen.
License.

  
## style.css
body {
            font-family: helvetica, sans-serif;
            width: 350px;
        }

        label {
            font-weight: bold;
        }

        div {
            padding-bottom: 20px;
        }

        input[type="text"] {
            padding: 5px;
            width: 150px;
        }

        p {
            background: #FFC125;
            color: #5E2612;
            padding: 10px;
            visibility: hidden;
        }
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">
	<title>Silly story generator</title>
	</head>

	<body>
	<div>
	<label for="customname">Enter custom name:</label>
	<input id="customname" type="text" placeholder="">
	</div>
	<div>
	<label for="us">US</label><input id="us" type="radio" name="ukus" value="us" checked>
	<label for="uk">UK</label><input id="uk" type="radio" name="ukus" value="uk">
	</div>
	<div>
	<button class="randomize">Generate random story</button>
	</div>
	<!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
	<p class="story"></p>


	<script src="main.js"></script>
	</body>

	</html>
	const customName = document.getElementById('customname');
	const randomize = document.querySelector('.randomize');
	const story = document.querySelector('.story');


	function randomValueFromArray(array) {
	const random = Math.floor(Math.random() * array.length);
	return array[random];
	}


	insertX = ['Willy the Goblin', 'Big Daddy', 'Father Christmas']
	insertY = ['the soup kitchen', 'Disneyland', 'the White House']
	insertZ = ['spontaneously combusted',
	'melted into a puddle on the sidewalk',
	'turned into a slug and crawled away'
	]

	randomize.addEventListener('click', result);

	function result() {
	let name;
	if (customName.value !== '') {
	name = customName.value;
	} else {
	name = 'Bob';
	}

	if (document.getElementById("uk").checked) {
	let weight = Math.round(300);
	let temperature = Math.round(94);
	}

	rand_insertX = randomValueFromArray(insertX);
	rand_insertY = randomValueFromArray(insertY);
	rand_insertZ = randomValueFromArray(insertZ);

	storyText = `It was 94 fahrenheit outside, so ${rand_insertX} went for a walk. When they got to ${rand_insertY}, they stared in horror for a few moments, then ${rand_insertZ}. ${name} saw the whole thing, but was not surprised — "${rand_insertX}" weighs 300 pounds, and it was a hot day.`

	story.textContent = storyText;
	story.style.visibility = 'visible';
	}
	body {
	font-family: helvetica, sans-serif;
	width: 350px;
	}

	label {
	font-weight: bold;
	}

	div {
	padding-bottom: 20px;
	}

	input[type="text"] {
	padding: 5px;
	width: 150px;
	}

	p {
	background: #FFC125;
	color: #5E2612;
	padding: 10px;
	visibility: hidden;
	}