JavaScript Templates

Developer
Derek Wheelden
Size
4,381 Kb
Views
30,360
  1. JavaScript Templates Previews
  2. JavaScript Templates HTML Codes
  3. JavaScript Templates CSS Codes
  4. JavaScript Templates JS Codes

How do I make an javascript templates?

Appending large blocks of code, as we often do in AJAX calls, is pretty gross. Clean it up with JS templates. What is a javascript templates? How do you make a javascript templates? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.

JavaScript Templates Previews
IQ Test

JavaScript Templates - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JavaScript Templates</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Oswald|Open+Sans:400,300);
.instagrams { width: 60em; margin: 0 auto;
}
.instagram { position: relative; width: 31%; margin: 1%; padding-bottom: 31%; float: left; overflow: hidden;
}
.instagram .user { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 15px; background: #4d2673;
}
.instagram .user img { position: absolute; top: 15px; right: 15px; width: 70px; border-radius: 200px; vertical-align: middle; box-shadow: 0px 0px 0px 5px #b38cd9; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
.instagram .user img:hover { border-radius: 0; box-shadow: none;
}
.instagram .user h1 { width: 70%; margin: 0; font-size: 20px; line-height: 100px; font-weight: 100; color: white; text-align: left;
}
.instagram > img { position: absolute; top: 0; left: 0; width: 100%; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; -webkit-backface-visibility: hidden;
}
.instagram:hover > img { -webkit-filter: grayscale(100%); -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px);
}
.instagram:hover > .user img { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);
}
/* PAGE STYLES */
* { box-sizing: border-box;
}
html { font-size: 62.5%;
}
body { background: #8040bf; font-family: 'Open Sans', sans-serif; font-size: 1.5em; line-height: 1.5; font-weight: 300; color: white;
}
h1 { font-family: 'Oswald', sans-serif; font-size: 2.6667em; font-weight: 400; text-transform: uppercase; text-align: center;
}
body > p { font-size: 1.3333em; text-align: center;
}
body > p a { color: white;
}
body > p a:hover { opacity: 0.8;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>JavaScript Templates</h1>
<p>Check out my blog post about this <a href="http://omit.io/blog/avoiding-gross-javascript-with-templates/">over here</a></p>
<div class="instagrams"></div>
<!-- Here is our Mustache template -->
<script id="instagramSuccess" type="text/template"> {{#photos}} <div class="instagram"> <div class="user"> <img src="{{user.profile_picture}}" /> <h1>{{user.full_name}}</h1> </div> <img src="{{images.low_resolution.url}}" /> </div> {{/photos}}
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JavaScript Templates - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Oswald|Open+Sans:400,300);
.instagrams { width: 60em; margin: 0 auto;
}
.instagram { position: relative; width: 31%; margin: 1%; padding-bottom: 31%; float: left; overflow: hidden;
}
.instagram .user { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 15px; background: #4d2673;
}
.instagram .user img { position: absolute; top: 15px; right: 15px; width: 70px; border-radius: 200px; vertical-align: middle; box-shadow: 0px 0px 0px 5px #b38cd9; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
.instagram .user img:hover { border-radius: 0; box-shadow: none;
}
.instagram .user h1 { width: 70%; margin: 0; font-size: 20px; line-height: 100px; font-weight: 100; color: white; text-align: left;
}
.instagram > img { position: absolute; top: 0; left: 0; width: 100%; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; -webkit-backface-visibility: hidden;
}
.instagram:hover > img { -webkit-filter: grayscale(100%); -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px);
}
.instagram:hover > .user img { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);
}
/* PAGE STYLES */
* { box-sizing: border-box;
}
html { font-size: 62.5%;
}
body { background: #8040bf; font-family: 'Open Sans', sans-serif; font-size: 1.5em; line-height: 1.5; font-weight: 300; color: white;
}
h1 { font-family: 'Oswald', sans-serif; font-size: 2.6667em; font-weight: 400; text-transform: uppercase; text-align: center;
}
body > p { font-size: 1.3333em; text-align: center;
}
body > p a { color: white;
}
body > p a:hover { opacity: 0.8;
}

JavaScript Templates - Script Codes JS Codes

var $instagrams = $('.instagrams'), feedPath = 'https://api.instagram.com/v1/media/popular?client_id=2751b9d3ef1948da8c6eeceefe3fb718&count=3';
var gettingInstagrams = $.ajax({ url: feedPath, dataType: 'jsonp'
}).done(function(json) { var template = $('#instagramSuccess').html(), html, data; html = Mustache.to_html(template, { photos : json.data }); $instagrams.append(html);
});
JavaScript Templates - Script Codes
JavaScript Templates - Script Codes
Home Page Home
Developer Derek Wheelden
Username frxnz
Uploaded August 10, 2022
Rating 3.5
Size 4,381 Kb
Views 30,360
Do you need developer help for JavaScript Templates?

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!

Derek Wheelden (frxnz) Script Codes
Name
Google Maps Geolocation Test
Fantastic Mr. Fox
Sliding Tab Box Things
Pulsing Notification
Tile Animation Thing
Dr. Strangelove
Drop Caps
3D Cube Carousel
Music Player
Folding Panels
Create amazing Facebook ads 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!