CodePen Embed - Resume Builder


<div id="javascript_header"></div>
<form>
  <div class="form__header">
    <h1>Build Your Resume</h1>
    <p>Enter the fields below to generate an html resume</p>
  </div>

  <h2>Personal Details</h2>

  <div class="form-group">
    <label for="name">Full Name <span>*</span></label>
    <input type="text" name="name" id="name" placeholder="Robert Norman Ross">
    <div id="name__error" class="error"></div>
  </div>

  <div class="form-group">
    <label for="address">Address</label>
    <input type="text" name="address" id="address" placeholder="4059 Mt Lee Dr. Hollywood, CA 90068">
  </div>

  <div class="form-group">
    <label for="phone">Phone</label>
    <input type="text" name="phone" id="phone" placeholder="+1  123 456 7890">
  </div>

  <div class="form-group">
    <label for="email">Email <span>*</span></label>
    <input type="text" name="email" id="email" placeholder="example@mail.com">
    <div id="email__error" class="error"></div>
  </div>

  <div class="form-group">
    <label for="about">About You</label>
    <textarea name="about" id="about"
              placeholder="Three or four sentences about your personality, work ethic, interests, and/or more"></textarea>
  </div>

  <div class="form-group">
    <label for="career">Career Objectives</label>
    <textarea name="career" id="career"
              placeholder="One or two sentences about what you wish to accomplish in your career"></textarea>
  </div>

  <div class="form-group">
    <label for="education">Education</label>
    <textarea name="education" id="education"
              placeholder="List any completed high school, college, or other educational programs"></textarea>
  </div>

  <div class="line-break"></div>

  <h2>Work Experience</h2>

  <h3>Most Recent Job</h3>

  <div class="form-date-group">
    <div class="form-group">
      <label for="job-1__start">Start Date</label>
      <input type="date" name="job-1__start" id="job-1__start">
    </div>
    <div class="form-group">
      <label for="job-1__end">End Date</label>
      <input type="date" name="job-1__end" id="job-1__end">
    </div>
  </div>

  <div class="form-group">
    <label for="job-1__details">Position Details</label>
    <textarea name="job-1__details" id="job-1__details"></textarea>
  </div>

  <div class="line-break"></div>

  <h3>Past Job</h3>

  <div class="form-date-group">
    <div class="form-group">
      <label for="job-2__start">Start Date</label>
      <input type="date" name="job-2__start" id="job-2__start">
    </div>
    <div class="form-group">
      <label for="job-2__end">End Date</label>
      <input type="date" name="job-2__end" id="job-2__end">
    </div>
  </div>

  <div class="form-group">
    <label for="job-2__details">Position Details</label>
    <textarea name="job-2__details" id="job-2__details"></textarea>
  </div>

  <div class="line-break"></div>

  <h3>Another Past Job</h3>

  <div class="form-date-group">
    <div class="form-group">
      <label for="job-3__start">Start Date</label>
      <input type="date" name="job-3__start" id="job-3__start">
    </div>
    <div class="form-group">
      <label for="job-3__end">End Date</label>
      <input type="date" name="job-3__end" id="job-3__end">
    </div>
  </div>

  <div class="form-group">
    <label for="job-3__details">Position Details</label>
    <textarea name="job-3__details" id="job-3__details"></textarea>
  </div>

  <div class="line-break"></div>

  <div class="form-group">
    <label for="references">References</label>
    <textarea name="references" id="references"></textarea>
  </div>

  <div class="line-break"></div>

  <input type="submit" value="Create Resume" id="create-resume">
</form>

@import url('https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap');

html {
  background: #E0F2F1;
}

body,
form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body {
  padding: 32px 0px;
  padding-bottom: 128px;
}

body,
h1,
h2,
h3,
h4,
p {
  margin: 0px;
}

form {
  padding-bottom: 16px;
  font-family: 'Poppins', sans-serif;
  background: white;
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.14);
}

.form__header {
  padding: 32px 0;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.form__header h1 {
  font-size: 1.5rem;
  margin-bottom: 8px
}

.form__header p {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.5);
}

form h2 {
  margin-top: 24px;
  margin-bottom: 16px;
  width: 100%;
  font-size: 1.25rem;
  text-align: center;
}

form h3 {
  box-sizing: border-box;
  border-left: 3px solid transparent;
  margin-top: 24px;
  padding: 0px 32px;
  width: 100%;
  font-size: 1.10rem;
  text-align: left;
}

.form-group {
  box-sizing: border-box;
  width: 100%;
  padding: 24px 32px;
  border-left: 3px solid transparent;
  transition: 0.2s all;
}

.form-group:hover {
  border-left: 3px solid #64FFDA;
}

.form-date-group {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 24px 32px;
  border-left: 3px solid transparent;
  transition: 0.2s all;
}

.form-date-group:hover {
  border-left: 3px solid #64FFDA;
}

.form-date-group .form-group {
  padding: 0px;
}

.form-date-group .form-group:hover {
  border-left: 3px solid transparent;
}

.form-group label {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.7);
  display: block;
}

.form-group label span {
  color: red;
}

form .line-break {
  width: 100%;
  height: 1px;
  margin: 16px auto;
  border-bottom: 1px solid #eee;
}

input[type=text]::placeholder,
input[type=date]::placeholder,
textarea::placeholder {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
}

input[type=text],
input[type=date],
textarea {
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  box-sizing: border-box;
  padding: 8px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  transition: 0.2s border;
  width: 100%;
  font-size: 1rem;
}

textarea {
  max-width: 533px;
}

