Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script src="fizzbuzz.js" charset="utf-8" defer="defer"></script>
- var fizzContainer = $("div.number-container");
- var divisor1 = 3,
- divisor2 = 5,
- maxFizz = 100,
- word1 = "Fizz",
- word2 = "Buzz",
- windowWidth = window.innerWidth,
- minNumOfColumns = 1,
- maxNumOfColumns = 12,
- widthPerColumn = 150,
- columns,
- linesPerColumn,
- columnSizingParameters = {};
- calculateHeading(windowWidth);
- calculateColumns();
- $(window).resize(function(){
- windowWidth = window.innerWidth;
- calculateHeading(windowWidth);
- $(".number-container").replaceWith("<div class='number-container'></div>");
- calculateColumns();
- });
- function calculateHeading(windowSize) {
- if(windowSize <= 500) {
- $("h1").attr("class", "transition xSmallHeading");
- } else if (windowSize <= 700) {
- $("h1").attr("class", "transition smallHeading");
- } else if (windowSize <= 1000) {
- $("h1").attr("class", "transition mediumHeading");
- } else if (windowSize >= 1000) {
- $("h1").attr("class", "transition largeHeading");
- }
- }
- function calculateColumns() {
- var columnIt = minNumOfColumns;
- for (columnIt; columnIt <= maxNumOfColumns; columnIt++) {
- columnSizingParameters[columnIt] = columnIt * widthPerColumn;
- }
- for (var i = 1; i <= maxNumOfColumns; i++) {
- if ((windowWidth >= columnSizingParameters[i]) && (windowWidth <= columnSizingParameters[i + 1])) {
- columns = i;
- }
- }
- linesPerColumn = Math.ceil(maxFizz / columns);
- createNumbers();
- }
- function createNumbers() {
- var i = 1;
- for (var c = 1; c <= columns; c++) {
- var col = $('<div></div').appendTo(".number-container");
- col.addClass('column');
- for (var a = 1; a <= linesPerColumn && i <= maxFizz; a++, i++) {
- if ((i % divisor1 === 0) && (i % divisor2 === 0)) {
- createContentLine(word1 + word2, "double-match", col, i, true);
- continue;
- } else if (i % divisor1 === 0) {
- createContentLine(word1, "match-1", col, i, true);
- continue;
- } else if (i % divisor2 === 0) {
- createContentLine(word2, "match-2", col, i, true);
- continue;
- } else {
- createContentLine(i, "num", col, i, false);
- continue;
- }
- }
- }
- }
- function createContentLine(toPrint, cssClass, col, i, appendNumToWord) {
- var contentLine = $("<p>" + toPrint + "</p>").appendTo(col);
- contentLine.addClass(cssClass);
- if (appendNumToWord) {
- var appendedNumber = $("<span></span").appendTo(contentLine);
- appendedNumber.text(" • " + i).addClass("num");
- }
- }
- <div class="container">
- <h1>The fizzbuzz test...in Javascript!</h1>
- <div class="number-container">
- </div>
- </div>
- * {
- padding: 0px;
- margin: 0px;
- box-sizing: border-box;
- }
- .container {
- width: auto;
- height: 100%;
- display: block;
- }
- h1 {
- display: block;
- background-color: black;
- color: white;
- width: 100%;
- font-family: 'Berkshire Swash', cursive;
- }
- .transition {
- transition: 500ms;
- }
- /* Screen width Less than 500px */
- .xSmallHeading {
- font-size: 25px;
- line-height: 25px;
- padding: 15px;
- }
- /* Less than 700px */
- .smallHeading {
- font-size: 32px;
- line-height: 32px;
- padding: 20px;
- }
- /* Less than 1000px */
- .mediumHeading {
- font-size: 40px;
- line-height: 40px;
- padding: 30px;
- margin-bottom: 10px;
- }
- /* Greater than 1000px */
- .largeHeading {
- font-size: 50px;
- line-height: 50px;
- padding: 40px;
- margin-bottom: 20px;
- }
- .number-container {
- display: flex;
- margin-top: 20px;
- margin-bottom: 20px;
- text-align: center;
- line-height: 30px;
- width: 100%;
- height: calc(100% - 150px);
- }
- .column {
- flex-grow: 1;
- display: inline-block;
- border-right: 1px solid lightblue;
- }
- .column:last-of-type {
- border-right: none;
- }
- .num {
- color: #585858;
- font-weight: bold;
- font-style: normal;
- font-family: sans-serif;
- font-size: 12px;
- }
- .double-match {
- font-weight: 600;
- font-size: 20px;
- color: #3f89d6;
- font-family: 'Crimson Text', serif;
- }
- .match-1, .match-2 {
- font-family: 'Josefin Slab', serif;
- font-weight: 700;
- font-size: 18px;
- }
- .match-1 {
- color: #7ac962;
- }
- .match-2 {
- color: #ba62d4
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement