adding combinators example, and forms and api examples

mdn · Mar 21, 2017 · 8dd83e0 · 8dd83e0
1 parent 3c5e495
commit 8dd83e0
Show file tree

Hide file tree

Showing 7 changed files with 271 additions and 0 deletions.
diff --git a/css/introduction-to-css/css-selectors/combinators.html b/css/introduction-to-css/css-selectors/combinators.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Combinators example</title>
+    <style>
+
+      section p {
+        color: blue;
+      }
+
+      section > p {
+        background-color: yellow;
+      }
+
+      h2 + p {
+        text-transform: uppercase;
+      }
+
+      h2 ~ p {
+        border: 1px dashed black;
+      }
+
+    </style>
+  </head>
+  <body>
+    <section>
+      <h2>Heading 1</h2>
+      <p>Paragraph 1</p>
+      <p>Paragraph 2</p>
+      <div>
+        <h2>Heading 2</h2>
+        <p>Paragraph 3</p>
+        <p>Paragraph 4</p>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/html/forms/form-validation/fruit-pattern.html b/html/forms/form-validation/fruit-pattern.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Favorite fruit with required and pattern attributes</title>
+    <style>
+      input:invalid {
+        border: 2px dashed red;
+      }
+
+      input:valid {
+        border: 2px solid black;
+      }
+    </style>
+</head>
+
+<body>
+    <form>
+      <label for="choose">Would you prefer a banana or a cherry?</label>
+      <input id="choose" name="i_like" required pattern="banana|cherry">
+      <button>Submit</button>
+    </form>
+</body>
+
+</html>
diff --git a/html/forms/form-validation/fruit-required.html b/html/forms/form-validation/fruit-required.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Favorite fruit with required attribute</title>
+    <style>
+      input:invalid {
+        border: 2px dashed red;
+      }
+
+      input:valid {
+        border: 2px solid black;
+      }
+    </style>
+</head>
+
+<body>
+    <form>
+      <label for="choose">Would you prefer a banana or a cherry?</label>
+      <input id="choose" name="i_like" required>
+      <button>Submit</button>
+    </form>
+</body>
+
+</html>
diff --git a/html/forms/form-validation/fruit-start.html b/html/forms/form-validation/fruit-start.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Favorite fruit start</title>
+    <style>
+      input:invalid {
+        border: 2px dashed red;
+      }
+
+      input:valid {
+        border: 2px solid black;
+      }
+    </style>
+</head>
+
+<body>
+    <form>
+      <label for="choose">Would you prefer a banana or a cherry?</label>
+      <input id="choose" name="i_like">
+      <button>Submit</button>
+    </form>
+</body>
+
+</html>
diff --git a/html/forms/form-validation/min-max.html b/html/forms/form-validation/min-max.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Minimum and maximum examples</title>
+    <style>
+      input:invalid {
+        border: 2px dashed red;
+      }
+
+      input:valid {
+        border: 2px solid black;
+      }
+    </style>
+</head>
+
+<body>
+    <form>
+      <p>
+        <label for="n1">How old are you?</label>
+        <input type="number" id="n1" name="age" pattern="\d+" min="12" max="120">
+      </p>
+      <p>
+        <label for="t3">Leave a short message</label>
+        <textarea id="t3" name="msg" rows="5" maxlength="10"></textarea>
+      </p>
+      <p>
+        <button>Submit</button>
+      </p>
+    </form>
+</body>
+
+</html>
diff --git a/javascript/apis/third-party-apis/google-maps/index.html b/javascript/apis/third-party-apis/google-maps/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Google Maps example customized</title>
+
+    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
+    <script>
+    if("geolocation" in navigator) {
+
+      navigator.geolocation.getCurrentPosition(function(position) {
+
+        var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+        var myOptions = {
+          zoom: 8,
+          center: latlng,
+          mapTypeId: google.maps.MapTypeId.TERRAIN,
+          disableDefaultUI: true,
+          // Step 4. Customize displayed controls.
+          zoomControl: true,
+          mapTypeControl: true,
+          scaleControl: true,
+        }
+        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
+
+        // Step 2. Add custom icon (see also icon specified below)
+
+        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
+
+        // Step 1. Add default marker
+        var marker = new google.maps.Marker({
+          position: latlng,
+          icon: iconBase + 'flag_maps.png',
+          map: map
+        });
+
+        // Step 3. Add info window
+
+        var contentString = '<div id="content"><h2 id="firstHeading" class="firstHeading">Custom info window</h2><p>This is a cool custom info window.</p></div>';
+
+        var infowindow = new google.maps.InfoWindow({
+          content: contentString
+        });
+
+
+        marker.addListener('click', function() {
+          infowindow.open(map, marker);
+        });
+
+
+
+      });
+
+    } else {
+      var para = document.createElement('p');
+      para.textContent = 'Argh, no geolocation!';
+      document.body.appendChild(para);
+    }
+    </script>
+    <style>
+      #map_canvas {
+        width: 600px;
+        height: 600px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Customized maps example</h1>
+    <div id="map_canvas"></div>
+  </body>
+</html>
diff --git a/javascript/apis/third-party-apis/nytimes/index.html b/javascript/apis/third-party-apis/nytimes/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>NY Times example</title>
+  </head>
+  <body>
+    <h1>NY Times search articles</h1>
+
+    <form>
+      <p>
+        <label for="search">Enter a SINGLE search term (required): </label>
+        <input type="text" id="search" class="search" required>
+      </p>
+      <p>
+        <label for="start-date">Enter a start date (format YYYYMMDD): </label>
+        <input type="date" id="start-date" class="start-date" pattern="[0-9]{8}">
+      </p>
+      <p>
+        <label for="end-date">Enter an end date (format YYYYMMDD): </label>
+        <input type="date" id="end-date" class="end-date" pattern="[0-9]{8}">
+      </p>
+      <p>
+        <button>Submit search</button>
+      </p>
+    </form>
+
+    <nav>
+      <button>Next 10</button>
+      <button>Previous 10</button>
+    </nav>
+
+    <section>
+
+    </section>
+
+    <script>
+
+      var baseURL = 'https://api.nytimes.com/svc/search/v2/articlesearch.json';
+      var key = '4f3c267e125943d79b0a3e679f608a78';
+
+
+
+    fetch()
+
+    </script>
+
+
+  </body>
+</html>