PptxGenJS-Demo

Home: https://github.com/gitbrent/PptxGenJS/

by Shirly Manor

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@latest/dist/pptxgen.min.js"></script>
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="./favicon-32x32.png" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ROI Calculator</title>
  <script>
    function sumInputs() {
    var sum = 0;
    var resultDiv = document.getElementById('results');
    var company = document.getElementById('company').value;
    var arr = document.getElementById('arr').value;
    var assrr = document.getElementById('assrr').value;
    var unadj = document.getElementById('unadj');
    var montsavelow = document.getElementById('montsavelow');
    var montsavemed = document.getElementById('montsavemed');
    var montsavehigh = document.getElementById('montsavehigh');
   montsavelow.value = Math.round(((arr*(assrr*7))/12), 0) 
   sum = arr * assrr/100 
   montsavemed.value = Math.round(((arr*(assrr*11))/12), 0) 
    montsavehigh.value = Math.round(((arr*(assrr*15))/12), 0) 
   unadj.value = Math.round((arr * assrr/100)/12)
    alert(sum)
  resultDiv.textContent =  unadj.value;
  const inputElements = document.querySelectorAll('.arr input');
  inputElements.forEach((input) => {
    sum += Number(input.value);
  });
  
 
}
   
  </script>
</head>

<body>
    
    <div class="container">
        <div class="inputs">
          <div class="arr">
                <p>Company name:</p>
                <input...

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
    /* Colors */
:root {
    --bord-background-color--: #00474b;
    --nums--color--: #26c2ad;
    --light-color--: #9fe8e0;
    --input-color--: #dddedf;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    appearance: none;
}

body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #c5e4e7;
    height: 100vh;
    font-family: monospace;
}

.container {
    width: 80%;
    height: 900px;
    background-color: #fff;
    border-radius: 30px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
}
.container > div {
    flex-basis: calc(95% / 2);
}

    /* The Results Side */
.results {
    background-color: var(--bord-background-color--);
    border-radius: 25px;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.up > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.up div:nth-child(1) {
    margin: 15px 0;
}
.results p:nth-child(1) {
    margin-bottom: 6px;
    color: white;
    font-weight: bold;
    font-size: 20px;
}
.results p:nth-child(2) {
    color: #ffffff70;
    font-size: 14px;
}
.amount {
    color: var(--nums--color--);
    font-size: 35px;
    font-weight: bold;
}

.results button {
    padding: 15px;
    font-weight: bold;
    color: var(--bord-background-color--);
    border: 0;
    background-color: var(--nums--color--);
    font-size: 18px;
    border-radius: 6px;
}

/* The Inputs Side */

.inputs > div {
    margin: 15px 0;
    position: relative;
}
.inputs p {
    font-size: 15px;
    font-weight: bold;
}
.inputs .arr input , .num-persons input{
    display: block;
    width: 95%;
    margin: 10px;
    padding: 5px 20px;
    text-align: right;
    position: relative;
    border: 0;
    background: #f3f8fb;
    border-radius: 6px;
    font-size: 25px;
    font-family:...

JavaScript

let pptx = new PptxGenJS();
$('small').before('<code class="d-block text-black-50 mb-3">(pptxgenjs version: ' + pptx.version + ')</code>');

// Simple Slide
window.doDemo = function do7cells() {
  let pptx = new PptxGenJS();
pptx.layout = "LAYOUT_WIDE";
pptx.defineSlideMaster({
 title: "MASTER_SLIDE",
 background: { color: "00474B" },
 objects: [
  { line: { x: 3.5, y: 1.0, w: 6.0, line: { color: "0088CC", width: 5 } } },
  { rect: { x: 0.0, y: 5.3, w: "100%", h: 0.75, fill: { color: "F1F1F1" } } },
  { text: { text: "Status Report", options: { x: 3.0, y: 5.3, w: 5.5, h: 0.75 } } },
  { image: { x: 11.3, y: 6.4, w: 1.67, h: 0.75, path: "https://res.cloudinary.com/shirlym/image/upload/v1610382519/cloudinary_logo_kit/cloudinary_logo_white_0720_a15hvl.png" } },
 ],
 slideNumber: { x: 0.3, y: "90%" },
});

let slide = pptx.addSlide({ masterName: "MASTER_SLIDE" });

var dataChartBubble = [
    { name:'X-Axis',   values:[1, 2, 3, 4, 5, 6] },
    { name:'Airplane', values:[33, 20, 51, 65, 71, 75], sizes:[10,10,12,12,15,20] },
    { name:'Train',    values:[99, 88, 77, 89, 99, 99], sizes:[20,20,22,22,25,30] },
    { name:'Bus',      values:[21, 22, 25, 49, 59, 69], sizes:[11,11,13,13,16,21] }
];
slide.addText("How To Create PowerPoint Presentations with JavaScript", { x: 0.5, y: 0.7, fontSize: 18 });
 var opts = { x:1.0, y:1.0, font_size:42, color:'00FF00' };
  var data = [ { name: 'Sample',
    labels: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 ],
    values: [ 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 2, 1, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0 ] } 
];

  slide.addChart(pptx.charts.BAR, data, {showLegend:true, chartColors:['0000FF']});
var company = document.getElementById('company').value;
alert(company)
pptx.writeFile({ fileName: company});
}