Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground
Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
data_array
Python Editor
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html> <!--Thanks to Google for JavaScript idea--> <head> </head> <body> <h1>Welcome to Mad Libs</h1> <button onclick="performAction()">Go</button> <br> <input type="text" id="b1" placeholder="Enter an adjective"> <p id="output1"></p> <button onclick="performA()">Go</button> <br> <input type="text" id="b2" placeholder="Enter a adjective"> <p id="output2"></p> <button onclick="performB()">Go</button> <br> <input type="text" id="b3" placeholder="Enter a room"> <p id="output3"></p> <button onclick="performC()">Go</button> <br> <input type="text" id="b4" placeholder="Enter a relative"> <p id="output4"></p> <button onclick="performD()">Go</button> <br> <input type="text" id="b5" placeholder="Enter a food"> <p id="output5"></p> <button onclick="performE()">Go</button> <br> <input type="text" id="b6" placeholder="Enter a food"> <p id="output6"></p> </body> </html>
body { background: black; } h1 { text-align: center; color: white; } p{ color: white; }
// Write JavaScript here function performAction() { // 1. Get the input element and its value var inputValue = document.getElementById("b1").value; var resultText = "It was a " + inputValue + ", cold Nevember day."; document.getElementById("output1").innerHTML = resultText; var inputValue = document.getElementById("direction").value; } function performA(){ var inputValue = document.getElementById("b2").value; var resultText = "I woke up to the " + inputValue + " smell of something roasting."; document.getElementById("output2").innerHTML = resultText; var inputValue = document.getElementById("direction").value; } function performB(){ var inputValue = document.getElementById("b3").value; var resultText = "I head to the " + inputValue + "."; document.getElementById("output3").innerHTML = resultText; var inputValue = document.getElementById("direction").value; } function performC(){ var inputValue = document.getElementById("b4").value; var resultText = "There I find my " + inputValue + " cooking a Thanksgiving meal."; document.getElementById("output4").innerHTML = resultText; var inputValue = document.getElementById("direction").value; } function performD(){ var inputValue = document.getElementById("b5").value; var resultText = "We had " + inputValue + "."; document.getElementById("output5").innerHTML = resultText; var inputValue = document.getElementById("direction").value; } function performE(){ var inputValue = document.getElementById("b6").value; var resultText = "and " + inputValue + "."; document.getElementById("output6").innerHTML = resultText; var inputValue = document.getElementById("direction").value; }
Check out the new AI-powered Python Playground
×