Skip to content

Dev #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Dev #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a23f768
First Commit
oibitoye Mar 8, 2019
49d25d0
Response
Mar 8, 2019
839aae9
Response
Mar 8, 2019
58e7caf
form1
Mar 8, 2019
4aefe6f
final
Mar 8, 2019
36812b2
Merge branch 'master' into dev
oibitoye Mar 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 91 additions & 0 deletions css/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fork Me! FCC: Test Suite Template</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!--

Hello Camper!

For now, the test suite only works in Chrome!
Please read the README below in the JS Editor before beginning.
Feel free to delete this message once you have read it.
Good luck and Happy Coding!

- The freeCodeCamp Team

-->

<!-- User Story #1: I can see a title with id="title" in H1 sized text. -->
<div id="mocha"></div>
<h1 id="title">Survey Form <h1></h1>
<!--
User Story #2: I can see a short explanation with id="description" in P sized text.-->
<p id="description" class="center-text">Let us know how we can improve freeCodeCamp</p>
<br>
<!--
User Story #3: I can see a form with id="survey-form".-->
<form id="survey-form">
<!-- User Story #4: Inside the form element, I am required to enter my name in a field with id="name".-->
<label id="name-label" for="name">Insert your name</label>
<input id="name" placeholder="Enter your name" required>
<br>
<br>
<!-- User Story #5: Inside the form element, I am required to enter an email in a field with id="email".-->
<!-- User Story #6: If I enter an email that is not formatted correctly, I will see an HTML5 validation error.-->
<label id="email-label" for="email">Insert your email</label>
<input id="email" placeholder="Enter your email" type="email" required>
<br><br>

<!-- User Story #7: Inside the form, I can enter a number in a field with id="number".-->
<!-- User Story #8: If I enter non-numbers in the number input, I will see an HTML5 validation error.-->
<!-- User Story #9: If I enter numbers outside the range of the number input, which are defined by the min and max attributes, I will see an HTML5 validation error.-->
<label id="number-label" for="number">Insert a number</label>
<input id="number" placeholder="Enter a number" type="number" required min="20" max="100">
<br>
<br>

<!--User Story #10: For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id="name-label",d="email-label", and id="number-label".-->
<!--User Story #11: For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field. -->
<!--User Story #12: Inside the form element, I can select an option from a dropdown that has a corresponding id="dropdown".-->
<select id="dropdown" name="business">
<option value="First Choice">First Choice</option>
<option value="Second Choice">Second Choice</option>
<option value="Third Choice">Third Choice</option>
<option value="Fourth Choice">Fourth Choice</option>
</select>

<br><br>
<!--User Story #13: Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute.-->
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

<br><br>
<!--User Story #14: Inside the form element, I can select several fields from a series of checkboxes, each of which must have a value attribute.-->
<input type="checkbox" value="Bike"> I have a bike<br>
<input type="checkbox" value="Car" checked> I have a car<br>
<!--User Story #15: Inside the form element, I am presented with a textarea at the end for additional
comments.-->
<br><br>
<label for="textarea">Additional Comments:</label>
<textarea id="textarea" rows="4" cols="50"></textarea>

<!--User Story #16: Inside the form element, I am presented with a button with id="submit" to submit all my inputs.-->
<br>
<br>
<input id="submit" type="submit" value="Submit">

</form>
</div>


<script src="js/index.js"></script>
</body>
</html>
18 changes: 18 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
html, body {
background-color: #a9d7d1;
text-align: center;
font-family: 'Raleway', Helvetica, sans-serif;
min-width: 320px;
}
.align-center{
text-align: center;
}

#form-outer {
margin: 0 auto;
border-radius: 4px;
width: 75%;
max-width: 900px;
padding: 10px;
padding-top: 20px;
}
68 changes: 68 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
</head>

<body>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!--
Expand All @@ -21,6 +22,73 @@
- The freeCodeCamp Team

-->

<!-- User Story #1: I can see a title with id="title" in H1 sized text. -->
<div id="mocha"></div>
<h1 id="title">Survey Form <h1></h1>
<!--
User Story #2: I can see a short explanation with id="description" in P sized text.-->
<p id="description" class="center-text">Let us know how we can improve freeCodeCamp</p>
<br>
<!--
User Story #3: I can see a form with id="survey-form".-->
<form id="survey-form">
<!-- User Story #4: Inside the form element, I am required to enter my name in a field with id="name".-->
<label id="name-label" for="name">Name:</label>
<input id="name" placeholder="Enter your name" required>
<br>
<br>
<!-- User Story #5: Inside the form element, I am required to enter an email in a field with id="email".-->
<!-- User Story #6: If I enter an email that is not formatted correctly, I will see an HTML5 validation error.-->
<label id="email-label" for="email">Email:</label>
<input id="email" placeholder="Enter your email" type="email" required>
<br><br>

<!-- User Story #7: Inside the form, I can enter a number in a field with id="number".-->
<!-- User Story #8: If I enter non-numbers in the number input, I will see an HTML5 validation error.-->
<!-- User Story #9: If I enter numbers outside the range of the number input, which are defined by the min and max attributes, I will see an HTML5 validation error.-->
<label id="number-label" for="number">Age:</label>
<input id="number" placeholder="Enter a number" type="number" required min="12" max="100">
<br>
<br>

<!--User Story #10: For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id="name-label",d="email-label", and id="number-label".-->
<!--User Story #11: For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field. -->
<!--User Story #12: Inside the form element, I can select an option from a dropdown that has a corresponding id="dropdown".-->
<label>Which option best describes your current role? </label>
<select id="dropdown" name="business">
<option>None</option>
<option value="First Choice">Student</option>
<option value="Second Choice">Full time job</option>
<option value="Third Choice">Full time learner</option>
<option value="Fourth Choice">Other</option>
</select>

<br><br>
<!--User Story #13: Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute.-->
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

<br><br>
<!--User Story #14: Inside the form element, I can select several fields from a series of checkboxes, each of which must have a value attribute.-->
<input type="checkbox" value="Bike"> I have a bike<br>
<input type="checkbox" value="Car" checked> I have a car<br>
<!--User Story #15: Inside the form element, I am presented with a textarea at the end for additional
comments.-->
<br><br>
<label for="textarea">Additional Comments:</label>
<textarea id="textarea" rows="4" cols="50"></textarea>

<!--User Story #16: Inside the form element, I am presented with a button with id="submit" to submit all my inputs.-->
<br>
<br>
<input id="submit" type="submit" value="Submit">

</form>
</div>


<script src="js/index.js"></script>
</body>
</html>