Sure, here is a basic HTML + JavaScript code to create a Mad Libs app that meets your requirements:
html<!DOCTYPE html>
<html>
<head>
<title>Mad Libs Generator</title>
</head>
<body>
<h1>Mad Libs Generator</h1>
<p>Enter the following words to generate a funny story:</p>
<p>
Adjective: <input type="text" id="adjective"> <br>
Noun: <input type="text" id="noun"> <br>
Verb: <input type="text" id="verb">
</p>
<button id="generate-story-btn">Generate Story</button>
<br>
<br>
<div id="story" style="display: none;"></div>
<script>
const generateStoryBtn = document.querySelector("#generate-story-btn");
const adjectiveInput = document.querySelector("#adjective");
const nounInput = document.querySelector("#noun");
const verbInput = document.querySelector("#verb");
const storyDiv = document.querySelector("#story");
generateStoryBtn.addEventListener("click", function() {
const adjective = adjectiveInput.value;
const noun = nounInput.value;
const verb = verbInput.value;
storyDiv.innerHTML = `Once upon a time, there was a ${adjective} ${noun} who loved to ${verb}.`;
storyDiv.style.display = "block";
// animate the button
generateStoryBtn.classList.add("dancing");
setTimeout(function() {
generateStoryBtn.classList.remove("dancing");
}, 1000);
// speak the story
const speech = new SpeechSynthesisUtterance(storyDiv.innerHTML);
speechSynthesis.speak(speech);
});
</script>
<style>
#generate-story-btn.dancing {
animation: dance 0.5s ease-in-out infinite alternate;
}
@keyframes dance {
from { transform: translateX(-10px); }
to { transform: translateX(10px); }
}
</style>
</body>
</html>
This code creates a simple Mad Libs generator that allows you to input words for an adjective, noun, and verb. When you click the "Generate Story" button, the story is revealed, spoken using a synthesized voice, and the button will animate with a "dance" effect.
Certainly! Here's an updated version of the code to include the additional inputs you requested:
html<!DOCTYPE html>
<html>
<head>
<title>Mad Libs Generator</title>
</head>
<body>
<h1>Mad Libs Generator</h1>
<p>Enter the following words to generate a funny story:</p>
<p>
Adjective 1: <input type="text" id="adjective1"> <br>
Adjective 2: <input type="text" id="adjective2"> <br>
Adjective 3: <input type="text" id="adjective3"> <br>
Noun 1: <input type="text" id="noun1"> <br>
Noun 2: <input type="text" id="noun2"> <br>
Verb 1: <input type="text" id="verb1"> <br>
Verb 2: <input type="text" id="verb2"> <br>
Adverb 1: <input type="text" id="adverb1"> <br>
Adverb 2: <input type="text" id="adverb2"> <br>
Adverb 3: <input type="text" id="adverb3">
</p>
<button id="generate-story-btn">Generate Story</button>
<br>
<br>
<div id="story" style="display: none;"></div>
<script>
const generateStoryBtn = document.querySelector("#generate-story-btn");
const adjective1Input = document.querySelector("#adjective1");
const adjective2Input = document.querySelector("#adjective2");
const adjective3Input = document.querySelector("#adjective3");
const noun1Input = document.querySelector("#noun1");
const noun2Input = document.querySelector("#noun2");
const verb1Input = document.querySelector("#verb1");
const verb2Input = document.querySelector("#verb2");
const adverb1Input = document.querySelector("#adverb1");
const adverb2Input = document.querySelector("#adverb2");
const adverb3Input = document.querySelector("#adverb3");
const storyDiv = document.querySelector("#story");
generateStoryBtn.addEventListener("click", function() {
const adjective1 = adjective1Input.value;
const adjective2 = adjective2Input.value;
const adjective3 = adjective3Input.value;
const noun1 = noun1Input.value;
const noun2 = noun2Input.value;
const verb1 = verb1Input.value;
const verb2 = verb2Input.value;
const adverb1 = adverb1Input.value;
const adverb2 = adverb2Input.value;
const adverb3 = adverb3Input.value;
storyDiv.innerHTML = `Once upon a time, there was a ${adjective1} ${noun1} who loved to ${verb1} with a ${adjective2
} ${noun2}. They would often ${verb2} ${adverb1} while singing songs and telling jokes. One day, they came across a group of ${adjective3} animals who were in need of some cheer. The ${noun1} used their wit and humor to make the animals laugh ${adverb2}, and before long, everyone was ${verb1} together and having a great time.
As the sun began to set, the ${noun1} said goodbye to their new friends and set off on their journey. They couldn't wait to tell everyone about their ${adverb3} adventure with the ${adjective3} animals. And so, the ${noun1} lived happily ever after, spreading joy and laughter wherever they went.`;
javascript storyDiv.style.display = "block";
const utterance = new SpeechSynthesisUtterance(storyDiv.textContent);
window.speechSynthesis.speak(utterance);
generateStoryBtn.style.backgroundColor = "yellow";
generateStoryBtn.style.padding = "10px 20px";
generateStoryBtn.style.borderRadius = "5px";
generateStoryBtn.style.boxShadow = "2px 2px 2px gray";
let angle = 0;
setInterval(function() {
angle += 3;
generateStoryBtn.style.transform = `rotate(${angle}deg)`;
}, 50);
});
</script>
</body>
</html>
```This updated code includes additional inputs for 2 nouns, 3 adjectives, 2 verbs, and 3 adverbs, and it will dynamically insert the user-supplied values into the story. The story will then be read out loud using text-to-speech synthesis, and the "Generate Story" button will dance when clicked!
Sure! Here is a CSS file that you can use to style your Mad Libs app in the style of Microsoft Xbox:
cssbody {
background-color: #52B0D9;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
color: #FEE15D;
margin-bottom: 50px;
font-size: 40px;
text-shadow: 2px 2px #000000;
}
input[type="text"] {
padding: 10px 20px;
margin: 10px;
font-size: 20px;
border-radius: 5px;
border: none;
box-shadow: 2px 2px 2px gray;
}
.input-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 50px;
}
.input-label {
color: #FEE15D;
margin-bottom: 10px;
font-size: 20px;
}
#generate-story-btn {
background-color: #FEE15D;
color: #52B0D9;
padding: 20px 40px;
border-radius: 5px;
border: none;
box-shadow: 2px 2px 2px gray;
font-size: 20px;
cursor: pointer;
}
#generate-story-btn:active {
transform: translateY(2px);
}
#story {
background-color: #52B0D9;
color: #FEE15D;
padding: 20px;
border-radius: 5px;
box-shadow: 2px 2px 2px gray;
display: none;
font-size: 20px;
text-align: center;
}
This CSS file adds styles to the various elements of the HTML file to create a visually appealing Mad Libs app with a Microsoft Xbox theme. The background color is set to the Xbox green-blue, and the text and button colors are set to the Xbox yellow. The font is set to Arial, and the text has a drop shadow to make it stand out. The inputs have a padding, margin, font size, border radius, and box shadow. The "Generate Story" button has a yellow background and blue text, and it will change its position slightly when clicked to give the appearance of being pressed down. The story div has a blue background, yellow text, and a box shadow.
Sure! Here is an updated <head> tag for the HTML file that includes a reference to the madlibstyle.css stylesheet:
bash<head>
<title>Mad Libs</title>
<link rel="stylesheet" type="text/css" href="madlibstyle.css">
</head>
This updated <head> tag includes a reference to the madlibstyle.css stylesheet using a <link> element. The rel attribute is set to "stylesheet" to indicate that this is a stylesheet, and the type attribute is set to "text/css" to indicate that the stylesheet is written in CSS. The href attribute specifies the location of the stylesheet. By linking to this stylesheet in the HTML file, the styles defined in madlibstyle.css will be applied to the elements in the HTML file.