JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<label for="property_type">Property Type</label>
<select name="property_type" id="property_type">
<option value="" selected="selected">Please Select</option>
<option value="House">House</option>
<option value="Flat">Flat</option>
<option value="Bungalow">Bungalow</option>
<option value="Maisonette">Maisonette</option>
<option value="HMO">HMO</option>
<option value="Multi-Unit-Block">Multi-Unit Block</option>
<option value="Land">Land</option>
<option value="Commercial">Commercial</option>
<option value="Semi-Commercial">Semi-Commercial</option>
</select>

<div id="t1">
<label for="house_type">Type of House or Bungalow</label>
<select name="house_type" id="house_type">
<option value="" selected="selected">Please Select</option>
<option value="Single">Detached</option>
<option value="Married">Semi-Detached</option>
<option value="Divorced">Mid-Terraced</option>
<option value="Separated">End-Terraced</option>
<option value="Widow">Town House</option>
</select>
</div>

<div id="t2">
<label for="flat_type">Type of Flat or Maisonette</label>
<select name="flat_type" id="flat_type">
<option value="" selected="selected">Please Select</option>
<option value="Purpose-Built">Purpose Built</option>
<option value="Converted">Converted</option>
<option value="Studio">Studio</option>
<option value="Above Shops">Above Shops</option>
</select>
</div>

<label for="bed_no">Number of bedrooms</label>
<select name="bed_no" id="bed_no">
<option value="" selected="selected">Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>

<br>
Date of purchase

<br><br><br>

Job title<br>
Employer name<br>
<br>

Todays date: <span id="output1"></span>

<br>



<div id="output3"></div>

<p>
How long have you been with your...

CSS

label {display:block;}
#t1, #t2 {display:none;}

JavaScript

// option change

function id(x) {var y = document.getElementById(x);return y;}

var property_type = id("property_type");

property_type.addEventListener("change", function() { 

if(property_type.selectedIndex == 1 || property_type.selectedIndex == 3){
id("t1").style.display = "block";id("t2").style.display = "none";
}
else if(property_type.selectedIndex == 2 || property_type.selectedIndex == 4){
id("t2").style.display = "block";id("t1").style.display = "none";
}
else {id("t2").style.display = "none";id("t1").style.display = "none";}

});

// new date



function createDate(days, months, years) {
        var date = new Date(); 
        date.setDate(date.getDate() + days);
        date.setMonth(date.getMonth() + months);
        date.setFullYear(date.getFullYear() + years);
        return date.toLocaleDateString("en-GB")    
    }

var job_years = id("job_years");
var job_months = id("job_months");

job_years.addEventListener("change", function() { 
var yrs = job_years.value;
var mts = job_months.value;
newdate(yrs,mts);
});

job_months.addEventListener("change", function() { 
var yrs = job_years.value;
var mts = job_months.value;
newdate(yrs,mts);
});

// dd mm yyy
function newdate(x,y) {

var nd = createDate(0,-y,-x);

id("purchase_date").value = nd;

}

var test = id("test");
var hl = id("hl");

var something = id("income_monthly");
var test = id("test");

id("check").addEventListener("click", function() {
if (something.checked) {test.value = (test.value * 12); }
else {test.value = test.value;}
});