HTML
<div id="full-container">
<div id="description">
This calculator allows you to deterime how much celestium it would cost if you where to buy the items through the daily deals in the shop.
Scroll down for options for credits and galaxies.
<br><span id="note"></span>
</div>
<div id="total-cost">
Total: 0 Celestium
</div>
<h3>Deal:</h3>
<div id="cart">
</div>
<div id="SU">
<h3 class="section-header"> Success Units <div class="arrowe up"></div></h3>
<div class="fold" style="height: 115px;" border="1px solid black">
<article class="deal-item" id="100% success unit" data-cost="1000" data-amount="1">
<!-- <h4>100% success unit</h4> -->
<img src="https://i.imgur.com/80fX2Zw.png" alt="100% success unit" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="90% success unit" data-cost="400" data-amount="1">
<!-- <h4>90% success unit</h4> -->
<img src="https://i.imgur.com/S4KxSuH.png" alt="90% success unit" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="80% success unit" data-cost="200" data-amount="1">
<!-- <h4>80% success unit</h4> -->
<img src="https://i.imgur.com/7VfmvXD.png" alt="80% success unit" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="70% success unit" data-cost="100" data-amount="1">
<!-- <h4>70% success unit</h4> -->
<img src="https://i.imgur.com/gwmx6Kq.png" alt="70% success unit" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="50% success unit" data-cost="50" data-amount="1">
<!-- <h4>50% success unit</h4> -->
<img src="https://i.imgur.com/LJfcyeA.png" alt="50% success unit" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="60% success unit" data-cost="70" data-amount="1">
<!-- <h4>60% success unit</h4> -->
<img src="https://i.imgur.com/XMCI5lF.png" alt="60% success unit" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="40% success unit" data-cost="60" data-amount="2">
<!-- <h4>40% success unit</h4> -->
<img src="https://i.imgur.com/gbquvL4.png" alt="40% success unit" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="30% success unit" data-cost="50" data-amount="5">
<!-- <h4>30% success unit</h4> -->
<img src="https://i.imgur.com/a1edkD8.png" alt="30% success unit" style="width:50px;height:83px;">
</article>
</div>
</div>
<div id="resources">
<h3 class="section-header"> Resources <div class="arrowe up"></div></h3>
<div class="fold" style="height: 115px;" border="1px solid black">
<article class="deal-item" id="Overclocking chip" data-cost="200" data-amount="20">
<!-- <h4>Overclocking chip</h4> -->
<img src="https://i.imgur.com/5lX5Fh6.png" alt="Overclocking chip" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Chip" data-cost="25" data-amount="50">
<!-- <h4>Chip</h4> -->
<img src="https://i.imgur.com/FaSdsNd.png" alt="Chip" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="800k credits" data-cost="100" data-amount="800000">
<!-- <h4>800k credits</h4> -->
<img src="https://i.imgur.com/i4yc0Yp.png" alt="800k credits" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Limit breaker" data-cost="500" data-amount="1">
<!-- <h4>Limit breaker</h4> -->
<img src="https://i.imgur.com/x2DsNlL.png" alt="Limit breaker" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Powerful limit breaker" data-cost="600" data-amount="1">
<!-- <h4>Powerful limit breaker</h4> -->
<img src="https://i.imgur.com/JGPT3Lu.png" alt="Powerful limit breaker" style="width:50px;height:83px;">
</article>
</div>
</div>
<div id="galaxy">
<h3 class="section-header"> galaxies <div class="arrowe up"></div></h3>
<div class="fold" style="height: 115px;" border="1px solid black">
<article class="deal-item" id="Beta" data-cost="100" data-amount="1">
<!-- <h4>Beta</h4> -->
<img src="https://i.imgur.com/0ReSqE3.png" alt="Beta" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Delta" data-cost="200" data-amount="1">
<!-- <h4>Delta</h4> -->
<img src="https://i.imgur.com/w0B9dH4.png" alt="Delta" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Elegance" data-cost="100" data-amount="1">
<!-- <h4>Elegance</h4> -->
<img src="https://i.imgur.com/yZEsi57.png" alt="Elegance" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Iota" data-cost="200" data-amount="1">
<!-- <h4>Iota</h4> -->
<img src="https://i.imgur.com/VTnGsXa.png" alt="Iota" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Phantom" data-cost="100" data-amount="1">
<!-- <h4>Phantom</h4> -->
<img src="https://i.imgur.com/pfbqZRt.png" alt="Phantom" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Theta" data-cost="300" data-amount="1">
<!-- <h4>Theta</h4> -->
<img src="https://i.imgur.com/nDcQsLB.png" alt="Theta" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Zeta" data-cost="30" data-amount="1">
<!-- <h4>Zeta</h4> -->
<img src="https://i.imgur.com/L1WSh6Q.png" alt="Zeta" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Beta" data-cost="100" data-amount="1">
<!-- <h4>Beta</h4> -->
<img src="https://i.imgur.com/0ReSqE3.png" alt="Beta" style="width:50px;height:83px;">
</article>
</div>
</div>
<div id="ships">
<h3 class="section-header"> Ship Blueprints <div class="arrowe down"></div></h3>
<div class="fold" style="height: 0px;" border="0px solid black">
<article class="deal-item" id="wing MK2" data-cost="10" data-amount="1">
<!-- <h4>wing MK2</h4> -->
<img src="https://i.imgur.com/SegazAW.png" alt="wing MK2" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="type k4-8u70" data-cost="30" data-amount="1">
<!-- <h4>type k4-8u70</h4> -->
<img src="https://i.imgur.com/NHhegpY.png" alt="type k4-8u70" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="PSS Sparrow MK2" data-cost="12" data-amount="1">
<!-- <h4>PSS Sparrow MK2</h4> -->
<img src="https://i.imgur.com/TaQ5Gqa.png" alt="PSS Sparrow MK2" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="PSS Miran MK2" data-cost="14" data-amount="1">
<!-- <h4>PSS Miran MK2</h4> -->
<img src="https://i.imgur.com/exRj2WT.png" alt="PSS Miran MK2" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Orkaan" data-cost="40" data-amount="1">
<!-- <h4>Orkaan</h4> -->
<img src="https://i.imgur.com/up381T2.png" alt="Orkaan" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="PSS EL-K MK2" data-cost="16" data-amount="1">
<!-- <h4>PSS EL-K MK2</h4> -->
<img src="https://i.imgur.com/jIPlSaI.png" alt="PSS EL-K MK2" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Phantom2" data-cost="18" data-amount="1">
<!-- <h4>Phantom2</h4> -->
<img src="https://i.imgur.com/UitLx74.png" alt="Phantom2" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Krigerskold" data-cost="50" data-amount="1">
<!-- <h4>Krigerskold</h4> -->
<img src="https://i.imgur.com/8flr4LF.png" alt="Krigerskold" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Eidolon MK2" data-cost="20" data-amount="1">
<!-- <h4>Eidolon MK2</h4> -->
<img src="https://i.imgur.com/2opr3Tp.png" alt="Eidolon MK2" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Mjollnir MK2" data-cost="22" data-amount="1">
<!-- <h4>Mjollnir MK2</h4> -->
<img src="https://i.imgur.com/caCggWZ.png" alt="Mjollnir MK2" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Ritari MK2" data-cost="24" data-amount="1">
<!-- <h4>Ritari MK2</h4> -->
<img src="https://i.imgur.com/QzftADc.png" alt="Ritari MK2" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Khonarl" data-cost="60" data-amount="1">
<!-- <h4>Khonarl</h4> -->
<img src="https://i.imgur.com/Bd87mfj.png" alt="Khonarl" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Oblivion Ark" data-cost="0" data-amount="1">
<!-- <h4>Oblivion Ark</h4> -->
<img src="https://i.imgur.com/wDocZiu.png" alt="Oblivion Ark" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Propeth" data-cost="100" data-amount="1">
<!-- <h4>Propeth</h4> -->
<img src="https://i.imgur.com/nuSskSc.png" alt="Propeth" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Fighter" data-cost="2" data-amount="100">
<!-- <h4>Fighter</h4> -->
<img src="https://i.imgur.com/vt3nX5z.png" alt="Fighter" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Corvette" data-cost="3" data-amount="100">
<!-- <h4>Corvette</h4> -->
<img src="https://i.imgur.com/ZtsIzvV.png" alt="Corvette" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Frigate" data-cost="4" data-amount="100">
<!-- <h4>Frigate</h4> -->
<img src="https://i.imgur.com/scuJht6.png" alt="Frigate" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Cruiser" data-cost="5" data-amount="100">
<!-- <h4>Cruiser</h4> -->
<img src="https://i.imgur.com/nDhzKBj.png" alt="Cruiser" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Battleship" data-cost="8" data-amount="100">
<!-- <h4>Battleship</h4> -->
<img src="https://i.imgur.com/q1DOP3o.png" alt="Battleship" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Carrier" data-cost="10" data-amount="100">
<!-- <h4>Carrier</h4> -->
<img src="https://i.imgur.com/gWqpQa1.png" alt="Carrier" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Supercarrier" data-cost="15" data-amount="100">
<!-- <h4>Supercarrier</h4> -->
<img src="https://i.imgur.com/xXJe2o2.png" alt="Supercarrier" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Ritari" data-cost="15" data-amount="50">
<!-- <h4>Ritari</h4> -->
<img src="https://i.imgur.com/DbnP41c.png" alt="Ritari" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="USS Centurian" data-cost="18" data-amount="30">
<!-- <h4>USS Centurian</h4> -->
<img src="https://i.imgur.com/zru4p6Z.png" alt="USS Centurian" style="width:50px;height:83px;">
</article>
<article class="deal-item" id="Achilles" data-cost="20" data-amount="20">
<!-- <h4>Achilles</h4> -->
<img src="https://i.imgur.com/55MylRa.png" alt="Achilles" style="width:50px;height:83px;">
</article>
</div>
</div>
<div id="options">
<h3>Options</h3>
<div id="credit-cost">
<h4>credit Cost</h4>
<ul>
<li><input type="radio" name="creds" class="cred-option" id="cred-deal" checked=""><p><label for="cred-deal">credit costs are calculated using daily deals of <u title="same ratio as 400k cr = 50 cel and 200k cr = 25 cel">800k cr = 100cel</u></label></p></li>
<li><input type="radio" name="creds" class="cred-option" id="cred-500k"><p><label for="cred-500k">credit costs are calculated using the daily shop item of 500k cr = 100cel</label></p></li>
<li><input type="radio" name="creds" class="cred-option" id="cred-200k"><p><label for="cred-200k">credit costs are calculated using the daily shop item of <u title="combined cost of 500k + 200k">700k cr = 150cel</u></label></p></li>
<li><input type="radio" name="creds" class="cred-option" id="cred-30k"><p><label for="cred-30k">credit costs are calculated using the infinate shop item of 30k cr = 10cel</label></p></li>
</ul>
</div>
<div id="galaxy-cost">
<h4>Galaxy Cost</h4>
<ul>
<li><input type="radio" name="gal" id="gal-deal" checked="" class="gal-option"><label for="gal-deal">Galaxies from daily deals( Beta, Delta, Theta)</label></li>
<li><input type="radio" name="gal" id="gal-shop" class="gal-option"><label for="gal-shop">Galaxies from shop( Beta, Delta, Theta)</label></li>
</ul>
</div>
</div>
</div>
CSS
#full-container {
div, article {
border: 1px solid black;
padding: 5px;
margin: 5px;
}
div.fold {
border: none;
}
article {
width: fit-content;
height: fit-content;
width: 50px;
height: 83px;
h4 {
margin-top:2px;
margin-bottom:2px;
max-width: 60px;
text-wrap: ;
}
}
#cart > article.cart-item {
position: relative;
width: 70px;
height: fit-content;
input {
width: 100%;
padding-left: 0px;
padding-right: 0px;
}
.delete-item {
position: absolute;
top: 0px;
right: 0px;
color: red;
font-size: large;
font-weight: 900;
border: 0px;
cursor: pointer;
}
img {
width: 50px;
height: 83px;
}
}
span.note {
color: red;
}
li {
display: flex;
p {
margin-top: 0px;
margin-bottom: 0px;
}
}
input[type=radio] {
margin-top: 1px;
}
.fold {
/*
https://jsfiddle.net/dRpWv/665/
*/
height: fit-content;
overflow: hidden;
transition: height 0.8s ease;
}
#cart, .fold {
display: flex;
flex-wrap: wrap;
}
div.arrowe {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
cursor: pointer;
pointer-events: none;
}
.section-header {
cursor: pointer;
}
.up.down {
pointer-events: none;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
}
JAVASCRIPT
console.log( 'deal' );
document.addEventListener("DOMContentLoaded", function(event) {
let $j = jQuery.noConflict();
let artilces = document.getElementsByClassName( 'deal-item' );
for( let key = 0; key<artilces.length ;key++ ) {
artilces[key].addEventListener( 'click', add_to_cart );
}
let folds = document.getElementsByClassName( 'section-header' );
for ( let key = 0; key < folds.length;key++ ) {
folds[key].addEventListener( 'click', fold_section )
}
document.getElementById( 'Overclocking chip' ).addEventListener( 'click', function(e){
let note = document.getElementById( 'note' );
if ( note.textContent == '' ) {
note.textContent = 'Overclock chips are always way to over valued. You rarely use them and they are very expansive. any deal with overclocking chips is not worth it.';
}
})
let gals = document.getElementsByClassName( 'gal-option' );
for( let i = 0; i < gals.length; i++ ) {
gals[i].addEventListener( 'change', change_galaxy_cost );
}
let creds = document.getElementsByClassName( 'cred-option' );
for( let i = 0; i < gals.length; i++ ) {
creds[i].addEventListener( 'change', change_credit_cost );
}
});
function add_to_cart(e) {
let base = e.target.closest( 'article' );
let article = document.createElement( 'article' );
article.dataset.cost = base.dataset.cost;
article.dataset.amount = base.dataset.amount;
article.setAttribute( 'class', 'cart-item' );
article.setAttribute( 'id', 'cart-' + base.id );
if( document.getElementById( 'cart-' + base.id ) !== null ) {
return;
}
/* let h4 = document.createElement( 'h4' );
h4.textContent = e.target.closest( 'article' ).id.replace( '-', '' );
article.appendChild( h4 ) */
let img = document.createElement( 'img' );
let src = e.target.closest( 'img' ).src;
img.setAttribute( 'src', src );
article.appendChild( img );
let input = document.createElement( 'input' );
input.placeholder = '1';
input.classList.add( 'cart-item-input' );
input.type = 'number';
input.value = 1;
input.addEventListener( 'input', calculate_cart );
article.appendChild( input );
let del = document.createElement( 'div' );
del.textContent = 'X';
del.classList = 'delete-item';
del.addEventListener( 'click', remove_item );
article.appendChild( del );
let cart = document.getElementById( 'cart' );
cart.appendChild( article );
calculate_cart();
}
function calculate_cart() {
let items = document.getElementsByClassName( 'cart-item' );
let total = 0;
for( let i = 0; i < items.length; i++ ) {
const deal = items[i];
let cost = deal.dataset.cost / deal.dataset.amount;
let amount = deal.querySelector( '.cart-item-input' ).value;
cost = cost * amount;
total+= cost;
}
document.getElementById( 'total-cost' ).innerHTML = 'Total: ' + total.toLocaleString( 0 ) + ' Celestium';
}
function remove_item( e ) {
e.target.closest( 'article' ).remove();
}
function fold_section(e) {
let targetE = e.target.parentElement.querySelector( 'div[class="fold"]' );
if ( targetE.style.height === '' ) {
targetE.style.height = targetE.scrollHeight+"px";
}
if( targetE.style.height === '0px' ) {
targetE.style.height = targetE.scrollHeight+"px";
targetE.setAttribute( 'border', '1px solid black' );
e.target.childNodes[1].classList.remove( 'down' );
e.target.childNodes[1].classList.add( 'up' );
} else {
targetE.style.height = '0px';
targetE.setAttribute( 'border', '0px solid black' );
e.target.childNodes[1].classList.remove( 'up' );
e.target.childNodes[1].classList.add( 'down' );
}
}
function change_galaxy_cost(e) {
if ( document.getElementById( 'gal-deal' ).checked ) {
set_galaxy_cost( 'Beta', 100 );
set_galaxy_cost( 'Delta', 200 );
set_galaxy_cost( 'Theta', 300 );
} else {
set_galaxy_cost( 'Beta', 199 );
set_galaxy_cost( 'Delta', 399 );
set_galaxy_cost( 'Theta', 999 );
}
calculate_cart()
}
function set_galaxy_cost( galaxyID, cost ) {
document.getElementById( galaxyID ).dataset.cost = cost;
let cart_item = document.getElementById( 'cart-' + galaxyID );
if ( cart_item ) {
cart_item.dataset.cost = cost;
}
}
function change_credit_cost( e ) {
if ( document.getElementById( 'cred-deal' ).checked ) {
set_credit_cost( 8000, 1 );
}
if ( document.getElementById( 'cred-500k' ).checked ) {
set_credit_cost( 5000, 1 );
}
if ( document.getElementById( 'cred-200k' ).checked ) {
set_credit_cost( 700000, 150 );
}
if ( document.getElementById( 'cred-30k' ).checked ) {
set_credit_cost( 30000, 10 );
}
calculate_cart()
}
function set_credit_cost( credits, celestium ) {
let shop = document.getElementById( '800k credits' );
let cart = document.getElementById( 'cart-800k credits' );
shop.dataset.cost = celestium;
shop.dataset.amount = credits;
if ( cart ) {
cart.dataset.cost = celestium;
cart.dataset.amount = credits;
}
}
