Last active
September 2, 2018 00:53
-
-
Save joel-extremo/95a7906e790892840f6bd4ea27ed6a06 to your computer and use it in GitHub Desktop.
2.8: Conditional Statements
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Bugs Bunny</title> | |
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> | |
<!-- Bootstrap core CSS --> | |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> | |
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> | |
<link rel="stylesheet" href="css/bootstrap.min.css"> | |
<link rel="stylesheet" href="css/styles.css"> | |
</head> | |
<body> | |
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-custom"> | |
<a class="navbar-brand" href="#">BugsBunny</a> | |
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
<ul class="navbar-nav ml-auto xm-mx-auto"> | |
<li class="nav-item"> | |
<a class="nav-link" href="#video">video</a> | |
</li> | |
</ul> | |
</div> | |
</nav><!-- end navbar --> | |
<div class="container"> | |
<section id="biography"> | |
<img class="mx-auto d-block" src="images/bugs.png"> | |
<h1 class="text-center">About Bugs Bunny</h1> | |
<p> | |
Lorem ipsum dolor amet everyday carry pug intelligentsia tumblr literally lo-fi subway tile austin photo booth. | |
Put a bird on it meggings forage heirloom, ugh taiyaki <a href="#" title="More information" id="item1">Tooltips</a> small batch adaptogen truffaut kogi bicycle rights | |
fanny pack kale chips. Scenester tattooed neutra brooklyn literally pug hot chicken enamel pin everyday carry. | |
Kitsch cronut mlkshk put a bird on it four dollar toast tbh +1 vinyl slow-carb PBR&B humblebrag distillery small | |
batch. Truffaut celiac bespoke prism, selvage PBR&B iPhone synth palo santo selfies migas. | |
</p> | |
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details »</button> | |
</section><!-- end biography --> | |
<section id="video"> | |
<h1 class="text-center">Video</h1> | |
<div class="embed-responsive embed-responsive-16by9"> | |
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/O7w7xp9q71w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> | |
</div> | |
<div class="row"> | |
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target=".bd-example-modal">Lear More about Bugs Bunny</button> | |
</div> | |
</section><!-- end video --> | |
<section id="contact"> | |
<h1 class="text-center">Contact Bugs Bunny</h1> | |
<div class="row"> | |
<div id="info" class="col-sm"> | |
<h3 class="d-none d-sm-block">Get in touch</h3> | |
<p class="d-none d-sm-block">he wants to know you</p> | |
<ul id="contact-list"> | |
<li><i class="fas fa-phone"></i>1-829-849-2121</li> | |
<li><i class="far fa-envelope"></i>jmrv002@gmail.com</li> | |
<li><i class="fab fa-instagram"></i>@jmrv002</li> | |
<li><i class="fab fa-facebook-square"></i>Joel Rodriguez Varona</li> | |
</ul> | |
</div><!-- end info --> | |
<div id="form" class="col-sm"> | |
<h3>Send us a message</h3> | |
<p id="visible-comment"></p> | |
<form id="contact-form" action="/message" method="post"> | |
<div class="form-group"> | |
<label for="name">Name</label> | |
<input id="name" class="form-control" name="name" type="text" placeholder="Juan Mendez" minlength="3" required> | |
</div> | |
<div class="form-group"> | |
<label for="email">Email</label> | |
<input id="email" class="form-control" name="email" type="email" placeholder="example@gmail.com" minlength="3" required> | |
</div> | |
<div class="form-group"> | |
<label for="message-box">Message</label> | |
<textarea id="message-box" class="form-control" name="message" placeholder="Te quiero Bugs!!" data-toggle="tooltip" data-placement="right" title="write your message to bugs bunny and have some fun" style="resize:none" cols="40" rows="5" required></textarea> | |
</div> | |
<p>Total characters: <span id="char-count">0</span></p> | |
<button id="submit-btn" type="submit" class="btn btn-primary">Submit</button> | |
</form> | |
</div><!-- end form --> | |
</div> | |
</section><!-- end contact --> | |
</div><!-- end container --> | |
<footer> | |
<div class="row"> | |
<div id="social-media" class="col-sm"> | |
<div class="social-media-container"> | |
<a href="https://twitter.com/jmrv002?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Follow @jmrv002</a> | |
</div> | |
<div class="social-media-container"> | |
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FUniversidadAPEC.UNAPEC%2F&width=200&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=317854238964944" width="400" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> | |
</div> | |
</div><!-- end social media --> | |
<div class="col-sm"> | |
<div id="copyright">Copyright <span>©</span> All Rights Reserved</div> | |
</div> | |
</div> | |
</footer><!-- end footer --> | |
<!-- Modal --> | |
<div class="modal fade bd-example-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> | |
<div class="modal-dialog modal-lg"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<h5 class="modal-title" id="exampleModalLabel">Bugs Bunny in DOUBLE TROUBLE</h5> | |
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
<span aria-hidden="true">×</span> | |
</button> | |
</div> | |
<div class="modal-body"> | |
<embed id="modal-embed" src="documents/bugs_bunny.pdf"> | |
</div> | |
</div> | |
</div> | |
</div><!-- end modal --> | |
<!-- Javascript --> | |
<script src="js/jquery-3.3.1.min.js"></script> | |
<script src="js/popper.min.js"></script> | |
<script src="js/bootstrap.min.js"></script> | |
<script src="js/scripts.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function () { | |
var messageBoxInput = $("#message-box"); | |
var chartCountLabel = $('#char-count'); | |
// tootip | |
$('#item1').tooltip() | |
$('[data-toggle="tooltip"]').tooltip() | |
// form submit | |
$('#submit-btn').on('click', function() { | |
var message = messageBoxInput.val() | |
console.log('message: ' + message) | |
if (message === '') | |
{ | |
messageBoxInput.css('border', '1px solid red'); | |
return false | |
} | |
showMessage(message) | |
return false | |
}); | |
// execute when write in the textarea on contact section | |
messageBoxInput.on("keyup", function() { | |
var charCount = $(this).val().length; | |
console.log('total characters: ' + charCount) | |
chartCountLabel.text(charCount) | |
if(charCount > 50) | |
chartCountLabel.css("color", "red"); | |
else | |
chartCountLabel.css("color", "#495057"); | |
}); | |
// hide the form in the contact section and display the message that will send to Bugs | |
function showMessage(message) | |
{ | |
var textMessage = '<b>Your message was:</b> ' + message | |
$('#contact-form').hide() | |
$('#form h3').text('Thanks for send a message to Bugs Bunny') | |
$('#visible-comment').html(textMessage) | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment