Vanilla JS Forismatic Example

Developer
Sky
Size
2,284 Kb
Views
6,072
  1. Vanilla JS Forismatic Example Previews
  2. Vanilla JS Forismatic Example HTML Codes
  3. Vanilla JS Forismatic Example CSS Codes
  4. Vanilla JS Forismatic Example JS Codes

How do I make an vanilla js forismatic example?

What is a vanilla js forismatic example? How do you make a vanilla js forismatic example? This script and codes were developed by Sky on 29 January 2023, Sunday.

Vanilla JS Forismatic Example Previews
IQ Test

Vanilla JS Forismatic Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vanilla JS Forismatic Example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="quote-box"> <p id="quote"></p> <i id="author"></i>
</div>
<button id="new-quote">New Quote</button> <script src="js/index.js"></script>
</body>
</html>

Vanilla JS Forismatic Example - Script Codes CSS Codes

html { min-height: 100vh;
}
body { background-image: -webkit-linear-gradient( 315deg, #43CBFF 0%, #9708CC 100%); background-image: linear-gradient( 135deg, #43CBFF 0%, #9708CC 100%); color: #eee; font-family: verdana; font-size: 16px; min-width: 280px; margin: 0 auto; max-width: 600px; text-align: center;
}
#quote-box { border-left: 8px solid #D1460A; min-width: 250px; margin: 20vh auto 40px; padding: 15px 0 15px 30px; text-align: left; width: 50vw;
}
button { border: 1px solid transparent; border-radius: 3px; font-size: inherit; height: 2.25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: white; border-color: #dbdbdb; color: #363636; cursor: pointer;
}

Vanilla JS Forismatic Example - Script Codes JS Codes

// Get the quote on window load
window.onload = getQuote;
// register a click handler on the new quote button
document.getElementById('new-quote').onclick = getQuote;
// Append the API url as a script to the page
// The jsonp parameter defines the function to call when complete (parseQuote)
function getQuote() { document.getElementById('quote').innerHTML = "Loading ..." var s = document.createElement('script'); s.src = 'https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=parseQuote'; s.id = 'script' document.body.appendChild(s);
}
// remove the script tag now that we have a response and add the quote to the page
function parseQuote(response) { document.getElementById('script').outerHTML = ""; document.getElementById("quote").innerHTML = response.quoteText; document.getElementById("author").innerHTML = response.quoteAuthor;
}
Vanilla JS Forismatic Example - Script Codes
Vanilla JS Forismatic Example - Script Codes
Home Page Home
Developer Sky
Username skycoder
Uploaded January 29, 2023
Rating 3
Size 2,284 Kb
Views 6,072
Do you need developer help for Vanilla JS Forismatic Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sky (skycoder) Script Codes
Name
Random Quote Machine
Search box that submits when you hit Enter
Show the Local Weather - and a local background image
Colors and Sounds
JSONP Examples with the Dark Sky API
Calculator
Bootstrap 3 Grid Example
Wikipedia Viewer
FCC Leaderboard - vanilla JS
Feather Icons
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!