input[type=text]:focus,
input[type=date]:focus,
textarea:focus {
  outline: none;
  border-color: #1DE9B6;
}

input[type=submit] {
  background: #1DE9B6;
  padding: 8px 16px;
  color: white;
  font-weight: bold;
  font-family: inherit;
  letter-spacing: 0.3px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  outline: none;
  transition: 0.2s all;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.00), 0 1px 2px rgba(0, 0, 0, 0.00);
}

input[type=submit]:hover {
  margin-top: -1px;
  margin-bottom: 1px;
  background: #64FFDA;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.14);
}

input[type=submit]:active {
  background: #00bfa5;
  margin-top: 0px;
  margin-bottom: 0px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.00), 0 1px 2px rgba(0, 0, 0, 0.00);

}

.error__input {
  border-color: red !important;
}

.error {
  color: red;
}

const getState = () => {
  const $ = (element) => {
    return document.getElementById(element).value
  }

  const state = {
    name: $('name'),
    address: $('address'),
    phone: $('phone'),
    email: $('email'),
    about: $('about'),
    career: $('career'),
    education: $('education'),
    job1: {
      date: {
        start: $('job-1__start'),
        end: $('job-1__end')
      },
      details: $('job-1__details')
    },
    job2: {
      date: {
        start: $('job-2__start'),
        end: $('job-2__end')
      },
      details: $('job-2__details')
    },
    job3: {
      date: {
        start: $('job-3__start'),
        end: $('job-3__end')
      },
      details: $('job-3__details')
    },
    references: $('references')
  }
  return state
}

const buildResume = (state) => {
  const $ = (value) => {
    document.write(value)
  }

  const styleText = `
@import url('https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap');

body {
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
  color: rgba(0,0,0,0.75);
}

h1 {
  color: rgba(0,0,0,0.9);
}

h1, p {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px 24px;
}

.line-break {
  width: 100%;
  height: 1px;
  margin: 16px auto;
  border-bottom: 1px solid #eee;
}

.resume {
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 48px auto;
  padding: 16px 0px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.14);
}

.resume-group {
  box-sizing: border-box;
  padding: 8px 0px;
  width: 100%;
  display: flex;
  border-left: 3px solid transparent;
  transition: 0.2s;
}

.resume-group:hover {
  border-left: 3px solid #64FFDA;
}

.left-col {
  width: 35%;
}

.right-col {
  width: 65%;
}

.instructions {
  opacity: 0.5;
  text-align: center;
  font-size: 0.8rem;
  margin: 16px auto;
}
`


  const createGroup = (left, right) => {
    $('<div class="resume-group">')
    $('<div class="left-col">')
    $('<p>' + left + '</p>')
    $('</div>')
    $('<div class="right-col">')
    $('<p>' + right + '</p>')
    $('</div>')
    $('</div>')
  }

  document.open()
  $('<html><head>')
  $('<title>' + state.name + "'s Resume </title>")
  $('<style>' + styleText + '</style>')
  $('</head><body><div class="resume">')
  $('<h1>' + state.name + '</h1>')
  $('<p>' + state.email + '</p>')
  $('<p>' + state.phone + '</p>')
  $('<p>' + state.address + '</p>')
  $('<div class="line-break"></div>')
  createGroup('ABOUT ME', state.about)
  createGroup("CAREER OBJECTIVES", state.career)
  createGroup('EDUCATION', state.education)
  createGroup('EMPLOYMENT EXPERIENCE', '')
  createGroup(state.job1.date.start + ' to ' + state.job1.date.end, state.job1.details)
  createGroup(state.job2.date.start + ' to ' + state.job2.date.end, state.job2.details)
  createGroup(state.job3.date.start + ' to ' + state.job3.date.end, state.job3.details)
  createGroup('REFERENCES', state.references)
  $('</div>')
  $('<div class="instructions">Right click the page and "Save As..." to make a copy of this resume</div>')
  $('</body></html>')
  document.close()
}



const checkName = () => {
  const name = document.getElementById('name')
  const name_error = document.getElementById('name__error')
  const isValid = !!name.value
  if (!isValid) {
    name.classList.add("error__input")
    name_error.style.display = "block"
    name_error.innerHTML = "The name field is required"
    console.log("error")
  } else {
    name.classList.remove("error__input")
    name_error.style.display = "none"
  }
  return isValid
}

const checkEmail = () => {
  const email = document.getElementById('email')
  const email_error = document.getElementById('email__error')
  const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  const isValid = emailRegex.test(String(email.value).toLowerCase())
  if (!email.value) {
    email.classList.add("error__input")
    email_error.style.display = "block"
    email_error.innerHTML = "The email field is required"
  } else {
    if (!isValid) {
      email.classList.add("error__input")
      email_error.style.display = "block"
      email_error.innerHTML = "The email entered is invalid"
    } else {
      email.classList.remove("error__input")
      email_error.style.display = "none"
    }
  }
  return isValid
}

const checkValidity = () => {
  const nameIsValid = checkName()
  const emailIsValid = checkEmail()
  if (!nameIsValid) {
    location.hash = "#name"
  } else if (!emailIsValid) {
    location.hash = "#email"
  }
  return nameIsValid && emailIsValid
}

document.getElementById('create-resume').addEventListener("click", (e) => {
  e.preventDefault()
  const isValid = checkValidity()
  if (isValid) buildResume(getState())
})

document.getElementById('name').addEventListener('blur', checkName)

document.getElementById('email').addEventListener('blur', checkEmail)

This Pen is owned by Trevor Welch on CodePen.

See more by @TrevorWelch on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.