Barbell

Developer
Tim
Size
5,192 Kb
Views
42,504
  1. Barbell Previews
  2. Barbell HTML Codes
  3. Barbell CSS Codes
  4. Barbell JS Codes

How do I make an barbell?

What is a barbell? How do you make a barbell? This script and codes were developed by Tim on 31 October 2022, Monday.

Barbell Previews
IQ Test

Barbell - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Barbell</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="logo"> <div class="bar"></div> <div class="weight left"></div> <div class="weight right"></div>
</div>
<div class="content"> <p>Enter weight to calculate corresponding plates or enter plates to calculate total weight!</p> <input type="text" id="solution"/> <button id="units">lbs</button> <button id="clear">Clear</button> <h3>Select Bar</h3> <input type="radio" name="bars" id="bar0" value="20" unit="kg"/> <label for="bar0">20 kg</label> <input type="radio" name="bars" id="bar1" value="15" unit="kg"/> <label for="bar1">15 kg</label> <input type="radio" name="bars" id="bar2" value="10" unit="kg"/> <label for="bar2">10 kg</label> <input type="radio" name="bars" id="bar3" value="5" unit="kg"/> <label for="bar3">5 kg</label> <input type="radio" name="bars" id="bar4" value="45" unit="lbs"/> <label for="bar4">45 lbs</label> <input type="radio" name="bars" id="bar5" value="15" unit="lbs"/> <label for="bar5">15 lbs</label> <h3>Add Plates</h3> <div class="tabs"> <input type="radio" name="tabs" id="tab1" checked="checked"/> <label for="tab1">Imperial</label> <input type="radio" name="tabs" id="tab2"/> <label for="tab2">Metric</label> <div class="tab-content" id="tab-content1"> <button class="b-weight" value="45" color="red" style="color: red">+45 lbs</button> <button class="b-weight" value="35" color="blue" style="color: blue">+35 lbs</button> <button class="b-weight" value="25" color="yellow" style="color: yellow">+25 lbs</button> <button class="b-weight" value="10" color="green" style="color: green">+10 lbs</button> <button class="b-weight" value="5" color="darkblue" style="color: darkblue">+5 lbs</button> <button class="b-weight" value="2.5" color="grey" style="color: grey">+2.5 lbs</button> </div> <div class="tab-content" id="tab-content2"> <button class="b-weight kg" value="25" style="color: red">+25 kg</button> <button class="b-weight kg" value="20" style="color: blue">+20 kg</button> <button class="b-weight kg" value="15" style="color: yellow">+15 kg</button> <button class="b-weight kg" value="10" style="color: black">+10 kg</button> <button class="b-weight kg" value="5" style="color: white">+5 kg</button> <button class="b-weight kg" value="2.5" style="color: red">+2.5 kg</button> </div> </div>
</div>
<div> <script id="plate-template" type="text/custom-template"> <div class="plate" style="background-color: red"> <div class="InnerRing"></div> <div class="text">25kg</div> </div> </script> <div class="plate" style="background-color: red"> <div class="InnerRing"></div> <div class="text">25kg</div> </div> <div class="plate" style="background-color: blue"> <div class="InnerRing"></div> <div class="text">20kg</div> </div> <div class="plate" style="background-color: yellow"> <div class="InnerRing"></div> <div class="text" style="color: black">15kg</div> </div> <div class="plate" style="background-color: black"> <div class="InnerRing"></div> <div class="text">10kg</div> </div> <div class="plate small" style="background-color: white"> <div class="InnerRing"></div> <div class="text" style="color: black">5kg</div> </div> <div class="plate small" style="background-color: red"> <div class="InnerRing"></div> <div class="text">2.5kg</div> </div>
</div>
<div style="clear: both">Side View Example</div>
<script id="side-plate-template" type="text/custom-template"> <div class="side-plate-1" style="background-color: red"></div>
</script>
<div class="side-plate" style="background-color: red"> <div class="text">25kg</div>
</div>
<div class="side-plate" style="background-color: blue"> <div class="text">20kg</div>
</div>
<div class="side-plate" style="background-color: yellow"> <div class="text">15kg</div>
</div>
<div class="side-plate" style="background-color: black"> <div class="text">10kg</div>
</div>
<div class="side-plate small" style="background-color: white"> <div class="text">5kg</div>
</div>
<div class="side-plate small" style="background-color: red"> <div class="text">2.5kg</div>
</div>
<div class="canvas"> <div class="plate-canvas" style="display:block"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Barbell - Script Codes CSS Codes

.logo { width: 100px; height: 32px; position: relative; margin: 0 auto;
}
.bar { width: 100%; height: 12%; background-color: black; position: absolute; top: 44%;
}
.weight { width: 12%; height: 100%; background-color: black;
}
.left { position: absolute; left: 5%;
}
.right { position: absolute; right: 5%;
}
.content { width: 600px; margin: 0 auto;
}
.tabs { max-width: 90%; float: none; list-style: none; padding: 0;
}
.tabs:after { content: ""; display: table; clear: both;
}
.tabs input[type=radio] { display: none;
}
.tabs label { display: block; float: left; width: 50%; font-size: 18px; color: gray; font-weight: normal; text-decoration: none; text-align: center; line-height: 2; cursor: pointer; transition: all 0.5s;
}
.tabs [id^="tab"]:checked + label { color: black;
}
.tab-content { display: none; width: 100%; float: left; padding: 15px; box-sizing: border-box; background-color: #fff;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2 { display: block;
}
.b-weight { width: 16%;
}
.plate { float: left; position: relative; width: 64px; height: 64px; border-radius: 50%; box-sizing: border-box; border: 1px solid black; border: 1px solid black;
}
.plate.small { width: 32px; height: 32px;
}
.plate.small .InnerRing { left: 30%; top: 30%; width: 40%; height: 40%;
}
.plate.small .text { font-size: 9px;
}
.plate .InnerRing { position: absolute; width: 20%; height: 20%; border-radius: 50%; background-color: white; left: 40%; top: 40%; box-sizing: border-box; border: 1px solid black;
}
.plate .text { color: white; font-size: 11px; position: absolute; left: 50%; margin-left: -11px; top: 10%;
}
.side-plate { margin-right: 20px; position: relative; float: left; width: 8px; height: 64px; box-sizing: border-box; border: 1px solid;
}
.side-plate.small { height: 32px; width: 6px;
}
.side-plate.small .text { bottom: -47px;
}
.side-plate .text { position: absolute; font-size: 11px; bottom: -15px; left: -6px;
}
.side-plate-1 { margin-right: 2px; position: relative; float: left; width: 8px; height: 64px; box-sizing: border-box; border: 1px solid;
}
.side-plate-1.small { height: 32px; width: 6px;
}
.canvas { position: relative; clear: both; margin-top: 100px; padding: 0px; width: 400px; border: 1px solid;
}
.plate-canvas { position: absolute; top: 0; margin: 0; padding: 0; width: 100%; height: 100%;
}

Barbell - Script Codes JS Codes

//value stored in lbs
var total = 0;
var bar_weight = 0;
var units_in_kg = false;
var _conversion_to_kg = 1/2.20462;
function UpdateSolution(){ var result = total + bar_weight; if(units_in_kg){ result *= _conversion_to_kg; } result = Math.round(result*10)/10; $('#solution').val(result);
}
$(document).ready(function(){ UpdateSolution(); //Setup Clear button $('#clear').click(function(){ total = 0; $('.plate-canvas').empty() UpdateSolution(); }); //Setup Units button $('#units').click(function(){ if($(this).text() === 'lbs'){ $(this).text('kg'); units_in_kg = true; } else{ $(this).text('lbs'); units_in_kg = false; } UpdateSolution(); }); //Setup bar weight $('input[name="bars"]:radio').change(function(){ var weight = parseFloat($(this).val()); if($(this).attr('unit') == 'kg'){ weight /= _conversion_to_kg; } bar_weight = weight; UpdateSolution(); }); //Setup weight buttons $('.b-weight').click(function(){ var plate = $($('#plate-template').html()); plate.find('.text').html($(this).val()); plate.css({'background-color': $(this).attr('color')}); $('.plate-canvas').append(plate); total += ($(this).hasClass('kg')?parseFloat($(this).val())/_conversion_to_kg:parseFloat($(this).val())); UpdateSolution(); });
});
Barbell - Script Codes
Barbell - Script Codes
Home Page Home
Developer Tim
Username maytim
Uploaded October 31, 2022
Rating 3
Size 5,192 Kb
Views 42,504
Do you need developer help for Barbell?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim (maytim) Script Codes
Name
A Pen by Tim
Custom Multi Column Data Entry Select
Javascript Pong Game
IPhone Doodle
Pixel paint
Custom Dropdown
Javascript Spelling Game
Double Helix Animation - Jade and Sass
Phaser.io First Game Tutorial
Phaser.io Sidescroller
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!