Difference between revisions of "Team:Humboldt Berlin/Basic Part"

Line 105: Line 105:
 
         <!------------------------------------------ HEADER END -------------------------------------------------->
 
         <!------------------------------------------ HEADER END -------------------------------------------------->
  
−
         <section class="page-content fixed-header-content expandable">
+
         <section class="page-content fixed-header-content experiments">
−
             <div class="width-limit">
+
             <div class="protocolls-header">
−
                <div class="protocolls-header">
+
                <h2 class="page-subheadline">Protocolls</h2>
−
                    <h2 class="page-subheadline"></h2>
+
                <div class="protocolls-buttons">
−
                    <div class="protocolls-buttons">
+
                    <div class="collapse-all">
−
                        <div class="collapse-all">
+
                        <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg">
−
                            <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> Collapse all
+
                        Collapse all
 +
                    </div>
 +
                    <div class="expand-all">
 +
                        <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg">
 +
                        Expand all
 +
                    </div>
 +
                </div>
 +
            </div>
 +
 
 +
            <div class="experiments-container">
 +
                <div class="experiments-bar open">
 +
                    <h3 class="lightgreen">Chlamydomonas Protocol</h3>
 +
 
 +
                    <div class="experiments-bar-content">
 +
                        <div class="experiments-bar">
 +
                            <h3>Media & Plates</h3>
 +
 
 +
                            <div class="experiments-bar-content">
 +
                                <p>
 +
                                    To be able to work with C. reinhardtii, you will need medium.
 +
                                    This medium can be in either liquid or solid form and is essential
 +
                                    for any experiment regarding C. reinhardtii. The media we used for
 +
                                    C. reinhardtii is TAP medium.
 +
                                </p>
 +
 
 +
                                <table>
 +
                                    <tr>
 +
                                        <th scope="col">Media</th>
 +
                                        <th scope="col">0,5 L</th>
 +
                                        <th scope="col">1,8L</th>
 +
                                    </tr>
 +
                                    <tr>
 +
                                        <td><b>40 x TAP/TA/TAPi</b></td>
 +
                                        <td>12,5 ml</td>
 +
                                        <td>20 ml</td>
 +
                                    </tr>
 +
                                    <tr>
 +
                                        <td><b>40 x Beijerink Salts</b></td>
 +
                                        <td>12,5 ml</td>
 +
                                        <td>20 ml</td>
 +
                                    </tr>
 +
                                    <tr>
 +
                                        <td><b>Trace Elements (revised)</b></td>
 +
                                        <td>3,5 ml</td>
 +
                                        <td>5,6 ml</td>
 +
                                    </tr>
 +
                                    <tr>
 +
                                        <td><b>H2O</b></td>
 +
                                        <td>471,5 ml</td>
 +
                                        <td>754,4 ml</td>
 +
                                    </tr>
 +
                                    <tr>
 +
                                        <td><b>For Plates: + Agar (1,8 %)</b></td>
 +
                                        <td>7,2 g</td>
 +
                                        <td>14,4 g</td>
 +
                                    </tr>
 +
                                </table>
 +
                                <p>Tap Medium should be adjusted to 7,0 - 7,2 pH and autoclaved.</p>
 +
                            </div>
 
                         </div>
 
                         </div>
−
                         <div class="expand-all">
+
                         <div class="experiments-bar">
−
                             <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> Expand all
+
                             <h3>Cultivation</h3>
 +
 
 +
                            <div class="experiments-bar-content">
 +
                                TODO
 +
                            </div>
 +
                        </div>
 +
                        <div class="experiments-bar">
 +
                            <h3>Transformation</h3>
 +
 
 +
                            <div class="experiments-bar-content">
 +
                                TODO
 +
                            </div>
 +
                        </div>
 +
                        <div class="experiments-bar">
 +
                            <h3>Colony Screening PCR</h3>
 +
 
 +
                            <div class="experiments-bar-content">
 +
                                TODO
 +
                            </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
−
                 <div class="expandable-container">
+
 
−
                     <div class="expandable-preview">
+
                 <div class="experiments-bar open">
−
                         <p class="medium-sized">
+
                    <h3 class="pink">E. coli Protocols</h3>
−
                             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
+
 
−
                        </p>
+
                     <div class="experiments-bar-content">
−
                        <img src="https://static.igem.org/mediawiki/2019/5/5d/T--Humboldt_Berlin--chlamy_wusel.jpeg" alt="preview" />
+
                         <div class="experiments-bar open">
−
                    </div>
+
                             <h3>Cultivation</h3>
−
                    <div class="expandable-more">
+
 
−
                        <div class="two-columns">
+
                            <div class="experiments-bar-content">
−
                            <div>
+
                                <div class="experiments-bar">
−
                                 <p class="medium-sized">
+
                                    <h3>Media & Plates</h3>
−
                                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+
 
−
                                </p>
+
                                    <div class="experiments-bar-content">
−
                                <p class="medium-sized">
+
                                        TODO
−
                                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
+
                                    </div>
−
                                 </p>
+
                                </div>
 +
                                 <div class="experiments-bar">
 +
                                     <h3>Overnight Cultures</h3>
 +
 
 +
                                    <div class="experiments-bar-content">
 +
                                        TODO
 +
                                     </div>
 +
                                 </div>
 
                             </div>
 
                             </div>
−
                            <div>
+
                        </div>
−
                                <p class="medium-sized">
+
                        <div class="experiments-bar">
−
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
+
                            <h3>Transformation</h3>
−
                                 </p>
+
 
−
                                <p class="medium-sized">
+
                            <div class="experiments-bar-content">
−
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
+
                                 TODO
−
                                </p>
+
                            </div>
 +
                        </div>
 +
                        <div class="experiments-bar">
 +
                            <h3>DNA-Isolation</h3>
 +
 
 +
                            <div class="experiments-bar-content">
 +
                                TODO
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
−
                    </div>
 
−
                    <div class="expandable-readall">
 
−
                        <span class="readmore">Read more</span>
 
−
                        <span class="readless">Read less</span>
 
−
                        <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg">
 
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
−
                 <div class="expandable-container">
+
 
−
                     <div class="expandable-preview">
+
                 <div class="experiments-bar open">
−
                         <p class="medium-sized">
+
                    <h3 class="lightpurple">Synthesis Protocols</h3>
−
                             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
+
 
−
                         </p>
+
                     <div class="experiments-bar-content">
−
                         <img src="https://static.igem.org/mediawiki/2019/0/0e/T--Humboldt_Berlin--chlamydomonas_schaubild_eng.png" alt="preview" />
+
                         <div class="experiments-bar">
 +
                             <h3>Sequence & Primer Design</h3>
 +
 
 +
                            <div class="experiments-bar-content">
 +
                                TODO
 +
                            </div>
 +
                         </div>
 +
                         <div class="experiments-bar">
 +
                            <h3>PCR</h3>
 +
 
 +
                            <div class="experiments-bar-content">
 +
                                TODO
 +
                            </div>
 +
                        </div>
 +
                        <div class="experiments-bar">
 +
                            <h3>Digestion</h3>
 +
 
 +
                            <div class="experiments-bar-content">
 +
                                TODO
 +
                            </div>
 +
                        </div>
 +
                        <div class="experiments-bar">
 +
                            <h3>Ligation</h3>
 +
 
 +
                            <div class="experiments-bar-content">
 +
                                TODO
 +
                            </div>
 +
                        </div>
 
                     </div>
 
                     </div>
−
                    <div class="expandable-more">
+
                </div>
−
                        <div class="two-columns">
+
 
−
                            <div>
+
                <div class="experiments-bar open">
−
                                <p class="medium-sized">
+
                    <h3 class="greyblue">General</h3>
−
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+
 
−
                                </p>
+
                    <div class="experiments-bar-content">
−
                                <p class="medium-sized">
+
                        <div class="experiments-bar">
−
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
+
                            <h3>Gel Electrophoresis</h3>
−
                                 </p>
+
 
 +
                            <div class="experiments-bar-content">
 +
                                 TODO
 
                             </div>
 
                             </div>
−
                            <div>
+
                        </div>
−
                                <p class="medium-sized">
+
                        <div class="experiments-bar">
−
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
+
                            <h3>Protein Expression: SDS-page</h3>
−
                                </p>
+
 
−
                                <p class="medium-sized">
+
                            <div class="experiments-bar-content">
−
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
+
                                 TODO
−
                                 </p>
+
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
−
                    <div class="expandable-readall">
+
                </div>
−
                        <span class="readmore">Read more</span>
+
 
−
                         <span class="readless">Read less</span>
+
                <div class="experiments-bar open">
−
                        <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg">
+
                    <h3 class="lightblue">Workflow</h3>
 +
 
 +
                    <div class="experiments-bar-content">
 +
                         <div class="experiments-bar">
 +
                            <h3>Plasmid assembly</h3>
 +
 
 +
                            <div class="experiments-bar-content">
 +
                                TODO
 +
                            </div>
 +
                        </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </section>
 
         </section>
−
 
 
     </div>
 
     </div>
  
−
    <!------------------------------------------ FOOTER ---------------------------------------->
 
 
     <div class="footer-container">
 
     <div class="footer-container">
 
         <footer class="width-limit">
 
         <footer class="width-limit">
−
             <img src="https://static.igem.org/mediawiki/2019/e/ee/T--Humboldt_Berlin--logo_black.png" class="footer-logo" alt="Chlamylicious Logo Black" />
+
             <img src="dist/images/T--Humboldt_Berlin--logo_black.png" class="footer-logo" alt="Chlamylicious Logo Black" />
 
             <div class="footer-right">
 
             <div class="footer-right">
 
                 <ul>
 
                 <ul>
 
                     <li>
 
                     <li>
−
                         <a href="/Team:Humboldt_Berlin">
+
                         <a href="/">
 
                             Home
 
                             Home
 
                         </a>
 
                         </a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
−
                         <a href="/Team:Humboldt_Berlin/Team">
+
                         <a href="/team.html">
 
                             Team
 
                             Team
 
                         </a>
 
                         </a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
−
                         <a href="/Team:Humboldt_Berlin/Description">
+
                         <a href="/project.html">
 
                             Project
 
                             Project
 
                         </a>
 
                         </a>
 
                     </li>
 
                     </li>
−
                </ul>
 
−
                <ul>
 
 
                     <li>
 
                     <li>
−
                         <a href="/Team:Humboldt_Berlin/Parts">
+
                         <a href="/parts.html">
 
                             Parts
 
                             Parts
 
                         </a>
 
                         </a>
 
                     </li>
 
                     </li>
 +
                </ul>
 +
                <ul>
 
                     <li>
 
                     <li>
−
                         <a href="/Team:Humboldt_Berlin/Safety">
+
                         <a href="/safety.html">
 
                             Safety
 
                             Safety
 
                         </a>
 
                         </a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
−
                         <a href="/Team:Humboldt_Berlin/Human_Practices">
+
                         <a href="/human_practices.html">
 
                             Human Practices
 
                             Human Practices
 
                         </a>
 
                         </a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
−
                         <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin">
+
                         <a href="/awards.html">
 +
                            Awards
 +
                        </a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="/for_judges.html">
 
                             For Judges
 
                             For Judges
 
                         </a>
 
                         </a>
Line 236: Line 360:
 
         </footer>
 
         </footer>
 
     </div>
 
     </div>
−
 
−
    <!------------------------------------------ FOOTER END ---------------------------------------->
 
  
 
     <script>
 
     <script>
−
         (function () {
+
         var dropdowns = document.querySelectorAll('.experiments-bar h3');
−
              document.querySelector('.no-js').classList.add('js')
+
        var experimentBars = document.querySelectorAll('.experiments-bar');
−
              document.querySelector('.no-js').classList.remove('no-js')
+
        // TODO queryselectorall?
−
            }())
+
        for (var i = 0; i < dropdowns.length; i++) {
−
              
+
             dropdowns[i].addEventListener('click', function(event) {
−
            window.addEventListener("scroll", function () {
+
                var barContainer = this.closest('.experiments-bar');
−
              const elements = document.querySelectorAll('.is-revealing');
+
                if (barContainer.classList.contains('open')) {
−
           
+
                    barContainer.classList.remove('open');
−
              [].forEach.call(elements, function(el) {
+
                } else {
−
                if (isElementVisible(el)) {
+
                    barContainer.classList.add('open');
−
                  el.classList.add('is-revealing-visible')
+
 
                 }
 
                 }
−
              });
 
 
             });
 
             });
−
           
+
        }
−
            function isElementVisible(el) {
+
 
−
              var top = el.offsetTop;
+
        document.querySelector('.collapse-all').addEventListener('click', function() {
−
              var height = el.offsetHeight;
+
            for (var i = 0; i < experimentBars.length; i++) {
−
           
+
                experimentBars[i].classList.remove('open');
−
              while(el.offsetParent) {
+
            };
−
                el = el.offsetParent;
+
        });
−
                top += el.offsetTop;
+
 
−
              }
+
        document.querySelector('.expand-all').addEventListener('click', function() {
−
           
+
            for (var i = 0; i < experimentBars.length; i++) {
−
              return (
+
                experimentBars[i].classList.add('open');
−
                (top + height) <= (window.pageYOffset + window.innerHeight) + 100
+
            };
−
              );
+
        });
−
            }
+
−
           
+
−
                    var readMores = document.querySelectorAll('.expandable-readall');
+
−
                    var allContainers = document.querySelectorAll('.expandable-container');
+
−
           
+
−
                    for (var i = 0; i < readMores.length; i++) {
+
−
                        readMores[i].addEventListener('click', function(event) {
+
−
                            var container = this.closest('.expandable-container');
+
−
                            if (container.classList.contains('open')) {
+
−
                                container.classList.remove('open');
+
−
                            } else {
+
−
                                container.classList.add('open');
+
−
                            }
+
−
                        });
+
−
                    }
+
−
           
+
−
                    document.querySelector('.collapse-all').addEventListener('click', function() {
+
−
                        for (var i = 0; i < allContainers.length; i++) {
+
−
                            allContainers[i].classList.remove('open');
+
−
                        };
+
−
                    });
+
−
           
+
−
                    document.querySelector('.expand-all').addEventListener('click', function() {
+
−
                        for (var i = 0; i < allContainers.length; i++) {
+
−
                            allContainers[i].classList.add('open');
+
−
                        };
+
−
                    });
+
 
     </script>
 
     </script>
  
 
</html>
 
</html>

Revision as of 10:58, 12 October 2019

Building Blocks

Basic Part

Protocolls

Collapse all
Expand all

Chlamydomonas Protocol

Media & Plates

To be able to work with C. reinhardtii, you will need medium. This medium can be in either liquid or solid form and is essential for any experiment regarding C. reinhardtii. The media we used for C. reinhardtii is TAP medium.

Media 0,5 L 1,8L
40 x TAP/TA/TAPi 12,5 ml 20 ml
40 x Beijerink Salts 12,5 ml 20 ml
Trace Elements (revised) 3,5 ml 5,6 ml
H2O 471,5 ml 754,4 ml
For Plates: + Agar (1,8 %) 7,2 g 14,4 g

Tap Medium should be adjusted to 7,0 - 7,2 pH and autoclaved.

Cultivation

TODO

Transformation

TODO

Colony Screening PCR

TODO

E. coli Protocols

Cultivation

Media & Plates

TODO

Overnight Cultures

TODO

Transformation

TODO

DNA-Isolation

TODO

Synthesis Protocols

Sequence & Primer Design

TODO

PCR

TODO

Digestion

TODO

Ligation

TODO

General

Gel Electrophoresis

TODO

Protein Expression: SDS-page

TODO

Workflow

Plasmid assembly

TODO