PptxGenJS-Demo

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

by Shirly Manor

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="./favicon-32x32.png" />
 
  <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>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ROI Calculator</title>
</head>
<body>
  <button class="generate" onclick="createChartInPowerPoint();">Generate PowerPoint</button>

  <script>
    function createChartInPowerPoint() {
        let pptx = new PptxGenJS();
// Define Slide Master
// Define Slide Master
// Define Slide Master
pptx.defineSlideMaster({
  title: "MASTER_SLIDE",
  background: { color: "00474B" },
  objects: [
    { rect: { x: 0, y: 0, w: "100%", h: "100%", fill: { color: "2ECC66" } } },
    { text: { text: {title}, options: { x: 0.5, y: 0.5, w: 9.5, h: 1.0, align: "center", fontSize: 32 } } }
  ],
  slideNumber: { x: 300, y: 800 },
});

// Create Slides based on Slide Master
var slide1 = pptx.addSlide({ masterName: "MASTER_SLIDE", title: "ROI Calculator Title One" });
var slide2 = pptx.addSlide({ masterName: "MASTER_SLIDE", title: "ROI Calculator Title Two" });

// Define the chart data for each slide
var chartData1 = [
  {
    seriesName: "Series 10",
    labels: ["Label 1", "Label 2", "Label 3"],
    values: [1, 13, 4]
  },
  {
    seriesName: "Series 20",
    labels: ["Label A", "Label B", "Label C"],
    values: [3, 5, 2]
  }
];

var chartData2 = [
  {
    seriesName: "Series 1",
    labels: ["Label A", "Label B", "Label C"],
    values: [10, 15, 8]
  },
  {
    seriesName: "Series 2",
    labels: ["Label A", "Label B", "Label C"],
    values: [5, 9, 12]
  }
];

// Position and size of the text and chart on each slide
var textPosition = { x: 400, y: 800, w: 1800, h: 300 };
var chartPosition1 = { x: 50, y: 200, w: 600, h: 400 };
var chartPosition2 = { x: 0.5,...

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:...