Figma design+Homework

assignment/index.html

@@ -12,6 +12,19 @@
       <!-- =====================
       Add elements in this space
       ====================== -->
+      <label id="text1" for="url">URL</label>
+      <input id="text1-input" class="input-text" type="text" placeholder="URL here">
+      <br>
+      <br>
+      <label id="text2" for="latitude">Latitude Key</label>
+      <input id="text2-input" class="input-text" type="text" placeholder="lat here">
+      <br>
+      <br>
+      <label id="text3" for="longitude">Longitude Key</label>
+      <input id="text3-input" class="input-text" type="text" placeholder="lon here">
+      <br>
+      <br>
+      <button>Button</button>
     </div>
     <!-- Map -->
     <div id="map" class="map"></div>

assignment/js/main.js

@@ -1,3 +1,111 @@
 /* =====================
  Copy your code from Week 4 Lab 2 Part 2 part2-app-state.js in this space
 ===================== */
+// Use the data source URL from lab 1 in this 'ajax' function:
+var downloadData = $.ajax("https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/world-country-capitals.json");
+
+// Write a function to prepare your data (clean it up, organize it
+// as you like, create fields, etc)
+
+var parseData = function(data) {
+  return JSON.parse(data);
+};
+// Write a function to use your parsed data to create a bunch of
+// marker objects (don't plot them!)
+
+//Refer to part1-ajax-calls
+var makeMarkers = function(dict) {
+  return _.map(dict,function (x) {
+    return L.marker([x.CapitalLatitude,x.CapitalLongitude]);
+}
+);
+};
+
+// Now we need a function that takes this collection of markers
+// and puts them on the map
+var plotMarkers = function(dict) {
+  return _.each(dict,function(y){
+    y.addTo(map);
+  });
+};
+
+// At this point you should see a bunch of markers on your map if
+// things went well.
+// Don't continue on until you can make them appear!
+
+/* =====================
+  Define the function removeData so that it clears the markers you've written
+  from the map. You'll know you've succeeded when the markers that were
+  previously displayed are (nearly) immediately removed from the map.
+
+  In Leaflet, the syntax for removing one specific marker looks like this:
+
+  map.removeLayer(marker);
+
+  In real applications, this will typically happen in response to changes to the
+  user's input.
+===================== */
+
+// Look to the bottom of this file and try to reason about what this
+// function should look like
+var removeMarkers = function(dict) {
+  return _.each(dict,function(z){
+    map.removeLayer(z);
+  });
+};
+
+/* =====================
+  Optional, stretch goal
+  Write the necessary code (however you can) to plot a filtered down version of
+  the downloaded and parsed data.
+
+  Note: You can add or remove from the code at the bottom of this file
+  for the stretch goal.
+===================== */
+
+/* =====================
+ Leaflet setup - feel free to ignore this
+===================== */
+
+var map = L.map('map', {
+  center: [39.9522, -75.1639],
+  zoom: 2
+});
+var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
+  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  subdomains: 'abcd',
+  minZoom: 0,
+  maxZoom: 20,
+  ext: 'png'
+}).addTo(map);
+
+/* =====================
+ CODE EXECUTED HERE!
+===================== */
+
+//Filtered version (capitals with positive longitude)
+/*
+downloadData.done(function(data) {
+  var parsed = parseData(data);
+  var markers = makeMarkers(parsed);
+  plotMarkers(markers);
+  removeMarkers(markers); //Comment it out to show the markers
+});
+*/
+
+$('index.html').ready(function() {
+   $('button').click(function(){
+     var url=$('#text1-input').val();
+     var lat=$('#text2-input').val();
+     var lon=$('#text3-input').val();
+     console.log(url);
+     console.log(lat);
+     console.log(lon);
+ $.ajax(url).done(function(data){
+   var parsed = parseData(data);
+   var markers = makeMarkers(parsed);
+   plotMarkers(markers);
+ });
+});
+
+});

lab/js/part1-jquery.js

@@ -170,6 +170,95 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton
 // This is a popular pattern that you'll run into in programs that run jQuery. It says not to run
 // the function passed to `ready` until the HTML document is fully loaded and all scripts have
 // been interpreted. It is, therefore, an example of asynchronous behavior.
+
+//====================================================================
 $(document).ready(function() {
   // Do your stuff here
+  // Task 1 selector.text()
+  $('h1').text('PROFILE');
+  $("#text-label1").text('NAME');
+  $("#text-label2").text('AGE');
+  $("#text-label3").text('HOMETOWN');
+  $("#number-label").text('NUMBER OF FAMILIES');
+  $('#checkbox-label1').text('MALE');
+  $('#checkbox-label2').text('FEMALE');
+  $('#color-label').text('Favorite COLOR');
+  $('button').text('SUBMIT');
+
+  // Task 2 use selector.val()
+  $('#text-input1').val('Ran');
+  $('#text-input2').val(24);
+  $('#text-input3').val('CHINA');
+  $("#numeric-input").val(5);
+  $('#cbox-input2').prop("checked", true); //Check the box
+  $('#color-input').val('#2ca25f');
+
+  // Task 3 and Task 5
+ elem=$('button');
+ //elem.click(function (x) {
+    //alert('SUCCESS');
+   //} );
+
+var getConsole=function(name,age,hometown,numberoffamilies,favoriteColor,male,female)
+   {
+     return{
+     "name":name,
+     "age":age,
+     "hometown":hometown,
+    "numberoffamilies":numberoffamilies,
+    "favoriteColor":favoriteColor,
+    "Male":male,
+    "Female":female
+  };
+};
+
+//Click button and console
+/*
+elem.click(function(y){
+  console.log(getConsole($('#text-input1').val(),
+  $('#text-input2').val(),
+  $('#text-input3').val(),
+  $("#numeric-input").val(),
+  $('#color-input').val(),
+  $('#cbox-input1[type=checkbox]').prop('checked'),
+  $('#cbox-input2[type=checkbox]').prop('checked')
+));
+
+  alert('submitted!');
+}
+);
+*/
+
+ // Task 4
+ $('#text-input1').prop('disabled', false);
+ $('#text-input2').prop('disabled', false);
+ $('#text-input3').prop('disabled', false);
+ $("#numeric-input").prop('disabled', false);
+ $('#cbox-input1').prop('disabled', false);
+ $('#cbox-input2').prop('disabled', false);
+ $('#color-input').prop('disabled', false);
+
+// Task 6
+//Modify this form to include at least a lat (number), long (number), description (text), and color (color) inputs.
+$("#color-input").after('<br>', '<br>','<label id="latitude" for="latitude">Latitude</label>', '<input type="number" id="latitude-input">',
+'<br>', '<br>', '<label id="longitude" for="longitude"> Longitude </label>', '<input type="number" id="longitude-input">',
+'<br>', '<br>', '<label id="description" for="description"> Description </label>', '<input id="description-input" class="input-text" type="text" placeholder="text here">',
+'<br>', '<br>', '<label id="color-label2" for="color-input2">Choose a color for markers</label>','<input type="color" id="color-input2">');
+
+//Found a coordinate
+$('#latitude-input').val(39.955206);
+$('#longitude-input').val(-75.1639);
+
+//Plot
+$('button').click(function(){
+  console.log($('#color-input2').val());
+  alert('SUBMITTED!');
+
+  L.circleMarker([$('#latitude-input').val(), $('#longitude-input').val()],{
+   color: $('#color-input2').val(),
+   radius:15
+ }).addTo(map).bindPopup($('#description-input').val());
+
+  });
+
 });