-
-
Save dvdoliveira/ed597fab506a3bab613d to your computer and use it in GitHub Desktop.
Lighthouse Labs W6D3 Lecture Code
- Use of jQuery
- Use of Javascript to access DOM methods and properties
- Use of Ajax to access public APIs
This file contains hidden or 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
| <!-- demonstrating event bubbling --> | |
| <html> | |
| <head> | |
| <title>arceegee</title> | |
| <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <style> | |
| body { margin: 0; } | |
| #bubble { background: #ffa; width: 200px; height: 200px; } | |
| #inner { background: #faa; width: 50px; height: 50px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="bubble"> | |
| <div id="inner"> | |
| </div> | |
| </div> | |
| <script> | |
| var outer_box = $('#bubble'); | |
| var inner_box = $('#inner'); | |
| outer_box.on('click', function() { | |
| console.log("outer clicked"); | |
| }); | |
| inner_box.on('click', function(evt) { | |
| console.log("inner clicked"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| <!-- Using a form to grab user's input, and make a DuckDuckGo search query with it. EXCEPT CATS --> | |
| <html> | |
| <head> | |
| <title>arceegee</title> | |
| <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <style> | |
| body { margin: 20px; } | |
| #bubble { background: #ffa; width: 200px; height: 200px; } | |
| #inner { background: #faa; width: 50px; height: 50px; } | |
| a { display: block; } | |
| .error { color: #a00; font-size: 12px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="search"> | |
| <form> | |
| <input type="text" name="query" placeholder="Anything but cats"/> | |
| <input type="submit" id="submit" value="Search" /> | |
| </form> | |
| </div> | |
| <div id="results"> | |
| </div> | |
| <script> | |
| var search = function(query) { | |
| var url = "http://api.duckduckgo.com/?q=" + query + "&format=json&pretty=1"; | |
| $("#results").html(""); | |
| $.ajax({ | |
| url: url, | |
| dataType: "jsonp", | |
| success: function(response) { | |
| for(var i = 0; i < response.RelatedTopics.length; i++) { | |
| var result = response.RelatedTopics[i]; | |
| if("FirstURL" in result) { | |
| console.log(result.FirstURL); | |
| $("<a>") | |
| .text(result.FirstURL) | |
| .attr("href", result.FirstURL) | |
| .appendTo("#results"); | |
| } | |
| } | |
| }, | |
| }); | |
| } | |
| $("form").on("submit", function(evt) { | |
| evt.preventDefault(); | |
| var query = $('input[name="query"]').val(); | |
| if(query.indexOf("cat") != -1) { | |
| var error = $('<div>') | |
| .addClass("error") | |
| .text("sneaky sneaky"); | |
| error.insertAfter($('form')); | |
| } else { | |
| $('.error').remove(); | |
| search(query); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| <!-- jQuery version of the previous example, with fadeout added --> | |
| <html> | |
| <head> | |
| <title>arceegee</title> | |
| <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <style> | |
| body { margin: 0; } | |
| #main { background: #ffa; width: 200px; height: 200px; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| function getRandomColor() { | |
| var letters = '0123456789ABCDEF'.split(''); | |
| var color = '#'; | |
| for (var i = 0; i < 6; i++ ) { | |
| color += letters[Math.floor(Math.random() * 16)]; | |
| } | |
| return color; | |
| } | |
| var box = $('body'); | |
| box.on("click", function(evt) { | |
| var x = evt.pageX; | |
| var y = evt.pageY; | |
| var newBox = $("<div>"); | |
| newBox.css('background', getRandomColor()); | |
| newBox.css('width', '100px'); | |
| newBox.css('height', '100px'); | |
| newBox.css('position', "absolute"); | |
| newBox.css('top', y + "px"); | |
| newBox.css('left', x + "px"); | |
| box.append(newBox); | |
| setTimeout(function() { | |
| newBox.fadeOut(1000, function() { | |
| newBox.remove(); | |
| }); | |
| }, 2000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| <!-- Raw javascript implementation of creating randomly colored boxes where you click --> | |
| <html> | |
| <head> | |
| <title>arceegee</title> | |
| <style> | |
| body { margin: 0; } | |
| #main { background: #ffa; width: 200px; height: 200px; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| function getRandomColor() { | |
| var letters = '0123456789ABCDEF'.split(''); | |
| var color = '#'; | |
| for (var i = 0; i < 6; i++ ) { | |
| color += letters[Math.floor(Math.random() * 16)]; | |
| } | |
| return color; | |
| } | |
| var box = document.body; | |
| box.addEventListener("click", function(evt) { | |
| var x = evt.pageX; | |
| var y = evt.pageY; | |
| var newBox = document.createElement("div"); | |
| newBox.style.background = getRandomColor(); | |
| newBox.style.width = "10px"; | |
| newBox.style.height = "10px"; | |
| newBox.style.position = "absolute"; | |
| newBox.style.top = y + "px"; | |
| newBox.style.left = x + "px"; | |
| document.body.appendChild(newBox); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment