From 99d742f0c120581b01437e314b4df7f4e3470b27 Mon Sep 17 00:00:00 2001
From: Alabi Abayomi <abayomi15@gmail.com>
Date: Sat, 21 Aug 2021 19:14:22 +0100
Subject: [PATCH] Abayomi complete challange

---
 chessboard.html | 96 +++++++++++++++++++++++++++++++++++++++++++++++++
 fizzbuzz.html   | 89 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 185 insertions(+)
 create mode 100644 chessboard.html
 create mode 100644 fizzbuzz.html
diff --git a/chessboard.html b/chessboard.html
new file mode 100644
index 0000000..d4e4de0
--- /dev/null
+++ b/chessboard.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chessboard Challenge</title>
+    <style>
+      body {
+        background-color: black;
+        color: #fff;
+        text-align: center;
+        margin: 20px;
+        padding: 30px;
+      }
+      strong,
+      li {
+        color: chocolate;
+      }
+      li,
+      h3 {
+        font-size: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>
+      This is a Challenge to display a grid in a Chessboard-like pattern. Using
+      <strong>#</strong>
+    </h1>
+    <h3>To view result kindly do the following</h3>
+    <li>
+      <ul>
+        Right Click on the page
+      </ul>
+      <ul>
+        Click the inspect option (A sidebar or taskbar will pop up on any side
+        of your browser depending on the default position)
+      </ul>
+      <ul>
+        The popped up box has a navbar of it own, Listed Elements, Console,
+        Sources, Network, etc..
+      </ul>
+      <ul>
+        Click on the Console option to view result. Note: Result displayed is in
+        size you input.
+      </ul>
+    </li>
+
+    <script>
+      // Take the users desired height size
+      var height = prompt(`Input your range in number to display(height)`);
+
+      // Convert user input into number
+      height = Number(height);
+
+      // Check if input is a valid number.
+      while (Number.isNaN(height)) {
+        height = prompt("Number not valid \nEnter valid Number");
+      }
+
+      // Take the users desired breath size
+      var breath = prompt(`Input your range in number to display(breath)`);
+
+      // Convert user input into number
+      breath = Number(breath);
+
+      // Check if input is a valid number.
+      while (Number.isNaN(breath)) {
+        breath = prompt("Number not valid \nEnter valid Number");
+      }
+
+      // Declared an empty string
+      board = "";
+
+      // A loop to set rows (height)
+      for (var i = 1; i <= height; i++) {
+        // A loop to set the numbers of character/colum(breath)
+        for (var j = 1; j <= breath; j++) {
+          // To check if the height is divisible by 2.
+          if (i % 2 === 0) {
+            // To print "# " for even rows eight times.
+            board += "# ";
+            // To print " #" for odd rows eight times.
+          } else {
+            board += " #";
+          }
+        }
+        // Add a newline character to separate rows ater every 8 charater.
+        board += "\n";
+      }
+
+      console.log(board);
+    </script>
+  </body>
+</html>
diff --git a/fizzbuzz.html b/fizzbuzz.html
new file mode 100644
index 0000000..7a2f764
--- /dev/null
+++ b/fizzbuzz.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FizzBuzz</title>
+    <style>
+      body {
+        background-color: black;
+        color: #fff;
+        text-align: center;
+        margin: 20px;
+        padding: 30px;
+        /* justify-content: center; */
+      }
+      strong,
+      li {
+        color: chocolate;
+      }
+      li,
+      h3 {
+        font-size: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>
+      This is a challenge that prints out
+      <strong>Fizz</strong>
+      for numbers divisible by 3,
+      <strong>Buzz</strong>
+      for numbers divisible by 5 and
+      <strong>FizzBuzz</strong>
+      for numbers divisible by both 3 and 5.!
+    </h1>
+    <h3>To view result kindly do the following</h3>
+    <li>
+      <ul>
+        Right Click on the page
+      </ul>
+      <ul>
+        Click the inspect option (A sidebar or taskbar will pop up on any side
+        of your browser depending on the default position)
+      </ul>
+      <ul>
+        The popped up box has a navbar of it own, Listed Elements, Console,
+        Sources, Network, etc..
+      </ul>
+      <ul>
+        Click on the Console option to view result. Note: Result displayed is in
+        range you input.
+      </ul>
+    </li>
+    <script>
+      // Get user input
+      var range = prompt(`Input your range of number to check`);
+
+      // Convert user input into number
+      range = Number(range);
+
+      // Check if input is a valid number.
+      while (Number.isNaN(range)) {
+        range = prompt("Number not valid \nEnter valid Number");
+      }
+
+      // To loop through the number range inputted
+      for (var i = 1; i <= range; i++) {
+        // To check if a number is divisible by both 3 and 5 (15).
+        if (i % 15 == 0) {
+          // To print FizzBuzz if true
+          console.log("FizzBuzz");
+
+          // To check if a number is divisible by 3.
+        } else if (i % 3 == 0) {
+          // To print Fizz if true.
+          console.log("Fizz");
+
+          // To check if a number is divisible by 5.
+        } else if (i % 5 == 0) {
+          // To print Buzz if true
+          console.log("Buzz");
+
+          // To print the number if it does not meet any of the conditions above.
+        } else console.log(i);
+      }
+    </script>
+  </body>
+</html>
