Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
    <header>
        <h1>Pomodoro Clock - Legacy Version (without frameworks)</h1>
        <h2>freeCodeCamp</h2>
    </header>

    <main>
        <section id="timers">
            <form id="timers1">
                <div id="sliderBreak">
                    <p id="showBreakLength">Break Length in minutes (max. 2 hours)</p>
                    <div class="length-Container">
                        <input type="range" min="1" max="120" value="5" class="slider" id="breakRange">
                    </div>
                    <p id="breakStartValue"></p>
                </div>
                <div id="sliderSession">
                    <p id="showSessionLength">Session Length in minutes (max. 8 hours)</p>
                    <div class="length-Container">
                        <input type="range" min="1" max="480" value="30" class="slider" id="sessionRange">
                    </div>
                    <p id="sessionStartValue"></p>
                </div>
            </form>
        </section>
        <p id="message">Keep working...There's a drink at the end of the tunnel!</p>
        <p id="showTimeLeft"></p>
        <div id="tunnel">
            <div class="moving-space">
                <div id="bricks">
                </div>
                <div id="clearedTunnel">
                </div>
                <div id="miner">
                    <?xml version="1.0" encoding="iso-8859-1"?>
                    <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
                        viewBox="0 0 63.008 63.008" style="enable-background:new 0 0 63.008 63.008;" xml:space="preserve" width="50px"
                        height="50px">
                        <g>
                            <g>
                                <path d="M28.046,6.794c0,2.904,2.354,5.259,5.26,5.259c2.627,0,4.798-1.929,5.188-4.445l3.505,0.98    l0.286-1.013l-2.716-0.76c0.316-2.938-1.518-5.762-4.456-6.585c-3.279-0.917-6.676,0.995-7.593,4.271l0.931,0.261    C28.193,5.386,28.046,6.073,28.046,6.794z"
                                    fill="#f2e93f" />
                                <path d="M59.711,26.767c-0.195,3.192-0.636,6.181-1.455,9.042c-0.642,2.271-1.505,4.454-2.521,6.57    l-11.453-5.594c0.137-0.85-0.046-1.766-0.717-2.595c-4.075-5.01-4.77-10.565-7.284-16.471c-0.625-1.469-1.154-3.161-8.326-5.064    c-8.418-2.235-15.624-0.09-19.454,8.197c-1.66,3.594,3.519,6.74,5.336,3.402l6.774,3.309c-0.897,2.315-1.917,4.587-3.081,6.817    c-4.183,6.852-9.534,13-14.772,19.057c-2.822,3.477,2.103,7.084,4.965,3.758c4.283-4.953,8.151-9.275,11.967-14.647    c0.396,0.249,9.752,5.327,9.752,5.327c-1.578,3.744-3.145,6.976-5.326,10.423c-2.298,3.633,2.942,6.74,5.413,3.053    c2.786-4.157,4.436-8.295,6.455-12.823c0.55-1.237,0.651-2.835-0.496-3.825c-0.321-0.277-7.53-5.575-7.257-5.101    c1.137-2.223,2.179-4.489,3.111-6.799l5.67,2.771c0.613,1.071,1.298,2.104,2.091,3.082c1.323,1.629,3.146,1.219,4.249,0.016    l11.431,5.584c-1.357,2.54-2.927,4.989-4.64,7.385c-1.77,2.479-3.666,4.897-5.67,7.375c2.917-1.348,5.474-3.342,7.763-5.594    c2.234-2.231,4.185-4.794,5.7-7.627l1.562,0.76l0.925-1.887l-1.56-0.762c1.068-2.399,1.815-4.961,2.101-7.583    C61.319,33.063,60.963,29.72,59.711,26.767z M21.348,25.58l-6.571-3.21c0.944-1.74,2.16-3.339,4.073-4.072    c1.504-0.577,3.124-0.537,4.709-0.251C22.945,20.608,22.216,23.119,21.348,25.58z M32.111,30.838    c0.443-1.185,0.855-2.376,1.245-3.577c0.676,1.751,1.341,3.505,2.102,5.211L32.111,30.838z"
                                    fill="#f2e93f" />
                            </g>
                        </g>
                    </svg>
                </div>
                <!--end miner-->
                <div id="relaxing">
                    <?xml version="1.0" encoding="iso-8859-1"?>
                    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
                    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
                        width="50px" height="50px" viewBox="0 0 216.796 216.796" style="enable-background:new 0 0 216.796 216.796;"
                        xml:space="preserve">
                        <g>
                            <g>
                                <path d="M215.444,96.258c-2.037-2.347-5.562-2.599-7.909-0.583l-50.68,43.7h-21.604c0.822-0.252,1.636-0.554,2.414-1.007    l50.428-29.582c5.336-3.135,7.125-10,4.001-15.335c-3.146-5.337-10.007-7.122-15.338-4l-50.431,29.578    c-1.686,0.997-2.966,2.375-3.899,3.935L71.73,107.561c-1.52-0.466-3.156-0.385-4.636,0.202l-56.032,22.415    c-3.599,1.433-5.341,5.509-3.898,9.098c1.09,2.736,3.721,4.405,6.497,4.405c0.871,0,1.748-0.158,2.603-0.509l6.026-2.413    l-0.407,0.279L1.614,161.579c-2.173,2.2-2.15,5.746,0.056,7.924c1.087,1.073,2.509,1.609,3.933,1.609    c1.446,0,2.897-0.559,3.991-1.67l18.608-18.86H157.39l33.309,19.747c0.896,0.531,1.877,0.783,2.852,0.783    c1.915,0,3.782-0.979,4.825-2.745c1.572-2.661,0.7-6.098-1.968-7.672l-27.915-16.555l46.354-39.97    C217.195,102.143,217.456,98.605,215.444,96.258z M25.865,139.375l-0.203,0.043l44.345-17.738l58.235,17.695H25.865z"
                                    fill="#FFDA44" />
                                <circle cx="176.017" cy="65.923" r="20.24" fill="#FFDA44" />
                            </g>
                        </g>

                    </svg>
                </div>
                <!--end relaxing-->
                <div id="glass">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        width="50px" height="50px" viewBox="0 0 98 100" enable-background="new 0 0 98 100" xml:space="preserve">
                        <path fill="#FFFFFF" d="M85.715,26.547h-7.457c1.711-5.512,0.539-11.744-3.043-15.975c-3.587-4.236-9.158-6.766-14.896-6.766
        c-4.109,0-7.852,1.29-10.733,3.6c-3.045-4.6-9.469-7.03-15.613-7.03c-7.055,0-14.166,3.225-16.001,10.323
        c-1.147-0.196-2.492-0.347-3.91-0.347c-8.456,0-13.503,5.16-13.846,14.155c-0.185,4.844,1.047,8.677,3.662,11.394
        c1.359,1.413,3.049,2.442,4.988,3.094v48.546c0,6.663,5.421,12.083,12.083,12.083h43.364c6.662,0,12.084-5.42,12.084-12.083v-9.373
        c0,0,0,0.001,0.002,0.001c0.006,0,0.013-0.007,0.018-0.008l9.305,0.004c6.661,0,12.084-5.419,12.084-12.083V38.63
        C97.799,31.968,92.378,26.547,85.715,26.547z" />
                        <path fill="none" d="M85.715,32.589H75.023v-0.178c-2.688,3-6.535,4.606-11.271,4.606c-4.216,0-8.304-1.251-10.778-2.189
        c-2.216,2.709-6.748,6.943-13.577,7.167c-0.236,0.008-0.467,0.012-0.696,0.012c-6.706,0-10.612-3.162-12.737-5.904
        c-2.943,2.091-7.034,3.49-11.06,3.669V87.54c0,3.321,2.719,6.041,6.042,6.041h43.366c3.322,0,6.041-2.72,6.041-6.041v-9.376
        c0-3.322,2.723-6.041,6.043-6.041h9.318c3.322,0,6.043-2.719,6.043-6.042v-27.45C91.758,35.307,89.037,32.589,85.715,32.589z"
                        />
                        <path fill="none" d="M75.042,32.605h10.69c1.653,0,3.156,0.674,4.25,1.759c-1.096-1.095-2.606-1.775-4.268-1.775H75.041
        L75.042,32.605L75.042,32.605z" />
                        <path fill="none" d="M39.416,42.01c6.829-0.225,11.361-4.458,13.576-7.167c2.476,0.938,6.562,2.188,10.777,2.188
        c4.727,0,8.567-1.6,11.254-4.588v-0.032c-2.688,3-6.535,4.606-11.271,4.606c-4.216,0-8.303-1.251-10.778-2.189
        c-2.216,2.709-6.748,6.943-13.577,7.167c-0.236,0.008-0.467,0.012-0.696,0.012c-4.608,0-7.895-1.493-10.189-3.317
        c2.295,1.831,5.586,3.332,10.207,3.332C38.949,42.022,39.18,42.018,39.416,42.01z" />
                        <path fill="none" d="M14.923,87.557V39.788c4.025-0.18,8.114-1.577,11.056-3.667c-0.004-0.006-0.01-0.012-0.014-0.018
        c-2.943,2.091-7.034,3.49-11.06,3.669V87.54c0,1.669,0.688,3.186,1.792,4.281C15.603,90.727,14.923,89.217,14.923,87.557z"
                        />
                        <polygon fill="#FF9C08" points="80.162,59.326 80.162,45.717 75.939,45.717 75.939,59.33 80.162,59.33 " />
                        <polygon fill="none" points="75.939,59.33 80.162,59.33 80.162,59.326 80.162,45.717 75.939,45.717 " />
                        <g>
                            <polygon fill="#FF9C08" points="75.939,59.33 80.162,59.33 80.162,59.326 80.162,45.717 75.939,45.717     " />
                            <path fill="#FF9C08" d="M89.982,34.364c-1.094-1.085-2.597-1.759-4.25-1.759h-10.69h-0.001v-0.016h-0.018v-0.146
            c-2.687,2.988-6.527,4.588-11.254,4.588c-4.215,0-8.302-1.25-10.777-2.188c-2.215,2.709-6.747,6.942-13.576,7.167
            c-0.236,0.008-0.467,0.012-0.696,0.012c-4.621,0-7.912-1.501-10.207-3.332c-1.038-0.825-1.872-1.717-2.534-2.569
            c-2.942,2.09-7.031,3.487-11.056,3.667v47.769c0,1.66,0.68,3.17,1.774,4.265c1.094,1.086,2.597,1.76,4.25,1.76h43.366
            c3.322,0,6.041-2.72,6.041-6.041v-9.376c0-3.322,2.723-6.041,6.043-6.041h9.318c3.322,0,6.043-2.719,6.043-6.042v-27.45
            C91.758,36.97,91.078,35.459,89.982,34.364z M85.6,59.297c0.01,0.526-0.062,2.496-1.494,3.98c-0.656,0.681-1.832,1.492-3.692,1.492
            h-7.19c-1.502,0-2.721-1.219-2.721-2.72V42.999c0-1.502,1.219-2.719,2.721-2.719h7.03c1.979,0,3.205,0.814,3.884,1.498
            c1.405,1.417,1.467,3.22,1.463,3.567V59.297z" />
                        </g>

                        <path opacity="0.3" fill="#FFFFFF" enable-background="new" d="M28.018,81.221c0,1.975-1.6,3.573-3.574,3.573l0,0
        c-1.974,0-3.574-1.601-3.574-3.573l0,0c0-1.975,1.601-3.574,3.574-3.574l0,0C26.418,77.646,28.018,79.246,28.018,81.221
        L28.018,81.221z">

                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 50;0 -50;" dur="2.8s" repeatCount="indefinite"
                            />

                        </path>
                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M39.018,51.221c0,1.975-1.6,3.573-3.574,3.573l0,0
        c-1.974,0-3.574-1.601-3.574-3.573l0,0c0-1.975,1.601-3.575,3.574-3.575l0,0C37.418,47.646,39.018,49.246,39.018,51.221
        L39.018,51.221z">

                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 50;0 -50;" dur="4s" repeatCount="indefinite"
                            />

                        </path>

                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M65.018,81.221c0,1.975-1.6,3.573-3.574,3.573l0,0
        c-1.973,0-3.573-1.601-3.573-3.573l0,0c0-1.975,1.601-3.574,3.573-3.574l0,0C63.418,77.646,65.018,79.246,65.018,81.221
        L65.018,81.221z">

                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="2 50;2 -50;" dur="2.2s" repeatCount="indefinite"
                            />

                        </path>

                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M58.018,59.221c0,1.975-1.6,3.573-3.574,3.573l0,0
        c-1.973,0-3.573-1.601-3.573-3.573l0,0c0-1.975,1.601-3.574,3.573-3.574l0,0C56.418,55.646,58.018,57.246,58.018,59.221
        L58.018,59.221z">

                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 50;0 -50;" dur="2.5s" repeatCount="indefinite"
                            />

                        </path>
                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M23.165,61.221c0,0.949-0.771,1.719-1.721,1.719l0,0
        c-0.949,0-1.72-0.77-1.72-1.719l0,0c0-0.951,0.771-1.721,1.72-1.721l0,0C22.394,59.5,23.165,60.27,23.165,61.221L23.165,61.221z">
                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 50;0 -50;" dur="3s" repeatCount="indefinite"
                            />

                        </path>
                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M45.165,71.221c0,2.055-1.667,3.719-3.721,3.719l0,0
        c-2.053,0-3.719-1.664-3.719-3.719l0,0c0-2.056,1.667-3.72,3.719-3.72l0,0C43.498,67.501,45.165,69.165,45.165,71.221L45.165,71.221
        z">
                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 50;0 -50;" dur="4s" repeatCount="indefinite"
                            />

                        </path>
                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M43.877,86.221c0,1.344-1.09,2.432-2.434,2.432l0,0
        c-1.343,0-2.433-1.088-2.433-2.432l0,0c0-1.345,1.09-2.434,2.433-2.434l0,0C42.788,83.787,43.877,84.876,43.877,86.221
        L43.877,86.221z">
                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 50;0 -50;" dur="3s" repeatCount="indefinite"
                            />

                        </path>
                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M63.999,42.22c0,1.411-1.146,2.554-2.556,2.554l0,0
        c-1.408,0-2.553-1.143-2.553-2.554l0,0c0-1.411,1.145-2.554,2.553-2.554l0,0C62.854,39.666,63.999,40.809,63.999,42.22L63.999,42.22
        z">
                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 50;0 -50;" dur="3s" repeatCount="indefinite"
                            />

                        </path>
                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M23.109,46.601c0,0.709-0.575,1.283-1.285,1.283l0,0
        c-0.708,0-1.283-0.573-1.283-1.283l0,0c0-0.709,0.575-1.284,1.283-1.284l0,0C22.534,45.317,23.109,45.891,23.109,46.601
        L23.109,46.601z">
                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 50;0 -50;" dur="2s" repeatCount="indefinite"
                            />

                        </path>
                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M53.075,49.444c0,0.709-0.574,1.283-1.284,1.283l0,0
        c-0.708,0-1.283-0.573-1.283-1.283l0,0c0-0.709,0.575-1.283,1.283-1.283l0,0C52.5,48.161,53.075,48.734,53.075,49.444L53.075,49.444
        z">
                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 50;0 -50;" dur="2.5s" repeatCount="indefinite"
                            />

                        </path>
                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M53.497,74.723c0,0.711-0.575,1.283-1.284,1.283l0,0
        c-0.708,0-1.283-0.572-1.283-1.283l0,0c0-0.709,0.575-1.281,1.283-1.281l0,0C52.921,73.439,53.497,74.014,53.497,74.723
        L53.497,74.723z">
                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 50;0 -50;" dur="2.2s" repeatCount="indefinite"
                            />

                        </path>
                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M26.061,70.771c0,0.709-0.575,1.283-1.284,1.283l0,0
        c-0.708,0-1.283-0.574-1.283-1.283l0,0c0-0.709,0.575-1.283,1.283-1.283l0,0C25.486,69.486,26.061,70.062,26.061,70.771
        L26.061,70.771z">
                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 50;0 -50;" dur="2s" repeatCount="indefinite"
                            />

                        </path>
                        <path opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M65.877,68.221c0,1.344-1.09,2.432-2.434,2.432l0,0
        c-1.344,0-2.434-1.088-2.434-2.432l0,0c0-1.345,1.09-2.434,2.434-2.434l0,0C64.788,65.787,65.877,66.876,65.877,68.221
        L65.877,68.221z">
                            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="-10 50;-10 -50;" dur="5s" repeatCount="indefinite"
                            />

                        </path>
                    </svg>

                </div>
                <!--end glass-->

            </div>
            <!--end moving-space-->
        </div>
        <!--end tunner-->

        <p>Animated svg glass with drink logo from this
            <a href="http://pintsize.io/" target="_blank">project</a>
        </p>
        <div>Icons of miner made by
            <a href="http://www.freepik.com" title="Freepik">Freepik</a> from
            <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by
            <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
        </div>

    </main>
    <footer>
        <h6 class="textcenter">Made by
                <a href="https://www.ionvarsescu.tk" target="_blank">Ion Varsescu</a>
        </h6>
    </footer>
            
          
!
            
              body {
    background: #ff9c08;
    color: #fff;
    margin-left: 20px;
}

header, footer {
    text-align: center;
}

#timers {
    width: 400px;
}

.length-Container {
    width: 100%;
}

.slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: #e7b52b;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
    -webkit-transition: .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: #523a17;
    cursor: hand;
}

.slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #523a17;
    cursor: hand;
}

a {
    color: #fff;
}

p {
    padding: 0.5em 0;
}

.moving-space {
    position: relative;
}

#glass {
    position: relative;
    text-align: right;
    padding: 0;
    width: 400px;
    z-index: 100;
}

#miner {
    --minerMarginLeft: 0px;
    margin-left: var(--minerMarginLeft);
    position: relative;
    text-align: left;
    margin-top: 1px;
    margin-bottom: -52px;
    padding: 0;
    width: 400px;
    z-index: 100;
}

#relaxing {
    --relaxingMarginRight: 400px;
    margin-right: var(--relaxingMarginRight);
    position: relative;
    text-align: right;
    margin-bottom: -55px;
    padding: 0;
    width: 400px;
    z-index: -1;
}

#tunnel {
    height: 52px;
    width: 400px;
    padding: 1px;
    background-color: blanchedalmond;
}

#bricks {
    height: 52px;
    width: 400px;
    margin-bottom: -53px;
    background-color: #c47708;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='22' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23231a13' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#clearedTunnel {
    position: relative;
    height: 52px;
    width: 400px;
    margin-bottom: -52px;
    background-color: #523a17;
    z-index: -1;
}

svg {
    background-color: #523a17;
}
            
          
!
            
              
/*I've replicated the exact functionalty of the example - the legacy challenge - You can't change the session length if you pause during break time. I think
the break
*/


document.getElementById("timers1").reset(); //the input has to be in a form in order to refresh the data
let breakSlider = document.getElementById("breakRange");
let breakValue = document.getElementById("breakStartValue");
let timeLeft = document.getElementById("showTimeLeft");


//breakValue.innerHTML=breakSlider.value; -not working in Firefox(doens't update on refresh page)
breakValue.innerHTML = breakSlider.value;
breakSlider.oninput = function () {
    breakValue.innerHTML = this.value;
};

let sessionSlider = document.getElementById("sessionRange");
let sessionValue = document.getElementById("sessionStartValue");
timeLeft.innerHTML = sessionSlider.value;

//sessionValue.innerHTML=sessionSlider.value;-not working in Firefox(doens't update on refresh page)
sessionValue.innerHTML = sessionSlider.value;
sessionSlider.oninput = function () {
    sessionValue.innerHTML = this.value;
    timeLeft.innerHTML = this.value;
    getTimerHoursAndMinutes(sessionValue.innerHTML, breakValue.innerHTML);
};

let sessionHours = 0;
let sessionMinutes = 0;
let breakHours = 0;
let breakMinutes = 0;
let sessionSeconds = 0;
let breakSeconds = 0;
let sessionOrBreak = false; //FALSE for SESSION, true for break
let counterWorking = false;
let tempTimerSeconds = 0;
let tempTimerMinutes = 0;
let tempTimerSecondsHelper = 0;
let paused = false;
let clockStarted = false;
let sessionSliderMoved = false;
let breakSliderMoved = false;
let tempSession = 0;//original time of sessions
let tempBreak = 0;//original time of breaks
let speedRight = 0;
let speedLeft = 0;

function getTimerHoursAndMinutes(sessionLength, breakLength, seconds) {

    if (sessionLength > 60) {
        sessionMinutes = sessionLength % 60;
        sessionHours = (sessionLength - sessionMinutes) / 60;
    }
    else {
        sessionMinutes = sessionLength;
        sessionHours = 0;
    };
    tempSession = sessionLength * 60;

    if (breakLength > 60) {
        breakMinutes = breakLength % 60;
        breakHours = (breakLength - breakMinutes) / 60;
    }
    else {
        breakMinutes = breakLength;
        breakHours = 0;
    };
    tempBreak = breakLength * 60;

    let sessionMinutesShow = String(sessionMinutes).padStart(2, "0");
    let sessionSecondsShow = String(sessionSeconds).padStart(2, "0");

    console.log(`session ${sessionHours}:${sessionMinutes}:${sessionSeconds} break ${breakHours}:${breakMinutes}:${breakSeconds}`)
    if (sessionHours > 0) {
        timeLeft.innerHTML = `${sessionHours}:${sessionMinutesShow}:${sessionSecondsShow}`;
    }
    else {
        timeLeft.innerHTML = `${sessionMinutesShow}:${sessionSecondsShow}`;
    }
};

function showTimeLeftEverySec(timeInSeconds) {
    let movingSeconds = timeInSeconds % 60;
    let movingMinutesTemp = (timeInSeconds - movingSeconds) / 60;
    let timeInMinutes = movingMinutesTemp % 60;
    let timeInHours = (movingMinutesTemp - timeInMinutes) / 60;
    let sessionMinutesShow = String(timeInMinutes).padStart(2, "0");
    let sessionSecondsShow = String(movingSeconds).padStart(2, "0");
    console.log(`in session: session ${timeInHours}:${timeInMinutes}:${movingSeconds} break ${breakHours}:${breakMinutes}:${breakSeconds}`)
    timeLeft.innerHTML = `${timeInHours}:${sessionMinutesShow}:${sessionSecondsShow}`;
};

function showTimeLeftEverySecBreak(timeInSeconds) {
    let movingSeconds = timeInSeconds % 60;
    let movingMinutesTemp = (timeInSeconds - movingSeconds) / 60;
    let timeInMinutes = movingMinutesTemp % 60;
    let timeInHours = (movingMinutesTemp - timeInMinutes) / 60;
    let breakMinutesShow = String(timeInMinutes).padStart(2, "0");
    let breakSecondsShow = String(movingSeconds).padStart(2, "0");
    console.log(`in break: break ${timeInHours}:${timeInMinutes}:${movingSeconds} session ${sessionHours}:${sessionMinutes}:${sessionSeconds}`)
    timeLeft.innerHTML = `${timeInHours}:${breakMinutesShow}:${breakSecondsShow}`;
};

function startAndStop() {
    console.log("counter working in startAndStop", counterWorking);
    if (counterWorking) {
        if (sessionOrBreak == false) {
            breakSlider.disabled = false;
            sessionSlider.disabled = false;
            sessionSlider.addEventListener("click", () => {
                console.log("session slider moved in session");
                sessionSliderMoved = true;
            });
        }
        else {
            console.log("in session if false", sessionOrBreak);
            breakSlider.disabled = false;
            sessionSlider.disabled = true;
        };

        breakSlider.addEventListener("click", () => {
            if (sessionOrBreak == false) {
                console.log("in session if false - while moving break slider in session", sessionOrBreak);
                console.log("break slider moved in session");
            }
            else {
                console.log("in session if false - while moving break slider in break", sessionOrBreak);
                console.log("break slider moved in break");

                getTimerHoursAndMinutes(sessionValue.innerHTML, breakValue.innerHTML, sessionSeconds);
                breakSliderMoved = true;
            };
        });
        clearInterval(myVar);
        clearInterval(myVarBreak);
        pauseTransitionRight();
        counterWorking = false;
    }
    else {
        counterWorking = true;
        breakSlider.disabled = true;
        sessionSlider.disabled = true;
    };
    console.log(`timer working:${counterWorking}`);
};

let myVar;
function calculateCountdown(minutes, seconds) {
    document.getElementById("message").innerHTML="Keep working...There's a drink at the end of the tunnel!";
    console.log("NOW WORKING");
    document.getElementById("miner").style.zIndex = "100";
    document.getElementById("glass").style.zIndex = "100";
    console.log("session time in calculate", minutes, "and seconds", seconds);
    let totalTimeInSeconds = 60 * minutes + seconds;
    console.log("in calculate session - total seconds", totalTimeInSeconds);
    let objMiner = document.getElementById("miner");
    let marginLeftMiner = window.getComputedStyle(objMiner).marginLeft;
    console.log(` marginLeftMiner is ${marginLeftMiner}`);
    let marginLeftMinerPx = marginLeftMiner.slice(0, (marginLeftMiner.length - 2));
    console.log(`marginLeftMinerPx is ${marginLeftMinerPx}`);
    let marginLeftMinerNumber = parseFloat(marginLeftMinerPx);
    console.log(`marginLeftMinerNumber ${marginLeftMinerNumber}`);
    startTransitionRight(totalTimeInSeconds, marginLeftMinerNumber);
    let newPositionPx = marginLeftMinerNumber;
    function countEverySecond() {
        totalTimeInSeconds = totalTimeInSeconds - 1;
        console.log("session time left in sec: ", totalTimeInSeconds);
        tempTimerSeconds = totalTimeInSeconds;
        tempTimerSecondsHelper = tempTimerSeconds % 60;
        tempTimerMinutes = (tempTimerSeconds - tempTimerSecondsHelper) / 60;
        console.log(`newPositionPx ${newPositionPx}`);
        newPositionPx = newPositionPx + speedRight;
        console.log(`newPositionPx ${newPositionPx}`);
        let newPosition = newPositionPx + "px";
        document.getElementById("miner").style.marginLeft = newPosition;
       
        if (totalTimeInSeconds > -1) {
            showTimeLeftEverySec(totalTimeInSeconds);
        }
        else {
            clearInterval(myVar);
            document.getElementById("miner").style.zIndex = "-100";
            document.getElementById("glass").style.zIndex = "-100";
            calculateCountdownBreak(breakValue.innerHTML, sessionSeconds);
            document.getElementById("miner").style.marginLeft="0px";
        };
    };
    if (counterWorking == true) {
        sessionOrBreak = false;
        myVar = setInterval(countEverySecond, 1000);
    };
};

let myVarBreak;
function calculateCountdownBreak(minutes, seconds) {
    document.getElementById("message").innerHTML="Enjoy your break!";
    console.log("NOW IN BREAK");
    console.log("break time in calculate", minutes, "and seconds", seconds);
    document.getElementById("relaxing").style.zIndex = "100";
    let totalTimeInSeconds = 60 * minutes + seconds;
    console.log("in calculate break - total seconds", totalTimeInSeconds);
    let objRelaxing = document.getElementById("relaxing");
    let widthRightRelaxing = window.getComputedStyle(objRelaxing).width;
    console.log(` marginRightRelaxing is ${widthRightRelaxing}`);
    let widthRightRelaxingPx = widthRightRelaxing.slice(0, (widthRightRelaxing.length - 2));
    console.log(`marginRightRelaxingPx is ${widthRightRelaxingPx}`);
    let widthRightRelaxingNumber = parseFloat(widthRightRelaxingPx);
    console.log(`marginRightRelaxingNumber ${widthRightRelaxingNumber}`);
    startTransitionLeft(totalTimeInSeconds, widthRightRelaxingNumber);
    let newPositionRelaxingPx = widthRightRelaxingNumber;
    function countEverySecond() {
        totalTimeInSeconds = totalTimeInSeconds - 1;
        console.log("break time left in sec: ", totalTimeInSeconds);
        tempTimerSeconds = totalTimeInSeconds;
        tempTimerSecondsHelper = tempTimerSeconds % 60;
        tempTimerMinutes = (tempTimerSeconds - tempTimerSecondsHelper) / 60;
        console.log(`newPositionRelaxingPx ${newPositionRelaxingPx}`);
        newPositionRelaxingPx = newPositionRelaxingPx - speedLeft;
        console.log(`newPositionRelaxingPx ${newPositionRelaxingPx}`);
        let newPositionRelaxing = newPositionRelaxingPx + "px";
        document.getElementById("relaxing").style.width = newPositionRelaxing;

        if (totalTimeInSeconds > -1) {
            showTimeLeftEverySecBreak(totalTimeInSeconds);
        }
        else {
            clearInterval(myVarBreak);
            document.getElementById("relaxing").style.zIndex = "-100";
            calculateCountdown(sessionValue.innerHTML, sessionSeconds);
            document.getElementById("relaxing").style.width="400px";
        };
    };
    if (counterWorking == true) {
        sessionOrBreak = true;
        myVarBreak = setInterval(countEverySecond, 1000);
    };
};

timeLeft.addEventListener("click", () => {
    console.log("Clicked");
    console.log("session or break - FALSE for SESSION", sessionOrBreak);
    startAndStop();
    if (counterWorking == false) {
        if (tempTimerSeconds == 0) {
            getTimerHoursAndMinutes(sessionValue.innerHTML, breakValue.innerHTML, sessionSeconds);
        };
    }
    else {
        console.log("should run countdown - counterworling is true");

        if (sessionSliderMoved == true) {
            console.log("sessionslider moved", sessionSliderMoved);
            document.getElementById("miner").style.marginLeft="0px";
            calculateCountdown(sessionValue.innerHTML, sessionSeconds);
            sessionSliderMoved = false;
        }
        else if (breakSliderMoved == true) {
            console.log("breakslider moved", breakSliderMoved);
            breakSliderMoved = false;
            document.getElementById("relaxing").style.width="400px";
            calculateCountdownBreak(breakValue.innerHTML, sessionSeconds);

        }
        else if ((sessionOrBreak == true) && (breakSliderMoved == false)) {
            breakSliderMoved = false;           
            calculateCountdownBreak(tempTimerMinutes, tempTimerSecondsHelper);
        }
        else {
            if (tempTimerSeconds == 0) {
                getTimerHoursAndMinutes(sessionValue.innerHTML, breakValue.innerHTML, sessionSeconds);
                calculateCountdown(sessionValue.innerHTML, sessionSeconds);
            }
            else {
                calculateCountdown(tempTimerMinutes, tempTimerSecondsHelper);
            };
        };
        counterWorking = true;
    };
});

//let marginRightRelaxing = "400px";
function startTransitionRight(time, startPosition) {
    console.log("total time ", time, " startposition miner ", startPosition);
    speedRight = (300 - startPosition) / time;
    console.log("speed", speedRight);
};

function startTransitionLeft(time, startPosition) {
   console.log(`total time ${time} startposition relaxing ${startPosition}`);
   speedLeft = (350 - (400 - startPosition)) / time;
   console.log("speed", speedLeft);
};




            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console