html css js math output

  css, html, javascript

I’m not an expert on JS, so maybe this question have a super easy answer, I don’t know.

I have a grid of 9 button, a grid with 9 radio type input and another 5 radio type input. Every single one of this element are needed to make some math to send in outup on the page how much someone would spend selecting this format like weight, length…

I have 3 different spot where I should see an output with the price, I have an excel where I can see the price I should put, but I don’t know how to create such a function. the function should say like: if you select the first button, the third radio type, and the second radio type, given all their value and the math formula to do it, the price is €x.

body {
  font-family: "Open Sans", sans-serif;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify {
  justify-content: center;
}

.align {
  align-items: center;
}

.evenly {
  justify-content: space-evenly;
}

.between {
  justify-content: space-between;
}

.border {
  border: 1px solid black;
}

.m-0 {
  margin: 0;
}

.spacer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.orange {
  color: orange;
}

.bold {
  font-weight: bold;
}

.bg {
  background-color: whitesmoke;
}

.tabtitle {
  font-weight: bold;
}

.tariffe {
  font-size: small;
}

.intro {
  text-align: center;
}

.tartitle {
  font-size: medium;
}

div h2 {
  font-size: xx-large;
}

.cont {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-top: 12px;
  cursor: pointer;
}

.m-7 {
  margin-top: 7px;
}

.m-14 {
  margin: 14px;
  padding: 0px;
}

div input {
  border-radius: 3px;
  border: solid 1px black;
}

div input:focus {
  outline: none;
}

.richiedi {
  text-align: center;
  padding: 5px 50px;
}

.tabcosti {
  background-color: darkorange;
  border: solid darkorange 1px;
}

.border {
  border: solid darkorange 1px;
}

.black {
  color: black;
}

.white {
  color: white;
}

.m-left-50 {
  margin-left: 200px;
}

.x-small {
  font-size: x-small;
}

.tabcosti2 {
  border-top: 0px;
  border: solid darkorange 1px;
}

.margin-left {
  margin-left: 20px;
}

.info {
  width: 215px;
  height: 20px;
}

.info2 {
  width: 75px;
  height: 20px;
  margin: 10px;
}

.small {
  font-size: small;
}

.unbtn {
  border: 0px;
  width: 20vw;
  height: 30px;
  background-color: whitesmoke;
}

.unbtn:focus {
  outline: none;
  background-color: darkorange;
  color: white;
}

.hide {
  display: none;
}


.btn {
  background-color: whitesmoke;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

.btn2{
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px; 
}
<div class="justify evenly flex-row">
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel" class="btn bottoneCategoria" data-value="1,56" value="3,44">Abbigliamento e Scarpe</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel2" class="btn bottoneCategoria" data-value="1,04" value="2,66">Pet & Food</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel3" class="btn bottoneCategoria" data-value="1,30" value="3,10">Sport e Tempo libero</button>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel4" class="btn bottoneCategoria" data-value="1,04" value="2,76">Elettronica e Informatica</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel5" class="btn bottoneCategoria" data-value="1,04" value="2,66">Casa e Cucina</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel6" class="btn bottoneCategoria" data-value="1,30" value="3,10">Auto e Moto</button>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel7" class="btn bottoneCategoria" data-value="1,17" value="2,58">Food & Beverage</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel8" class="btn bottoneCategoria" data-value="1,30" value="3,10">Belleza e Salute</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel9" class="btn bottoneCategoria">Altro</button>
                    </div>
                </div>
            </div>
            

<div id="demo" class="justify m-30 evenly flex-row bg hide">
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
                    </div>
                </div>
            </div>

<div class="flex-row bg m-7 justify evenly">
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
                    </div>
                </div>
            </div>


            <div class="justify evenly flex-row">
                <div class="flex-col">
                    <p>TARIFFA DI GESTIONE</p>
                </div>
                <div class="flex-col">
                    <p>TARIFFA DI RESO</p>
                </div>
                <div class="flex-col">
                    <p>TARIFFA DI STOCCAGGIO</p>
                </div>
            </div>

            <div class="tabcosti evenly justify flex-row">
                <div class="flex-col">
                    <p id="reso">€ <span class="white"></span></p>
                </div>
                <div class="flex-col">
                    <p>€ <span class="white"></span></p>
                </div>
                <div class="flex-col">
                    <p>€ <span class="white"></span> <span class="x-small">al mese</span></p>
                </div>
            </div>

            <div class="flex-row tabcosti2">
                <div class="flex-col justify">
                    <div class="flex-row">
                        <p class="margin-left">€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
                    </div>
                    <div class="flex-row">
                        <p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
                    </div>
                    <div class="flex-row">
                        <p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
                    </div>
                </div>
                <div class="flex-col spacer"></div>
            </div>

Just to make it clear, I should place the output of the formula on the orange background grid where I already placed the 3 € sign.

Source: Ask Javascript Questions

LEAVE A COMMENT