Skip to content

Instantly share code, notes, and snippets.

@yadavanuj1996

yadavanuj1996/fcc-survey-form.markdown

Last active July 24, 2019 22:19
Show Gist options
  • Save yadavanuj1996/404645a89054500a0f2fcf1b75592223 to your computer and use it in GitHub Desktop.
Save yadavanuj1996/404645a89054500a0f2fcf1b75592223 to your computer and use it in GitHub Desktop.
Download ZIP
FCC: Survey Form
Raw
index.html
<!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
-->
<!Doctype html>
<html lang="en-US">
<head>
<title>Survey Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Anuj Yadav">
<meta name="description" content="This is a tribute page to steve jobs and part of for free code camp project">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="main">
<header>
<h1 id="title">Survey Form</h1>
<p id="description">Blockchain Real Estate Investment Form</p>
</header>
<main>
<form id="survey-form" method="GET" action="#">
<div class="bottom-top-padding">
<div class="label-div">
<label id="name-label" for="name">Name: </label>
</div>
<div class="input-div">
<input id="name" class="input-text" type="text" placeholder="Enter Name" required>
</div>
</div>
<div class="bottom-top-padding">
<div class="label-div">
<label id="email-label" for="email">E-mail: </label>
</div>
<div class="input-div">
<input id="email" class="input-text" type="email" placeholder="Enter E-Mail" required></div>
</div>
<div class="bottom-top-padding">
<div class="label-div">
<label id="number-label" for="number">Work Experience: </label>
</div>
<div class="input-div">
<input id="number" class="input-text" min="0" max="80" type="number" placeholder="Enter Number">
</div>
</div>
<div class="bottom-top-padding">
<div class="label-div">
<label for="dropdown">Are you comfortable in investing in real estate on platform that is powered by Blockchain technology</label>
</div>
<div class="input-div">
<select id="dropdown" type="dropdown">
<option>Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
</div>
</div>
<div class="bottom-top-padding">
<div class="label-div">
<label>Suggestions to build trusted platform</label>
</div>
<div class="input-div">
<textarea type="text"></textarea>
</div>
</div>
<div class="bottom-top-padding">
<div class="label-div">
<label>You are ready to invest in:</label>
</div>
<div id="" class="input-div">
<label for="real-estate"><input id="real-estate" type="checkbox" name="real-estate" value="real-estate">Real Estate</label>
</br>
<label for="mutual-funds"><input id="mutual-funds" type="checkbox" name="mutual-funds" value="mutual-funds">Mututal Funds</label>
</br>
<label for="crypto"><input id="crypto" type="checkbox" name="crypto" value="crypto">Crypto Currency</label>
</br>
<label for="stocks"><input id="stocks" type="checkbox" name="stocks" value="stocks"> Stocks & Bonds</label>
</br>
</div>
</div>
<div class="bottom-top-padding">
<div class="label-div">
<label>Are you ready for further contact</label>
</div>
<div class="">
<label>
<input type="radio" name="data" value="yes">Yes
</label>
</br>
<label>
<input type="radio" name="data" value="no">No
</label>
</div>
</div>
<div id="submit-div">
<button id="submit">Submit</button>
</div>
</form>
</main>
</div>
</body>
</html>
Raw
script.babel
// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
Raw
style.css
/* display: flex is used*/
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
body{
margin: 0px;
display: flex;
flex-direction: row;
justify-content: center;
background-color: #ffb24f;
font-family: 'Raleway', Helvetica, sans-serif,Arial;
}
#main{
width: 80%;
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
}
form{
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 500px;
}
header{
text-align: center;
}
main{
display: flex;
display-direction: row;
justify-content: center;
padding-bottom: 20px;
}
.bottom-top-padding{
padding-top: 10px;
padding-bottom: 10px;
display: flex;
}
.label-div{
width: 50%;
text-align: right;
padding-right: 8px;
}
.input-div{
width: 50%;
text-align: left;
padding-left: 8px;
}
#submit-div{
display: flex;
justify-content: center;
}
.input-text, select, textarea{
width: 60%;
height: 100%;
}
#submit{
background-color: #ffb24f;
color: white;
height: 35px;
width: 200px;
border-radius: 8px;
font-size: 20px;
border: 0px;
font-family: 'Raleway', Helvetica, sans-serif,Arial;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment