Click here to Skip to main content
15,391,100 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
#realJSOP4-Jul-22 23:41
mva#realJSOP4-Jul-22 23:41 
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 150787164-Jul-22 18:53
MemberMember 150787164-Jul-22 18:53 

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.