Created
November 18, 2017 23:03
-
-
Save treddson/6ed35748d00766ed44acafd1814c6e4c to your computer and use it in GitHub Desktop.
WetIdolizedSeaurchin created by treddson - https://repl.it/@treddson/WetIdolizedSeaurchin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #returnSentence { | |
| display: none; | |
| } | |
| #firstForm { | |
| width: 40%; | |
| } | |
| body { | |
| background-color: #ff9f7a; | |
| } | |
| .description, ul, #inputNum, p { | |
| width: 50%; | |
| font-family: 'VT323'; | |
| font-weight: bold; | |
| font-size: 18px; | |
| } | |
| #sentenceTwo { | |
| font-weight: bold; | |
| font-size: 20px; | |
| color: white; | |
| } | |
| h1, .btn { | |
| font-family: 'VT323'; | |
| font-weight: bold; | |
| } | |
| .result { | |
| font-size: 25px; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script | |
| src="https://code.jquery.com/jquery-3.2.1.min.js" | |
| integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" | |
| crossorigin="anonymous"></script> | |
| <script src="js/scripts.js"></script> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8"> | |
| <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet"> | |
| <link rel="stylesheet" href="css/styles.css" media="screen" title="no title" charset="utf-8"> | |
| <title>Ping Pong!</title> | |
| </head> | |
| <body> | |
| <div class="container"><br><br> | |
| <div class="form-showing"> | |
| <form id="firstForm"> | |
| <div class="form-group"> | |
| <label for="inputNum"><h1>Ping Pong!</h1></label> | |
| <input id="inputNum" class="form-control" type="number" placeholder="Your number here"> | |
| </div> | |
| <button type="submit" class="btn">Play</button> | |
| </form> | |
| </div><br> | |
| <p class="description">The user inputs a number and the program returns a range of numbers from 1 to the chosen number with the following exceptions:</p> | |
| <ul> | |
| <li>Numbers divisible by 3 are replaced with "ping"</li> | |
| <li>Numbers divisible by 5 are replaced with "pong"</li> | |
| <li>Numbers divisible by 15 are replaced with "pingpong"</li> | |
| </ul> | |
| <div id="returnSentence"> | |
| <p class="result">Your result:</br> <span id="sentenceTwo"></span></p> | |
| </div> | |
| </div> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| $("#firstForm").submit(function(event) { | |
| $(".btn").fadeToggle(200).fadeToggle(1000); | |
| $("#returnSentence").show(); | |
| //user interface logic: | |
| var inputNum = $("input#inputNum").val(); | |
| someNum = inputNum => { | |
| if (inputNum % 15 === 0){ | |
| return 'pingpong'; | |
| } else if (inputNum % 5 === 0) { | |
| return 'pong'; | |
| } else if (inputNum % 3 === 0) { | |
| return 'ping'; | |
| } else { | |
| return inputNum; | |
| } | |
| } | |
| for (var i = 1; i <= inputNum; i++){ | |
| $("#sentenceTwo").append(someNum(i) + '<br />'); | |
| } | |
| event.preventDefault(); | |
| }); | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment