diff --git a/12.FizzBuzz/app.js b/12.FizzBuzz/app.js new file mode 100644 index 0000000..66e3277 --- /dev/null +++ b/12.FizzBuzz/app.js @@ -0,0 +1,49 @@ + +// click event +document.querySelector('.submitBtn').addEventListener('click', fizzbuzz); + + +// function for checking whole number +function whole_num_check(n) +{ + const num_test = (n - Math.floor(n) ===0); + // 3.40 - 3 = .40 === 0? false + + return num_test; //true or false +} + + +function fizzbuzz() { + +// getting the number value +const number = parseInt(document.querySelector('input').value); + + +let textDiv = document.querySelector('.integers'); + + +// loop to print the integers +for(let i=1; i<= number; i++) { + + if(whole_num_check(i/2) && whole_num_check(i/3)) { + + textDiv.textContent += ' Fizz Buzz '; + + } + else if (whole_num_check(i/2)) { + + textDiv.textContent += ' Fizz '; + + } + else if (whole_num_check(i/3)) { + + textDiv.textContent += ' Buzz '; + + } + else { + textDiv.textContent += i; + + } + +} +}; diff --git a/12.FizzBuzz/index.html b/12.FizzBuzz/index.html new file mode 100644 index 0000000..b6660a7 --- /dev/null +++ b/12.FizzBuzz/index.html @@ -0,0 +1,25 @@ + + + Fizz Buzz + + +
+ Type a number below.
+ - integers from 1 to that number will be printed
+ - however, if the integer is divisible by 2, 'Fizz' will be printed
+ - and if the number is divisible by 3, 'Buzz' will be printed
+ - and if the number is divisible by 2 and 3 both, 'Fizz Buzz' will be printed
+ +
+
+ + +
+
+ +
+ + + + + \ No newline at end of file diff --git a/README.md b/README.md index f0f2480..a069362 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,10 @@ __Algorithms practiced using JS__ 6. Pig Latin 7. Deep Compare 8. Binary Search Tree +9. Numbers to Roman Numerals +10. Caesar Cipher +11. Lexicographically equal or not +12. Fizz Buzz ## Explanation 1. String reversing @@ -1075,3 +1079,217 @@ Code implementation is much strait forward. You just need to compare both the st
+ +12. Fizz Buzz + +

+ +This is a relatively easy algorithm among the previously listed algorithms. + +__The challenge:__

Given a number as an input, print out every integer from 1 to that number.
+ However, when the integer is divisible by 2, print out “Fizz”; when it’s divisible by 3, print out “Buzz”;
+ when it’s divisible by both 2 and 3, print out “Fizz Buzz”.

+ + +__Algorithmic Thinking:__ + + +For this algorithm, first we will create a function which checks whether a number is whole number or not. +It will be useful while checking whether a no. is divisible by 2 or 3 or neither. + +Next, we will take the number submitted by the user and loop over from 1 to that number. + +If the iterating number (i) is divisible by 2 and 3, it will print out 'Fizz Buzz', if that is divisible by only 2, 'Fizz' will be printed out +while on being divisible by 3, 'Buzz' will be printed out and at last, if its not divisible by 2 and 3, +the iterating number (i) itself will be printed out. + + +__code Implementation:__ + +We start by creating a function whole_num_check to check whether a given number n is a whole number or not. + +```js + +// function for checking whole number + +function whole_num_check(n) +{ + const num_test = (n - Math.floor(n) ===0); + // 3.40 - 3 = .40 === 0? false + + return num_test; //true or false +} + +``` +We select a html button tag with class 'submitBtn' and add an event listener to a function named 'fizzbuzz'. + +```js + +// click event +document.querySelector('.submitBtn').addEventListener('click', fizzbuzz); + +``` + +Now, we create a function 'fizzbuzz'. + +```js + +function fizzbuzz() { + + //code here + +}; + +``` + +Inside the fizzbuzz function, we select the user's input value and convert it into a number. Also, we select the div tag to print text. + +```js + +// getting the number value + +const number = parseInt(document.querySelector('input').value); + +let textDiv = document.querySelector('.integers'); + +``` +We loop over from 1 to the user input and check if the divisiblity of the interating number i by 2 and 3, using the whole_num_check function. We insert text in DOM accordingly. + +```js +// loop to print the integers +for(let i=1; i<= number; i++) { + + if(whole_num_check(i/2) && whole_num_check(i/3)) { + + textDiv.textContent += ' Fizz Buzz '; + + } + else if (whole_num_check(i/2)) { + + textDiv.textContent += ' Fizz '; + + } + else if (whole_num_check(i/3)) { + + textDiv.textContent += ' Buzz '; + + }; + else { + textDiv.textContent += i; + + } + +}; + +``` +

+ +
+
+ +12. Fizz Buzz + +

+ +This is a relatively easy algorithm among the previously listed algorithms. + +__The challenge:__

Given a number as an input, print out every integer from 1 to that number.
+ However, when the integer is divisible by 2, print out “Fizz”; when it’s divisible by 3, print out “Buzz”;
+ when it’s divisible by both 2 and 3, print out “Fizz Buzz”.

+ + +__Algorithmic Thinking:__ + + +For this algorithm, first we will create a function which checks whether a number is whole number or not. +It will be useful while checking whether a no. is divisible by 2 or 3 or neither. + +Next, we will take the number submitted by the user and loop over from 1 to that number. + +If the iterating number (i) is divisible by 2 and 3, it will print out 'Fizz Buzz', if that is divisible by only 2, 'Fizz' will be printed out +while on being divisible by 3, 'Buzz' will be printed out and at last, if its not divisible by 2 and 3, +the iterating number (i) itself will be printed out. + + +__code Implementation:__ + +We start by creating a function whole_num_check to check whether a given number n is a whole number or not. + +```js + +// function for checking whole number + +function whole_num_check(n) +{ + const num_test = (n - Math.floor(n) ===0); + // 3.40 - 3 = .40 === 0? false + + return num_test; //true or false +} + +``` +We select a html button tag with class 'submitBtn' and add an event listener to a function named 'fizzbuzz'. + +```js + +// click event +document.querySelector('.submitBtn').addEventListener('click', fizzbuzz); + +``` + +Now, we create a function 'fizzbuzz'. + +```js + +function fizzbuzz() { + + //code here + +}; + +``` + +Inside the fizzbuzz function, we select the user's input value and convert it into a number. Also, we select the div tag to print text. + +```js + +// getting the number value + +const number = parseInt(document.querySelector('input').value); + +let textDiv = document.querySelector('.integers'); + +``` +We loop over from 1 to the user input and check if the divisiblity of the interating number i by 2 and 3, using the whole_num_check function. We insert text in DOM accordingly. + +```js +// loop to print the integers +for(let i=1; i<= number; i++) { + + if(whole_num_check(i/2) && whole_num_check(i/3)) { + + textDiv.textContent += ' Fizz Buzz '; + + } + else if (whole_num_check(i/2)) { + + textDiv.textContent += ' Fizz '; + + } + else if (whole_num_check(i/3)) { + + textDiv.textContent += ' Buzz '; + + }; + else { + textDiv.textContent += i; + + } + +}; + +``` +

+ +
+