Migraine Mockup

really simple page swapping

by Wray Bowling

HTML

<div class="mask">
    
    <div class="level-1" style="background-color:blue">
        <a href="javascript:page('aura')">aura</a>
        <a href="javascript:page('duration')">duration</a>
    </div>
    
    <div class="level-2" style="background-color:yellow;">
        <a id="back" href="javascript:back()">back</a>
        <div id="aura">
            <p>aura!</p>
            <input type="range" min="5" max="45" />
        </div>
        <div id="duration">
            <p>duration!</p>
            <input type="time">
        </div>
    </div>
        
</div>

CSS

body{
    font-family:helvetica neue;
    font-weight:100;
    font-size:40pt;
}

.mask{
    overflow:hidden;
}

.mask,
[class^="level"]{
    width:320px;
    height:400px;
}

[class^="level"]{
    position:absolute;
    color:white;
}

[class^="level"] > *{
    padding:20px;
}

a{
    display:block;
    color:white;
    text-decoration:none;
    text-align:center;
}

a:active{
    background-color:orange;
}

.level-2,
.level-2 > div{
    display:none;
}

.level-2.active,
.level-2 > .active{
    display:block;
}

JavaScript

function back(){
    document.querySelector('.level-2').classList.remove('active');
}

function page(pageName){
    document.querySelector('.level-2').classList.add('active');
    var pages = document.querySelectorAll('.level-2 > div');
    for(var i=0; i<pages.length; i++){
        if(pages[i].id === pageName){
            console.log(pages[i].id, "is active");
            pages[i].classList.add('active');
        }else{
            pages[i].classList.remove('active');
        }
    }
}