fix(curriculum): Added necessary variable declarations for JSON APIs and Ajax challenges (#37535)

* fix: added necessary variable declarations

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: deleted unnecessary file

* fix: corrected some spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: indented code sections

curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.english.md

@@ -50,20 +50,20 @@ tests:
 <script>
   document.addEventListener('DOMContentLoaded', function(){
     document.getElementById('getMessage').onclick = function(){
-      req=new XMLHttpRequest();
+      const req = new XMLHttpRequest();
       req.open("GET",'/json/cats.json', true);
       req.send();
       req.onload=function(){
-        json=JSON.parse(req.responseText);
+        const json = JSON.parse(req.responseText);
         document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
         // Add your code below this line
 
-
         // Add your code above this line
       };
     };
   });
 </script>
+
 <style>
   body {
     text-align: center;
@@ -90,6 +90,7 @@ tests:
     border: 1px solid #0F5897;
   }
 </style>
+
 <h1>Cat Photo Finder</h1>
 <p class="message box">
   The message will go here
@@ -110,8 +111,60 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
+```html
-// solution required
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open("GET",'/json/cats.json', true);
+      req.send();
+      req.onload=function(){
+        const json = JSON.parse(req.responseText);
+        document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
+        // Add your code below this line
+        console.log(json[2].codeNames[1]);
+        // Add your code above this line
+      };
+    };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
 ```
 
 </section>

curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.english.md

@@ -46,6 +46,7 @@ tests:
     }
   });
 </script>
+
 <style>
   body {
     text-align: center;
@@ -72,6 +73,7 @@ tests:
     border: 1px solid #0F5897;
   }
 </style>
+
 <h1>Cat Photo Finder</h1>
 <p class="message box">
   The message will go here
@@ -92,8 +94,54 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
+```html
-// solution required
+<script>
+  document.addEventListener('DOMContentLoaded',function(){
+    document.getElementById('getMessage').onclick = function(){
+      // Add your code below this line
+      document.getElementsByClassName('message')[0].textContent = "Here is the message";
+      // Add your code above this line
+    }
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+
 ```
 
 </section>

curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.english.md

@@ -14,8 +14,9 @@ Then, loop through the JSON, adding HTML to the variable that wraps the key name
 Here's the code that does this:
 
 ```js
+let html = "";
 json.forEach(function(val) {
-  var keys = Object.keys(val);
+  const keys = Object.keys(val);
   html += "<div class = 'cat'>";
   keys.forEach(function(key) {
     html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
@@ -70,22 +71,22 @@ tests:
 <script>
   document.addEventListener('DOMContentLoaded', function(){
     document.getElementById('getMessage').onclick = function(){
-      req=new XMLHttpRequest();
+      const req = new XMLHttpRequest();
       req.open("GET",'/json/cats.json',true);
       req.send();
       req.onload = function(){
-        json=JSON.parse(req.responseText);
+        const json = JSON.parse(req.responseText);
-        var html = "";
+        let html = "";
         // Add your code below this line
 
 
-
         // Add your code above this line
         document.getElementsByClassName('message')[0].innerHTML = html;
       };
     };
   });
 </script>
+
 <style>
   body {
     text-align: center;
@@ -112,6 +113,7 @@ tests:
     border: 1px solid #0F5897;
   }
 </style>
+
 <h1>Cat Photo Finder</h1>
 <p class="message box">
   The message will go here
@@ -125,15 +127,73 @@ tests:
 
 </div>
 
-
-
 </section>
 
 ## Solution
 <section id='solution'>
 
-```js
+```html
-// solution required
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open("GET",'/json/cats.json',true);
+      req.send();
+      req.onload = function(){
+        const json = JSON.parse(req.responseText);
+        let html = "";
+        // Add your code below this line
+        json.forEach(function(val) {
+          var keys = Object.keys(val);
+          html += "<div class = 'cat'>";
+          keys.forEach(function(key) {
+          html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
+        });
+        html += "</div><br>";
+        });
+        // Add your code above this line
+        document.getElementsByClassName('message')[0].innerHTML = html;
+      };
+    };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
 ```
 
 </section>

curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.english.md

@@ -74,8 +74,19 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
+```html
-// solution required
+<script>
-```
+  // Add your code below this line
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(function(position) {
+      document.getElementById('data').innerHTML = "latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
+    });
+  }
+  // Add your code above this line
+</script>
+<h4>You are here:</h4>
+<div id="data">
+
+</div>
 
 </section>

curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.english.md

@@ -16,11 +16,11 @@ However, JSON transmitted by APIs are sent as <code>bytes</code>, and your appli
 You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:
 
 ```js
-req=new XMLHttpRequest();
+const req = new XMLHttpRequest();
 req.open("GET",'/json/cats.json',true);
 req.send();
 req.onload = function(){
-  json=JSON.parse(req.responseText);
+  const json = JSON.parse(req.responseText);
   document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
 };
 ```
@@ -73,6 +73,7 @@ tests:
     };
   });
 </script>
+
 <style>
   body {
     text-align: center;
@@ -99,6 +100,7 @@ tests:
     border: 1px solid #0F5897;
   }
 </style>
+
 <h1>Cat Photo Finder</h1>
 <p class="message box">
   The message will go here
@@ -119,7 +121,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
+```html
 // solution required
 <script>
   document.addEventListener('DOMContentLoaded',function(){
@@ -134,6 +136,7 @@ tests:
     };
   });
 </script>
+
 <style>
   body {
     text-align: center;
@@ -160,6 +163,7 @@ tests:
     border: 1px solid #0F5897;
   }
 </style>
+
 <h1>Cat Photo Finder</h1>
 <p class="message box">
   The message will go here

curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.english.md

@@ -56,6 +56,7 @@ tests:
     // Add your code above this line
   });
 </script>
+
 <style>
   body {
     text-align: center;
@@ -102,14 +103,15 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
+```html
 <script>
   document.addEventListener('DOMContentLoaded', function(){
     // Add your code below this line
-    document.getElementById('getMessage').onclick=function(){}
+    document.getElementById('getMessage').onclick = function(){ };
     // Add your code above this line
   });
 </script>
+
 <style>
   body {
     text-align: center;

curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md

@@ -67,8 +67,8 @@ tests:
   document.addEventListener('DOMContentLoaded', function(){
     document.getElementById('sendMessage').onclick = function(){
 
-      var userName = document.getElementById('name').value;
+      const userName = document.getElementById('name').value;
-      var url = 'https://jsonplaceholder.typicode.com/posts';
+      const url = 'https://jsonplaceholder.typicode.com/posts';
       // Add your code below this line
 
 
@@ -76,6 +76,7 @@ tests:
     };
   });
 </script>
+
 <style>
   body {
     text-align: center;
@@ -102,6 +103,7 @@ tests:
     border: 1px solid #0F5897;
   }
 </style>
+
 <h1>Cat Friends</h1>
 <p class="message box">
   Reply from Server will be here
@@ -126,7 +128,68 @@ tests:
 <section id='solution'>
 
 ```js
-// solution required
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('sendMessage').onclick = function(){
+
+      const userName = document.getElementById('name').value;
+      const url = 'https://jsonplaceholder.typicode.com/posts';
+      // Add your code below this line
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', url, true);
+      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status === 201){
+          const serverResponse = JSON.parse(xhr.response);
+          document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
+       }
+     };
+     const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
+     xhr.send(body);
+      // Add your code above this line
+    };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Friends</h1>
+<p class="message">
+  Reply from Server will be here
+</p>
+<p>
+  <label for="name">Your name:
+    <input type="text" id="name"/>
+  </label>
+  <button id="sendMessage">
+    Send Message
+  </button>
+</p>
 ```
 
 </section>

curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.english.md

@@ -45,12 +45,12 @@ tests:
 <script>
   document.addEventListener('DOMContentLoaded', function(){
     document.getElementById('getMessage').onclick = function(){
-      req=new XMLHttpRequest();
+      const req = new XMLHttpRequest();
       req.open("GET",'/json/cats.json', true);
       req.send();
       req.onload=function(){
-        json=JSON.parse(req.responseText);
+        let json = JSON.parse(req.responseText);
-        var html = "";
+        let html = "";
         // Add your code below this line
 
 
@@ -67,6 +67,7 @@ tests:
      };
   });
 </script>
+
 <style>
   body {
     text-align: center;
@@ -93,6 +94,7 @@ tests:
     border: 1px solid #0F5897;
   }
 </style>
+
 <h1>Cat Photo Finder</h1>
 <p class="message box">
   The message will go here
@@ -113,8 +115,71 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
+```html
-// solution required
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open("GET",'/json/cats.json', true);
+      req.send();
+      req.onload = function(){
+        let json = JSON.parse(req.responseText);
+        let html = "";
+        // Add your code below this line
+        json = json.filter(function(val) {
+          return (val.id !== 1);
+        });
+
+        // Add your code above this line
+         json.forEach(function(val) {
+           html += "<div class = 'cat'>"
+
+           html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
+
+           html += "</div>"
+         });
+         document.getElementsByClassName('message')[0].innerHTML = html;
+       };
+     };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
 ```
 
 </section>

curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.english.md

@@ -39,12 +39,12 @@ tests:
 <script>
   document.addEventListener('DOMContentLoaded', function(){
     document.getElementById('getMessage').onclick = function(){
-      req=new XMLHttpRequest();
+      const req=new XMLHttpRequest();
       req.open("GET",'/json/cats.json',true);
       req.send();
       req.onload = function(){
-        json=JSON.parse(req.responseText);
+        const json = JSON.parse(req.responseText);
-        var html = "";
+        let html = "";
         json.forEach(function(val) {
           html += "<div class = 'cat'>";
           // Add your code below this line
@@ -58,6 +58,7 @@ tests:
      };
   });
 </script>
+
 <style>
   body {
     text-align: center;
@@ -104,8 +105,64 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
+```html
-// solution required
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open("GET",'/json/cats.json',true);
+      req.send();
+      req.onload = function(){
+        const json = JSON.parse(req.responseText);
+        let html = "";
+        json.forEach(function(val) {
+          html += "<div class = 'cat'>";
+          // Add your code below this line
+          html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
+          // Add your code above this line
+          html += "</div><br>";
+        });
+        document.getElementsByClassName('message')[0].innerHTML = html;
+      };
+     };
+  });
+</script>
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+<h1>Cat Photo Finder</h1>
+<p class="message">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+
 ```
 
 </section>