I am building a weight converter with the help of bootstrap 4 and vanilla javascript. For the moment I managed to only transform pounds into everything else, not being able to select what to specifically transform to, just outputting everything right off the bat.
I also want to be able too choose from the units I am changing from and into. So far i have the values needed to change from pounds to everything else listed, and the same for kg.
Is there a way to display just a specific unit? For example, pounds to kg?
Is there a way to make this work?
Below are my html and js codes. Everything that is commented out of the js file is what i tried but didnt work out, and what remains is the functioning code, although incomplete/not doing what i want it to do.
<div class="container">
<div class="row">
<!-- <div class="col-md-3"></div> -->
<div class="col-md-6 offset-md-3">
<h1 class="display-4 text-center mb-3">
Weight Converter
</h1>
<form>
<div class="form-group">
<label>From</label>
<select class="form-control" id="weightSelector" function="elementSelect">
<option value="selectOption" disabled selected hidden>--- Please select ---</option>
<option value="tonne">Tonne</option>
<option value="kilogram">Kilogram</option>
<option value="gram">Gram</option>
<option value="milligram">Milligram</option>
<option value="ounces">Ounces</option>
<option value="stone">Stone</option>
<option value="pound">Pound</option>
</select>
</div>
</form>
<form>
<div class="form-group">
<label>to</label>
<select class="form-control" id="weightSelector" >
<option value="resultOption" disabled selected hidden>--- Please select ---</option>
<option value="tonne">Tonne</option>
<option value="kilogram">Kilogram</option>
<option value="gram">Gram</option>
<option value="milligram">Milligram</option>
<option value="ounces">Ounces</option>
<option value="stone">Stone</option>
<option value="pound">Pound</option>
</select>
</div>
</form>
<form>
<div class="form-group">
<input type="number" class="form-control form-control-lg" placeholder="Enter your value" id="weightInput">
</div>
</form>
<div id="output">
<div class="card bg-primary mb-2">
<div class="card-body">
<h4>grams</h4>
<div id="gramsOutput"></div>
</div>
</div>
<div class="card bg-success mb-2">
<div class="card-body">
<h4>kg</h4>
<div id="kgOutput"></div>
</div>
</div>
<div class="card bg-danger mb-2">
<div class="card-body">
<h4>Ounces</h4>
<div id="ozOutput"></div>
</div>
</div>
<div class="card bg-primary mb-2">
<div class="card-body">
<h4>Tonne</h4>
<div id="tOutput"></div>
</div>
</div>
<div class="card bg-success mb-2">
<div class="card-body">
<h4>miligrams</h4>
<div id="mgOutput"></div>
</div>
</div>
<div class="card bg-danger mb-2">
<div class="card-body">
<h4>Stone</h4>
<div id="stOutput"></div>
</div>
</div>
<div class="card bg-primary mb-2">
<div class="card-body">
<h4>Pound</h4>
<div id="lbsOutput"></div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-md-3"></div> -->
</div>
</div>
document.getElementById('output').style.visibility='hidden';
// if i dont add the select forms and the functions to change to a
specific unit, it works, so basically this chunk of text
/*function elementSelect(){
var ddl=document.getElementById('weightSelector');
var selectedValue=ddl.options[ddl.selectedIndex].value;//this gets the
element that is selected
if(selectedValue=="pound"){
pound();
}
elseif(selectedValue=="kilogram"){
kg();
}
};
document.getElementById('weightSelector').addEventListener('click',elementSelect());*/
/*function pound(){
document.getElementById('weightInput').addEventListener('input',function(e){
document.getElementById('output').style.visibility='visible';
let lbs=e.target.value;
document.getElementById('gramsOutput').innerHTML=lbs/0.0022046;
document.getElementById('kgOutput').innerHTML=lbs/2.2046;
document.getElementById('ozOutput').innerHTML=lbs*16;
document.getElementById('mgOutput').innerHTML=lbs*453592.37;
document.getElementById('stOutput').innerHTML=lbs/14;
document.getElementById('tOutput').innerHTML=lbs/2204.623;
document.getElementById('lbsOutput').innerHTML=lbs;
})
}
function kg(){
document.getElementById('weightInput').addEventListener('input',function(e){
document.getElementById('output').style.visibility='visible';
let kg=e.target.value;
document.getElementById('gramsOutput').innerHTML=kg*1000;
document.getElementById('kgOutput').innerHTML=kg;
document.getElementById('ozOutput').innerHTML=kg*35.274;
document.getElementById('mgOutput').innerHTML=kg*1e+6;
document.getElementById('stOutput').innerHTML=kg/6.35;
document.getElementById('tOutput').innerHTML=kg/1000;
document.getElementById('lbsOutput').innerHTML=kg*2.205;
})
}
*/
Using The id Attribute
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
Difference Between Class and ID
An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements [...]
https://www.w3schools.com/hTML/html_id.asp
Because of this, documentGetElementById() will always only return the first element in a page with the id passed. Do not work around that, but fix it.
Related
<div class="col-md-12">
<div class="form-group first">
<label >Date_reservation</label>
<input type="date" name="date_res">
</div>
</div>
<div class="row">
<div >
<div class="form-group first">
<label >Type_salle</label>
<select name="code_salle" >
<option>STD1</option>
<option>STD2</option>
<option>STD3</option>
<option>STD4</option>
</select>
</div>
</div>
</div>
{{-- In the database, there is a table named rooms. I want to display
all room details from the table(room) --}}
You should change the PHP code with following code
<div class="col-md-12">
<div class="form-group first">
<label >Date_reservation</label>
<input type="date" name="date_res" id="date_res">
</div>
</div>
<div class="row">
<div>
<div class="form-group first">
<label >Type_salle</label>
<select name="code_salle" id="code_salle">
<option>STD1</option>
<option>STD2</option>
<option>STD3</option>
<option>STD4</option>
</select>
</div>
</div>
</div>
After that,You can use onchange function to fetch room details from the database(fetch_room_data.php, which is used to fetch the room table details from the database). Here, I will provide a sample code
$('#date_res').on('change', function()
{
$.ajax({
url:"fetch_room_data.php",
method:"POST",
success:function(data)
{
$('#code_salle').html(data);
}
});
});
I need help with a code. Apparently, it seems like a simple problem. I want to make a script so that when the user clicks the button, it shows the accordion. I was even able to write something that worked, but I wanted to open an accordion for each card separately. I think it's the "this" tag, but the problem is that ".find" doesn't find the accordion because it's not in the same group as the button.
See my code, you will understand better.
$('#fuelAccordion').click(function() {
$(this).find('.cardAccordion').slideToggle('show');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card fuelCard">
<div class="flex">
<div class="col">
<div class="flex">
<div>
<i class="fas fa-angle-down pointer" id="fuelAccordion"></i>
</div>
</div>
</div>
</div>
<div class="cardAccordion">
<div class="flex">
<div class="inputGrid">
<div>
<label for="placa">Litros</label>
<select class="form-control">
<option value="5">5 Lts</option>
</select>
</div>
<div>
<label for="placa">Valor total</label>
<input type="text" class="form-control" value="R$38,46" disabled />
</div>
</div>
<button class="btn btn-primary">Adicionar</button>
</div>
</div>
</div>
You need to use parents because this not find .cardAccordion inside #fuelAccordion
$('#fuelAccordion').click(function () {
$(this).parents('.fuelCard').find('.cardAccordion').slideToggle('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card fuelCard">
<div class="flex">
<div class="col">
<div class="flex">
<div>
<i class="fas fa-angle-down pointer" id="fuelAccordion">Test</i>
</div>
</div>
</div>
</div>
<div class="cardAccordion">
<div class="flex">
<div class="inputGrid">
<div>
<label for="placa">Litros</label>
<select class="form-control">
<option value="5">5 Lts</option>
</select>
</div>
<div>
<label for="placa">Valor total</label>
<input type="text" class="form-control" value="R$38,46" disabled />
</div>
</div>
<button class="btn btn-primary">Adicionar</button>
</div>
</div>
</div>
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
<div style="margin-top:2%;display:none; " id="filt_box" id="reset">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown" id="filter_seller_user" name="filter_seller_user[]"
multiple="multiple">
#foreach($seller_user as $key=>$value)
<option value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown" id="filter_generated_by_user"
name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="btn_filter_submit" onclick="show_reset_data();">Clear</button>
</div>
</div>
using multiple try javascript code but not apply any changes
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
<script>
function show_reset_data() {
$("reset").each(function() { this.selectedIndex = 0 });
}
function show_reset_data() {
document.getElementById("reset").reset();
}
function show_reset_data() {
document.getElementById("reset").value="";
}
</script>
I inserted class="reset" in each selected field means input field and button clear Id="reset" create and simple write javascript code.
<div style="margin-top:2%;display:none; " id="filt_box">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown reset" id="filter_seller_user" name="filter_seller_user[]" multiple="multiple">
#foreach($seller_user as $key=>$value)
<option style = "font-size:13px;" value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown reset" id="filter_generated_by_user" name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option style = "font-size:13px;" value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option style = "font-size:13px;" value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control reset">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="reset" style="background-color: #ae3029; color:white;">Clear</button>
</div>
javascript code
$("#reset").on('click', function () {
$('.reset').val('');
});
I want to be seem that language label and select options in same row.But I couldn't make them in same row using bootstrap col-md-6.Whole form is seperated into same col-sm-6 columns inside row.
As you can see on the image language label and select doesnt look like on the same row, very far from each other and select field got shrinked.How to make them look well and normal on the same row?
Here's what I tried below:
<div class="row" style="margin-left:10px;">
<div class="col-sm-6">
<ul class="list-unstyled">
<li>
<div class="row">
<div class="col-md-6">
<h4>Language:</h4>
</div>
<div class="col-md-6" style="text-align:left">
<mat-form-field>
<select matNativeControl required>
<option value="english">English</option>
<option value="german">German</option>
</select>
</mat-form-field>
</div>
</div>
</li>
</ul>
<div class="col-sm-6">
...other form elements
</div>
</div>
Replace the following with your h4 tag
<h4 style="display:inline">Language:</h4>
Demo Stackblitz
How to style drop downs of drop down select boxes?
I have created a jsfiddle http://jsfiddle.net/CGDhB/
<div class="container">
<div class="salmatWrapper">
<div class="col-sm-12 contents">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/header.png" alt="Energy Unit Conversion Tool" class="img-responsive" />
<div class="form">
<form class="form-horizontal">
<fieldset>
<div class="col-xs-6 left">
<!-- Enter Value-->
<div class="form-group">
<div class="col-xs-12">
<input id="custom1" name="custom1" type="text" placeholder="Enter Value" class="form-control input-md">
</div>
</div>
<!-- Convert From -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom2" name="custom2" class="form-control">
<option value="" class="selectDefaultText">Convert From</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Convert To -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom3" name="custom3" class="form-control">
<option value="" class="selectDefaultText">Convert To</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6 right">
<!-- Textarea -->
<div class="form-group">
<div class="col-xs-12">
<textarea class="form-control" id="custom4" name="custom4">Result here ...</textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-sm-12">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/footer.png" alt="Check our affordable electrity and gas packages!" class="img-responsive" />
</div>
</div>
</div>
</div>
I want the drop downs to look as in below image
Basically I want that little icon and the drop down select boxes to look as that. I am confused with this. A staging link may be viewed from here http://bit.ly/1eNm3jv
You really can't style select. The only thing you can really do is border color and padding as far as I know. Probably font size as well. Like #setek mentioned, gonna have to use some kind of plugin.