Every click but the rest is Ok
coming next some explanations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Silly story generator</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
width: 350px;
padding: 50px;
}
label {
font-weight: bold;
}
div {
padding-bottom: 20px;
}
input[type = "text"] {
padding: 5px;
width: 150px;
}
p {
background-color: #FFC125;
color: #5E2612;
padding: 10px;
visibility: hidden;
}
button {
background-color: yellow;
width: 200px;
height: 40px;
}
</style>
</head>
<body>
<div>
<label for="customname">Enter custom name: </label>
<input id="customname" type="text" placeholder="Tom">
</div>
<div>
<label for="us">US</label><input type="radio" name="ukus" id="us" value="us" checked>
<label for="uk">UK</label><input type="radio" name="ukus" id="uk" value="uk">
</div>
<div>
<button class="randomize">Generate random story</button>
</div>
<p class="story"></p>
<script>
//1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS
const customName = document.getElementById('#customname');// input/text
const randomize = document.querySelector('.randomize');// Button
const story = document.querySelector('.story');//paragraph
function randomValueFromArray(array){
const random = Math.floor(Math.random()*array.length);
return array[random];
}
//2. RAW TEXT STRINGS
const storyText = "It was 94 fahrenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but was not surprised — :insertx: weighs 300 pounds, and it was a hot day.";
const insertX = ['Willy the Goblin','Big Daddy','Father Christmas'];
let random = Math.floor(Math.random()*3);
function randomValueFromArray(array){
random = Math.floor(Math.random()*array.length);
//return array[random];
return random;
}
// alert(random);
const insertY = ['the soup kitchen','Disneyland','the White House'];
const insertZ = ['spontaneously combusted','melted into a puddle on the sidewalk','turned into a slug and crawled away'];
let newStory = storyText;
let xItem = insertX[random];
// alert('bosta');
// alert(xItem);
// -----here
newStory = newStory.replaceAll(':insertx:',xItem);
let random2 = Math.floor(Math.random()*3);
let yItem = insertY[random2];
newStory = newStory.replace(':inserty:',yItem)
// alert(yItem);
let random3 = Math.floor(Math.random()*3);
let zItem = insertZ[random3];
// alert(zItem);
newStory = newStory.replace(':insertz:',zItem);
//alert(insertX.map(test))
// let modern = storyText.replace(':insertx:','Hold there');
// alert(insertX.filter(randomValueFromArray));
//3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION
//alert(12);
//const name = 'Denver';
randomize.addEventListener('click', result);
//alert(7);
function result() {
//alert(11);
if(customname.value !== '') {
const name = customname.value;
newStory = newStory.replaceAll('Bob',name);
}
if(document.getElementById("uk").checked) {
const weight = ((Math.round(300))/14).toFixed(1);
const temperature = (((Math.round(94)) - 32)*5/9).toFixed(1);
newStory = newStory.replaceAll('94 fahrenheit',`${temperature} centigrades`);
newStory = newStory.replaceAll('300 pounds', `${weight} stones`);
}
story.style.visibility = 'visible';
story.textContent = newStory;// modern;
}
</script>
</body>
</html>
Rute Bezerra de Menezes Gondim
No comments:
Post a Comment