Study tool #1 - Hydrocarbons

index.html

<!--In organic chemistry, a hydrocarbon is an organic compound consisting entirely of hydrogen and carbon. Hydrocarbons from which one hydrogen atom has been removed are functional groups. Alkanes, alkenes and alkyne-based compounds are different types of hydrocarbons.-->
<h1>The Hydrocarbons</h1>
<hr />
<div class="ane_wrapper" id="area">
   <h2>Alkanes</h2>
   <input class='alkane_' type="range" min="1" max="20" step="1" value="1">
   <div class="alkane"> C<span class="n"><sub></sub></span>H<span class="hn"><sub>4</sub></span>
   </div>
   <div id="names" class="aname">Methane</div>
</div>

<div class="ene_wrapper" id="area">
   <h2>Alkenes</h2>
   <input class='alkene_' type="range" min="2" max="20" step="1" value="1">
   <div class="alkene"> C<span class="n2"><sub>2</sub></span>H<span class="hn2"><sub>4</sub></span>
   </div>
   <div id="names" class="ename">Ethene</div>
</div>

<div class="yne_wrapper" id="area">
   <h2>Alkynes</h2>
   <input class='alkyne_' type="range" min="2" max="20" step="1" value="1">
   <div class="alkyne"> C<span class="n3"><sub>2</sub></span>H<span class="hn3"><sub>2</sub></span>
   </div>
   <div id="names" class="yname">Ethyne</div>
</div>

script.js

///The IUPAC names
var names = ['Nothing', 'Meth', 'Eth', 'Prop', 'But', 'Pent', 'Hex', 'Hept', 'Oct', 'Non', 'Dec','Undec','Dodec','Tridec','Tetradec',	'Pentadec','Hexadec','Heptadec','Octadec','Nonadec','Eicos'];
///For alkanes, the hydrocarbons with formula
ane_slider = $('.alkane_');
alkane_name = $('.name');
value = $('.alkane_').val();
ane_slider.on('input', function() {
   value = $('.alkane_').val();
   $('.n').html(value);
   $('.hn').html(value * 2 + 2);
   $('.aname').html(names[value] + 'ane');
});

//////////////////////////////////
ene_slider = $('.alkene_');
alkene_name = $('.name');
value = $('.alkene_').val();
ene_slider.on('input', function() {
   value = $('.alkene_').val();
   $('.n2').html(value);
   $('.hn2').html(value * 2);
   $('.ename').html(names[value] + 'ene');
});
////////////////////////////
yne_slider = $('.alkyne_');
alkyne_name = $('.name');
value = $('.alkyne_').val();
yne_slider.on('input', function() {
   value = $('.alkyne_').val();
   $('.n3').html(value);
   $('.hn3').html(value * 2 - 2);
   $('.yname').html(names[value] + 'yne');
});
///////////////////////////
body = $('body');
view = $('.ane_wrapper,.ene_wrapper,.yne_wrapper');
$(window).resize(function() {
   var w = body.width();
   if (w < 1000) {
      view.addClass('active');
   } else {
      view.removeClass('active');
   }

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Study tool #1 - Hydrocarbons.markdown

Study tool #1 - Hydrocarbons

I'll make more like this. I didn't make this pen responsive because I'm pretty bad at it. The main concept was to use the 'alkane', 'alkene' and 'alkyne' formula. Hope you alll like it! Please heart

I'll be thankful if anyone would help me making it responsive! :)

A Pen by Abhijit Hota on CodePen.

License.

style.css

///I've tried my best to keep the CSS clean. :)///
///Please heart!///
////Didn't make it responsive either :P/// 
///Best ion full screen
*{transition:all 0.4s  ease;}
////The fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Raleway);
///For background///
html{
   background:linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); 
   height: 100%;
   width: 100%;
   text-align:center;
}
///////Heading//////
h1{
   font-size:60px;
   font-family: 'Raleway', sans-serif;
   color:#2c3e50;
   position: absolute;
   left: 0;
   right: 0;
   top: 20px;
}
h2{
   position: absolute;
   top: 50px;
   left: 0;
   right: 0;
}
hr{
   margin-top: 100px;
   background: #2c3e50;
   outline: 0;
   height: 6px;
   border:none;
}
////The hydrocarbons///
.ane_wrapper,
.ene_wrapper,
.yne_wrapper {
   width: 33.33vw;
   position: absolute;
   height: 100vh;
   background: transparent;
   font-family: 'Open Sans', sans-serif;
   text-align:center;
   font-size:40px;
   color:#2c3e50;
   font-weight:bold;
   span{
      vertical-align: sub;
      font-size: smaller;
   }
   div{
      position: absolute;
      left: 0;
      right: 0;
      top:15%;
      bottom: 0;
      margin: auto;
      height: 100px;
      width: 200px;
   }
   #names{top: 35%;}
   &.active{
      height: 33.33vh;
      position: relative;
      margin: 0;
      width: 100vw;
   }
}
.ane_wrapper{left: 0;}
.ene_wrapper {
  left: 0;
  margin: auto;
  right: 0;
}
.yne_wrapper{right: 0;}
///The flat input. Should I remove the shadow?///
input[type=range] {
   -webkit-appearance: none;
   width: 80%;
   top: 35%;
   left: 30px;
   position: absolute;
   &:focus {outline: none;}
   &::-webkit-slider-thumb {
      border: 6px solid #2c3e50;
      height: 40px;
      width: 40px;
      border-radius: 100%;
      background:linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); 
  cursor: pointer;
     -webkit-appearance: none;
      margin-top: -16px;
      &:active{transform:scale(0.9);}
}
   &::-webkit-slider-runnable-track {
      width: 100%;
      height: 8.4px;
      cursor: pointer;
      box-shadow: 1px 1px 30px #2c3e50;
      background: #2c3e50;
      border-radius: 1.3px;
      border: 0.2px solid #010101;
}}