diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.english.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.english.md
index 581d3027b87..41c354be97e 100644
--- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.english.md
+++ b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.english.md
@@ -48,22 +48,22 @@ tests:
 
 ```html
 <script>
-  document.addEventListener('DOMContentLoaded',function(){
-    document.getElementById('getMessage').onclick=function(){
-      req=new XMLHttpRequest();
-      req.open("GET",'/json/cats.json',true);
+  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(){
-        json=JSON.parse(req.responseText);
-        document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
+        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
-// solution required
+```html
+<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>
diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.english.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.english.md
index 22f2a673260..2fea07e968a 100644
--- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.english.md
+++ b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.english.md
@@ -37,8 +37,8 @@ tests:
 
 ```html
 <script>
-  document.addEventListener('DOMContentLoaded',function(){
-    document.getElementById('getMessage').onclick=function(){
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
       // Add your code below this line
 
 
@@ -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
-// solution required
+```html
+<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>
diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.english.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.english.md
index d4ad797c0a4..410544ec47e 100644
--- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.english.md
+++ b/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>";
@@ -68,24 +69,24 @@ tests:
 
 ```html
 <script>
-  document.addEventListener('DOMContentLoaded',function(){
-    document.getElementById('getMessage').onclick=function(){
-      req=new XMLHttpRequest();
+  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(){
-        json=JSON.parse(req.responseText);
-        var html = "";
+      req.onload = function(){
+        const json = JSON.parse(req.responseText);
+        let html = "";
         // Add your code below this line
 
 
-
         // Add your code above this line
-        document.getElementsByClassName('message')[0].innerHTML=html;
+        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
-// solution required
+```html
+<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>
diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.english.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.english.md
index d69597c8270..bba3fbf6852 100644
--- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.english.md
+++ b/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
-// solution required
-```
+```html
+<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>
diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.english.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.english.md
index dbf4967f534..f4e9ca9f198 100644
--- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.english.md
+++ b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.english.md
@@ -16,12 +16,12 @@ 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);
-  document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
+req.onload = function(){
+  const json = JSON.parse(req.responseText);
+  document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
 };
 ```
 
@@ -64,8 +64,8 @@ tests:
 
 ```html
 <script>
-  document.addEventListener('DOMContentLoaded',function(){
-    document.getElementById('getMessage').onclick=function(){
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
       // Add your code below this line
 
 
@@ -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,11 +121,11 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
+```html
 // solution required
 <script>
   document.addEventListener('DOMContentLoaded',function(){
-    document.getElementById('getMessage').onclick=function(){
+    document.getElementById('getMessage').onclick = function(){
       const req = new XMLHttpRequest();
       req.open('GET', '/json/cats.json', true);
       req.send();
@@ -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
diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.english.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.english.md
index cb1181b171b..3aa05de169f 100644
--- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.english.md
+++ b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.english.md
@@ -10,7 +10,7 @@ forumTopicId: 301503
 You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called <code>DOMContentLoaded</code>. Here's the code that does this:
 
 ```js
-document.addEventListener('DOMContentLoaded',function() {
+document.addEventListener('DOMContentLoaded', function() {
 
 });
 ```
@@ -18,7 +18,7 @@ document.addEventListener('DOMContentLoaded',function() {
 You can implement event handlers that go inside of the <code>DOMContentLoaded</code> function. You can implement an <code>onclick</code> event handler which triggers when the user clicks on the element with id <code>getMessage</code>, by adding the following code:
 
 ```js
-document.getElementById('getMessage').onclick=function(){};
+document.getElementById('getMessage').onclick = function(){};
 ```
 
 </section>
@@ -49,13 +49,14 @@ tests:
 
 ```html
 <script>
-  document.addEventListener('DOMContentLoaded',function(){
+  document.addEventListener('DOMContentLoaded', function(){
     // Add your code below this line
 
 
     // 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(){
+  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;
diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md
index bb92ae164d1..bb7e7e645f1 100644
--- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md
+++ b/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;
-      var url = 'https://jsonplaceholder.typicode.com/posts';
+      const userName = document.getElementById('name').value;
+      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>
diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.english.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.english.md
index 5be13b6b61b..abaf627608e 100644
--- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.english.md
+++ b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.english.md
@@ -43,14 +43,14 @@ tests:
 
 ```html
 <script>
-  document.addEventListener('DOMContentLoaded',function(){
-    document.getElementById('getMessage').onclick=function(){
-      req=new XMLHttpRequest();
-      req.open("GET",'/json/cats.json',true);
+  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(){
-        json=JSON.parse(req.responseText);
-        var html = "";
+        let json = JSON.parse(req.responseText);
+        let html = "";
         // Add your code below this line
 
 
@@ -62,11 +62,12 @@ tests:
 
            html += "</div>"
          });
-         document.getElementsByClassName('message')[0].innerHTML=html;
+         document.getElementsByClassName('message')[0].innerHTML = html;
        };
      };
   });
 </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
-// solution required
+```html
+<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>
diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.english.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.english.md
index 113003969b6..58c98e37201 100644
--- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.english.md
+++ b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.english.md
@@ -37,14 +37,14 @@ tests:
 
 ```html
 <script>
-  document.addEventListener('DOMContentLoaded',function(){
-    document.getElementById('getMessage').onclick=function(){
-      req=new XMLHttpRequest();
+  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(){
-        json=JSON.parse(req.responseText);
-        var html = "";
+      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
@@ -58,6 +58,7 @@ tests:
      };
   });
 </script>
+
 <style>
   body {
     text-align: center;
@@ -104,8 +105,64 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<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>