Click here to Skip to main content
15,356,981 members
Home / Discussions / Web Development
   

Web Development

 
QuestionUpload problems from my web form, only when file is located on a cloud drive, i.e. MS' OneDrive Pin
SergioQ19-Feb-22 9:19
MemberSergioQ19-Feb-22 9:19 
QuestionWhere do people go to discuss PWA development? Pin
bjoernen19-Feb-22 1:26
Memberbjoernen19-Feb-22 1:26 
AnswerRe: Where do people go to discuss PWA development? Pin
RedDk19-Feb-22 9:05
MemberRedDk19-Feb-22 9:05 
AnswerRe: Where do people go to discuss PWA development? Pin
jhonaa27-Mar-22 23:52
Memberjhonaa27-Mar-22 23:52 
QuestionWhat are the usage of the req.route() in express ? Pin
Member 1447916115-Feb-22 10:43
MemberMember 1447916115-Feb-22 10:43 
AnswerRe: What are the usage of the req.route() in express ? Pin
jhonaa7-Mar-22 23:15
Memberjhonaa7-Mar-22 23:15 
AnswerRe: What are the usage of the req.route() in express ? Pin
deepok130-Mar-22 21:56
Memberdeepok130-Mar-22 21:56 
QuestionWhy is my last input box not centering (class: powerwall-battery-input)? Pin
WannaBeAWebDev11-Feb-22 14:22
MemberWannaBeAWebDev11-Feb-22 14:22 
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;
}

AnswerRe: Why is my last input box not centering (class: powerwall-battery-input)? Pin
Richard MacCutchan11-Feb-22 22:34
mveRichard MacCutchan11-Feb-22 22:34 
QuestionWeird HTTP Status code 302 "Moved Temporarily" Pin
#realJSOP3-Feb-22 0:17
mva#realJSOP3-Feb-22 0:17 
GeneralRe: Weird HTTP Status code 302 "Moved Temporarily" Pin
#realJSOP6hrs 36mins ago
mva#realJSOP6hrs 36mins ago 
QuestionPHP7, build an array and select one array record based on value Pin
jkirkerx24-Jan-22 11:19
professionaljkirkerx24-Jan-22 11:19 
AnswerRe: PHP7, build an array and select one array record based on value Pin
jkirkerx24-Jan-22 11:46
professionaljkirkerx24-Jan-22 11:46 
Generalusing web API Pin
Southmountain17-Jan-22 8:44
MemberSouthmountain17-Jan-22 8:44 
GeneralRe: using web API Pin
OriginalGriff17-Jan-22 8:55
mveOriginalGriff17-Jan-22 8:55 
GeneralRe: using web API Pin
Southmountain17-Jan-22 9:00
MemberSouthmountain17-Jan-22 9:00 
GeneralRe: using web API Pin
RickZeeland17-Jan-22 9:56
mveRickZeeland17-Jan-22 9:56 
GeneralRe: using web API Pin
Slacker00718-Jan-22 0:18
professionalSlacker00718-Jan-22 0:18 
GeneralRe: using web API Pin
Southmountain25-Jan-22 6:06
MemberSouthmountain25-Jan-22 6:06 
GeneralRe: using web API Pin
deepok130-Mar-22 21:55
Memberdeepok130-Mar-22 21:55 
GeneralHow can i create social media sharing links for my website? Pin
Vijay Bishnoi15-Jan-22 19:45
MemberVijay Bishnoi15-Jan-22 19:45 
QuestionHow can i create social media sharing links for my website? Pin
Vijay Bishnoi15-Jan-22 19:45
MemberVijay Bishnoi15-Jan-22 19:45 
QuestionWhat is program is better to use than Dreamweaver for Website Design? Pin
David Mills 202112-Jan-22 21:44
MemberDavid Mills 202112-Jan-22 21:44 
AnswerRe: What is program is better to use than Dreamweaver for Website Design? Pin
RobertSF25-Feb-22 12:46
professionalRobertSF25-Feb-22 12:46 
AnswerRe: What is program is better to use than Dreamweaver for Website Design? Pin
Member 1507871611hrs 24mins ago
MemberMember 1507871611hrs 24mins ago 

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.