Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WLF
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<style>
body {
background-image: linear-gradient(to right, #29D695, #FFFFFF);
}
#main {
font-family: "Trebuchet MS";
}
.ques {
text-align:left;
display:table-cell;
text-align: center;
vertical-align: middle;
padding-bottom:5px;
padding-top:20px
}
input[type="radio"]{
vertical-align: baseline;
}
</style>
<div id="main">
<h1 id="title">Work Life Balance Survey</h1>
<p id="description">A small survey to to know about your work life priorites</p>
<form id="survey-form">
<div>
<div>
<label class="ques" id="name-label">* Name : </label>
<input type="text" id="name" placeholder="Name" required>
</div>
<div>
<label class="ques" for="email" id="email-label">* Email : </label><input type="email" id="email" placeholder="Email" required>
</div>
<div id="age">
<label class="ques" id="number-label">* Age : </label><input type="number" min="1" max="125" placeholder="Age" id="number">
</div>
<div id="rate">
<label class="ques">How do you rate your work life balance (1 Worse / 5 Best) : </label>
<select id="dropdown" name="currentPos" >
<option disabled value>Select an option</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></select>
</div>
<div id="radio">
<label class="ques">How much time you spend with your family on working days : </label>
<label>
<input type="radio" id="oddsPref" name="oddsPref" value="decimal" /> 0-15 mins
<input type="radio" id="oddsPref" name="oddsPref" value="decimal" /> 15-45 mins <input type="radio" id="oddsPref" name="oddsPref" value="decimal" /> 45-90 mins
<input type="radio" id="oddsPref" name="oddsPref" value="decimal" /> 90-150 mins </label>
</div>
<div id="checkbox">
<label class="ques">What are the best parts of the day for you (Click all that apply) : </label>
<div><input name="prefer" value="1" type="checkbox">Waking up early</div>
<div><input name="prefer" value="2" type="checkbox">Sleeping till late in morning</div>
<div><input name="prefer" value="3" type="checkbox">Having bed tea with partner/kids</div>
<div><input name="prefer" value="4" type="checkbox">Packing/preparing lunch for partner/kids</div>
<div><input name="prefer" value="5" type="checkbox">Making sure full time is utilized in office for work and you leave on time</div>
<div><input name="prefer" value="6" type="checkbox">Breaks not exceeding 60 mins in total</div>
<div><input name="prefer" value="7" type="checkbox">Watching TV with patner/kids</div>
<div><input name="prefer" value="8" type="checkbox">Spending time with kids</div>
<div><input name="prefer" value="9" type="checkbox">Discussing day's activities with parter</div>
</div>
<div>
<label class="ques" for="comments">Any Comments or Suggestions?</label>
<textarea id="comments" class="input-field" style="height:50px;resize:vertical;" name="comment" placeholder="Enter your comment here..."></textarea>
</div>
<button id="submit" type="submit">Submit</button>
</div>
</form>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.