Click here to Skip to main content
16,016,623 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionProper decoding using Vanilla Javascript Pin
jkirkerx17-Feb-22 12:04
professionaljkirkerx17-Feb-22 12:04 
AnswerRe: Proper decoding using Vanilla Javascript Pin
Richard Deeming17-Feb-22 21:33
mveRichard Deeming17-Feb-22 21:33 
GeneralRe: Proper decoding using Vanilla Javascript Pin
jkirkerx18-Feb-22 6:49
professionaljkirkerx18-Feb-22 6:49 
GeneralRe: Proper decoding using Vanilla Javascript Pin
Richard Deeming24-Feb-22 0:21
mveRichard Deeming24-Feb-22 0:21 
GeneralRe: Proper decoding using Vanilla Javascript Pin
jkirkerx24-Feb-22 5:37
professionaljkirkerx24-Feb-22 5:37 
QuestionAngular JS A href in View source Pin
Member 367124116-Feb-22 1:36
Member 367124116-Feb-22 1:36 
AnswerRe: Angular JS A href in View source Pin
Richard Deeming17-Feb-22 1:58
mveRichard Deeming17-Feb-22 1:58 
QuestionWhy is my last input box not centering (class: powerwall-battery-input)? Pin
WannaBeAWebDev11-Feb-22 14:20
WannaBeAWebDev11-Feb-22 14:20 
Hello, I am trying to teach myself web development and I found a form I wanted to duplicate on a roof construction website.

All my input boxes are centered except the last one that's a bit off and I cannot figure out why. The class is "powerwall-battery-input"

Please don't be like stack overflow and constantly criticize the format of my question because it has gotten old over there, which is why I am here.

Thanks

Here is my code:

HTML
<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>


CSS
/** 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;
}


modified 11-Feb-22 20:33pm.

AnswerRe: Why is my last input box not centering (class: powerwall-battery-input)? Pin
rnbergren15-Feb-22 3:03
rnbergren15-Feb-22 3:03 
QuestionUsing modules in a regular PHP Web Application - function is undefined Pin
jkirkerx9-Feb-22 12:23
professionaljkirkerx9-Feb-22 12:23 
AnswerRe: Using modules in a regular PHP Web Application - function is undefined - Think I got it now Pin
jkirkerx9-Feb-22 13:25
professionaljkirkerx9-Feb-22 13:25 
AnswerRe: Using modules in a regular PHP Web Application - function is undefined Pin
Richard Deeming9-Feb-22 21:49
mveRichard Deeming9-Feb-22 21:49 
GeneralRe: Using modules in a regular PHP Web Application - function is undefined Pin
jkirkerx10-Feb-22 5:00
professionaljkirkerx10-Feb-22 5:00 
GeneralRe: Using modules in a regular PHP Web Application - function is undefined Pin
jkirkerx10-Feb-22 10:52
professionaljkirkerx10-Feb-22 10:52 
QuestionModules and scripts, common modules and scripts, just want to call some functions from a common external script, sort of ES6 Pin
jkirkerx28-Jan-22 10:29
professionaljkirkerx28-Jan-22 10:29 
AnswerRe: Modules and scripts, common modules and scripts, just want to call some functions from a common external script, sort of ES6 Pin
jkirkerx28-Jan-22 10:52
professionaljkirkerx28-Jan-22 10:52 
QuestionArea of ​​a 2d room Pin
Member 1550401118-Jan-22 1:29
Member 1550401118-Jan-22 1:29 
SuggestionRe: Area of ​​a 2d room Pin
Richard MacCutchan18-Jan-22 1:37
mveRichard MacCutchan18-Jan-22 1:37 
QuestionHow to solve this in js Pin
Miraz Uddin17-Jan-22 18:57
Miraz Uddin17-Jan-22 18:57 
AnswerRe: How to solve this in js Pin
Richard Deeming17-Jan-22 21:34
mveRichard Deeming17-Jan-22 21:34 
QuestionHow to solve this in js Pin
Miraz Uddin17-Jan-22 18:53
Miraz Uddin17-Jan-22 18:53 
AnswerRe: How to solve this in js Pin
Richard Deeming17-Jan-22 21:34
mveRichard Deeming17-Jan-22 21:34 
GeneralString Pin
SHAFI CANVASS6-Jan-22 12:40
SHAFI CANVASS6-Jan-22 12:40 
GeneralRe: String Pin
RedDk6-Jan-22 13:07
RedDk6-Jan-22 13:07 
GeneralRe: String Pin
jhonaa11-Jan-22 21:24
jhonaa11-Jan-22 21:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.