part of sun

JavaScript and Space Exploration !!

What do space exploration and javaScript possibly have in common? Well, first of all they both make you scratch your head!

A very interesting fact you might not know is that javaScript and NodeJS are used by NASA "to build the present and future systems supporting spaceship operations and development." You can learn more about the use of NodeJs in space programs by clicking here.

So, wanna work for NASA? You'll have to master JavaScript! In the meantime here is some fun and easy tutorials to help you make webpages more dynamic and interactive, just click the menu above!

Space Facts Generator

space walk

In this tutorial we will use javaScript and CSS animation to create a facts generator. We are also using font awesome for the icons.

Step #1: Set Up Font Awesome Icons

You will need to place the following link below in your HTML document before the closing </body> tag.


  <script src="https://use.fontawesome.com/fe2316b545.js"></script>

Step #2: Code the HTML Markup

Create an HTML markup with your preferred naming convention, it should look similar to the code below.


  <div class="facts__container">
    <div class="icon">
      <span></span>
    </div>
    <div class="text__container">
      <p class="text"></p>
    </div>
  </div>

Step #3: Style With CSS

Style the text container and icon container with your preferences and set up the keyframes animation as per the code below.


  .facts__container {
  position: relative;
  left: 27%;
  width: 430px;
  height: 78px;
  margin-top: 20px;
  margin-bottom: 40px;
  background-color: #fff;
  border-radius: 5px;
  }

  .icon {
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  padding: 15px;
  background-color: #dec923;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow-y: hidden;
  }

  .fa.fa-globe,
  .fa.fa-moon-o,
  .fa.fa-space-shuttle,
  .fa.fa-sun-o,
  .fa.fa-star-o{
  height: auto;
  color: #fff;
  line-height: 46px;
  animation: animateT 5s infinite;
  }

  .fa-2x {
  font-size: 2.5em;
  }

  .text__container {
  box-sizing: border-box;
  width: 320px;
  height: auto;
  padding: 5px 0;
  position: absolute;
  left: 98px;
  top: 50%;
  transform: translateY(-50%);
  overflow-y: hidden;
  }

  .text {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 1em;
  color: #12b48c;
  position: relative;
  animation: animateT 5s infinite;
  }

  @keyframes animateT {
    0% {
    transform: translateY(2em);
    opacity: 0;
    }
    8% {
    transform: translateY(-0.3em);
    opacity: 1;
    }
    13% {
    transform: translateY(0);
    opacity: 1;
    }
    87% {
    transform: translateY(0);
    opacity: 1;
    }
    93% {
    transform: translateY(0.5em);
    opacity: 1;
    }
    100% {
    transform: translateY(-2em);
    opacity: 0;
    }
  }

Step #4: Create and Link the Script

Create a script file and link it to your html document. Place the script file before the closing </body> tag .


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

Step #5: Write the Script

Now it's time to write the script! Check out the script below as a reference and modify the variables to fit your project.


  (function(){
  
  var iconList = [
    "fa-globe",
    "fa-moon-o",
    "fa-space-shuttle",
    "fa-sun-o",
    "fa-star-o"
  ];
  
  var factsList = [
    "Earth is the only planet not named after a god.",
    "A full moon is 9 times brighter than a half moon.",
    "From space the brightest man made place is Las Vegas.",
    "One million Earths can fit inside the Sun.",
    "Stars are usually between 1 and 10 billion years old."
  ]; 

  function createElement(text, icon){
      var p = document.querySelector(".text");
      p.textContent = text;
      var span = document.querySelector(".icon span");
      span.className = "";
      span.classList.add("fa", icon, "fa-2x", "fa-fw");
  }
  
  var i = 0;
  var length = factsList.length;
  var delayTime = 5000;
  
  function nextFact(){
    var fact = factsList[i];
    var icon = iconList[i];
    
    createElement(fact, icon);
    
    i = (i+1) % 4;
    
    setTimeout(nextFact, delayTime);   
  }

 nextFact();

 })();  

Content of the Universe
Pie Chart

In this tutorial we will use the open source charting libraries Chart.js to creat a simple and interactive pie chart. Chart.js uses HTML5 canvas element for rendering. The library supports six different chart types and you can also create your own custom chart type. Mouse over the chart to see its interactivity.

Step #1: Include Chart.js in Your Page

You will need to place the following link below in your HTML document before the closing </body> tag.


  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>

Step #2: Code the HTML Markup

Create an HTML markup with your preferred naming convention, it should look similar to the code below.


  <class="chart-container">
    <canvas id="myChart">
    </canvas>
  </div>

Step #3: Style With CSS

Style the chart container and size of the chart with your preferences.


#myChart {
  max-width: 400px;
  max-height: 400px;
  margin: auto;
}

S P A C E   P A R T Y !

In this tutorial we will use jQuery and CSS animation to create the text bouncing effects. We are also using font awesome for the icons. Mouseover the letters to join the party!

Step #1: Link the Necessary Scripts

You will need to place the following links below in your HTML document before the closing </body> tag.


  <script src="https://use.fontawesome.com/fe2316b545.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script<

Step #2: Code the HTML Markup

Create an HTML markup with your preferred naming convention, it should look similar to the code below.


  <h2 class="party">
    <span class="text-bounce">S</span>
    <span class="text-bounce">P</span>
    <span class="text-bounce">A</span> 
    <span class="text-bounce">C</span>
    <span class="text-bounce">E</span>
    <span class="text-bounce">P</span>
    <span class="text-bounce">A</span>
    <span class="text-bounce">R</span>
    <span class="text-bounce">T</span>
    <span class="text-bounce">Y</span>
    <span class="text-bounce">!</span>
    <br><span class="text-bounce"><i class="fa fa-star" aria-hidden="true"></i></span> 
    <span class="text-bounce"><i class="fa fa-music" aria-hidden="true"></i></span> 
    <span class="text-bounce"><i class="fa fa-heartbeat" aria-hidden="true"></i></span>
  </h2>

Step #3: Style With CSS

Style the text with your preferences and set up the CSS animation following the code below.


h1.party{
  font-size: 4em;
  margin-top: 20px;
  margin-bottom: 20px;
}

.text-bounce{
  display: inline-block;
  padding-top: 20px;
  vertical-align: center;
  transform: scaleY(1) translateY(0px);
  transform-origin: 50% 100%;
  transition: .3s ease-in-out;
 
}
.animate{
  animation: bouncy 1s forwards;
  color: #9bd1ff;
}

@keyframes bouncy{
  0%{transform: scaleY(1) translateY(0px);}
  25%{transform: scaleY(.5) translateY(20px);}
  50%{transform: scaleY(1.2) translateY(-20px);}
  75%{transform: scaleY(.8) translateY(10px);}
  100%{transform: scaleY(1) translateY(0px);}
}

h1:hover{cursor: default;}


Step #4: Write the Script

Now it's time to write the script! Check out the script below as a reference and modify the variables to fit your project.


var delay = 0;
var partys = document.querySelectorAll('.party');
for(var i = 0; i < partys.length; i++) {  
  partys[i].style.animationDelay = delay + 's';
  delay +=.1;
}

$(".text-bounce").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("animate")  
})

$(".text-bounce").hover(function(){
  $(this).addClass("animate");        
});