Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ralitsavoronevska/fcc-survey-form
FCC: Responsive Web Design Projects - Build a Survey Form
https://github.com/ralitsavoronevska/fcc-survey-form
codepen fcc html5 node-sass vanilla-js
Last synced: 5 days ago
JSON representation
FCC: Responsive Web Design Projects - Build a Survey Form
- Host: GitHub
- URL: https://github.com/ralitsavoronevska/fcc-survey-form
- Owner: ralitsavoronevska
- License: mit
- Created: 2020-06-22T10:01:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-05T22:16:11.000Z (6 months ago)
- Last Synced: 2024-11-10T12:43:42.198Z (2 months ago)
- Topics: codepen, fcc, html5, node-sass, vanilla-js
- Language: SCSS
- Homepage: https://ralitsavoronevska.github.io/fcc-survey-form/
- Size: 6.03 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FCC: Build a Survey Form
[Codepen](https://codepen.io/ralitsavoronevska/pen/ZgbxGq) | [Live Preview](http://ralitsavoronevska.github.io/fcc-survey-form)
# Desktop preview:
# Tablet preview:
# Mobile preview:
# Built with:
- HTML5, CSS3/SASS
- [Google Fonts](https://fonts.google.com/)
# Tools used:
- [W3C HTML Validator](https://validator.w3.org/)
- [W3C CSS Validator](https://jigsaw.w3.org/css-validator/)
# W3C HTML Validator
# W3C CSS Validator
# FreeCodeCamp:
# Responsive Web Design Projects - Build a Survey Form
Objective: Build an app that is functionally similar to https://survey-form.freecodecamp.rocks. Do not copy this demo project.
User Stories:
- You should have a page title in an h1 element with an id of title
- You should have a short explanation in a p element with an id of description
- You should have a form element with an id of survey-form
- Inside the form element, you are required to enter your name in an input field that has an id of name and a type of text
- Inside the form element, you are required to enter your email in an input field that has an id of email
- If you enter an email that is not formatted correctly, you will see an HTML5 validation error
- Inside the form, you can enter a number in an input field that has an id of number
- The number input should not accept non-numbers, either by preventing you from typing them or by showing an HTML5 validation error (depending on your browser).
- If you enter numbers outside the range of the number input, which are defined by the min and max attributes, you will see an HTML5 validation error
- For the name, email, and number input fields, you can see corresponding label elements in the form, that describe the purpose of each field with the following ids: id="name-label", id="email-label", and id="number-label"
- For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field
- Inside the form element, you should have a select dropdown element with an id of dropdown and at least two options to choose from
- Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the name attribute
- Inside the form element, you can select several fields from a series of checkboxes, each of which must have a value attribute
- Inside the form element, you are presented with a textarea for additional comments
- Inside the form element, you are presented with a button with id of submit to submit all the inputs
- Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
Note: Be sure to add in your HTML to link your stylesheet and apply your CSS