Skip to content

Instantly share code, notes, and snippets.

@oddlyfunctional

oddlyfunctional/app.js

Created July 26, 2017 15:01
Show Gist options
  • Save oddlyfunctional/6f88d78459ab81f6d2d389224dad4ba7 to your computer and use it in GitHub Desktop.
Save oddlyfunctional/6f88d78459ab81f6d2d389224dad4ba7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
$(document).ready(function() {
$("#images").on('click', ".image", function(event) {
$(this).toggleClass('img-circle');
});
$("#add").on("click", function geraImagem(event) {
event.preventDefault();
var id = Math.floor(Math.random() * 11);
var url = "http://lorempixel.com/160/160/city/" + id;
$("#images").append('<img class="image" src="' + url + '" />');
});
$("#register-form").on("submit", function(event) {
event.preventDefault();
alert("Obrigado por se cadastrar!");
});
$(window).on("scroll", function() {
var top = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var percentage = top / bottom;
$("#scrolled").css("width", (percentage * 100) + "%");
});
$('[type="email"]').on("blur", function() {
var email = $(this).val();
if (email.match(/\w+@\w+\.\w+/)) {
$(this).css("border", "");
} else {
$(this).css("border", "1px solid red");
}
});
$('[type="password"]').on("keyup", function() {
var password = $(this).val();
var strength = password.length;
if (strength < 3) {
$("#password-strength").text("Muito fraco");
} else if (strength < 5) {
$("#password-strength").text("Fraco");
} else if (strength < 7) {
$("#password-strength").text("Ok");
} else {
$("#password-strength").text("Bom");
}
});
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Le Wagon - Demo Events</title>
</head>
<body>
<div class="progress" style="position: fixed; width: 100%;">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="scrolled">
</div>
</div>
<div id="images">
<img class="image" src="http://lorempixel.com/160/160/city/1">
<img class="image" src="http://lorempixel.com/160/160/city/2">
<img class="image" src="http://lorempixel.com/160/160/city/3">
<img class="image" src="http://lorempixel.com/160/160/city/4">
</div>
<form id="register-form" class="form-inline">
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Seu email">
</div>
<div class="form-group">
<input type="password" name="password" class="form-control" placeholder="Sua senha">
</div>
<button type="submit" class="btn btn-primary">Se cadastrar na newsletter</button>
</form>
<p id="password-strength">Muito fraca</p>
<div class="row">
<div class="col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean condimentum ornare sem, sed fermentum urna vestibulum nec. Quisque ac consectetur ipsum, eu ultrices velit. Sed quis leo non orci bibendum porta at ac leo. Ut at egestas mi. Quisque venenatis libero non felis convallis convallis. Integer viverra, ante sit amet mattis iaculis, neque risus mollis justo, nec luctus turpis nulla auctor dolor. Aliquam quis pharetra urna. Praesent varius, orci in condimentum blandit, tellus nulla tincidunt enim, eu ultrices ligula lectus quis felis. In fermentum neque vitae facilisis varius. Vivamus lorem odio, sagittis vitae elementum id, posuere ac sem. Vestibulum vitae felis felis. Fusce sagittis tortor sed turpis suscipit, et varius elit vehicula. Donec volutpat dolor in lectus pharetra egestas. Nunc condimentum risus nec risus rhoncus, sed consequat urna euismod.
Vestibulum ac est eu lectus aliquam pulvinar ac in ipsum. Morbi sit amet ligula sit amet magna pulvinar luctus. Ut vitae felis sem. Donec sed elit eget nisi mollis pretium et eget ante. Vivamus imperdiet odio porta fringilla condimentum. Phasellus ut malesuada sapien. Fusce vel gravida leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean condimentum ornare sem, sed fermentum urna vestibulum nec. Quisque ac consectetur ipsum, eu ultrices velit. Sed quis leo non orci bibendum porta at ac leo. Ut at egestas mi. Quisque venenatis libero non felis convallis convallis. Integer viverra, ante sit amet mattis iaculis, neque risus mollis justo, nec luctus turpis nulla auctor dolor. Aliquam quis pharetra urna. Praesent varius, orci in condimentum blandit, tellus nulla tincidunt enim, eu ultrices ligula lectus quis felis. In fermentum neque vitae facilisis varius. Vivamus lorem odio, sagittis vitae elementum id, posuere ac sem. Vestibulum vitae felis felis. Fusce sagittis tortor sed turpis suscipit, et varius elit vehicula. Donec volutpat dolor in lectus pharetra egestas. Nunc condimentum risus nec risus rhoncus, sed consequat urna euismod.
<p id="topico-interessante">Maecenas suscipit, quam ac volutpat tempor, ipsum nulla pharetra nulla, volutpat condimentum velit eros id enim. Vestibulum ac condimentum ipsum. Praesent tempus ornare malesuada. Aliquam at vehicula orci. Sed sodales tempus ligula rhoncus convallis. Duis mollis odio nec elit volutpat cursus. Vivamus mattis maximus leo, in posuere leo vestibulum et. Etiam semper enim ante, in sollicitudin dui consectetur id. Quisque tellus enim, interdum ut augue non, ornare efficitur quam. Nulla ut ex elementum ligula molestie varius eu eu quam.
</p>
Vestibulum ac est eu lectus aliquam pulvinar ac in ipsum. Morbi sit amet ligula sit amet magna pulvinar luctus. Ut vitae felis sem. Donec sed elit eget nisi mollis pretium et eget ante. Vivamus imperdiet odio porta fringilla condimentum. Phasellus ut malesuada sapien. Fusce vel gravida leo.
Aenean mollis dolor id odio malesuada iaculis. Pellentesque vitae tincidunt sapien. Ut magna nisl, consectetur eget tristique non, porttitor nec nisi. Pellentesque tortor lacus, feugiat at pellentesque sit amet, placerat semper ante. Morbi tincidunt lacus eget commodo pharetra. Nullam elementum dapibus lorem quis convallis. Fusce viverra leo vel nulla ultrices, eu egestas metus iaculis. Integer rhoncus rhoncus nisl. Praesent ut magna in justo pellentesque tincidunt sit amet at libero. Morbi nec mauris fermentum, bibendum quam id, imperdiet leo. Donec interdum bibendum euismod. Proin lobortis sapien lectus, ut scelerisque erat condimentum a.
Mauris arcu odio, pulvinar et bibendum a, semper commodo lectus. Praesent sodales imperdiet commodo. Pellentesque feugiat facilisis nisl vitae imperdiet. Nullam id lectus id ligula ultrices molestie eu vitae lacus. Donec auctor, mi vel ullamcorper volutpat, risus dolor tincidunt velit, sit amet pretium ex mi ac tortor. Nulla fringilla felis vel magna blandit dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas iaculis nibh sed leo sodales volutpat. Nam eget magna a mauris accumsan volutpat ut ornare enim. Praesent tristique efficitur lorem in facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin felis justo, posuere ac venenatis quis, facilisis non magna. Curabitur eu dolor vitae velit pharetra pharetra. Cras efficitur, sapien sed fringilla eleifend, enim leo fringilla lectus, nec auctor sem odio convallis urna. Donec eu bibendum turpis, sed tempus risus. Vivamus fringilla velit lacus, vitae varius tellus volutpat id.
</div>
</div>
<a href="#topico-interessante" class="btn btn-danger btn-lg" id="add">Add</a>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment