JavaScript

<main class="calc-wrapper">
      <!-- Solar Roof Data Inputs -->

      <form class="calc-form" action="form-results.html" method="get">
        <label for="first-name" class="label first-name-label">
          First Name
        </label>
        <input type="text" class="first-name-input" />
        <label for="last-name" class="label last-name-label"> Last Name </label>
        <input type="text" class="last-name-input" />

        <!-- Google API Address Autocomplete Section -->
        <label class="label addr-sec-label" for="addr-sec"
          >Address Selection*</label
        >
        <input type="text" class="input" placeholder="Address" id="location" />
        <input
          type="text"
          class="input"
          placeholder="Apt, Suite, etc (optional)"
        />
        <input type="text" class="input" placeholder="City" id="locality" />

        <input
          type="text"
          class="input"
          placeholder="State/Province"
          id="administrative_area_level_1"
        />

        <input
          type="text"
          class="input"
          placeholder="Zip/Postal code"
          id="postal_code"
        />

        <input type="text" class="input" placeholder="Country" id="country" />
        <div class="map" id="map"></div>

        <!-- End - Google API Address Autocomplete Section -->

        <div class="roof-complexity">
          <label class="label roof-complexity-label" for="roof-complexity"
            >Roof Complexity Type*</label
          >
          <select
            class="roof-complexity-input"
            id="roof-complexity-input"
            name="roof-complexity"
          >
            <option selected disabled hidden>Select an Option</option>
            <option id="simple" value="simple">Simple</option>
            <option id="moderate" value="moderate">Moderate</option>
            <option id="complex" value="complex">Complex</option>
          </select>
        </div>

        <div class="system-size">
          <label class="label system-size-label" for="system-size"
            >Select System Size*</label
          >
          <button class="btn calc-form-btn system-size-minus-btn" type="button">
            -
          </button>
          <input
            class="system-size-input"
            id="system-size-input"
            value="4.0"
          />
          <button class="btn calc-form-btn system-size-plus-btn" type="button">
            +
          </button>
        </div>

        <div class="powerwall-battery">
          <label class="label powerwall-battery-label" for="powerwall-battery"
            >Select Powerwall Battery Storage (in units)*</label
          >
          <button
            class="btn calc-form-btn powerwall-battery-minus-btn"
            type="button"
          >
            -
          </button>
          <input class="powerwall-battery-input" id="powerwall-battery-input" />
          <button
            class="btn calc-form-btn powerwall-battery-plus-btn"
            type="button"
          >
            +
          </button>
        </div>
      </form>

      <!-- Totals and Incentives Calculations -->

      <div class="totals-section">
        <label class="label roof-before-itc" for="roof-before-itc"
          >Solar Roof Price Before Incentives</label
        >
        <input type="text" class="input" id="roof-price-before-itc" />

        <label
          class="label powerwall-price-before-itc"
          for="powerwall-price-before-itc"
          >Powerwall Price Before Incentives</label
        >
        <input class="input" id="powerwall-price-before-itc" value=" " />

        <label class="label est-total-before-itc" for="est-total-before-itc"
          >Estimated Total Price Before Incentives</label
        >
        <input type="text" class="input" id="est-total-before-itc" />

        <label class="label est-itc" for="est-itc">Estimated Solar ITC</label>
        <input type="text" class="input" id="est-itc" />
      </div>
    </main>

/** Set Global Styling Variables **/

:root {
  /** Fonts **/
  --mainFont: "Arial";
  --textFont: "Open Sans", sans-serif;
  --secondaryFont: "Raleway", sans-serif;

  /** Colors **/
  --primary: #4f5449;
  --darkGray: #2f2e2e;
  --lightGray: #ebebeb;
  --white: #fff;
  --black: #000;
  --darkorange: orange;
}

/** Apply Natural Box Layout Model to All Elements - Allow Components to Change **/

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%; /* Now 10px = 1rem! */
}

body {
  font-family: var(--mainFont);
  font-size: 1.6rem;
  line-height: 2;
}

.calc-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/** Calculator Form 1 Styles **/

/** Use Flexbox to Limit the Use of Media Queries and to Center the Main Element on All Devices**/

.calc-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 5rem;
  margin-bottom: 5rem;
  width: 50%;
  padding: 5rem;
}

.first-name-input {
  width: 50%;
  padding: 2rem;
}

.last-name-input {
  width: 50%;
  padding: 2rem;
}

/** Style Calculator Form Input and Label Sections 
System Size Input area was not given a class of 'input'
so the buttons would remain inline with the input field. 
It was given only and ID to target for a one off style and
for JS **/

/** Style Google API Address Autocomplete Section **/

.sb-title {
  font-family: var(--mainFont);
  font-weight: bold;
}

/** Style Form Address Section **/

.addr-sec-input {
  width: 100%;
  padding: 2rem;
}

.input {
  width: 50%;
  padding: 2rem;
  text-align: center;
}

.label {
  margin-top: 2rem;
  font-weight: bold;
  text-align: center;
  display: block;
}

/** Style Home Size Section **/

.home-size-input {
  padding: 2rem;
  text-align: center;
}

/** Style Roof Complexity Section **/

.roof-complexity-input {
  padding: 2rem;
  text-align: center;
}

/** Style Form System Size Section **/

.system-size {
  display: block;
}

.system-size-input {
  padding: 2rem;
  text-align: center;
}

/** Style Form Powerwall Battery Storage **/
.powerwall-battery {
  display: block;

}

.powerwall-battery-input {
  padding: 2rem;
  text-align: center;
}

.calc-form-btn {
  background-color: var(--primary);
  border: none;
  color: var(--white);
  padding: 0 1.5rem;
  text-align: center;
  text-decoration: none;
  font-size: 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

/** Calculator Form 2 Styles **/
.totals-section {
  border: var(--black);
  border-style: solid;
  background: var(--darkorange);
  width: 50%;
  margin-right: 5rem;
  border-width: 1px;
  padding: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.submit-section {
  text-align: center;
  margin-bottom: 5rem;
}

.submit-btn {
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #FFFFFF;
  color: #FFFFFF;
  background-color: var(--primary);
  padding: 4rem;
  font-size: 2rem;
  text-transform: uppercase;
  border-radius: 1rem;
  width: 10%;
}

.submit-btn {
  cursor: pointer;
}

export { dismissProjectNoticesAsync as dismissProjectNotices } from './projectNoticesModal.module.js';
export { saveVersionNoteAsync as saveVersionNote } from './saveVersionNote.module.js';
export { saveManagerAsync as saveManager } from './saveManagerAsync.module.js';
export { saveSwanJobAsync as saveSwanJob } from './saveSwanJobAsync.module.js';
export { saveCommentAsync as saveComment } from './saveCommentsAsync.module.js';
export { removeCommentAsync as removeComment } from './removeComment.module.js';
export { addFeatureAsync as addFeature, removeFeatureAsync as removeFeature, validateFeatureAsync as validateFeature } from './features.module.js';
export { checkSupplierAsync as checkSupplier } from './checkSupplierAsync.module.js';
export { recalculateAsync as recalculate } from './recalculateProjectAsync.module.js';
export { saveProjectAsync as saveProject } from './saveProjectAsync.module.js';
export { saveProjectWithProgressAsync as saveProjectWithProgress } from './saveProjectWithProgress.module.js';

<button type="Button" onclick="saveProjectWithProgress()">Save</button>
<?php include dirname(DIR, 2) . '/includes/modals/core/confirmSave.modal.php'; ?>
<?php include dirname(DIR, 2) . '/includes/modals/core/projectNotices.modal.php'; ?>
<script type="module" src="/pcad/assets/scripts/core/module/core.module.js"></script>

Uncaught ReferenceError: saveProjectWithProgress is not defined<br />
    onclick <a href="https://core/breakdown/updateBreakdown.phtml:1">https://core/breakdown/updateBreakdown.phtml:1</a><br />
updateBreakdown.phtml:1:1<br />

<script>
import { udv } from 'udv';
udv();
</script>

<button type="Button" onclick="function saveProjectWithProgress() { } saveProgectWithProgress()">Save</button>

export function getCookie() {

}

import { getAuthToken } from 'module';

The program defined the following variables:
 - P array of size 8 containing zeros (inputs 1 to 8)
 - integer integer variables n, i
 The following command segment is executed:
 Input n
 I = 8
 Do until n = 0
 P (I) = n mod 2
 N = n / 2
 I = i-1
 End-do
 Print p
 - What does this section do?
 - What are the conditions for the correctness of the code?
 - What order will the plan fall into if one of the following options does not exist:
 A. do until n = 0
 B. p (i) = n mod 2
 C. N = n / 2
 D. I = i-1

 - What will be printed for input 147?

Question 3.
Inside the input an unknown amount of natural numbers (integers greater than 0)
 The last sentinel figure is 1-
 The data must be captured and printed in some of the input data. Repeatedly told about herself at least twice.
 For example for input: 1-, 505,656 17577,44,96,573,7250
 There will be output: 4
 Assume that all variables have been set
 Complete the missing section
 C = n
 Input n
 Do until n = -1
 Arr = all 0
 Flag = false
 Do until ____________________

 End-do
 If flag = true
 Cn = cn + 1
 End-if
 Input n
 End-do
 Print cn

export class EditIntSliderCustomElement {
    parentVM: any;
    @bindable
    label: string;

    editSlider: HTMLInputElement;
    readOnlySlider: HTMLInputElement;

    @bindable
    min : number;

    @bindable
    max :number;

    @bindable
    step: number = 1;

    @bindable({ defaultBindingMode: bindingMode.twoWay })
    value: number;

    @bindable
    editOnly: boolean = false;

    @bindable
    hideMinMax: boolean = false;

    valueChanged(newValue) {
        let editSlider = $(this.editSlider).data("ionRangeSlider");
        if (editSlider && editSlider.old_from != newValue){
            editSlider.update({ from: newValue });
        }

        let readOnlySlider = $(this.readOnlySlider).data("ionRangeSlider");
        if (readOnlySlider && readOnlySlider.old_from != newValue) {
            readOnlySlider.update({ from: newValue });
        }
    }

    constructor() {
    }

    bind(bindingContext, overrideContext) {
        this.parentVM = bindingContext;
    }

    userChanged(newVal: number){
        if (this.value != newVal) {
            this.value = newVal;
        }

    }

    attached() {
        $(this.editSlider).ionRangeSlider({
            min: this.min,
            max: this.max,
            from: this.value,
            step: this.step,
            hide_min_max: this.hideMinMax,
            onChange: (data) => {
                this.userChanged(data.from);
            }

        });

        $(this.readOnlySlider).ionRangeSlider({
            min: this.min,
            max: this.max,
            from: this.value,
            step: this.step,
            hide_min_max: this.hideMinMax,
            disable: true,
            onChange: (data) => {
                this.userChanged(data.from);
            }

        });
    }
}

<pre>	<div show.bind="editOnly || parentVM.editMode != 0" class="form-group">
		<label-for>
			<small>${label}</small>
		</label-for>
		<input ref="editSlider" value.two-way="value" type="text">
	</div>
	<div show.bind="!editOnly && parentVM.editMode == 0">
		<small>${label}</small>
		<input ref="readOnlySlider" value.two-way="value" type="text">
	</div>

function loadProjectsUpdated(partId) {

    const projectsContainer = document.getElementById('projectsContainer');
    const jsonProjectElement = document.getElementById('updateProjectCost_jsonProjectResponse');
    const jsonObject = JSON.parse(jsonProjectElement.value);

    console.log('jsonObject', jsonObject);
    const projects = jsonObject.projects;
    console.log('projects', projects);

    for (const project of projects) {

        console.log('projectNumber', project.projectNumber)

        if (project.partId === partId) {

            console.log('we have a match');

        }

    }

}