Answer to Question #266271 in HTML/JavaScript Web Application for siva valluri

Question

Answer to Question #266271 in HTML/JavaScript Web Application for siva valluri

Question #266271

Create a web site for your curriculum vitae. You must use a two-column layout and second column must be the navigation bar.

Expert's answer

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ name }}. {{ title }}</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container page">
    <div class="row">
        <div class="col-md-6 col-print-6">
            <h1>{{ name }}<br/>{{ title }}</h1>
            <p>
                <time datetime="{{ buildinfo.date }}" class="text-muted">Last update: {{ updated }}</time>
            </p>
            <p>
                <span class="screen"><a href="{{ pdfFileName }}"><i class="fa fa-file-pdf-o" aria-hidden="true"></i>Download PDF version</a></span>
                <span class="print">The online version is available at <a href="{{ baseUrl }}" class="text-nowrap"><i
                    class="fa fa-github" aria-hidden="true"></i>{{ baseUrl }}</a></span>
            </p>
        </div>
        <div class="col-md-6 col-print-6">
            <dl class="row">
                {{#each facts}}
                <dt class="col-md-3">{{ @key }}</dt>
                <dd class="col-md-9">{{{ this }}}</dd>
                {{/each}}
            </dl>
        </div>
    </div>


    <h3 class="screen">Skills</h3>
    <div class="row mb-4">
        {{#each skills}}
        <div class="col-print-1 col-3 col-md-2 col-lg-1 text-right">
            <small>{{ this.[0] }}</small>
        </div>
        <div class="col-print-1 col-3 col-md-2 col-lg-1">
            {{ this.[1] }}
        </div>
        {{/each}}
    </div>


    <p>
        English poet, playwright and actor, widely regarded as the greatest writer in the English language
        and the world's pre-eminent dramatist. Often called England's national poet and the "Bard of Avon".
        My extant work is including collaborations, consist of approximately 38 plays, 154 sonnets,
        two long narrative poems and a few other verses, some of uncertain authorship.
    </p>


    <h2>Professional Experience</h2>
    {{#each plays}}
    <div class="card mb-4">
        <div class="card-body">
            <h3>{{ title }}</h3>
            <p class="text-muted">{{ written }}</p>


            {{{markdown contents }}}


            <div>
                {{#each badges }}
                <span class="badge badge-primary">{{ this }}</span>
                {{/each}}
            </div>
        </div>
    </div>
    {{/each}}


    <h2>Education</h2>
    <p>King Edward VI Grammar School in Stratford-upon-Avon [1571 - 1578]</p>


    <h2>Additional Experience</h2>


    {{#each experience}}
    <div class="card mt-4">
        <div class="card-body">
            <div class="mb-2"><strong>{{ header }}</strong></div>


            {{{markdown contents }}}


            <div>
                {{#each skills }}
                <span class="badge badge-primary">{{ this }}</span>
                {{/each}}
            </div>
        </div>
    </div>
    {{/each}}
</div>
</body>
</html>

styles.css

@media print {
    body {
        font-size: 19px;
    }


    .screen {
        display: none;
    }


    .card {
        border: none;
    }


    .card-body {
        padding: 0;
    }


    .badge {
        border: 0.07rem solid #868e96;
    }


    .badge-primary {
        color: inherit;
        background-color: inherit;
    }
}


@media not print {
    .print {
        display: none;
    }


    @media (min-width: 576px) {
        .page {
            margin-top: 10px;
            margin-bottom: 10px;
            box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.75);
            position: relative;
            padding: 32px;
        }
    }


    h1, h2, h3, h4 {
        font-weight: 300;
    }


    h2 {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }


    dt {
        font-weight: normal;
    }


    strong {
        font-weight: 500;
    }
}


a .fa {
    text-decoration: none !important;
    margin-right: 5px;
}


.badge {
    font-weight: normal;
    letter-spacing: 0.05rem;
}


@media print {
    .col-print-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }


    .col-print-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }


    .col-print-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }


    .col-print-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }


    .col-print-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }


    .col-print-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }


    .col-print-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }


    .col-print-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }


    .col-print-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }


    .col-print-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }


    .col-print-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }


    .col-print-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

js

const fs = require('fs');
const pdf = require('html-pdf');


module.exports = function buildPdf(input, output) {
  const html = fs.readFileSync(input, 'utf8');
  const options = {
    format: 'A4',
    orientation: 'portrait',
    border: '2.54cm',
  };


  return new Promise((resolve, reject) => {
    pdf.create(html, options).toFile(output, function (err) {
      if (err) {
        console.log(err);
        reject(err);
      }
      resolve();
    });
  })
}

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #266271 in HTML/JavaScript Web Application for siva valluri

Comments

Leave a comment

Related Questions