My first (very small) project on Javascript

I am inaugurating the blog of my new website with this post. Today im exposing my first real coding project carried out for the company im currently working for as Webmaster, Kingly Ltd.

Kingly is a company dedicated to the production of merchandising with a strong focus on sustainability and eco-friendly products, so, insiprated in another website of the sector we decided that include an environmental savings calculator on our site would be very convenient.

The project has been made on Javascript and HTML, and needed a bit of CSS to add an stylish look.

The company website was made on WordPress + Elementor, so I started creating a section than can be embedded anywhere in the website. This section has been built completely from scratch in an HTML empty block which allow me to add custom CSS for this particular element, making it possible to integrate the whole set of HTML, CSS and Javascript by copying a simple shortcode.

This is how the calculator looks when page first renders. I’ve added default values to make user easier to understand how it works.
This is the calculator showing the results of the given data.

But lets get into the code!

HTML + Javascript code

<div class="row">
    <div class="column"><input type="number" value="1000" id="qty" ><br></div>
  <div class="column"><form method="post">
    <select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
        <option value="pairs of Upcycled cotton socks">Upcycled Socks</option>
        <option value="Sweaters of Upcycled cotton">Upcycled Sweaters</option>
        <option value="Kg of Raw Upcycled cotton">Kg of Upcycled cotton</option>
    </select>

    <input type="hidden" name="hiddenInput" id="hiddenInput" value="pairs of Upcycled cotton socks" />
</form></div>
  <div class="column"><button onclick="displayMessage()">Calculate!</button></div>
</div>

<div class="results" id="results"><div>
    <hr class="rounded">
    <p id="heading">1000 Pairs of Upcycled socks saves de staggering:</p></div>
  <div class="elem"><img src="https://wearekingly.com/wp-content/uploads/2022/02/battery.png"><p id="energy"></p><p>of energy saved</p></div>
    <div class="elem"><img src="https://wearekingly.com/wp-content/uploads/2022/02/co2.png"><p id="co2"></p><p>of CO2 Saved</p></div>  
<div class="elem"><img src="https://wearekingly.com/wp-content/uploads/2022/02/water-tap.png"><p id="water"></p><p>of water saved</p></div>  
<div class="elem"><img src="https://wearekingly.com/wp-content/uploads/2022/02/waste.png"><p id="landfill"></p><p>of Landfill saved</p></div>
<div class="data"><p>These statements have been calculated through LCA work, verified by Universidad de Valencia and UNESCO. </p></div></div>


<script>
    document.getElementById("results").hidden=true;
    function changeHiddenInput(objDropDown) {
    console.log(objDropDown);
    var objHidden = document.getElementById("hiddenInput"); 
    objHidden.value = objDropDown.value;
    var a = objHidden.value;
    result.innerHTML = a || "";
}
function displayMessage(){
    let theqty = document.getElementById("qty").value;
    let item = document.getElementById("hiddenInput").value;
    if (item == "pairs of Upcycled cotton socks"){
        var water = theqty*710.53;
        var energy = theqty*2.652;
        var co2 = theqty*1.088;
        var landfill = theqty*0.12;
    document.getElementById("heading").innerHTML = theqty +" "+ item +" saves the staggering of:";
    document.getElementById("energy").innerHTML = energy.toFixed(0) + " kWh";
    document.getElementById("water").innerHTML = water.toFixed(0) + " Litres";
    document.getElementById("co2").innerHTML = co2.toFixed(0) + " Kg";
    document.getElementById("landfill").innerHTML = landfill.toFixed(0) +" m²";}
    
    else if (item == "Sweaters of Upcycled cotton"){
        var water = theqty*8150;
        var energy = theqty*30;
        var co2 = theqty*12.5;
        var landfill = theqty*1.33;
    document.getElementById("heading").innerHTML = theqty +" "+ item +" saves the staggering of:";
    document.getElementById("energy").innerHTML = energy.toFixed(0) + " kWh";
    document.getElementById("water").innerHTML = water.toFixed(0) + " Litres";
    document.getElementById("co2").innerHTML = co2.toFixed(0) + " Kg";
    document.getElementById("landfill").innerHTML = landfill.toFixed(0) +" m²";}
    
    else if (item == "Kg of Raw Upcycled cotton"){
        var water = theqty*10449;
        var energy = theqty*39;
        var co2 = theqty*16;
        var landfill = theqty*1.7;
    document.getElementById("heading").innerHTML = theqty +" "+ item +" saves the staggering of:";
    document.getElementById("energy").innerHTML = energy.toFixed(0) + " kWh";
    document.getElementById("water").innerHTML = water.toFixed(0) + " Litres";
    document.getElementById("co2").innerHTML = co2.toFixed(0) + " Kg";
    document.getElementById("landfill").innerHTML = landfill.toFixed(0) +" m²";}
    document.getElementById("results").hidden=false;
}
</script>

CSS Code

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.show {display:block;}
.elem {
  float: left;
  width: 24%;
}
.column {
  float: left;
  width: 33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.row {
    text-align: center;
    background-color:#3E3E3E;
    padding:25px;
    border-radius:5px;
}
.results:after {
  content: "";
  display: table;
  clear: both;
}
.results {
    text-align: center;
    display:block;
}
/*STYLING*/
.results {
    margin:5px;
}
.elem{
    background-color: #D6D6D6;
    margin:5px 5px 10px 5px;
    padding:25px 5px 5px 5px;
    border-radius:5px;
    
}
#water, #co2, #energy, #landfill {
font-size: 19px;
font-weight:bold;
}
#heading{
    font-size: 29px;
    text-align: center;
    padding:0px;
    margin: 5px 0px;
}
.column {
    padding:0px 15px;
}
.column button {
    width:100% !important;
    background-color: green;
    color:white;
    border:0px;
}
input, select, button{
height:50px;}


hr.rounded {
    margin:5px 25px;
  border-top: 3px solid #bbb;
  border-radius: 5px;
}
.data{
    width:100%!important;
}
@media only screen and (max-width: 600px) {
.elem {
    width:45% !important;
}
.row {
    background-color:#3E3E3E;
    padding:10px;
    border-radius:5px;
}
.column {
    margin:5px;
    width: 100%;}
.data{
    width:98%!important;
}}

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Fernando Jiménez

Fernando Jiménez

Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp