LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

{{ userRegion === "US" ? 'Resume' : 'CV'}} JSON Builder

Hey there! looks like you want to use my resume template, but arent too sure how to edit that JSON file, or maybe don't know what JSON is. Well no worries, I got you covered!

The form below will generate the required JSON form for the {{ userRegion === "US" ? 'Resume' : 'CV'}} Template I built.

Go ahead and fill it out however you see fit, and hit that generate button.

Lets have a look at you

A Little About you

Social Life

Work History

Nice! here's what we got

This is you

avatar

Nothing. We got nothing. But that's ok~ feel free to download the empty JSON form below, or preview it for some copy & paste action! Your name is {{ fnameSource.value }}, but you'd rather be called {{ nameSource.value }}. You describe yourself as "{{ sDescSource.value }}". You're a {{ occSource.value }} by profession, located in {{ residSource.value }}. You're generally social on {{ link.type }}, but face to face is always better.

Work-wise, you've been at {{ item.name }}{{ $data.work.length === (idx + 1) ? '.' : ', '}}{{ idx === ($data.work.length - 2) ? 'and ' : '' }}

Download JSON
CSS
:host {
  --blue: $blue;
}

#formApp .form-wrap .input-cont label,
#formApp .form-wrap .input-cont_mini label,
#formApp .form-wrap .grouped label {
  position: absolute;
  top: 0;
  left: .5em;
  line-height: 50px;
}

#formApp .form-wrap .input-cont.filled label,
#formApp .form-wrap .input-cont_mini.filled label,
#formApp .form-wrap .grouped.filled label, #formApp .form-wrap .input-cont input:focus + label, #formApp .form-wrap .input-cont textarea:focus + label,
#formApp .form-wrap .input-cont_mini input:focus + label,
#formApp .form-wrap .input-cont_mini textarea:focus + label,
#formApp .form-wrap .grouped input:focus + label,
#formApp .form-wrap .grouped textarea:focus + label {
  font-size: 80%;
  -webkit-transform: translate(3px, -5px);
          transform: translate(3px, -5px);
  line-height: 25px;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

::-moz-selection {
  color: #1155ee;
  background-color: transparent;
}

::selection {
  color: #1155ee;
  background-color: transparent;
}

html, body {
  width: 100%;
  min-height: 100%;
  background-color: #1155ee;
  font-size: calc(6.4px + 0.8125vw);
  padding: 1em;
}

.fade-enter-active, .fade-leave-active,
.list-enter-active, .list-leave-active,
.listLarge-enter-active, .listLarge-leave-active {
  -webkit-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1) all;
  transition: 225ms cubic-bezier(0.4, 0, 0.2, 1) all;
}

.shrink-enter-active, .shrink-leave-active {
  -webkit-transition: opacity 375ms cubic-bezier(0.4, 0, 0.2, 1) 375ms, -webkit-transform 375ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: opacity 375ms cubic-bezier(0.4, 0, 0.2, 1) 375ms, -webkit-transform 375ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 375ms cubic-bezier(0.4, 0, 0.2, 1), opacity 375ms cubic-bezier(0.4, 0, 0.2, 1) 375ms;
  transition: transform 375ms cubic-bezier(0.4, 0, 0.2, 1), opacity 375ms cubic-bezier(0.4, 0, 0.2, 1) 375ms, -webkit-transform 375ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.shrink-enter, .shrink-leave-to {
  opacity: 0;
  -webkit-transform: scale(0.946, 0.963);
          transform: scale(0.946, 0.963);
}

.list-enter, .list-leave-to {
  opacity: 0;
  -webkit-transform: translateY(-20%);
          transform: translateY(-20%);
  margin-bottom: -6%;
}

.listLarge-enter, .listLarge-leave-to {
  opacity: 0;
  -webkit-transform: translateY(-5%);
          transform: translateY(-5%);
}

#ltmWrapper {
  width: 100%;
}

h1 {
  line-height: .8;
  text-transform: uppercase;
  margin-top: 0;
  font-size: 6em;
  font-weight: 900;
  letter-spacing: -4.5px;
}

h2 {
  line-height: .8;
  text-transform: uppercase;
  margin-top: 0;
  font-size: 5em;
  font-weight: 800;
  letter-spacing: -3.75px;
}

h3 {
  line-height: .8;
  text-transform: uppercase;
  margin-top: 0;
  font-size: 4em;
  font-weight: 700;
  letter-spacing: -3px;
}

h4 {
  line-height: .8;
  text-transform: uppercase;
  margin-top: 0;
  font-size: 3em;
  font-weight: 600;
  letter-spacing: -2.25px;
}

h5 {
  line-height: .8;
  text-transform: uppercase;
  margin-top: 0;
  font-size: 2em;
  font-weight: 500;
  letter-spacing: -1.5px;
}

h6 {
  line-height: .8;
  text-transform: uppercase;
  margin-top: 0;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: -0.75px;
}

p {
  margin: 0;
  font-size: 1.5em;
}

a {
  display: inline-block;
  text-decoration: none;
  color: #1155ee;
  font-weight: 700;
}
a:hover {
  color: #eeaa11;
}
a:visited, a:active {
  color: #be880e;
  text-decoration: line-through !important;
}
a::-moz-selection {
  color: #11ee3c;
}
a::selection {
  color: #11ee3c;
}

.button,
button {
  background: none;
  color: #ccc;
  background-color: #eee;
  outline: none;
  border: none;
  padding: .5em 1.5em;
  border-radius: 1px;
  font-weight: 700;
  letter-spacing: -0.94px;
  font-size: 1.2em;
  -webkit-transition: 225ms ease-in-out all;
  transition: 225ms ease-in-out all;
  text-align: center;
  pointer-events: none;
}
.button.primary,
button.primary {
  pointer-events: all;
  cursor: pointer;
  background-color: #1155ee;
  color: #fff;
  -webkit-box-shadow: 0 0 0 0 rgba(30, 30, 30, 0.15);
          box-shadow: 0 0 0 0 rgba(30, 30, 30, 0.15);
}
.button.primary:hover,
button.primary:hover {
  background-color: #0e44be;
  -webkit-box-shadow: 0 8px 18px 0 rgba(30, 30, 30, 0.15);
          box-shadow: 0 8px 18px 0 rgba(30, 30, 30, 0.15);
}
.button.primary:active,
button.primary:active {
  -webkit-box-shadow: 0 4px 8px 0 rgba(30, 30, 30, 0.15);
          box-shadow: 0 4px 8px 0 rgba(30, 30, 30, 0.15);
}
.button.primary::-moz-selection,
button.primary::-moz-selection {
  color: #eeaa11;
}
.button.primary::selection,
button.primary::selection {
  color: #eeaa11;
}
.button.secondary,
button.secondary {
  pointer-events: all;
  cursor: pointer;
  color: #1e1e1e;
  background-color: #fff;
  -webkit-box-shadow: 0 0.5px 1px 0 rgba(30, 30, 30, 0.15);
          box-shadow: 0 0.5px 1px 0 rgba(30, 30, 30, 0.15);
}
.button.secondary:hover,
button.secondary:hover {
  background-color: #f7f7f7;
  -webkit-box-shadow: 0 8px 18px 0 rgba(30, 30, 30, 0.15);
          box-shadow: 0 8px 18px 0 rgba(30, 30, 30, 0.15);
}
.button.secondary:active,
button.secondary:active {
  -webkit-box-shadow: 0 4px 8px 0 rgba(30, 30, 30, 0.15);
          box-shadow: 0 4px 8px 0 rgba(30, 30, 30, 0.15);
}
.button i,
button i {
  margin-left: .3em;
  opacity: .54;
}

label {
  display: block;
  font-weight: 700;
  font-size: 1.5em;
  margin: 0 !important;
  letter-spacing: -1px;
  -webkit-transition: 225ms ease-in-out all;
  transition: 225ms ease-in-out all;
  opacity: .54;
}
label.button {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  text-transform: capitalize;
  opacity: 1;
}

input[type=text],
input[type=email],
textarea {
  width: 100%;
  outline: 0;
  border: 0;
  padding: 0 .5em;
  font-size: 1.3em;
  background-repeat: no-repeat;
  background-size: 200% 2px ;
  -webkit-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1) background-position ;
  transition: 225ms cubic-bezier(0.4, 0, 0.2, 1) background-position ;
  background-image: -webkit-gradient(linear, left top, right top, from(#1155ee), color-stop(50%, #1155ee), color-stop(50%, #eee), to(#eee));
  background-image: linear-gradient(to right, #1155ee 0%, #1155ee 50%, #eee 50%, #eee 100%);
  background-position: 101% 100% ;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  background-position: 0% 100% ;
}
input[type=text] + label,
input[type=email] + label,
textarea + label {
  pointer-events: none;
}

@media screen and (max-width: 786px) {
  input[type=text],
  input[type=email],
  textarea {
    background-repeat: no-repeat;
    background-size: 0% 2px, 100% 2px  !important;
    -webkit-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1) background-size  !important;
    transition: 225ms cubic-bezier(0.4, 0, 0.2, 1) background-size  !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1155ee), to(#1155ee)), -webkit-gradient(linear, left top, left bottom, from(#eee), to(#eee));
    background-image: linear-gradient(#1155ee 0%, #1155ee 100%), linear-gradient(#eee 0%, #eee 100%);
    background-position: 50% 100%  !important;
  }
  input[type=text]:focus,
  input[type=email]:focus,
  textarea:focus {
    background-size: 100% 2px, 100% 2px  !important;
  }
}
input[type=file] {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1px;
  visibility: hidden;
  margin: 0;
  opacity: 0;
}

input[type=text],
input[type=email] {
  height: 50px;
}

textarea {
  padding-top: .5em;
}

#formApp {
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  padding: 1em;
}
#formApp * + * {
  margin-top: 1em;
}
#formApp .header-wrap,
#formApp .form-wrap,
#formApp .generated-wrap,
#formApp .output-wrap {
  max-width: 65em;
  margin: 0 auto;
  padding: 0 0 3em 0;
}
#formApp .header-wrap svg {
  width: 100%;
  max-width: 8em;
  margin-bottom: -3em;
}
#formApp .header-wrap svg:hover * {
  fill: #1155ee;
}
#formApp .form-wrap h1, #formApp .form-wrap h2, #formApp .form-wrap h3, #formApp .form-wrap h4, #formApp .form-wrap h5, #formApp .form-wrap h6 {
  margin: .7em 0;
}
#formApp .form-wrap h3 {
  margin-bottom: 0;
}
#formApp .form-wrap .input-cont,
#formApp .form-wrap .input-cont_mini,
#formApp .form-wrap .grouped {
  position: relative;
  display: block;
  width: 100%;
}
#formApp .form-wrap .input-cont.concat,
#formApp .form-wrap .input-cont_mini.concat,
#formApp .form-wrap .grouped.concat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#formApp .form-wrap .input-cont.concat .grouped,
#formApp .form-wrap .input-cont_mini.concat .grouped,
#formApp .form-wrap .grouped.concat .grouped {
  margin: 0;
}
#formApp .form-wrap .input-cont.concat .grouped + .grouped,
#formApp .form-wrap .input-cont_mini.concat .grouped + .grouped,
#formApp .form-wrap .grouped.concat .grouped + .grouped {
  margin-left: 1em;
}
#formApp .form-wrap .input-cont.concat .grouped:first-child,
#formApp .form-wrap .input-cont_mini.concat .grouped:first-child,
#formApp .form-wrap .grouped.concat .grouped:first-child {
  text-transform: lowercase;
}
#formApp .form-wrap .input-cont .remove-group,
#formApp .form-wrap .input-cont_mini .remove-group,
#formApp .form-wrap .grouped .remove-group {
  cursor: pointer;
  position: relative;
  min-width: 50px;
  height: 50px;
  line-height: 46px;
  -ms-flex-preferred-size: 6%;
      flex-basis: 6%;
  text-align: center;
  padding: 0 10px;
  -webkit-transition: 225ms ease-in-out all;
  transition: 225ms ease-in-out all;
  background-color: #fff;
  color: #333;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  border: 2px solid rgba(204, 0, 0, 0);
  z-index: 2;
}
#formApp .form-wrap .input-cont .remove-group:hover,
#formApp .form-wrap .input-cont_mini .remove-group:hover,
#formApp .form-wrap .grouped .remove-group:hover {
  color: #c00;
  border: 2px solid #cc0000;
}
#formApp .form-wrap .input-cont .remove-group:hover ~ .grouped input, #formApp .form-wrap .input-cont .remove-group:hover ~ .grouped textarea,
#formApp .form-wrap .input-cont_mini .remove-group:hover ~ .grouped input,
#formApp .form-wrap .input-cont_mini .remove-group:hover ~ .grouped textarea,
#formApp .form-wrap .grouped .remove-group:hover ~ .grouped input,
#formApp .form-wrap .grouped .remove-group:hover ~ .grouped textarea {
  background-color: rgba(204, 0, 0, 0.15);
  -webkit-transition: 225ms ease-in-out all;
  transition: 225ms ease-in-out all;
}
#formApp .form-wrap .input-cont .remove-group span,
#formApp .form-wrap .input-cont_mini .remove-group span,
#formApp .form-wrap .grouped .remove-group span {
  line-height: 1;
  margin-left: 10px;
  font-family: sans-serif;
  font-weight: 800;
}
#formApp .form-wrap .input-cont.filled label,
#formApp .form-wrap .input-cont_mini.filled label,
#formApp .form-wrap .grouped.filled label {
  opacity: .3;
}
#formApp .form-wrap .input-cont.disabled,
#formApp .form-wrap .input-cont_mini.disabled,
#formApp .form-wrap .grouped.disabled {
  opacity: .54;
  pointer-events: none;
}
#formApp .form-wrap .input-cont .social-validator,
#formApp .form-wrap .input-cont_mini .social-validator,
#formApp .form-wrap .grouped .social-validator {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 0;
  font-size: 1.5em;
  opacity: 0.54;
}
#formApp .form-wrap .input-cont_mini + .input-cont_mini {
  margin-top: 2em;
}
#formApp .form-wrap .work-group .input-cont_mini {
  -webkit-box-shadow: 0 0.5px 1px 0 rgba(30, 30, 30, 0.15);
          box-shadow: 0 0.5px 1px 0 rgba(30, 30, 30, 0.15);
  padding: 10px;
}
#formApp .form-wrap .work-group .input-cont_mini .remove-group + .grouped {
  margin-top: 10px;
}
#formApp .generated-wrap .output-content p a {
  margin: 0;
}
#formApp .generated-wrap .output-content img {
  width: 100px;
}
#formApp .output-wrap .button,
#formApp .output-wrap button {
  margin: 0;
}
#formApp .output-wrap .button + button, #formApp .output-wrap .button + .button,
#formApp .output-wrap button + button,
#formApp .output-wrap button + .button {
  margin-left: 1em;
}
#formApp .footer {
  cursor: default;
  font-family: monospace;
  width: 100%;
  display: inline-block;
  text-align: center;
  color: #a2a2a2;
}
#formApp .footer i {
  display: inline-block;
  vertical-align: 2px;
  color: #c00;
  font-size: .7em;
}
#formApp .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 2em;
  margin: 0;
}
#formApp .modal .content-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 2px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 0 1px #ccc, 0 10px 20px rgba(30, 30, 30, 0.15);
          box-shadow: 0 0 0 1px #ccc, 0 10px 20px rgba(30, 30, 30, 0.15);
}
#formApp .modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 1em;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
}
#formApp .modal-header h2 {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-weight: 700;
  font-size: 1.5em;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  letter-spacing: -1px;
  margin: 0;
}
#formApp .modal-header [class*="close"] {
  cursor: pointer;
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  text-align: center;
  font-size: 1.1em;
  margin: 0;
  color: rgba(17, 17, 17, 0.54);
}
#formApp .modal-header [class*="close"]:hover {
  color: #111;
}
#formApp .modal-body {
  padding: 1em;
}
#formApp .modal-body pre {
  width: 100%;
  height: 80%;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  background-color: #333;
  color: #fff;
  padding: .5em;
  max-height: 400px;
  line-height: 1.5;
  overflow: auto;
}
#formApp .modal-body pre::-moz-selection {
  background-color: rgba(255, 255, 255, 0.7) !important;
  color: #333;
}
#formApp .modal-body pre::selection {
  background-color: rgba(255, 255, 255, 0.7) !important;
  color: #333;
}
#formApp .modal-footer {
  display: none;
}
#formApp .loading-cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  top: 0;
  left: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
}
#formApp .loading-cont .load {
  position: relative;
  width: 5em;
  height: 5em;
}
#formApp .loading-cont .load .block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.2em solid #1155ee;
  margin: 0;
  background-color: transparent;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: spin 3s ease-in-out infinite;
          animation: spin 3s ease-in-out infinite;
}
#formApp .loading-cont .load .block:nth-child(2) {
  -webkit-animation-delay: 240ms;
          animation-delay: 240ms;
}
#formApp .loading-cont .load .block:nth-child(3) {
  -webkit-animation-delay: 360ms;
          animation-delay: 360ms;
}
#formApp .loading-cont .load .block:nth-child(4) {
  -webkit-animation-delay: 480ms;
          animation-delay: 480ms;
}
#formApp .loading-cont .load span {
  display: inline-block;
  color: #1155ee;
  font-weight: 800;
  line-height: 5em;
  font-size: 1em;
  width: 100%;
  text-align: center;
  margin: 0;
  font-family: 'arial condensed';
}

@media screen and (max-width: 786px) {
  html, body {
    font-size: calc(3.9591836735px + 2.0408163265vw);
    padding: .4em;
  }

  h1 {
    font-size: 4.2em;
    letter-spacing: -3.15px;
  }

  h2 {
    font-size: 3.2em;
    letter-spacing: -2.4px;
  }

  h3 {
    font-size: 2.2em;
    letter-spacing: -1.65px;
  }

  h4 {
    font-size: 1.2em;
    letter-spacing: -0.9px;
  }

  h5 {
    font-size: 0.2em;
    letter-spacing: -0.15px;
  }

  h6 {
    font-size: -0.8em;
    letter-spacing: 0.6px;
  }

  .button,
  button {
    width: 100%;
    font-size: 1.6em;
  }
  .button + .button,
  .button + button,
  button + .button,
  button + button {
    margin-left: 0 !important;
    margin-top: 1em !important;
  }

  #formApp .form-wrap .input-cont_mini .remove-group,
  #formApp .form-wrap .grouped .remove-group {
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    opacity: 1;
    visibility: visible;
  }
  #formApp .form-wrap .input-cont_mini.concat,
  #formApp .form-wrap .grouped.concat {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #formApp .form-wrap .input-cont_mini.concat .grouped + .grouped,
  #formApp .form-wrap .grouped.concat .grouped + .grouped {
    margin-left: 0;
    margin-top: 1em;
  }
  #formApp .form-wrap .input-cont_mini .remove-group ~ .grouped {
    width: 100%;
    padding-left: 60px;
  }
  #formApp .form-wrap .input-cont_mini .remove-group ~ .grouped label {
    left: 60px;
  }
  #formApp .form-wrap .input-cont_mini:hover .remove-group {
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
  #formApp .modal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding: .3em;
  }
  #formApp .modal-header {
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  #formApp .modal-header h2 {
    height: 60px;
    line-height: 60px;
  }
  #formApp .modal-header [class*="close"] {
    display: none;
  }
  #formApp .modal-body {
    padding: 0 1em;
  }
  #formApp .modal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 60px;
    border-top: 1px solid #ddd;
  }
  #formApp .modal-footer .mobile-close {
    width: 100%;
    text-align: center;
    line-height: 60px;
    font-size: 1.3em;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.54);
  }
  #formApp .modal-footer .mobile-close:focus {
    color: #111;
  }
  #formApp .modal-footer div {
    background-color: #fff;
    padding: 0;
  }
  #formApp .modal-footer div + div {
    border-left: 1px solid #ddd;
  }
}
@media screen and (max-width: 320px) {
  body, html {
    height: 100%;
    background-color: #c00;
  }

  .header-wrap,
  .outer-wrap,
  .form-wrap,
  .output-wrap,
  #formApp .footer {
    display: none;
  }

  #formApp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
  }
  #formApp:before {
    content: 'Oh noez~ looks like your resolution is too small :( This site is best viewed in resolutions above 320px.';
    font-size: 2em;
    color: #333;
    text-align: center;
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
JS
let form = new Vue({
	el: '#formApp',
  data: {
		avatarSource: {
			name: 'or Paste an Link to your photo (.jpg, .png)',
			error: false,
			value: ''
		},
		avatarSource2: {
			name: 'Upload a Photo',
			error: false,
			value: ''
		},
		nameSource: {
			name: 'Name / Nickname',
			error: false,
			value: ''
		},
		fnameSource: {
			name: 'Full Name',
			error: false,
			value: ''
		},
		sDescSource: {
			name: 'How would you describe yourself?',
			error: false,
			value: ''
		},
		occSource: {
			name: 'Occupation',
			error: false,
			value: ''
		},
		residSource: {
			name: 'Residence',
			error: false,
			value: ''
		},
		dateupSource: {
			name: '',
			error: false,
			value: ''
		},
		social: [],
		work: [],
		loaded: false,
		formsGenerated: false,
		showDownload: false,
		JSONoutput: [],
		JSONoutputfile: '',
		showJSON: false,
		userRegion: '',
		uploadedImage: false
	},
	methods: {
		regionDetect: function() {
			this.$http.get("https://ipinfo.io").then(response => {
				let locData = response.body;
				this.userRegion = locData.country;
			});
		},
		addSocialLink: function(idx) {
			this.social.push({
				type: {
					name: 'Network',
					value: ''
				},
				url: {
					name: 'Network Url',
					value: ''
				}
			});
		},
		focusNext: function(e){
			let parent = e.target.parentNode;
			let siblingInput = parent.nextElementSibling.children[0];
			if(siblingInput) {
				let siblingIsInput = siblingInput.nodeName === 'INPUT',
						siblingIsTArea = siblingInput.nodeName === 'TEXTAREA';
				if(siblingIsInput || siblingIsTArea) {
					return siblingInput.focus();
				} else {
					return;
				}
			}
			return;
		},
		unfocus: function(e){
			const tmp = document.createElement('input');
			e.target.parentNode.appendChild(tmp);
			tmp.focus();
			e.target.parentNode.removeChild(tmp);
		},
		autoHttps: function(e) {
			if (!e.target.value.startsWith("https://")) {
				return e.target.value = "https://" + e.target.value;
			} else {
				return false;
			}
		},
		addWork: function(idx) {
      this.work.push({
				name: {
					label: 'Company Name',
					value: ''
				},
				duration: {
					label: 'How Long did you work here?',
					value: ''
				},
				description: {
					label: 'What did you do here?',
					value: ''
				},
				url: {
					label: 'Company url?',
					value: ''
				}
			});
    },
		removeSocialGroup: function(item, idx) {
			if (this.social.length != 1) {
				this.social.splice(idx, 1);
			} else {
				this.social = [];
			}
		},
		removeWorkGroup: function(item, idx) {
			if (this.work.length != 1) {
				this.work.splice(idx, 1);
			} else {
				this.work = [];
			}
		},
		catboxme: function(){
			this.$http.post("https://catbox.moe/user/api.php").then(response => {
				// console.log(response.status, response.body);
			});
		},
		onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.createImage(files[0]);
			this.avatarSource.value = 'Photo Uploaded';
    },
		createImage(file) {
			// base64 solution
      var image = new Image();
      var reader = new FileReader();
      var vm = this;

      reader.onload = (e) => {
        vm.avatarSource2.value = e.target.result;
				vm.avatarSource2.name = 'Remove Photo';
				vm.uploadedImage = true;
				console.log(vm.avatarSource2.value);
      };
      reader.readAsDataURL(file);
    },
		removeUpload: function() {
			this.uploadedImage = false;
			this.avatarSource2.value = '';
			this.avatarSource2.name = 'Upload a Photo';
			this.avatarSource.value = '';
		},
		generateData: function() {
			let allForms = [];
			let date = new Date(),
					dd = date.getDate(),
					mm = date.getMonth()+1,
					yyyy = date.getFullYear(),
					today = yyyy + '-' + mm + '-' + dd;
			if (this.social !== []) {
				for (let i in this.social) {
					this.social[i].type = this.social[i].type.value.toLowerCase().trim();
					this.social[i].url = this.social[i].url.value;
				}
			}
			if (this.work !== []) {
				for (let i in this.work) {
					this.work[i].name = this.work[i].name.value;
					this.work[i].duration = this.work[i].duration.value;
					this.work[i].description = this.work[i].description.value;
					this.work[i].url = this.work[i].url.value;
				}
			}
			if (this.uploadedImage) {
				this.avatarSource.value = this.avatarSource2.value;
			}
			allForms.push({
				av: this.avatarSource.value,
				name: this.nameSource.value,
				name_full: this.fnameSource.value,
				desc_small: this.sDescSource.value,
				occupation: this.occSource.value,
				residence: this.residSource.value,
				social: this.social,
				work: this.work,
				date_updated: today
			});
			let data = JSON.stringify(allForms, undefined, 2);
			this.JSONoutput = data.substring(1, data .length-1);
			this.formsGenerated = true;
			this.JSONoutputfile = "data:text/json;charset=utf-8," + encodeURIComponent(this.JSONoutput);
			return false;
		},
		modalToggle: function() {
			this.showJSON = !this.showJSON;
		},
		resetForm: function() {
			this.formsGenerated = false;
			this.removeUpload();
			this.avatarSource.value = '';
			this.nameSource.value = '';
			this.fnameSource.value = '';
			this.sDescSource.value = '';
			this.occSource.value = '';
			this.residSource.value = '';
			this.social = [];
			this.work = [];
		}
	},
	mounted: function(){
		this.regionDetect();
		this.loaded = true;
	},
	components: {
		'logo': {
			template: `
				
						
								
						
						LTM__logo
						
								
								
								
						
				`
		},
		'loader': {
			template: `
			
LDNG
` } } });
Term
Wed, 12/27/2017 - 06:58

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv