Coder Social home page Coder Social logo

project-survey's Introduction

Technigo React Project Survey

This week we practiced React state by creating a survey. It should consist of at least three questions that need to be answered by users. When the user presses submit, they should see a summary of their answers. We were also encouraged to use components as much we could to practice for future projects.

The building of the project

  • I planned my project in Figma to get an overview of what I needed to do, what kind of survey it would be, and what components I would need.
  • I created all the components in vs code and started with a form and question nr.one and then copied the boilerplate to all the others to have a base.
  • Then I created different forms depending on the question and put them all in the overview for a summary.
  • I styled the form after some inspiration online and made the overview more personal.
  • Checked the page in different browsers on desktop and mobile (with responsiveness from desktop on tablet)
  • Tested the accessability with keyboard and run the lighthouse on the page. Didn't find any problems.

I struggled with the radio buttons that I transformed into images and how to be able to select them, collect the info, and put them in the overview. Still working on the radio buttons in question number four, the contrast is't the best I'm working on a other solution.

Deployed page

Here it the link to my deployed survey: https://code-student-survey.netlify.app/

project-survey's People

Contributors

mimmisen avatar emolsz avatar dependabot[bot] avatar idlefingers avatar jenniedalgren avatar puj avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.