Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div>Javascript alert() method doesnt work for the following: A different origin subframe tried to create a JavaScript dialog. This is no longer allowed and was blocked. See https://www.chromestatus.com/feature/5148698084376576 for more details.</div><br><br>

<h1 id="hw3">Homework 3</h1>
      <input type="button" id="openHW" value="Open">
      <div id="liftmaster">
          <h3>Want a lift ticket at My Ski Resort?</h3>
          <p>if/else determining which price is applicable based on state and option selection.</p>
          <div>
            <p><b>Here are the available options:</b></p>
          	<p id="listoptions"></p>
          </div>
          <form>
             <h4 class="close">Ticket Options:</h4>
             <p class="close"><i>Select one</i></p>
             <br>
             <div class="leftmove"> 
                <label>
                  <b>Morning</b><br>
                  Choose a lift ticket valid 5:00am - 11:00am<br>
                  <i>$20.00</i><br>
                  <input id="option1" type="radio" name="ticket" value="morning" required>
                </label>
                 <br>
                 <br>
                <label>
                  <b>Day</b><br>
                  Choose a lift ticket valid 11:00am - 6:00pm<br>
                  <i>$25.00</i><br>
                  <input id="option2" type="radio" name="ticket" value="day" required>
                </label>
                <br>
                <br>
                <label>
                  <b>Night</b><br>
                  Choose a lift ticket valid 6:00am - 12:00am<br>
                  <i>$30.00</i><br>
                  <input id="option3" type="radio" name="ticket" value="night" required>
                </label>
                <br>
                <br>
                <p class="close"><i>*Final price may vary by region.</i></p>
                <br>
             </div> 
             <br>
             <h4>Customer Information:</h4>
             <div id="inputOptions" class="leftmove">
                 <label>
                   <b>Full name:</b><br>
                 <input id="cname" type="text" placeholder="full name">
                 </label>
                 <br><br>
                 <label>
                   <b>Address:</b><br>
                 <input id="caddress" type="text" placeholder="1111 Main st.">
                 </label>
                 <br><br>
                 <label>
                   <b>City:</b><br>
                 <input id="ccity" type="text" placeholder="San Diego">
                 </label>
                 <br><br>
                 <label>
                   <b>State/Province/Region:</b>
                 </label><br>
                
             </div>  	
             <div id="submition">
                 <input id="submitbutton" type="submit" class="leftmove" value="submit">
             <div>
          </form>
        </div>
              
            
!

CSS

              
                input {
        	width: 25%;
          border: 1px solid #eee;
        }
        select {
          box-shadow: -1px 1px 1px 1px #eee;
        }

        #hw3 {
        	text-align: center;
        	margin:0;

        }

        #openHW {
          background-color: lightgrey;
          width: 100%;
        }

        #liftmaster {
        	display: none;
        	width: 75%;
        	padding: 1rem;
        	border: 2px solid green;
        }

        #listoptions {
        	
        	margin-left: 1rem;
        	background-color: yellow;
        }

        #submition {
        	margin: 30px auto;
        	width: 33.3%;
        	height: 20px;
        	text-align: center;
        }

        #submitbutton {
        	box-shadow: 0px 0px 5px;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        
        .close {
        	margin:0;
        	padding:0;
        }

        .leftmove {
        	margin-left: 1rem;
        }
              
            
!

JS

              
                
/*
alert() no longer allowed for the following: A different origin subframe tried to create a JavaScript dialog. This is no longer allowed and was blocked. See https://www.chromestatus.com/feature/5148698084376576 for more details.
*/

// getting elements that will display and disappear on the click of a button
          const hw3Elem = document.getElementById('hw3');
          const openHWButton = document.getElementById('openHW');
          const liftMasterElem = document.getElementById("liftmaster");
          openHWButton.addEventListener("click",(event)=>{
            event.preventDefault();
              hw3Elem.style.display = 'none';
              openHWButton.style.display = 'none';
              liftMasterElem.style.display = 'inline-block';            
          });






          //creating text content to display within element that has id="listoptions"
        	const liftoptions = ['Morning', 'Day', 'Night'];
        	const liftimes = ['5:00am - 11:00am', '11:00am - 6:00pm', '6:00pm - 12:00am'];
          const ticketpass = [' - Morning pass',' - Day pass',' - Night pass'];
          let list = '';
        	
        	for (let i = 0; i < liftoptions.length && i < ticketpass.length && i < liftimes.length; i++){
              list += liftoptions[i] + " " + liftimes[i] + " " + '<i>' + ticketpass[i]+ '</i>' + '<br>';
        		  document.getElementById('listoptions').innerHTML = list; 
        	}  


          
          //on click a function will get the selected values and calculate sum. 
          //ifelse statments are used to calculate selected item prices with a california tax rate if applicable. 
          //ifelse statments check if the user has selected an option and if the user has filled out the form completely.
          const submitBtn = document.getElementById("submitbutton");
          submitBtn.addEventListener("click",(e)=>{
             e.preventDefault();
             const cusop1 = document.getElementById('option1');
             const cusop2 = document.getElementById('option2');
             const cusop3 = document.getElementById('option3');
             const cname = document.getElementById('cname').value;
             const caddress = document.getElementById('caddress').value;
             const ccity = document.getElementById('ccity').value;
             const cstate = document.getElementById('cstate').value;
             const cusinf = {name:cname, address:caddress, city:ccity, state:cstate};
             let price; 
             let option;
            
             const cnameInput = document.getElementById("cname");
             const caddressInput = document.getElementById("caddress");
             const ccityInput = document.getElementById("ccity");
             let userInfo = [cnameInput,caddressInput,ccityInput];
             for(let i=0;i<userInfo.length;i++){
               if(userInfo[i].value === ""){
                 alert("Please fill out your user information");
                 userInfo[i].focus();
                 return false;
               }
             }

             if (cusinf.state === 'California' && cusop1.checked){
                 price = 20.00 * 0.06 + 20.00;
                 option = `You have placed an order for 1 Morning Ticket. Your total is $${price.toFixed(2)}.`;
                 alert(option);
             }else if (cusinf.state === 'California' && cusop2.checked){
              price = 25.00 * 0.06 + 25.00;
              option = `You have placed an order for 1 Day Ticket. Your total is $${price.toFixed(2)}.`;
                 alert(option);
             }else if (cusinf.state === 'California' && cusop3.checked){
              price = 30.00 * 0.06 + 30.00;
              option = `You have placed an order for 1 Night Ticket. Your total is $${price.toFixed(2)}.`;
                 alert(option);
             }else if (cusinf.state !== 'California' && cusop1.checked){
              price = 20.00 * 0.08 + 20.00;
              option = `You have placed an order for 1 Morning Ticket. Your total is $${price.toFixed(2)}.` ;
                 alert(option);
             }else if (cusinf.state !== 'California' && cusop2.checked){
              price = 25.00 * 0.08 + 25.00;
              option = `You have placed an order for 1 Day Ticket. Your total is $${price.toFixed(2)}.` ;
                 alert(option);
             }else if (cusinf.state !== 'California' && cusop3.checked){
              price = 30.00 * 0.08 + 30.00;
              option = `You have placed an order for 1 Night Ticket. Your total is $${price.toFixed(2)}.` ;
                 alert(option);
             }else if(!cusop1.checked && !cusop2.checked && !cusop3.checked){
                 alert('Please choose an option.');
             }else {
                option = 'Please check to fill the form out completely'
                alert(option);
             }  
          });



         
          //creating the section tag with option tags dynamically with appropiate attributes
          const divParent = document.getElementById("inputOptions"); 
          const states = ['Alabama','Alaska','American Samoa','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','District of Columbia','Federated States of Micronesia','Florida','Georgia','Guam','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Marshall Islands','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Northern Mariana Islands','Ohio','Oklahoma','Oregon','Palau','Pennsylvania','Puerto Rico','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virgin Island','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
        
          function insertNode(referenceNode, newNode) {
            referenceNode.appendChild(newNode);
          }

          const el = document.createElement("select"); 
          el.id = "cstate";
        
          for(let i=0; i<states.length; i++){
            var optEl = document.createElement("option");
            optEl.value = states[i];
            optEl.innerHTML = states[i];
            insertNode(el,optEl);
          }
          insertNode(divParent, el);
              
            
!
999px

Console