Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
  <meta name="description" content="Guess the secret number" />
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
     
  </head>
    <body>
      <header >
        
        <nav><div style="margin-top:5%;margin-left:3%;">This is a simple game where you need to guess number between 1-100         
          </div></nav>
      </header> 
      
      <div ng-app="game" style="margin-top:3%;margin-left:5%;" ng-controller="Controller">
        
         <div id="input" >
           <form class="pure-form">
              <div class="pure-u-1 pure-u-md-1-6">
                  <input id="city" class="pure-u-23-24" maxlength="3" style="width:200px" type="number" ng-model="inputVal" placeholder="Guess the number" required>
              <button type="submit" ng-hide="guess" class="pure-button pure-button-primary" ng-click="game.submit()">Submit</button>
              <button type="submit" ng-show="guess" class="pure-button pure-button-primary" ng-click="game.init()">Reset</button>
            
             </div>
             
           </form>
            <br /><br /><br />
            <label ng-bind-html-unsafe="message">{{message}}</label>
         </div>
        <br />
        <br />
        <br />
        <br />
        <div class="pure-menu custom-restricted-width">
      
        <span class="pure-menu-heading">How does this work</span>
        <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">if it’s greater than the secret number, display a “It’s less!” message</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">if it’s lesser than the secret number, display a “It’s more!” message</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link"> if it’s equal to the secret number, hide the form, display a “You win!” message and show a “Restart” button bin description</li>
        
    </ul>
  </div>
      </div>
       
    
   
     <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
​
     </body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kartheekgjpro
0viewers