Difference between revisions of "Team:Humboldt Berlin/Notebook"

Line 1: Line 1:
 
{{Humboldt_Berlin}}
 
{{Humboldt_Berlin}}
 
<html>
 
<html>
−
 
  
 
<div class="has-animations">
 
<div class="has-animations">
Line 86: Line 85:
 
             </div>
 
             </div>
 
         </nav>
 
         </nav>
−
 
  
 
         <div class="fixed-header-container">
 
         <div class="fixed-header-container">
Line 107: Line 105:
 
                     </div>
 
                     </div>
 
                     <div class="category" data-category="chlamy">
 
                     <div class="category" data-category="chlamy">
−
                         <img src="https://static.igem.org/mediawiki/2019/a/ac/T--Humboldt_Berlin--label_notebook_chlamy.png" alt="c. reinhardtii cultivation and transformations"/>
+
                         <img src="https://static.igem.org/mediawiki/2019/a/ac/T--Humboldt_Berlin--label_notebook_chlamy.png" alt="c. reinhardtii cultivation and transformations" />
 
                     </div>
 
                     </div>
 
                     <div class="category" data-category="bioreaktor">
 
                     <div class="category" data-category="bioreaktor">
Line 114: Line 112:
 
                 </div>
 
                 </div>
 
                 <div class="timeline">
 
                 <div class="timeline">
−
                     <div class="timeline-month tl-first-element"
+
                     <div class="timeline-month tl-first-element" data-text="- Learning MoClo/Golden Gate Design <br>
−
                        data-text="- Learning MoClo/Golden Gate Design <br>
+
 
                         - Research on PETase degradation <br>
 
                         - Research on PETase degradation <br>
 
                         - Planning construction design for Golden Gate cloning using 10 different fusion sites according to Patron <br>
 
                         - Planning construction design for Golden Gate cloning using 10 different fusion sites according to Patron <br>
−
                         - Designing Primers for C. reinhardtii specified promotor PsaD containing BpiI recognition site with MoClo fusion sites and fusion sites compatible for L0 backbone. Primers containing mutation to delete BpiI site (Primer 5,6,11-13)."
+
                         - Designing Primers for C. reinhardtii specified promotor PsaD containing BpiI recognition site with MoClo fusion sites and fusion sites compatible for L0 backbone. Primers containing mutation to delete BpiI site (Primer 5,6,11-13)." data-date="10/08 - 10/14" data-category="synthesis">
−
                        data-date="10/08 - 10/14"
+
−
                        data-category="synthesis">
+
 
                         October <br> 2018
 
                         October <br> 2018
 
                     </div>
 
                     </div>
−
                     <div class="timeline-dot"
+
                     <div class="timeline-dot" data-text="- Research on C. reinhardtii cultivation <br>
−
                        data-text="- Research on C. reinhardtii cultivation <br>
+
 
                         <h2>YFP</h2>
 
                         <h2>YFP</h2>
−
                         - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)"
+
                         - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)" data-date="10/15 - 10/21" data-category="synthesis">
−
                        data-date="10/15 - 10/21"
+
−
                        data-category="synthesis">
+
 
                     </div>
 
                     </div>
−
                     <div class="timeline-dot"
+
                     <div class="timeline-dot" data-text="- Searching for gene templates <br>
−
                        data-text="- Searching for gene templates <br>
+
 
                         <h2>chemical competent DH10B</h2>
 
                         <h2>chemical competent DH10B</h2>
 
                         - production of chemical competent E. coli DH10B cells <br>
 
                         - production of chemical competent E. coli DH10B cells <br>
−
                         - PCR for YFP B5-B5 with primer 7+8"
+
                         - PCR for YFP B5-B5 with primer 7+8" data-category="synthesis" data-date="10/22 - 10/28">
−
                        data-category="synthesis"
+
−
                        data-date="10/22 - 10/28">
+
 
                     </div>
 
                     </div>
−
                     <div class="timeline-month"
+
                     <div class="timeline-month" data-text="<h2>chemical competent DH10B</h2>
−
                        data-text="<h2>chemical competent DH10B</h2>
+
 
                         - checking the chemical competent DH10B cells → Transformation of plasmid containing RFP (Plasmid: pP51) (result/picture: red colonies grew → cells are competent! no cells on negative control)
 
                         - checking the chemical competent DH10B cells → Transformation of plasmid containing RFP (Plasmid: pP51) (result/picture: red colonies grew → cells are competent! no cells on negative control)
 
                         <h2>ARS</h2>
 
                         <h2>ARS</h2>
 
                         - Design of Arylsulfatase 1 (ARS) secretion signal as a B2-B2 part
 
                         - Design of Arylsulfatase 1 (ARS) secretion signal as a B2-B2 part
 
                         <h2>GLE</h2>
 
                         <h2>GLE</h2>
−
                         - Design of Gametolysin (GLE) secretion signal as a B2-B2 part"
+
                         - Design of Gametolysin (GLE) secretion signal as a B2-B2 part" data-date="10/29 - 11/04" data-category="synthesis" data-image="https://static.igem.org/mediawiki/2019/1/17/T--Humboldt_Berlin--Notebook-10-29.png">
−
                        data-date="10/29 - 11/04"
+
−
                        data-category="synthesis"
+
−
                        data-image="https://static.igem.org/mediawiki/2019/1/17/T--Humboldt_Berlin--Notebook-10-29.png">
+
 
                         November
 
                         November
 
                     </div>
 
                     </div>
  
−
                     <div class="timeline-dot"
+
                     <div class="timeline-dot" data-text="- YOYOOY <br>
−
                        data-text="- YOYOOY <br>
+
 
                         <h2>YFP</h2>
 
                         <h2>YFP</h2>
−
                         - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)"
+
                         - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)" data-date="10/15 - 10/21" data-category="human-practice">
−
                        data-date="10/15 - 10/21"
+
−
                        data-category="human-practice">
+
 
                     </div>
 
                     </div>
−
                     <div class="timeline-dot"
+
                     <div class="timeline-dot" data-text="- Searching for gene templates <br>
−
                        data-text="- Searching for gene templates <br>
+
 
                         <h2>chemical competent DH10B</h2>
 
                         <h2>chemical competent DH10B</h2>
 
                         - production of chemical competent E. coli DH10B cells <br>
 
                         - production of chemical competent E. coli DH10B cells <br>
−
                         - PCR for YFP B5-B5 with primer 7+8"
+
                         - PCR for YFP B5-B5 with primer 7+8" data-category="human-practice" data-date="10/22 - 10/28">
−
                        data-category="human-practice"
+
−
                        data-date="10/22 - 10/28">
+
 
                     </div>
 
                     </div>
−
                     <div class="timeline-month"
+
                     <div class="timeline-month" data-text="<h2>chemical competent DH10B</h2>
−
                        data-text="<h2>chemical competent DH10B</h2>
+
 
                         - checking the chemical competent DH10B cells → Transformation of plasmid containing RFP (Plasmid: pP51) (result/picture: red colonies grew → cells are competent! no cells on negative control)
 
                         - checking the chemical competent DH10B cells → Transformation of plasmid containing RFP (Plasmid: pP51) (result/picture: red colonies grew → cells are competent! no cells on negative control)
 
                         <h2>ARS</h2>
 
                         <h2>ARS</h2>
 
                         - Design of Arylsulfatase 1 (ARS) secretion signal as a B2-B2 part
 
                         - Design of Arylsulfatase 1 (ARS) secretion signal as a B2-B2 part
 
                         <h2>GLE</h2>
 
                         <h2>GLE</h2>
−
                         - Design of Gametolysin (GLE) secretion signal as a B2-B2 part"
+
                         - Design of Gametolysin (GLE) secretion signal as a B2-B2 part" data-date="10/29 - 11/04" data-category="human-practice" data-image="https://static.igem.org/mediawiki/2019/1/17/T--Humboldt_Berlin--Notebook-10-29.png">
−
                        data-date="10/29 - 11/04"
+
−
                        data-category="human-practice"
+
−
                        data-image="https://static.igem.org/mediawiki/2019/1/17/T--Humboldt_Berlin--Notebook-10-29.png">
+
 
                         November
 
                         November
 
                     </div>
 
                     </div>
Line 182: Line 157:
 
                     <div>
 
                     <div>
 
                         <h3 class="infobox-date"></h3>
 
                         <h3 class="infobox-date"></h3>
−
                         <img src="" alt="" class="infobox-image no-image"/>
+
                         <img src="" alt="" class="infobox-image no-image" />
 
                     </div>
 
                     </div>
 
                     <p class="infobox-text"></p>
 
                     <p class="infobox-text"></p>
Line 188: Line 163:
 
             </section>
 
             </section>
 
         </div>
 
         </div>
−
    </main>
+
        </main>
  
−
<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="https://static.igem.org/mediawiki/2019/e/ee/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="/Team:Humboldt_Berlin">
 
                             Home
 
                             Home
 
                         </a>
 
                         </a>
−
                    </li>
+
                        </li>
−
                    <li>
+
                        <li>
−
                        <a href="/Team:Humboldt_Berlin/Team">
+
                            <a href="/Team:Humboldt_Berlin/Team">
 
                             Team
 
                             Team
 
                         </a>
 
                         </a>
−
                    </li>
+
                        </li>
−
                    <li>
+
                        <li>
−
                        <a href="/Team:Humboldt_Berlin/Description">
+
                            <a href="/Team:Humboldt_Berlin/Description">
 
                             Project
 
                             Project
 
                         </a>
 
                         </a>
−
                    </li>
+
                        </li>
−
                </ul>
+
                    </ul>
−
                <ul>
+
                    <ul>
−
                    <li>
+
                        <li>
−
                        <a href="/Team:Humboldt_Berlin/Parts">
+
                            <a href="/Team:Humboldt_Berlin/Parts">
 
                             Parts
 
                             Parts
 
                         </a>
 
                         </a>
−
                    </li>
+
                        </li>
−
                    <li>
+
                        <li>
−
                        <a href="/Team:Humboldt_Berlin/Safety">
+
                            <a href="/Team:Humboldt_Berlin/Safety">
 
                             Safety
 
                             Safety
 
                         </a>
 
                         </a>
−
                    </li>
+
                        </li>
−
                    <li>
+
                        <li>
−
                        <a href="/Team:Humboldt_Berlin/Human_Practices">
+
                            <a href="/Team:Humboldt_Berlin/Human_Practices">
 
                             Human Practices
 
                             Human Practices
 
                         </a>
 
                         </a>
−
                    </li>
+
                        </li>
−
                    <li>
+
                        <li>
−
                        <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin">
+
                            <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin">
 
                             For Judges
 
                             For Judges
 
                         </a>
 
                         </a>
−
                    </li>
+
                        </li>
−
                </ul>
+
                    </ul>
−
            </div>
+
                </div>
−
        </footer>
+
            </footer>
 +
        </div>
 
     </div>
 
     </div>
  
−
<script>
+
        <script>
−
        var elementOffset = 160;
+
            var elementOffset = 160;
−
        var container = document.querySelector('.notebook');
+
            var container = document.querySelector('.notebook');
−
        var infobox = document.querySelector('.infobox');
+
            var infobox = document.querySelector('.infobox');
−
        var infoboxText = document.querySelector('.infobox-text');
+
            var infoboxText = document.querySelector('.infobox-text');
−
        var infoboxDate = document.querySelector('.infobox-date');
+
            var infoboxDate = document.querySelector('.infobox-date');
−
        var infoboxImage = document.querySelector('.infobox-image');
+
            var infoboxImage = document.querySelector('.infobox-image');
−
        var firstElement = document.querySelectorAll('.timeline > div')[0]
+
            var firstElement = document.querySelectorAll('.timeline > div')[0]
−
        var categoryFilter = document.querySelectorAll('.category');
+
            var categoryFilter = document.querySelectorAll('.category');
−
 
+
   
−
        infoboxText.innerHTML = firstElement.getAttribute('data-text');
+
            infoboxText.innerHTML = firstElement.getAttribute('data-text');
−
        infoboxDate.innerHTML = firstElement.getAttribute('data-date');
+
            infoboxDate.innerHTML = firstElement.getAttribute('data-date');
−
 
+
   
−
        setFilter('synthesis');
+
            setFilter('synthesis');
−
 
+
   
−
        [].forEach.call(categoryFilter, function(el) {
+
            [].forEach.call(categoryFilter, function(el) {
−
            el.addEventListener('click', function() {
+
                el.addEventListener('click', function() {
−
                setFilter(el.getAttribute('data-category'));
+
                    setFilter(el.getAttribute('data-category'));
 +
                });
 +
            })
 +
   
 +
            window.addEventListener("scroll", function () {
 +
                updateTimeline();
 +
                setFixedElements();
 
             });
 
             });
−
        })
+
   
−
 
+
             function setFixedElements() {
−
        window.addEventListener("scroll", function () {
+
                if (window.pageYOffset >= (window.innerHeight + 100)) {
−
             updateTimeline();
+
                    infobox.classList.add('fixed')
−
            setFixedElements();
+
−
        });
+
−
 
+
−
        function setFixedElements() {
+
−
            if (window.pageYOffset >= (window.innerHeight + 100)) {
+
−
                infobox.classList.add('fixed')
+
−
            } else {
+
−
                infobox.classList.remove('fixed')
+
−
            }
+
−
        }
+
−
 
+
−
        function setFilter(filter) {
+
−
            const elements = document.querySelectorAll('.timeline > div');
+
−
            container.classList.remove('bioreaktor-color');
+
−
            container.classList.remove('chlamy-color');
+
−
            container.classList.remove('human-practice-color');
+
−
            container.classList.remove('synthesis-color');
+
−
            container.classList.add(filter + '-color');
+
−
 
+
−
            [].forEach.call(elements, function(el) {
+
−
                if (el.getAttribute('data-category') === filter) {
+
−
                    el.classList.add('visible')
+
 
                 } else {
 
                 } else {
−
                     el.classList.remove('visible')
+
                     infobox.classList.remove('fixed')
 
                 }
 
                 }
−
             })
+
             }
−
             updateTimeline()
+
   
−
        }
+
             function setFilter(filter) {
−
 
+
                const elements = document.querySelectorAll('.timeline > div');
−
        function updateTimeline() {
+
                container.classList.remove('bioreaktor-color');
−
            const elements = document.querySelectorAll('.timeline > div');
+
                container.classList.remove('chlamy-color');
−
 
+
                container.classList.remove('human-practice-color');
−
            [].forEach.call(elements, function(el) {
+
                container.classList.remove('synthesis-color');
−
                if (isElementActive(el)) {
+
                container.classList.add(filter + '-color');
−
                    if (el.classList.contains('visible')) {
+
   
−
                        el.classList.add('active-timeline-el')
+
                [].forEach.call(elements, function(el) {
 +
                    if (el.getAttribute('data-category') === filter) {
 +
                        el.classList.add('visible')
 +
                    } else {
 +
                        el.classList.remove('visible')
 +
                    }
 +
                })
 +
                updateTimeline()
 +
            }
 +
   
 +
            function updateTimeline() {
 +
                const elements = document.querySelectorAll('.timeline > div');
 +
   
 +
                [].forEach.call(elements, function(el) {
 +
                    if (isElementActive(el)) {
 +
                        if (el.classList.contains('visible')) {
 +
                            el.classList.add('active-timeline-el')
 +
                        } else {
 +
                            el.classList.remove('active-timeline-el')
 +
                        }
 
                     } else {
 
                     } else {
 
                         el.classList.remove('active-timeline-el')
 
                         el.classList.remove('active-timeline-el')
 
                     }
 
                     }
−
                 } else {
+
                 });
−
                     el.classList.remove('active-timeline-el')
+
   
 +
                const activeElements = document.querySelectorAll('.active-timeline-el');
 +
                const lastActive = activeElements[activeElements.length - 1]
 +
   
 +
                if (lastActive !== undefined) {
 +
                     infoboxText.innerHTML = lastActive.getAttribute('data-text')
 +
                    infoboxDate.innerHTML = lastActive.getAttribute('data-date');
 +
   
 +
                    const imageUrl = lastActive.getAttribute('data-image');
 +
                    if (imageUrl !== null) {
 +
                        infoboxImage.classList.remove('no-image')
 +
                        infobox.classList.add('has-image');
 +
                        infoboxImage.src = imageUrl;
 +
                    } else {
 +
                        infoboxImage.classList.add('no-image')
 +
                        infobox.classList.remove('has-image');
 +
                        infoboxImage.src = "";
 +
                    }
 
                 }
 
                 }
−
             });
+
             }
−
 
+
   
−
             const activeElements = document.querySelectorAll('.active-timeline-el');
+
             // rename?
−
             const lastActive = activeElements[activeElements.length - 1]
+
             function isElementActive(el) {
−
 
+
                 var top = el.offsetTop - elementOffset;
−
            if (lastActive !== undefined) {
+
   
−
                 infoboxText.innerHTML = lastActive.getAttribute('data-text')
+
                 while(el.offsetParent) {
−
                infoboxDate.innerHTML = lastActive.getAttribute('data-date');
+
                     el = el.offsetParent;
−
 
+
                     top += el.offsetTop;
−
                 const imageUrl = lastActive.getAttribute('data-image');
+
−
                if (imageUrl !== null) {
+
−
                     infoboxImage.classList.remove('no-image')
+
−
                    infobox.classList.add('has-image');
+
−
                     infoboxImage.src = imageUrl;
+
−
                } else {
+
−
                    infoboxImage.classList.add('no-image')
+
−
                    infobox.classList.remove('has-image');
+
−
                    infoboxImage.src = "";
+
 
                 }
 
                 }
 +
   
 +
                return (
 +
                    top <= window.pageYOffset
 +
                );
 
             }
 
             }
−
         }
+
         </script>
−
 
+
−
        // rename?
+
−
        function isElementActive(el) {
+
−
            var top = el.offsetTop - elementOffset;
+
−
 
+
−
            while(el.offsetParent) {
+
−
                el = el.offsetParent;
+
−
                top += el.offsetTop;
+
−
            }
+
  
−
            return (
 
−
                top <= window.pageYOffset
 
−
            );
 
−
        }
 
−
    </script>
 
 
</html>
 
</html>

Revision as of 10:40, 12 October 2019

notebook

Notebook

Select category

Synthesis: Parts and Vectors
human practice
c. reinhardtii cultivation and transformations
bioreaktor
October
2018
November
November