GithubHelp home page GithubHelp logo

stevefrenzel / petition Goto Github PK

View Code? Open in Web Editor NEW
0.0 0.0 0.0 1.46 MB

A petition that includes registering, logging in and creating a signature.

Home Page: http://tabasco-petition.herokuapp.com/

JavaScript 73.20% CSS 4.54% HTML 19.70% TSQL 2.56%

petition's Introduction

Petition

This was a project for coding bootcamp SPICED Academy.

The idea behind this project is to create an online petition that visitors can sign to make their voice heard on an issue of your choosing.

The petition can be about something ridiculous, (...) , or a matter of great seriousness. Since we are going to be working on this project for considerable amount of time, it would be best if you chose a topic that interests you. Keep in mind that we will be (...) publishing them on the web, so you should not choose a topic that would offend or alienate your colleagues or others you may want to impress with your work.

Directory ๐Ÿ”Ž

  1. Register (Login)
  2. Creating a signature
  3. Main menu
  4. Showing participants
  5. Editing user information

1. Register / Login ๐Ÿ”‘

  • users table contains columns for id (the primary key), first name, last name, email address, hashed password and a timestamp column to record the time at which the user was created:
DROP TABLE IF EXISTS users;

CREATE TABLE users(
    id SERIAL PRIMARY KEY,
    first_name VARCHAR(50) NOT NULL,
    last_name VARCHAR(50) NOT NULL,
    email_address VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(1337) NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
  • both the registration and log in forms can have several errors and will display error information if necessary

  • first name, last name, email address, and password are all required fields, e-mail addresses are unique, enforced by a constraint on the column

  • logged out users are automatically redirected to the registration page

2. Creating a signature ๐Ÿ“

  • client-side Javascript allows users to draw on the <canvas> element and then set the value of the hidden form field to what they have drawn

  • getting the image data put in the hidden field by calling the toDataURL() method of the canvas

  • when users submit the form, a POST request is made to server and the submitted data is inserted into a database table named signatures:

DROP TABLE IF EXISTS signatures;

CREATE TABLE signatures(
    id SERIAL PRIMARY KEY,
    user_id INT NOT NULL,
    signature TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
  • using a timestamp column to record when the signature took place.

  • as the data url from the canvas can be large I used the TEXT data type for it

3. Main menu โš™๏ธ

  • this page shows additional content, other participants, the option to edit the user profile and to delete the signature

4. Showing participants ๐Ÿ‘ฉโ€๐Ÿ‘ฉโ€๐Ÿ‘ฆโ€๐Ÿ‘ฆ

  • getting the data (if available) for age, city and website from user_profiles table

  • instead of showing the website link, it's linking the username with the saved url in the href attribute

  • city names are also links and when clicked, directing the user to a new page that shows only the people who have signed the petition that live in that city

5. Editing user information ๐Ÿ”ง

  • when a user submits this form, the data is written to a table named user_profiles, all of the fields are optional
DROP TABLE IF EXISTS user_profiles;

CREATE TABLE user_profiles(
    id SERIAL PRIMARY KEY,
    age INTEGER,
    city VARCHAR(300),
    url VARCHAR (600),
    user_id INTEGER REFERENCES users(id) NOT NULL UNIQUE
);

petition's People

Contributors

stevefrenzel 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.