Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <<!DOCTYPE html>
<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">
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  
  <title>Basic Aquaponic Setup</title>
</head>
<body>
  


<nav id="navbar">
  
  <header>Simple Aquaponic Setup</header>
  <ul> 
    <a class="nav-link" href="#Introduction" rel="internal"><li>Introduction</li></a>
     <a class="nav-link" href="#Benefits" rel="internal"><li>Benefits</li></a>
    <a class="nav-link" href="#Supplies" rel="internal"><li>Supplies</li></a>
     <a class="nav-link" href="#Basic_Concept" rel="internal"><li>Basic Concept</li></a>
    <a class="nav-link" href="#Indoor_or_Outdoor" rel="internal"><li>Indoor or Outdoor</li></a>
    <a class="nav-link" href="#Variables" rel="internal"><li>Variables</li></a>
    <a class="nav-link" href="#Bed_Design" rel="internal"><li>Bed Design</li></a>
    <a class="nav-link" href="#Routine_Maintenance" rel="internal"><li>Routine Maintenance</li></a>
    <a class="nav-link" href="#Add_A_Tank" rel="internal"><li>Add a Tank</li></a>
   
   

  </ul>
</nav>
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <article>  
      <p>The ability to produce food has been intimately tied to the expanse of mankind throughout our history. Agricultural techniques are cited by scientists as a major component of the advancement of civilization and mankind's intellect. Aquaponics may play a vital role in producing food in the future.</p>

<p>As the global population continues to increase, we face several food related issues. </p>

<li> The amount of arable land is decreasing as climate change affects many growing regions around the world  </li>
<li>Immature agricultural practices such as overfertilizing and overwatering can destroy the areas ability to produce food for up to 100 years in some cases, by overdeposition of salts into soils and thinning of top soil.</li>
   <li>Wars have, are, and will continue to be fought over water... who owns it, and who can use it. The ability to grow your own food with limited supplies and/or space is a valuable skill, and fun to learn about!</li>
      </article>
    </section>
  
  
    <section class="main-section" id="Benefits">
    <header>Benefits</header>
    <article>
     
      <p>Some of the best benefits of aquaponics are:</p>
<ul>
  <li>No weeding the garden or bending over. Most setups are built for easy access.</li>
<li>No need to fertilize or cultivate soil, once the system is well established it will run like a well balanced machine. It will improve as it runs longer (to an extent of several years even) and the plant/fish balance finds equilibrium.</li>
  <li>No pests in the soil to deal with. Of course there may be some other issues but none as difficult to deal with or as devastating.</li>
<li>You can grow more plants up to twice as faste as traditional methods. There's no way to tell you, just see for yourself. Eating all the food will become a task!</li>
  <li>You may use up to 70% less energy than traditional methods of gardening.</li>
    
    </article>
    </section>
  
  
  
  <section class="main-section" id="Supplies">
    <header>Supplies</header>
    <article>
      <p>A few items you will want to have handy</p>

      <li>Large Containers and/or pond liner</li>
      <li>Grow media: Shredded Coconut Coir or Hydroton Rocks</li>
<li>Water Pumps, Aeration devices (not necessary but very useful)</li>
      <li>Source for fish and fish food (if you choose to feed this)</li>
      <li>Water PH Kit</li>
      <li>Pumps</li>
      </article>
    </section>
  
  
  
  <section class="main-section" id="Basic_Concept">
    <header>Basic Concept</header>
    <article>
    <p>In many ways, an aquaponic setup is nothing less than a small-scale ecosystem that has the potential to be self-sustaining. The most basic description: The feces of the fish is converted to usable nutrients by a variety of bacteria within the water. This nutrient rich water is then transported to the plants, where the nutrient is uptaken by plants. Here the water is filtered and aerated on it's journey back down to the fish tank where it circulates and repeats the journey continually or intermittently.</p>


    </article>
    </section>
  <section class="main-section" id="Indoor_or_Outdoor">
    <header>Indoor or Outdoor</header>
    <article> 
<p>There are several factors to consider when deciding upon an indoor or outdoor setup. If your tank is quite large (150 gallons+) than the temperature will vary less then smaller containers. Different species of fish require various temperature ranges to thrive comfortably. If deciding to build outdoors, it's recommend to cover the tank in some way to reduce evaporation, and other issues that may occur such as leaves and grass collecting on the water's surface. Too much of this will effect the ph/nutrient content as they begin to break down. Clear the tank of leaves and debris periodically. </p>
      
      <p>Setting your tank up indoors will require steady electrity to provide proper light for plant growth. While a good aquaponic build will not have a bad smell, it will have some slight odors associated that may not be desired indoors. Air circulation in the room will also be necessary to optimize plant environment. </p>
    </article>
    </section>
  <section class="main-section" id="Variables">
    <header>Variables</header>
    <p>
Many types of fish can be used for aquaponic tanks, both edible and non-edible. When trying to produce the maximum amount of protein and plants, an established system with an experienced user is required. Too much fish density can lead to low oxygen, oversaturation of nutrient, and disease. Also consider the size of the fish, what stage they enter the system at, and what growth size they may acheive. You may find your tank quickly overstocked as they grow/reproduce. Both catfish and tilapia are good aquaponic fish that can survive a good range of temperatures and are tasty. The catfish will lack the "muddy" taste often associated with natural catfish. I suggested raising a few catfish with your tilapia. As long as they are not too large, they will not be able to eat the tilapia, but will be able to control tilapia reproduction numbers, as they tend to breed rapidly when conditions are good.
    </p>
    <p>
I suggested using a 3x3 or 4x4 grow bed, fixed above your tank. Then place a hoop house or netting overlay for the grow area to prevent fruite and vegetable loss (outdoors).
    </p>
    <p>
There are a variety of ways to achieve the aquaponic design, but the most basic is to have one or two circulation pumps in the tank, and one direct pump, sending water from the tank to the grow bed. If you circulate the water constantly, then you may not need to place an aerator in the tank, but I would recommend placing one either way, so your friends can always breathe easy! Experiment with various ways to distrubute the water throughout the growbed and as it returns to the tank, to increase aeration. The more surface break you get, the more aeration you get.

    </p>
   
    </section>
  <section class="main-section" id="Bed_Design">
    <header>Bed Design</header>
    <article>
There are a few ways to make your grow bed:
      <p>
     With a container and grow media. Hydroton or canna coco work best in my experience. A bed allows the roots to spread wide and maintain near perfect moisture with the media. You lose control of plant roots though which may become an issue down the road.
      </p>
      <p>
        Simple cut holes in a flat lid over the tank. Place containers within these holes, with about 1/3 of the container submerged at or near the top of the water line. Fill with hydroton. Control each plant individually and reduce any disease issues, roots float freely in water. Can be a task to find proper line between container depth and water line. Don't drown your plants!
      </p>
      <p>
        Vertical Planters are another unique method. dramatically increase your plant per square foot production by growing upwards. Plants near bottom may not receive as much nutrient as top plants. This may require stronger/more pumps to operate, but less or no electric aeration if set up appropriately.
      </p>
    </article>
    </section>
  
  
  
  <section class="main-section" id="Routine_Maintenance">
    <header>Routine Maintenance</header>
    <article>
     <p> There are definitely a few routine things you should check with your tank on a daily/weekly basis. If you only use a single pump or aerator, you should check daily. It could make the difference between a trip to the store or a sad loss. Consider keeping backup  pumps/aerators for emergencies.</p>

<p>Circulate your fish tank with some sort of stick or mop handle to circulate bacteria buildup in the tank. Doing this while the pump is running is beneficial as it will help clear these sediments from the tank and into the grow bed. You want your tank water to look about like lake water, little to no smell and slightly brownish/clear/green.</p>

      <p>Check plant roots and spot check for bug infestations. A balanced aquaponic system shouldn't have many issues, but as plants encroach on each other and environmental factors take affect, some pests are not uncommon. Trim areas from base of plant a half foot or so up and space plants appropriately to increase fruit production and reduce infestations.</p>

    </article>
    </section>
  <section class="main-section" id="Add_A_Tank">
    <header>Add a tank</header>
    <article>
<p>An advanced method of aquaponcis contains an area, or secondary tank that collects the fish solids in an area of higher concentration that speeds up the nitrate/nitrite conversion process, which allows the nutrients to be available to plants.</p>

<p>Pump water from the fish tank into the settling tank. Fill this tank with media to increase surface area for bacterial growth (scrub pads work well and are cheap). Then pump from this tank to the grow bed. This set up allows for less variability in fish tank o2/ph levels and will balance your system faster and make it better, but is more complicated and requires more effort.</p>
   
   
<p>This was just a basic introduction to the aquaponic concept. Hopefully it will encourage you to explore the vast world of aquaponics and vertical gardening. There are many resources available to support your journey! </p>

     
<p>These concepts can be integrated with solar panels to power lighting and pumps/aerators for a energy free setup!</p>

<p>To finish we will suggest some code for programming variables in your aquaponic system</p>

<p>This code is in JS but the concepts can be applied in any language and then used with a controller (eg. Raspberry Pi) to set environmental controls</p>
     
      <p>If the temperature controller reaches 65 degrees, it will turn on. If it reaches 77, it will turn off. We can log these events also</p>
      <p>Of course we start our code appropriately...</p>
      <code>console.log("hello world")</code> <br>
      <code> 
        var x = pumpA  </br>
      var y = pumpB </br>
        var myVar = pumpA + pump B
        }</code> </br>
      <code>const heaterOff = {
        var x = 77;
        return powerOff
        } </code> </br>
        <code> function powerOn = {
         console.log heaterOn.start
          } </code> </br>
      <code> func powerOff = {
         console.log("heater On")
          } </code>
      
      <p>We can also set a timer like this. 10,000 = 10 seconds, so set accordingly to your needs.<p/>
  <code>var myVar = setInterval(myTimer, 10000); </br>

function myTimer() {
  var d = new Date(); <br>
  document.getElementById("#").innerHTML = d.toLocaleTimeString();
}</code>
         

    </article>
    </section>
  
</main>
  
  </body>
</html>
              
            
!

CSS

              
                html, body{
  min-width:290px;
    color: #4d4e53;
    background-color: #ffffff;
    font-family: 'Open Sans',Arial,sans-serif;
    line-height: 1.5;
}

code{
  }

#navbar{
  position:fixed;
  min-width:290px;
  top:0px;
  left:0px;
  width:300px;
  height:100%;
  border-right:solid;
  border-color:rgba(0,22,22,0.4);
  background-color: black;
}
header{
  color:green;
  font-size: 30px;
  margin:10px;
  text-align:center;
  font-size:2em;
  font-weight:thin;
}
#main-doc header{
  text-align:left;
  margin:0px;
  font-family: Sans;
}
#navbar ul{
  height:85%;
  overflow-y:auto;
  overflow-x:hidden;
}
#navbar li{
  color: white;
  border:1px solid;
  border-bottom-width:0px;
  padding:8px;
  padding-left:45px;
  list-style: none;
  position:relative;
 left:-50px;
  width:100%;
  
}
#navbar a{
  color: #4d4e53;
    text-decoration:none;
    cursor:pointer;
} 
#main-doc{
  position: absolute;
  margin-left:310px;
  padding:20px;
  margin-bottom:110px;
  font-family: sans;
}
section article{
  color: #4d4e53;
  margin:15px;
  font-size:0.96em;
  font-family: sans;
}
section li {
  margin:15px 0px 0px 20px;
}

/* set parameters for mobile */
@media only screen and (max-width: 815px) {
    
  #navbar ul{
  border:1px solid;
    height:207px;
  }
    #navbar{
      background-color:white;
      position:absolute;
      top:0;
      padding:0;
      margin: 0;
      width:100%;
      max-height:275px;
      border:black;
      z-index:1;
      border-bottom:2px solid;
    }
  #main-doc{
    position: relative;
    margin-left:0px;
    margin-top:270px;
  }
  #main-doc section {
/*     padding-top: 240px; */
  }
}
@media only screen and (max-width: 400px) {
  #main-doc{
    margin-left:-10px;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console