jamie111111
2/21/2019 - 6:02 PM

oYabXa

oYabXa

index.html
content_copyfile_download
<!-- body has an id of home so scrollspy highligths home when we are on top, for the other sections, the href values of the nav have to match with the id values of the sections. -->

<body data-spy="scroll" data-target=".navbar" data-offset="150">

  <!-- navbar -->


  <nav class="navbar navbar-dark bg-inverse navbar-fixed-top">
    <div class="container">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#presentation">Presentation</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#images">Images</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
      </ul>
      <a class="navbar-brand pull-sm-right m-r-0 hidden-xs-down"> Written by Sergi Oca</a>
    </div>
  </nav>
  <!-- navBar End -->

  <!-- Jumbotron -->

  <div id="home" class="jumbotron jumbotron-fluid bg-warning text-white">
    <div class="container text-sm-center p-t-3">
      <h1 class="display-2"> Bootstrap Only Layout </h1>

      <p class="lead">A layout made only using Boostrap 4.</p>

      <div class="btn-group m-t-2" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#form"> Click for Registration Form </button>
        <a class="btn btn-secondary btn-lg" href="#images">See Images</a>

      </div>

    </div>
  </div>


  <!-- Presentation -->
  <div class="container p-t-2">
    <div id="presentation" class="row">
      <div class="col-md-4 col-md-push-4">
        <h3 class="m-b-2">About Full Stack Conf</h3>
        <img class="m-b-1 img-fluid img-rounded" src="https://res.cloudinary.com/diqkerptd/image/upload/c_scale,w_1036/v1481732266/346H_zyonj7.jpg">
        <p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
        <p>Explore the future of Javascript with a lineup of industry professionals. Discover new techniques to advance your career as a developer.</p>
      </div>
      <div class="col-md-4 col-md-pull-4">
        <h3 class="m-b-2">Expert speakers</h3>
        <p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
        <p>Want to meet the international Javascript community and share skills with some of the world's top experts, hackers, and coders? Be the first to know what to expect for the future of Javascript.</p>
        <p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>
      </div>
      <div class="col-md-4">
        <h3 class="m-b-2">What You'll Learn</h3>

        <div class="list-group">
          <a href="#" class="list-group-item"><strong>MongoDB</strong>: NoSQL database</a>
          <a href="#" class="list-group-item"><strong>Angular</strong>: JavaScript framework </a>
          <a href="#" class="list-group-item"><strong>Express</strong>: Framework for Node</a>
          <a href="#" class="list-group-item"><strong>Node.js</strong>: JavaScript environment</a>
          <a href="#" class="list-group-item"><strong>ES2015</strong>: Latest version of JavaScript</a>
          <a href="#" class="list-group-item"><strong>Babel</strong>: JavaScript compiler</a>
        </div>
      </div>
    </div>


    <!-- Speakers -->
    <!-- in Medium devices, 2 cards per row, in large devices, 3 cards per row -->
    <h1 id="images" class="display-4 text-xs-center m-y-3 text-muted">Image Cards</h1>

    <div class="row">
      <div class="col-md-6 col-lg-4">

        <div class="card">
          <!-- without the img-fluid class, images woukld break out of the cards -->
          <img class="card-img-top img-fluid" src="http://placehold.it/350x150" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead- in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>

      </div>

      <div class="col-md-6 col-lg-4">

        <div class="card">
          <!-- without the img-fluid class, images woukld break out of the cards -->
          <img class="card-img-top img-fluid" src="http://placehold.it/350x150" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead- in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>

      </div>

      <div class="col-md-6 col-lg-4">

        <div class="card">
          <!-- without the img-fluid class, images woukld break out of the cards -->
          <img class="card-img-top img-fluid" src="http://placehold.it/350x150" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead- in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>

      </div>

      <div class="col-md-6 col-lg-4">

        <div class="card">
          <!-- without the img-fluid class, images woukld break out of the cards -->
          <img class="card-img-top img-fluid" src="http://placehold.it/350x150" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead- in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>

      </div>

      <div class="col-md-6 col-lg-4">

        <div class="card">
          <!-- without the img-fluid class, images woukld break out of the cards -->
          <img class="card-img-top img-fluid" src="http://placehold.it/350x150" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead- in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>

      </div>

      <div class="col-md-6 col-lg-4">

        <div class="card">
          <!-- without the img-fluid class, images woukld break out of the cards -->
          <img class="card-img-top img-fluid" src="http://placehold.it/350x150" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead- in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>

      </div>
    </div>
    <!-- /speakers -->


    <!-- signup form -->
    <hr>
    <div id="footer" class="row p-y-2 text-muted">
      <div class="col-md-6 col-xl-5">
        <p><strong>About Section </strong></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor elit id erat auctor maximus. Suspendisse ac sapien bibendum, condimentum leo et, ultrices nisl.</p>
      </div>
      <div class="col-md-6 col-xl-5 col-xl-offset-2">
        <p><strong>Stay up-to-date on Full Stack Conf</strong></p>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Email">
          <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Sign up</button>
      </span>
        </div>
      </div>
    </div>
    <hr>
    <!-- /signup form -->


    <!-- footer -->

    <div id="about" class="row p-y-1">
      <div class="col-md-7">

        <nav class="nav nav-inline">
          <a class="nav-link active" href="#">Active</a>
          <a class="nav-link" href="#">Link</a>


          <!-- Example split danger button -->
          <div class="btn-group dropup">
            <button type="button" class="btn btn-secondary">Other Links</button>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>

        </nav>

      </div>
      <div class="col-md-5 text-md-right">
        <small>&copy; Signature.</small>
      </div>
    </div>

  </div>
  <!-- Container-->

  <!-- Modal form -->

  <div id="form" class="modal fade">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-warning">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">


          <div class="container">
            <form action="#" method="post">
              <h4 class="mb-2"> Bootstrap Form </h4>

              <div class="alert alert-warning alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
                <strong>Hey There!</strong> This is an informative Alert
              </div>
              <!-- alert-->

              <fieldset class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" placeholder="Name">
                <div class="form-control-feedback yellow"> Please, make sure that the name is at least 2 charactes long. </div>
              </fieldset>
              <!--name-->

              <fieldset class="form-group">
                <label for="email">E-mail</label>
                <input type="email" class="form-control" id="email" placeholder="E-mail">
                <div class="form-control-feedback red">Please make sure the e-mail includes an "@". </div>
              </fieldset>
              <!--email-->

              <fieldset class="form-group">
                <label for="options"> How many hours a day can you dedicate? </label>
                <select class="form-control c-select" id="options">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option> 5 or more </option>
    </select>
              </fieldset>
              <!--hoursADay-->

              <hr>
              <h4 class="mb-2"> What are you interested in?</h4>
              <!-- custom-controls-stacked make the default inline checkboxes appear stacked, however in this version, it made everything outside this div stacked as well -->
              <div class="form-group">

                <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    Front-End
  </label>

                <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    Back-End
  </label>

                <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    Full-Stack
  </label>
              </div>
              <!--interests-->

              <div class="form-group">
                <hr>
                <h4 class="mb-2"> Payment Information</h4>

                <div class=" row">
                  <div class="col-md-6 form-group">
                    <label for="cc-num">Card Number:</label>
                    <input class="form-control" id="cc-num" type="text">
                  </div>

                  <div class="col-md-3 form-group">
                    <label for="zip">Zip Code:</label>
                    <input class="form-control" id="zip" type="text">
                  </div>

                  <div class="col-md-3 form-group">
                    <label for="cvv">CVV:</label>
                    <input class="form-control" id="cvv" type="text">
                  </div>
                </div>
                <!--row-->

                <div class="row">
                  <label class="col-lg-12"> Expiration Date: </label>

                  <div class="col-md-8">
                    <select class="c-select form-control" id="exp-month">
   <option value="1">1 - January</option>
   <option value="2">2 - February</option>
   <option value="3">3 - March</option>
   <option value="4">4 - April</option>
   <option value="5">5 - May</option>
   <option value="6">6 - June</option>
   <option value="7">7 - July</option>
   <option value="8">8 - August</option>
   <option value="9">9 - September</option>
   <option value="10">10 - October</option>
   <option value="11">11 - November</option> 
   <option value="12">12 - December</option>   
  </select>
                  </div>

                  <div class="col-md-4">
                    <select class="c-select form-control" id="exp-year">
  <option value="2016">2016</option>
  <option value="2017">2017</option>
  <option value="2018">2018</option>
  <option value="2019">2019</option>
  <option value="2020">2020</option> 
  <option value="2017">2021</option>
  <option value="2018">2022</option>
  <option value="2019">2023</option>
  <option value="2020">2024</option>  
</select>
                  </div>
                </div>
                <!--row-->
              </div>
              <!--payment info-->


              <div class="centeredButton">
                <button type="submit" class="btn btn-primary btn-lg mt-3" id="submitPaymentButton" disabled> Process Payment </button>
              </div>


            </form>
          </div>
          <!--container-->


        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->


</body>
oyabxa.markdown
content_copyfile_download
  • Rendered
  • Source

oYabXa

A Pen by Sergi Oca on CodePen.

License.

script.js
content_copyfile_download
var nameWarning = $(".yellow");
var emailWarning = $(".red");
$("#submitPaymentButton").prop("disabled", true);

emailWarning.hide();
nameWarning.hide();

$(document).ready(function() {

  /****************************
  Name validation
  ******************************/
  $("#name").on("blur",function() {
    if ($(this).val().length === 0) {
      $(this).parent().removeClass("has-warning");
      nameWarning.hide();
      validateAllInputs();

    } 
    else if ($(this).val().length < 2) {
      $(this).parent().addClass("has-warning");
      nameWarning.show();
    }
  })

  /* If the user focuses in we hide the warnings, this is optional */
  $("#name").on("focus",function() {
    $(this).parent().removeClass("has-warning");
    nameWarning.hide();
  });

  /******************************* 
  E-mail fom validation
  ******************************/
  $("#email").on("blur", function() {
    if ($(this).val().length === 0) {
      $(this).parent().removeClass("has-danger");
      emailWarning.hide();
      validateAllInputs();
      console.log("hide the warnings");

    } else if ($(this).val().length > 1 && $(this).val().indexOf("@") > -1) {
      $(this).parent().removeClass("has-danger");
      emailWarning.hide();
      validateAllInputs();
      console.log("hide the warnings");
    } else {
      $(this).parent().addClass("has-danger");
      emailWarning.show();
      console.log("show the warnings");
    }
  })

  /* If we are inside the form, just hide the warnings as the user is typing.*/
  $("#email").on("focus",function() {
    $(this).parent().removeClass("has-danger");
    emailWarning.hide();
  });
 
  });

function validateAllInputs() {  
    if (!$("#name").parent().hasClass("has-warning") && !$("#email").parent().hasClass("has-danger")) {
     $("#submitPaymentButton").prop("disabled", false);
      console.log("disabled");
    } else {
      $("#submitPaymentButton").prop("disabled", true);
      console.log("enabled")
    }
  }
scripts
content_copyfile_download
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
style.css
content_copyfile_download


form{
  padding-top: 2%;
  padding-bottom: 2%;
}

hr{
  border-bottom: 1px solid #8C8C8C;
  margin-top: 3%;
}

.centeredButton{
  text-align: center;
}
styles
content_copyfile_download
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />