Voting App

index.pug

header.header
  .header__wrapper
    a.brand-logo(href='#') Voting App
    
    .nav-bar
      .nav-bar__dropdown #[span John Doe] #[i.fa.fa-caret-down]
        ul.dropdown
          li.dropdown__item #[a(href='#') Dashboard]
          li.dropdown__item #[a(href='#') Settings]
          li.dropdown__item #[a(href='#') Log out]
          
      a.nav-bar__link(href='#') #[i.fa.fa-plus.font-icon] #[span Poll]
      
      
main.main
  .main__wrapper
    //- Flash messages
    //- =======================================
    .alert Welcome in John Doe! #[a.alert__close(href='#') #[i.fa.fa-close.font-icon]]
    
    .alert Incorrect password! #[a.alert__close(href='#') #[span.fontawesome-remove.font-icon]]
    
    
    //- Home - All polls, hide charts
    //- =======================================
    .card
      .card__title
        h2.h2 #[a.poll-question.toggle-show(href='#') What is your favorite JavaScript library? #[i.fa.fa-line-chart.font-icon.font-icon--small]]
      //- .card__body
      .card__footer
        .poll-stat.clearfix
          span.on-left
            a(href='#') #[i.fa.fa-user.font-icon] #[span.poll-stat__author John Doe]
          span.on-right
            a(href='#') #[i.fa.fa-check-square-o.font-icon] #[span.poll-stat__votes 51]
          
    
    //- Home - All polls, show charts
    //- =======================================
    .card
      .card__title
        h2.h2 #[a.poll-question.toggle-show(href='#') What is your favorite JavaScript library?]
        
      .card__body
      
      .card__footer
        .poll-stat.clearfix
          span.on-left
            a(href='#') #[span.fontawesome-user.font-icon] #[span.poll-stat__author John Doe]
          span.on-right
            a(href='#') #[span.fontawesome-ok.font-icon] #[span.poll-stat__votes 51]
          
       
    //- Poll:poll_id - Vote for poll
    //- =======================================   
    .card
      .card__title
        h2.h2 #[poll-question What is your favorite JavaScript library?]
        
      .card__body
        form.form(method='POST', action='/')
          label.form__label.form__label--bordered #[input(type='radio', name='option', value='react').form__radio] React
          
          label.form__label.form__label--bordered #[input(type='radio', name='option', value='react').form__radio] Vue
          
          label.form__label.form__label--bordered #[input(type='radio', name='option', value='react').form__radio] jQuery
          
          label.form__label.form__label--bordered #[input(type='radio', name='option', value='react').form__radio] Other

          input.form__submit(type='submit', value='Vote')
          
          button.form__submit.form__submt--secondary(type='button') #[i.fa.fa-twitter.font-icon] #[span Tweet]

    
    //- Dashboard - Edit poll
    //- =======================================   
    .card
      .card__title
        h2.h2 #[poll-question What is your favorite JavaScript library?]
        
      .card__body
        form.form
          label.form__label.form__label--bordered #[input(type='radio', name='option', value='react', disabled).form__radio] React
          
          label.form__label.form__label--bordered #[input(type='radio', name='option', value='react', disabled).form__radio] Vue
          
          label.form__label.form__label--bordered #[input(type='radio', name='option', value='react', disabled).form__radio] jQuery
          
          label.form__label.form__label--bordered #[input(type='radio', name='option', value='react', disabled).form__radio] Other
          
      .card__footer
        form.form(method='POST', action='/')
          div
            span.form__add-option Add more options (+)

          input.form__submit.form__submit--disabled(type='submit', value='Save', disabled)
          button.form__submit.form__submit--secondary(type='button') #[i.fa.fa-trash-o.font-icon] #[span Delete]


    
    //- Login
    //- =======================================   
    .card
      .card__title
        h2.h2 Login
        
      .card__body
        form.form(method='GET', action='/')
          label.form__label Username #[input.form__input(type='text', required)]

          label.form__label Password #[input.form__input(type='password', required)]

          input.form__submit(type='submit', value='Login')
          
    
    
    //- Signup
    //- =======================================   
    .card
      .card__title
        h2.h2 Create new account
        
      .card__body
        form.form(method='POST', action='/')
          label.form__label Username #[input.form__input(type='text', required)]

          label.form__label Password #[input.form__input(type='password', required)]

          input.form__submit(type='submit', value='Sign up')

    
    //- Newpoll
    //- =======================================
    .card
      .card__title
        h2.h2 Create new poll
        
      .card__body
        form.form(method='GET', action='/')
          input.form__input(type='text', placeholder='Your poll question',name='question', required)
          
          label.form__label Option 1 #[input.form__input(type='text', required)]

          label.form__label Option 2 #[input.form__input(type='text', required)]
          
          div
            span.form__add-option Add more options (+)

          input.form__submit(type='submit', value='Submit')
          

    

    .card
      .card__title
        h2.h2 Settings - Change password
        
      .card__body
        form.form(method='GET', action='/')
          label.form__label Current password #[input.form__input(type='text', required)]

          label.form__label New password #[input.form__input(type='text', required)]

          input.form__submit(type='submit', value='Update')
          
          
    .card
      .card__title
        h2.h2 Not Found
          
          
          
footer.footer
  .footer__note 2019. #[a.footer__link(href='#') Voting App.] Created by #[a.footer__link(href='https://www.freecodecamp.org/geraldhaxhillari') Gerald Haxhillari]

script.js

var data = {
  labels: ["React", "Vue", "jQuery", "Other"],
  datasets: [
    {
      label: "Number of votes",
      data: [13, 10, 21, 7]
    }
  ]
};

var options = {
  scales: {
    yAxes: [
      {
        // barThickness: 20
        ticks: {
          fontFamily: "'Roboto', 'Helvetica', sans-serif"
          // fontSize: 18
        }
      }
    ]
  },
  legend: {
    display: true,
    labels: {
      fontFamily: "'Roboto', 'Helvetica', sans-serif",
      fontSize: 14
    }
  }
};

var cards = [].slice.call(document.getElementsByClassName("card"));
cards.forEach(function(card) {
  var toggle = card.querySelector(".toggle-show");
  var cardBody = card.querySelector(".card__body");

  if (toggle) {
    toggle.addEventListener("click", function(e) {
      e.preventDefault();

      // cardBody.classList.toggle('is-hidden');

      var ctx = document.createElement("canvas");
      ctx.className = "poll-chart";
      ctx.width = 300;
      ctx.height = 180;

      cardBody.appendChild(ctx);

      var pollChart = new Chart(ctx, {
        type: "horizontalBar",
        data: data,
        options: options
      });
    });
  }
});

var addOptionBtn = document.querySelector('span[class="form__subheading"]');
addOptionBtn.addEventListener("click", function() {
  var form = addOptionBtn.parentNode.parentNode;

  var option = createPollOptionElement(form);
  form.insertBefore(option, addOptionBtn.parentNode);
});

