Riot simple movies live search
How do I make an riot simple movies live search?
Simple live search tag using riot to fetch movies from imdb. What is a riot simple movies live search? How do you make a riot simple movies live search? This script and codes were developed by Gianluca Guarini on 04 November 2022, Friday.
Riot simple movies live search - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Riot simple movies live search</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <search api="http://www.imdb.com/title/"></search>
<script type='riot/tag'> <search> <form onsubmit={ search }> <label> <span> Search a movie </span> <input oninput={ search } onchange={ search } name='s' placeholder='28 Days Later..' type='search' /> </label> <form> <div if={ isLoading } class='loader'> <img src='http://samherbert.net/svg-loaders/svg-loaders/puff.svg' /> </div> <p class='error' if={ error }>{ error }</p> <div if={ results.length }> <ul> <li each={ results }> <a href="{ parent.opts.api }{ imdbID }" target="_blank">{ Title }</a> <span>{ Year }</span> </li> </ul> </div> var lastSearch = null, reset = function() { this.results = [] this.error = false }.bind(this) doApiRequest = debounce(function(search) { fetch('//www.omdbapi.com/?s=' + search) .then(function(res) { return res.json() }) .then(function(data) { reset() if (this.s.value) if (data.Search) this.results = data.Search else this.error = data.Error this.isLoading = false this.update() }.bind(this)) }.bind(this), 300, false) this.results = [] search(e) { var search = this.s.value if (!search) { reset() } else if (lastSearch != search) { reset() this.isLoading = true doApiRequest(search) } lastSearch = search } <style scoped> :scope { position: absolute; top: 2rem; left: 50%; transform: translate(-50%, 0); } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loader { margin: 6rem 0 0; } .error { color: #FFFAAA; margin: 1rem 0; } label { align-items: center; display: flex; flex-direction: column; font-size: 1.6rem; } label span { text-shadow: 1px 1px 2px rgba(0,0,0,0.8); } input { margin: 1rem 0 0; font-size: 1.6rem; font-weight: 300; padding: 0.8rem 1rem; color: white; border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05); transition: all 0.3s; box-shadow: 1px 1px 2px rgba(0,0,0, 0.3); -moz-appearance:none; -webkit-appearance:none; outline: none; } input:focus { border: 1px solid transparent; background: rgba(255, 255, 255, 0.08); } ul { padding: 0; margin: 1rem 0 2rem; } ul li { padding: 0.6rem 1rem; margin: 1px 0; line-height: 1.4rem; display: flex; justify-content: space-between; align-items: center; align-content: space-between; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 2px rgba(0,0,0, 0.3); box-sizing: border-box; } ul li:hover, ul li:active, ul li:focus { background: rgba(255, 255, 255, 0.1); } ul li a { margin: 0 0.6rem 0 0; text-decoration: none; color: white; } ul li span { opacity: 0.5; } </style> </search>
</script> <script src='https://cdn.jsdelivr.net/riot/2.3.18/riot+compiler.min.js'></script>
<script src='https://cdn.rawgit.com/github/fetch/master/fetch.js'></script> <script src="js/index.js"></script>
</body>
</html>
Riot simple movies live search - Script Codes CSS Codes
body { font-family: 'Helvetica Neue', Helvetica, Arial; font-weight: 300; background-size: cover; background-attachment: fixed; background-image: -webkit-radial-gradient(ellipse farthest-corner at top, #661141, #000000); background-image: radial-gradient(ellipse farthest-corner at top, #661141, #000000); color: white;
}
Riot simple movies live search - Script Codes JS Codes
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); };
};
riot.mount('*')
Developer | Gianluca Guarini |
Username | GianlucaGuarini |
Uploaded | November 04, 2022 |
Rating | 3.5 |
Size | 3,501 Kb |
Views | 16,192 |
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!
Name | Size |
The 3D Worrying Cubes | 103,249 Kb |
Blurred Scrollable Overlay | 3,413 Kb |
Riot and es6 | 2,779 Kb |
Colored Wall | 2,551 Kb |
Find your mouse cursor | 3,687 Kb |
The Best Flash Site Ever | 2,609 Kb |
Appletv | 6,368 Kb |
EasyAnimationFrame.js | 2,382 Kb |
The Milk Glass | 26,300 Kb |
Threejs-amd-bootstrap | 1,555 Kb |
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!
Name | Username | Size |
React Vote Component | Souporserious | 5,465 Kb |
Improve | Gavra | 1,652 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
Project_one | MOHIM | 9,592 Kb |
Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!