www.webdeveloper.com
Results 1 to 10 of 10

Thread: How would I start this problem?

  1. #1
    Join Date
    Oct 2013
    Posts
    26

    How would I start this problem?

    User should be able to:
    add any number of ice cream cones to the order
    remove ice cream cones
    change the type of cone
    add and remove scoops of ice cream to each cone
    change the flavor of any scoop
    see total cost of the order (prices are listed below)
    see the updated total cost immediately after making a change

    Requirements:
    Use only HTML, CSS, and JavaScript (no server-side technologies).
    Third-party libraries or frameworks may be used, but make sure to include them with your submission.
    Solution must run from a single HTML page (you may include JavaScript and CSS as separate files).
    Solution must work in the latest versions of Firefox, Chrome, and Internet Explorer (don't worry about old browsers).
    The user interface/layout is up to you. The UI should be easy to use, but does not need to be a highly polished product.


    Cone type Price
    Cup $0.50
    Cone $0.75
    Waffle Cone $1.00

    Ice Cream Flavor Price per scoop
    Vanilla $1.00
    Chocolate $1.10
    Strawberry $1.15

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,175
    Start it like any other software engineering problem: analyze the requirements, group related things together, break down general requirements into smaller pieces, and so forth. Then review those requirements and decide which ones are the most important, both in terms of what other parts of the system will depend on them, and how risky they are in terms of technical issues, unknown factors, etc. Then start working on what you consider to be the most important functionality, breaking it down into smaller pieces as needed. Keep things as modular as possible, to make it easier to "glue" the separate parts together as you develop them.

    When you have specific technical questions about a particular area that you're working on, post that specific question here in the relevant sub-form, and one of the many smart, experienced people here will help you out, or at least point you to the appropriate documentation so that you can help yourself.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Oct 2013
    Posts
    386
    I've done a couple of analogous projects and one thing I found helpful was a flowchart. Even if it's crudely drawn on a piece of notebook paper (you should see mine ) it helps identify what you want to happen when, all the way from when a user enters the page until the submit button is clicked. As NogDog stated, keep things as modular as possible. A subroutine that updates the grand total every time a cone is added or deleted from the order is one example. Another bit of advice is to comment everything. That will keep you from forgetting what "function cone()" does 3-4 days from now, or at least remind you that it has certain capabilities you can use.

    Good luck!
    Kevin

  4. #4
    Join Date
    Oct 2013
    Posts
    26
    kevin, would i first create a form in html?

  5. #5
    Join Date
    Oct 2013
    Posts
    386
    That would be where I would start. You can always modify it if you find that something's missing or needs, ahem, "adjustment" . Your JS will be for form behavior, i.e. when a user changes from vanilla to chocolate the price per cone as well as the total are adjusted accordingly and, hopefully, in real time.

    Anyway, that's how I see the "requirements". I'm serious about the flowchart though. That will help not only with your javascript but what inputs your form will need. It will also show you NogDog's "modules": where there's a user decision to be made, there's a module.

    Basically you're creating an online icecream store. For the moment let's not consider the problem of the icecream melting in the back of a UPS truck during delivery . Think about the e-commerce sites you've bought from. You pick a product, choose color etc., then put in your "cart". You are asked if you want to order something else. If "yes" you make that order. When "no" you are taken to your cart where you are given a last chance to modify your order -- delete an item, go back and change a shirt size or whatever. When done you "check out", pay, etc. That's what you are building in this project. And that's the flowchart you will be using.

  6. #6
    Join Date
    Oct 2013
    Posts
    26
    can you show me a sample flow chart for this requirement.

  7. #7
    Join Date
    Oct 2013
    Posts
    386
    http://kevinmahoney.net/examples/flowchart1.pdf

    That was an event registration/permission process I did for a Boy Scout Troop. A very long story shortened, the BSA has a form for each event a Troop has outside normal meetings. That form requires a huge amount of information which I was only able to gather with 4 different forms. This flowchart allowed me to figure out the flow between forms, all the way from the "Event information" page to the "Thank You" page. Original was on a sheet of notebook paper and what I actually used for development.

  8. #8
    Join Date
    Oct 2013
    Posts
    26

    this is what i have for the html form so far.

    Code:
    <html>
    <head>
    <title>Haseeb's Ice Cream </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#FFFFFF" text="#000000">
    <table width="480" border="0" align="center">
      <tr>
        <td height="251" colspan="2">
          <H2>Haseeb's Ice Cream</H2>
    
          <P>
          <FORM action=index.php method=post>
            <H3 align=left><FONT face=arial,helvetica>Your Daily Planner</FONT></H3>
        How many cones would you like?
            <SELECT size=10 name=what-to-do>
               
              <OPTION 
      value=drink>1
              <OPTION value=read selected>2
              <OPTION 
      value=walk>3
              <OPTION>4
              <OPTION>5
              <OPTION>6
              <OPTION>7
    
            </SELECT>
             
            <P>What flavor would you like? 
            <P>
            <DL>
              <DD>
                <SELECT size=8 name=who-to-do-it-with>
                   
                  <OPTION>Vanilla
                  <OPTION>Choc
                  <OPTION>Strawberry
                  <OPTION 
        selected>Blue Goo
                  <OPTION>Fudge Sundae
                  <OPTION>French Vanilla
    
                </SELECT>
                 
      </DD>
            </DL>
            Whould you like any toppings? (Hold down <I>Control</I> 
    to select or deselect disjoint items.) 
            <P>
            <DL>
              <DD>
                <SELECT multiple size=8 name=what-to-wear>
                   
                  <OPTION>Sprinkles
                  <OPTION 
        selected>Choc Sprinkles
                  <OPTION>Gummi Bears
                  <OPTION selected> M&M
                  <OPTION 
        selected>Oreos
                  <OPTION>Fudge
                  <OPTION>Peanuts
                  <OPTION>Whip Cream
        Frosting
                  <OPTION>Pound Cake
                  <OPTION>Fruit</OPTION>
                </SELECT>
                 </DD>
            </DL>
            To 
    submit your choices, press this button: 
            <INPUT type=submit value="Submit Choices">
            <P>To reset the form, press this button: 
              <INPUT type=reset value=Reset>
          </FORM>
        </td>
      </tr>
    </table>
    </body>
    </html>

  9. #9
    Join Date
    Oct 2013
    Posts
    386

  10. #10
    Join Date
    Nov 2013
    Location
    Florida/United States
    Posts
    12
    Most important when you are starting project analyse it properly and how the process goes its most important part in the starting of project.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles