Giter Club home page Giter Club logo

fizzbuzz-js's Introduction

JavaScript FizzBuzz

Deployed with netlify at https://fizzbuzzbomb.netlify.com/

  • Instructions: To play, open the browswer and enter a number into the field, click on 'click' button. Answer is displayed below your input.
  • Rules: The rules of FizzBuzz are as follows: So that the game can be played by the rules; I want a number divisible by 3 to return 'fizz', a number divisible by 5 to return 'buzz', and a number divisible by 15 to return 'fizzbuzz'.
  • Testing: Testing for this program can be run through terminal using npm run test.

Question 1: To the best of your knowledge please explain what the following lines of code do:

let  fizzBuzz = fs.readFileSync('./src/js/fizz-buzz.js');
eval( fizzBuzz + `\nexports.FizzBuzz = FizzBuzz;`)

A: The fs.readFileSync will return the contents of './src/js/fizz-buzz.js'
The eval() function evaluates or executes an argument; eval(string)
We have added these lines in our spec.helper for the sake of testing.

Question 2: To the best of your knowledge please explain why we are placing the let fizzBuzz = new FizzBuzz outside the it block?

A: We are creating new objects from the function FizzBuzz.

Question 3: To the best of your knowledge please explain the difference between using === and == in JS?

A: In JavaScript, the triple equals === compares both the type and the value. Double equals == doesn't compare the type so much as it compares more of the vaule of two things. i.e.
123 === '123' // false
123 == '123' //true

Question 4: To the best of your knowledge please explain why we are moving (number % 5 === 0) to the top?

A: We move this to the top because the function runs from top to bottom. For example, 15 is divisible by both 3 and 5 but we want it to return 'Buzz' before it returns 'Fizz'.

Question 5: To the best of your knowledge please explain the difference between feature and unit test.

A: Unit testing tests individual functions to make sure the expected outcome is what it should be. We unit test by writing small scripts in our spec files that we can plug our expected outcomes into and tie these to the files that contain the actual functions we are testing. Feature testing tests what the user sees so you test this way by running and interacting with your program.

Question 6: To the best of your knowledge please explain what this following code does:

describe('User can input a value and get FizzBuzz results', () => {
    before(async () => {
        await  browser.init()
        await  browser.visitPage('http://localhost:8080/')
    });

    beforeEach(async () => {
        await  browser.page.reload();
    })

    after(async ()=> {
        await  browser.close();
    })
})

A: This describe block is describing asynchronous flow.
We are initializing the browser & visiting the address for the server that we will be testing on, reloading after each test, and making sure the browswer closes after testing. With async these things can initialize while the processes that started before them are still running, there's no need for each process to wait for completion of the other before starting.

Question 7: To the best of your knowledge please explain what expectations in the context of testing are.

A: In testing, expectations tell our tests what we expect the outcome to be. Expectations are the answers to your questions. (A possible oversimplification?)

Question 8: To the best of your knowledge please write a line to line explanation of what is happening in this code:

<script src="./js/fizz-buzz.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let button = document.getElementById('button')
            let displayDiv = document.getElementById('display_answer')
            button.addEventListener('click', () =>{
                let value = document.getElementById('value').value
                let fizzBuzz = new FizzBuzz
                let result = fizzBuzz.check(value)
                displayDiv.innerHTML = result;
            })
        })
    </script>

A:
1: script src pulls javascript code from the specified file.
2-6: the page is loaded, button and displayDiv are defined.
7-11: listening for someone to click the button, then evaluates the value entered and returns the result according to the game FizzBuzz.

Question 9: To the best of your knowledge please explain what a CDN (Content Delivery Network) is?

A: CDN, A Content Delivery Network, can be thought of as a content repeater. It takes content and repeats it to other conneted servers all around the world. Loading times are better, other servers can be used as backup in the event that something fails in one place. This works so long as the origin server remains.


Created by: Amanda Gibson, https://github.com/amandagibson
Built using JavaScript.

fizzbuzz-js's People

Contributors

amandagibson avatar dependabot[bot] avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.