function createPollOptionElement(form) {
  var optionLabel = document.createElement("label"),
    input = document.createElement("input");

  optionLabel.className = "form__label";
  var currentOptions = form.querySelectorAll(".form__label").length;
  optionLabel.textContent = "Option " + ++currentOptions;

  input.className = "form__input";
  input.type = "text";
  input.name = "option";
  input.required = true;

  optionLabel.appendChild(input);

  return optionLabel;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

style.sass

@import url(http://weloveiconfonts.com/api/?family=fontawesome)

/* fontawesome */
[class*="fontawesome-"]:before
  font-family: 'FontAwesome', sans-serif
  

$color-primary: #e8e8e8
$color-primary-dark: #9b9b9b
$color-accent: #838284
$color-secondary: #f7f7f7
$color-white: #fff
$color-primary-text: #4a4a4a


/* Base */
html
  min-width: 320px
  font-size: 100%
  
body
  margin: 0
  font:
    family: 'Roboto', 'Helvetica', sans-serif
    size: 1rem
    weight: 300
  line-height: 1.4
  background-color: $color-secondary
  color: $color-primary-text
    
h2,
.h2
  margin: 0 0 1.5rem
  font:
    size: 1.25rem
    weight: 400
    
    
a
  text-decoration: none
  color: inherit
  

.material-icons
  text-rendering: optimizeLegibility
  
  &.face:before
    content: '\e323'
  
  
  
.font-icon
  margin-right: 0.5em
  
  &:last-child
    margin-left: 0.5em
    margin-right: 0
  
  &--small
    display: inline-block
    font-size: 70%
    line-height: 1
    vertical-align: top
  
  
      
  
/* Components */
.brand-logo
  display: inline-block
  font-weight: 500
  text-transform: uppercase

  
%nav-bar__item
  float: left
  padding-left: 20px
  padding-right: 20px
  font-size: 0.875rem
  font-weight: 400
  transition: background-color 200ms
  cursor: pointer

  &:hover
    background-color: $color-primary
  
  
.nav-bar
  float: right
  @extend %clearfix

  &__dropdown
    @extend %nav-bar__item
    position: relative
    
    &:hover > .dropdown
      display: block
      
    // &::after
    //   content: ''
    //   display: inline-block
    //   width: 0
    //   height: 0
    //   margin-left: 0.5em
    //   vertical-align: middle
    //   border-top: 4px solid $color-primary-text
    //   border-left: 4px solid transparent
    //   border-right: 4px solid transparent
    
  
  &__link
    @extend %nav-bar__item
    
    
.dropdown
  list-style-type: none
  position: absolute
  top: 100%
  right: 0
  display: none
  min-width: 150px
  padding: 0
  border: 1px solid $color-primary
  margin: 0
  background-color: $color-white
  color: $color-accent
  
  &__item
    padding-left: 2em
    padding-right: 2em
    transition: background-color 200ms
    
    &:hover
      background-color: $color-primary
    
    & a
      display: block


.card
  box-sizing: border-box
  border: 1px solid $color-primary
  padding: 2rem 2rem 3rem
  margin: 0 auto
  background-color: $color-white
  
  &:not(:last-child)
    margin-bottom: 1rem
  
  &__footer
    border-top: 1px solid $color-primary
    padding-top: 1rem
    
    
    

.poll-stat
  &__author,
  &__votes
    font-size: 0.875rem
    font-weight: 400

    
.form
  &__label
    display: block
    margin-bottom: 1rem
    font-size: 0.875rem
    font-weight: 400
    
    &--bordered
      height: 32px
      padding-left: 0.5em
      border: 1px solid $color-primary
      border-radius: 3px
      line-height: 32px
    
  &__input
    width: 100%
    height: 32px
    padding: 0
    border: 1px solid $color-primary
    border-radius: 3px
    margin-top: 0.5rem
    font-family: 'Roboto', 'Helvetica', sans-serif
    font-size: 0.875rem
    font-weight: 300
    text-indent: 0.5em
    
    &[name$='question']
      margin-bottom: 1rem
    
    &:focus
      outline: 0
      border-color: $color-accent
       
    
  &__submit
    display: inline-block
    height: 34px
    border: 0
    padding: 0 1.5em
    margin-top: 1rem
    font-family: 'Roboto', 'Helvetica', sans-serif
    font-size: 0.875rem
    font-weight: 400
    line-height: 34px
    background-color: $color-accent
    color: $color-white
    transition: background-color 200ms
    cursor: pointer

    &:hover
      background-color: $color-primary-dark

    &:focus
      outline: 0

    &:not(:last-child)
      margin-right: 1rem

    &--secondary
      border: 1px solid $color-primary-dark
      background-color: $color-white
      color: $color-primary-text

      &:hover
        background-color: rgba($color-accent, 0.3)
        // border: 0
        // color: $color-white
      
    &--disabled
      background-color: $color-primary
      cursor: auto
      
      &:hover
        background-color: $color-primary

    
  &__add-option
    font-size: 0.875rem
    font-weight: 400
    cursor: pointer
    
    
     
.alert
  box-sizing: border-box
  margin-bottom: 1rem
  padding: 1em 2rem
  font-size: 0.875rem
  font-weight: 400
  background-color: $color-primary
  color: rgba($color-primary-text, 0.7)
  
  &__close
    position: relative
    right: -1rem
    float: right  
    padding: 0
    border: 0
    background: 0 0
    cursor: pointer
    
    
/* Utilities */
%clearfix,
.clearfix
  &::after
    content: ''
    display: table
    clear: both
  
.on-left
  float: left
  
.on-right
  float: right
    
    
/* Layout */
.header
  position: fixed
  top: 0
  left: 0
  right: 0
  z-index: 1
  border-bottom: 1px solid $color-primary
  background-color: $color-white
  color: $color-primary-text
  
  &__wrapper
    width: 90%
    max-width: 768px
    height: 50px
    margin: 0 auto
    line-height: 50px
    @extend %clearfix

    
.main
  padding-top: 100px
  padding-bottom: 50px
  
  &__wrapper
    width: 90%
    max-width: 500px
    margin: 0 auto
    
.footer
  padding-top: 1rem
  padding-bottom: 1rem
  font-size: 0.875rem
  text-align: center
  
  &__link
    font-weight: 400
    
    

voting-app.markdown

Voting App

A Pen by Gerald Haxhillari on CodePen.

License.