FizzBuzz in Browser using JavaScript

Algorithm:
  1. When a user inputs a number.
  2. Loop from 1 to the entered number.
  3. If the current number is divisible by 3 and 5, then print "FizzBuzz".
  4. If the current number is divisible by 3, then print "Fizz".
  5. If the current number is divisible by 5, then print "Buzz".
  6. Otherwise print the current number.

JavaScript Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FizzBuzz</title>
<style>
body{
text-align: center;
background-color: gray;
}
#displayFizzBuzz{
margin-top: 5px;
background-color: whitesmoke;
border: 1px solid magenta;
}
</style>
</head>
<body>
<label>Enter a number: </label>
<input type="text" id="userInput">
<input type="button" onclick="FizzBuzz()" value="Display">
<div id="displayFizzBuzz"></div>

<script>
function FizzBuzz(){
var n = parseInt(document.getElementById('userInput').value);
var values = document.getElementById('displayFizzBuzz');
var i;
for(i=1;i<=n;i++){
if(i%3==0 && i%5==0){
values.innerHTML+="FizzBuzz"+"<br>";
}
else if(i%3==0){
values.innerHTML+="Fizz"+"<br>";
}
else if(i%5==0){
values.innerHTML+="Buzz"+"<br>";
}
else{
values.innerHTML+=i+"<br>";
}
}
}
</script>

</body>
</html>

Output:


7 comments:

  1. TejaDecember 1, 2022 at 9:45 PM

    100% Job Assured IT Software Training - Trainrecruit

    Introducing 90 days job guarantee program " Career Edge" at TrainRecruit, SR Nagar, Hyderabad. With our program, pursue your dream. Get trained and be in your dream job in just 90 days.
    100% Assured program with training from expert faculty. For details, visit:https://docs.google.com/forms/d/1k271iw3WjypkBopUHV2I7rbTC9vC3LpEquPewI8TnQE

    Call:8099133133
    Address:3rd Floor, Opp ICICI Bank, SR Nagar, Hyderabad

    ReplyDelete
  2. Wired FacultyMarch 14, 2023 at 9:49 PM

    This comment has been removed by the author.

    ReplyDelete
  3. Wired FacultyMarch 14, 2023 at 9:51 PM

    The JavaScript class was very informative and provided a solid foundation for understanding the language.
    NCERT provides solutions to the questions in their textbooks to help students prepare for exams and understand the concepts better. You can find NCERT solutions for Class 10 English online, either on the NCERT official website or on other educational websites that provide study materials and resources.

    NCERT Solutions For Class 10 English

    ReplyDelete
  4. Karpagam Institute of TechnologyApril 3, 2023 at 11:11 AM

    Very nice blog. Thanks for sharing. Karpagam Institute of Technology is one of the top
    Computer Science And Engineering Colleges In India. KIT offers top class education and placements to students at top companies.

    ReplyDelete
  5. AnkitApril 21, 2023 at 11:11 AM

    Sharda International School is one of the top senior secondary schools in Gurgaon. The school provides a world-class education that aims to develop the academic, social, emotional, and physical well-being of its students.

    ReplyDelete
  6. zain8272May 1, 2023 at 10:48 PM

    nice

    ReplyDelete
  7. siddharthOctober 3, 2023 at 2:56 PM

    BEST GEOGRAPHY OPTIONAL FOUNDATION PROGRAM 2024
    GS SCORE- Geography is optional that can be considered as the most engaging and interesting due to its scientific orientation.To make your journey of UPSC Exam outstanding, we at GS SCORE provide excellent guidance to aspirants through its GEOGRAPHY OPTIONAL FOUNDATION PROGRAM 2024 . It is a 4.5 months intensive classroom with comprehensive coverage of syllabus in time bound manner along with extensive coverage of applied geography topics mainly related to India geography and special focus on inculcating geographical thinking among the students. Register now!!

    ReplyDelete