js jq tut for beginners

In this example below you will see how to do a js jq tut for beginners with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 120hit, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 120hit ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>js jq tut for beginners </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js practice from yt</title>
</head>

<body>
  <!--container-->
  <div class="container">
    <h1>jQ lesson practice</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, suscipit distinctio facere eaque reprehenderit temporibus cupiditate! A et qui numquam sapiente repellat reiciendis enim in, recusandae quod voluptatum, suscipit quia.
    </p>
    
    <!--ui-message-->
    <div class="ui-message">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem veritatis beatae voluptatem assumenda vero omnis voluptas debitis similique doloribus, illum expedita ducimus itaque eligendi magni ut sit eum sequi odio!
      </p>
      <!--<span class="ui-close">X</span>-->
    </div>

    <!--/ui-mesasge-->
    <h2>example heading</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque delectus eaque deserunt earum incidunt repellat aut dolore vitae provident impedit commodi quam numquam quas, nostrum exercitationem, fuga rerum debitis ipsum.
    </p>

    <div class="ui-message">
      <p>
        <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae officiis quaerat iure ducimus repudiandae tenetur aperiam pariatur explicabo ipsam. Impedit, facere dolore. Quis aut error autem quibusdam perferendis explicabo ipsam.</div>
      </p>
    </div>

      <div class="faq">
        <h2>Frequently asked questions</h2>
        
        <h4>what if the widget does not function correctly?</h4>
        <!--answer-->
        <div class="answer" style="display: none;">
          <p>
            <div>asnwer to question #1 is Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis sequi facilis, sed deserunt porro numquam iusto doloremque sint, iste quae aliquam at explicabo aspernatur eum sapiente eaque, asperiores dolorem error.</div>
          </p>
          <p>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolorem amet saepe voluptate? Id, ipsa. Nisi ut ducimus autem perspiciatis ipsam, nostrum similique ex sequi corrupti, laboriosam asperiores nam ad.</div>
          </p>
        </div>
  
        <h4 class="faq-question">what is my real name?</h4>
        <!--answer-->
        <div class="answer" style="display : none;">
          <p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque eos, ducimus error odit quod esse quis. Nulla vitae incidunt ratione quas, animi a iste molestiae corrupti expedita ex odio atque.</div>
          </p>
          <p>
            <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum error ut aliquid. Quos, dolore amet aut consequuntur assumenda, vel, odit similique labore neque mollitia necessitatibus nemo nihil quis inventore voluptas.</div>
          </p>
        </div>

        <h4 class="faq-question">when is my birthday?</h4>
          <div class="answer" style="display : none;">
            <p><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, fuga, impedit qui, facilis accusamus placeat laboriosam similique ipsam temporibus eum quaerat quos! Nam sed odio qui veritatis eveniet. Sed, temporibus.</div></p>
          </div>

        <h4 class="faq-question">where do I live?</h4>
          <div class="answer" style="display:none;">
            <p><div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem, quibusdam iusto reiciendis repellendus excepturi debitis pariatur blanditiis alias, molestiae facilis maiores voluptates nam mollitia accusantium, placeat odit? Quae, voluptate voluptatem!</div></p>
          </div>

   
    </div><!--faq-->
  <!--about-placeholder-->
    <div class="about-placeholder">
      <a id="about" href="about.html">Never stop, push harder. You got this!!</a>
    </div>

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

</body>

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/120hit/js-jq-tut-for-beginners-eEKxmX */
body {
  font-family : Helvetice, sans-serif;
  line-height: 1.5em;
  padding: 15 px;
  
}
.container {
  max-width: 700px;
  margin : 0 auto;
}

a,
a:link,
a: visited {
  color : blue;
}

.highlight {
  background-color : orage;
}

p {margin : 0  0 1em 0;}


.ui-message {
  background- color : #FFF1C7;
  border : 5px solid #F2E1AC;
  padding : 10px 30px 10px 15px;
  margin : 0 0 1em 0;
  font-weight: bold;
  font-size: 13px;
  position: relative;
}

.ui-message p {
  margin: 0 ;
  
}

.ui-close {
  background-color: #F2E1AC;
  color: #8A7A49;
  position : absolute;
  top: 0;
  right: 0;
  padding: 1px 6px;
  cursor: pointer;
}

.ui-colse:hover {
  background-color:#8A7A49 ;
  color:#F2E1AC;
  
}

.faq-question {
  color:blue;
  cursor:pointer;
  
}

.img-right {
  max-width:50%;
  float:right;
  margin: 0 0 1em 15px;
  
}

.about-placeholder {
  background-color:#F1FAD2;
  padding:10px 15px;
  border:5px solid #DDE8B7;
  margin:0 0 1em 0;
  font-size:13px;
  
}

#about {
  display:block;
  text-align: center;
  font-size:15px;
  font-weight:bold;
}

/*Downloaded from https://www.codeseek.co/120hit/js-jq-tut-for-beginners-eEKxmX */
//Jquery is a simple tool with 2 things - select a event and act on it
//js library - a libarary is a giant set of tools that make writing java script a lot easier
//this - refers to the object that we are running the method on - ex the method click is the event handler 
//this is looking for the parent object, with the class of .ui-message, and then fade it out
jQuery(document).ready(function() {
  //adding the x button
  jQuery(".ui-message").append('<span class="ui-close">X</span>');
  
  //handling the click event
  jQuery(".ui-close").click(function() { //event handling - click element 
    
    jQuery(this).parents(".ui-message").fadeOut(); //traversing the DOM document object model
    
  });
  
  //Initially hide the answers for the FAQ section
  jQuery(".answer").hide();
  
  //handling the FAQ question click
  jQuery(".faq h4").click(function(){
    jQuery(this).next(".answer").slideToggle();
  });
  
  jQuery(".faq h4").addClass("faq-question");
  
  //Dynamically load about content 
  jQuery("#about").click(function() {
    jQuery(".about-placeholder").load("about.html .body-text");
    return false;
  });
});

//jQuery-1.11.0.min.js

Comments