Så dette er hvad jeg kom frem til med den tid jeg havde til det
Overall så nåede jeg de mål som jeg har sat mig.
Men nu hvor jeg har arbejdet med denne problem stilling så er der en masse ting jeg gerne vil tilføje og rette.
Så dette bliver mit hygge projekt når jeg har brug for at komme væk fra alt andet.
http://mnrb.dk/fun_area/MTG_commander_life_counter/
Jeg har valgt at bruge Foundation 6 og brugt style.css hvor nødvendigt.
JS er et rod som jeg kaster et blik på igen. Men jeg har ikke lige regnet ud hvordan JS kan tage et argument som
hvilket element kaldte det. Sådan så enkel metode kan justere alle livs tællerne, i stedet for separate metoder.
Koden d. 18-04-2017
HTML / JS
Kode: Vælg alt
<!doctype html>
<html>
<head>
<title>mnrb.dk</title>
<!-- Meta data -->
<meta charset="UTF8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Foundation 6 stylesheets -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/foundation.css">
<!-- Custom CSS stylesheet -->
<link rel="stylesheet" href="css/style.css">
<!-- Foundation 6 icons -->
<link rel="stylesheet" href="css/foundation-icons.css">
<!-- Icons -->
<!-- Google Analytics -->
</head>
<body>
<!-- test start -->
<header class="expanded row">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<span>
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
</span>
<span>mnrb.dk</span>
</div>
<nav id="example-menu">
<ul id="site-menu" class="medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
<li class="active">
<a href="#">MTG Commander - Life Counter</a>
</li>
<!-- <li>
<a id="addPlayerButton" href="#">Add Player</a>
</li>
<li>
<a id="removePlayerButton" href="#">Remove Player</a>
</li> -->
<li class="has-submenu">
<a href="#">Player 1</a>
<ul class="submenu menu">
<li>
<a href="#">Color</a>
<ul class="submenu menu">
<li>
<a href="#">Black</a>
</li>
<li>
<a href="#">Grey</a>
</li>
</ul>
</li>
<li>
<form>
<input type="text" id="inputUrl1" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
<input class="button expanded" type="button" id="inputButton1" value="Load"/>
</form>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Player 2</a>
<ul class="submenu menu">
<li>
<a href="#">Color</a>
<ul class="submenu menu">
<li>
<a href="#">Black</a>
</li>
<li>
<a href="#">Grey</a>
</li>
</ul>
</li>
<li>
<form>
<input type="text" id="inputUrl2" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
<input class="button expanded" type="button" id="inputButton2" value="Load"/>
</form>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Player 3</a>
<ul class="submenu menu">
<li>
<a href="#">Color</a>
<ul class="submenu menu">
<li>
<a href="#">Black</a>
</li>
<li>
<a href="#">Grey</a>
</li>
</ul>
</li>
<li>
<form>
<input type="text" id="inputUrl3" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
<input class="button expanded" type="button" id="inputButton3" value="Load"/>
</form>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Player 4</a>
<ul class="submenu menu">
<li>
<a href="#">Color</a>
<ul class="submenu menu">
<li>
<a href="#">Black</a>
</li>
<li>
<a href="#">Grey</a>
</li>
</ul>
</li>
<li>
<form>
<input type="text" id="inputUrl4" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
<input class="button expanded" type="button" id="inputButton4" value="Load"/>
</form>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- test end -->
<div class="row expanded small-up-1 medium-up-2">
<!-- -------- -->
<!-- top left -->
<!-- -------- -->
<div id="top-left" class="column">
<h1 id="lifeRemaining1">40</h1>
<div id="lifeAdd1" class="lifeCounter column small-2 end">
<button id="life1Add" class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Add</span>
<!-- Visual users will see the +, but not the "Add" text -->
<span aria-hidden="true"><i class="fi-plus"></i></span>
</button>
</div>
<div id="lifeSubtract1" class="lifeCounter column small-2">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Subtract</span>
<!-- Visual users will see the -, but not the "Subtract" text -->
<span aria-hidden="true"><i class="fi-minus"></i></span>
</button>
</div>
</div>
<!-- --------- -->
<!-- top right -->
<!-- --------- -->
<div id="top-right" class="column">
<h1 id="lifeRemaining2">40</h1>
<div id="lifeAdd2" class="lifeCounter column small-2 end">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Add</span>
<!-- Visual users will see the +, but not the "Add" text -->
<span aria-hidden="true"><i class="fi-plus"></i></span>
</button>
</div>
<div id="lifeSubtract2" class="lifeCounter column small-2">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Subtract</span>
<!-- Visual users will see the -, but not the "Subtract" text -->
<span aria-hidden="true"><i class="fi-minus"></i></span>
</button>
</div>
</div>
<!-- ----------- -->
<!-- bottom left -->
<!-- ----------- -->
<div id="bottom-left" class="column">
<h1 id="lifeRemaining3">40</h1>
<div id="lifeAdd3" class="lifeCounter column small-2 end">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Add</span>
<!-- Visual users will see the +, but not the "Add" text -->
<span aria-hidden="true"><i class="fi-plus"></i></span>
</button>
</div>
<div id="lifeSubtract3" class="lifeCounter column small-2">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Subtract</span>
<!-- Visual users will see the -, but not the "Subtract" text -->
<span aria-hidden="true"><i class="fi-minus"></i></span>
</button>
</div>
</div>
<!-- ------------ -->
<!-- bottom right -->
<!-- ------------ -->
<div id="bottom-right" class="column">
<h1 id="lifeRemaining4">40</h1>
<div id="lifeAdd4" class="lifeCounter column small-2 end">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Add</span>
<!-- Visual users will see the +, but not the "Add" text -->
<span aria-hidden="true"><i class="fi-plus"></i></span>
</button>
</div>
<div id="lifeSubtract4" class="lifeCounter column small-2">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Subtract</span>
<!-- Visual users will see the -, but not the "Subtract" text -->
<span aria-hidden="true"><i class="fi-minus"></i></span>
</button>
</div>
</div>
</div>
<!-- Load JS files after loading the page -->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script> <!-- 1 line? -->
<script>
/* ############ */
/* Life counter */
/* ############ */
/* -------- */
/* Top-left */
/* -------- */
$('#lifeAdd1').on('click', function(){
var life = document.getElementById("lifeRemaining1").innerHTML;
life++;
document.getElementById("lifeRemaining1").innerHTML = life;
});
$('#lifeSubtract1').on('click', function(){
var life = document.getElementById("lifeRemaining1").innerHTML;
life--;
document.getElementById("lifeRemaining1").innerHTML = life;
});
/* -------- */
/* Top-right */
/* -------- */
$('#lifeAdd2').on('click', function(){
var life = document.getElementById("lifeRemaining2").innerHTML;
life++;
document.getElementById("lifeRemaining2").innerHTML = life;
});
$('#lifeSubtract2').on('click', function(){
var life = document.getElementById("lifeRemaining2").innerHTML;
life--;
document.getElementById("lifeRemaining2").innerHTML = life;
});
/* -------- */
/* Bottom-left */
/* -------- */
$('#lifeAdd3').on('click', function(){
var life = document.getElementById("lifeRemaining3").innerHTML;
life++;
document.getElementById("lifeRemaining3").innerHTML = life;
});
$('#lifeSubtract3').on('click', function(){
var life = document.getElementById("lifeRemaining3").innerHTML;
life--;
document.getElementById("lifeRemaining3").innerHTML = life;
});
/* -------- */
/* Bottom-right */
/* -------- */
$('#lifeAdd4').on('click', function(){
var life = document.getElementById("lifeRemaining4").innerHTML;
life++;
document.getElementById("lifeRemaining4").innerHTML = life;
});
$('#lifeSubtract4').on('click', function(){
var life = document.getElementById("lifeRemaining4").innerHTML;
life--;
document.getElementById("lifeRemaining4").innerHTML = life;
});
/* ------------------- */
/* Load image from url */
/* ------------------- */
$('#inputButton1').on('click', function() {
document.getElementById("top-left").style.backgroundImage = "url('" + $('#inputUrl1').val() + "')";
console.log("url('" + $('#inputUrl1').val() + "')");
});
$('#inputButton2').on('click', function() {
document.getElementById("top-right").style.backgroundImage = "url('" + $('#inputUrl2').val() + "')";
console.log("url('" + $('#inputUrl2').val() + "')");
});
$('#inputButton3').on('click', function() {
document.getElementById("bottom-left").style.backgroundImage = "url('" + $('#inputUrl3').val() + "')";
console.log("url('" + $('#inputUrl3').val() + "')");
});
$('#inputButton4').on('click', function() {
document.getElementById("bottom-right").style.backgroundImage = "url('" + $('#inputUrl4').val() + "')";
console.log("url('" + $('#inputUrl4').val() + "')");
});
</script>
</body>
</html>
CSS
Kode: Vælg alt
/* ------------------- */
/* Global configuration*/
/* ------------------- */
html {
min-height: 100%;
min-width: 100%;
/*Newer browsers overwrite here*/
min-height: 100vh;
min-width: 100vw;
position: relative
}
body, html {
height: auto;
}
/* ------ */
/* Header */
/* ------ */
eader nav {
padding: 0px;
}
header nav, .title-bar {
box-shadow: 5px 6px 3px hsl(0, 5%, 20%);
}
.title-bar {
background-color: rgb(0,110,147);
}
ul.menu {
background-color: rgb(51,51,51);
border-color: rgb(51, 51, 51);
}
ul.menu li a {
color: white;
}
/* navigation hover effect */
nav ul li a:hover, nav ul li:hover {
background-color: orange;
}
nav ul li ul li a:hover {
background-color: grey;
}
/* ---- */
/* body */
/* ---- */
body div[id^="top"], body div[id^="bottom"] {
height: 50vh;
position: relative;
}
body div[id^="top"] h1, body div[id^="bottom"] h1 {
color: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 9em;
}
.column {
padding: 0;
}
.lifeCounter {
position: relative;
background-color: hsla(344, 0%, 44%, 0.2);
color: white;
height: 100%;
cursor: pointer;
}
.lifeCounter button {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: hsla(0, 0%, 0%, 0.0);
border-radius: 50px;
border: 5px solid orange;
}
#top-left, #top-right, #bottom-left, #bottom-right {
background-size: 100% 100%;
background-repeat: no-repeat;
}
#top-left {
background-color: hsla(0, 0%, 0%, 1.0);
transform: rotate(180deg);
}
#top-right {
background-color: hsla(0, 0%, 50%, 1.0);
transform: rotate(180deg);
}
#bottom-left {
background-color: hsla(0, 65%, 50%, 1.0);
}
#bottom-right {
background-color: hsla(180, 50%, 60%, 1.0);
}
