Frontend-Code-Test - Matthew Moyer

Javascript/js_test.html

@@ -4,6 +4,11 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 	<script>jQuery.noConflict();</script>
+
+
+	<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> -->
+	<!-- <script src ="js_test.js"></script> -->
+
 	<style>
 		body{
 			padding:20px;
@@ -62,6 +67,7 @@ <h2>Manipulate the Last LI</h2>
 					<li>First</li>
 					<li>Second</li>
 					<li>Third</li>
+					<!-- turn this red -->
 					<li>Fourth</li>
 				</ul>
 			</div>
@@ -83,6 +89,7 @@ <h2>Select specific children from a nested list.</h2>
 				<ul>
 					<li>Bob</li>
 					<li>Sally
+					<!-- select this -->
 						<ul>
 							<li>Car</li>
 							<li>Boat</li>
@@ -146,5 +153,63 @@ <h2>Ajax</h2>
 Note: You have jquery already loaded on the page.
 Please also write your jquery in a no conflict manner.
 -->
+
+<script>
+	jQuery(document).ready(function($) {
+
+	var sally = $('li:contains("Sally")');
+	var dropDown = $('select')
+
+	// challenge 1
+	$("#content li:nth-last-of-type(1)").css("color", "red");
+
+	// challenge 2
+	sally.children().css("color", "orange");
+
+	// challenge 3
+	$("select").on("change", appendSelected)
+
+	function appendSelected() {
+		var targetText = $("option:selected").text()
+		var $newDiv = $(`<div class = "new-div">${targetText}</div>`)
+		$(".new-div").remove()
+		if (targetText !== 'Choose') {
+			$('fieldset').append($newDiv)
+		}
+	}
+
+	// challenge 4
+	(function runner() {
+		var targetHeight = $("#setDims").outerHeight();
+		var targetWidth = $("#setDims").outerWidth();
+		$("#setDims").after(" I have a height of " + targetHeight + " and a width of " + targetWidth + "!")
+	})();
+
+
+	// challenge 5
+	$("#clickEventLink").on('click', toggleLinkClassName)
+
+	function toggleLinkClassName() {
+		if ($(this).hasClass('not-clicked')) {
+			$(this).removeClass('not-clicked')
+			$(this).addClass('clicked')
+		} else {
+			$(this).removeClass('clicked')
+			$(this).addClass('not-clicked')
+		}
+	}
+
+	// challenge 6
+	$.get("ajax_return.html").then(function(data){
+		console.log(data)
+		$("#jsonResponse").append(data)
+});
+
+
+
+
+
+})
+</script>
 </body>
 </html>

Javascript/js_test.js

@@ -0,0 +1,55 @@
+jQuery(document).ready(function($) {
+
+	var sally = $('li:contains("Sally")');
+	var dropDown = $('select')
+
+	// challenge 1
+	$("#content li:nth-last-of-type(1)").css("color", "red");
+
+	// challenge 2
+	sally.children().css("color", "orange");
+
+	// challenge 3
+	$("select").on("change", appendSelected)
+
+	function appendSelected() {
+		var targetText = $("option:selected").text()
+		var $newDiv = $(`<div class = "new-div">${targetText}</div>`)
+		$(".new-div").remove()
+		if (targetText !== 'Choose') {
+			$('fieldset').append($newDiv)
+		}
+	}
+
+	// challenge 4
+	(function runner() {
+		var targetHeight = $("#setDims").outerHeight();
+		var targetWidth = $("#setDims").outerWidth();
+		$("#setDims").after(" I have a height of " + targetHeight + " and a width of " + targetWidth + "!")
+	})();
+
+
+	// challenge 5
+	$("#clickEventLink").on('click', toggleLinkClassName)
+
+	function toggleLinkClassName() {
+		if ($(this).hasClass('not-clicked')) {
+			$(this).removeClass('not-clicked')
+			$(this).addClass('clicked')
+		} else {
+			$(this).removeClass('clicked')
+			$(this).addClass('not-clicked')
+		}
+	}
+
+	// challenge 6
+	$.get("ajax_return.html").then(function(data){
+		console.log(data)
+		$("#jsonResponse").append(data)
+});
+
+
+
+
+
+})

Javascript/npm-debug.log

@@ -0,0 +1,21 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
+2 info using npm@3.10.10
+3 info using node@v6.9.5
+4 verbose config Skipping project config: /Users/matthewmoyer/.npmrc. (matches userconfig)
+5 verbose stack Error: ENOENT: no such file or directory, open '/Users/matthewmoyer/package.json'
+5 verbose stack     at Error (native)
+6 verbose cwd /Users/matthewmoyer/Desktop/frontend-code-test/Javascript
+7 error Darwin 16.5.0
+8 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
+9 error node v6.9.5
+10 error npm  v3.10.10
+11 error path /Users/matthewmoyer/package.json
+12 error code ENOENT
+13 error errno -2
+14 error syscall open
+15 error enoent ENOENT: no such file or directory, open '/Users/matthewmoyer/package.json'
+16 error enoent ENOENT: no such file or directory, open '/Users/matthewmoyer/package.json'
+16 error enoent This is most likely not a problem with npm itself
+16 error enoent and is related to npm not being able to find a file.
+17 verbose exit [ -2, true ]