Mac configurator replica and how do I make one?

1

I’ve been wondering about how to build a simple mac configurator just like the one that is shown at apple.com.

I don’t care about the css part, (or at least not at 1st). I just want to shown user a configurator they can choose from, and generate the right price for them.

I have no clue how to start.

Could someone give me some suggestions?

I’ve known HTML and CSS , and a little bit of javascript.

What does it take to make one? Am I aiming too high?

Screen Shot 2017-06-24 at 18.27.05.jpg2560×1600 549 KB

2

I was researching on this as well. Have you found a resource or solution on how to best build it?

3

One way to do is using some JS framework like React, Angular or VueJS.

(VueJS will be the easiest)

Basically, you store all your options in an array or list, and you have different variables for the different configuration options. Your Js program (let’s call it your controller), all has to worry about is updating the values in your variables, and if there are business logic/rules governing those variables. Example: if VariableA contains X value, then VariableB is required or VariableB can have Y or Z values only.

On the front end, depending on what those variable values are, the appropriate select box, or radio options can be highlighted or marked as selected. So on the front end, you just apply some CSS rules based on the value of the corresponding variable.

When users pick certain options, the appropriate variables are updated with new values. Then the controller applies whatever business logic is needed, then the front end View is updated again.

For example, when I made the Random Quote generator, all my JS program does when the user clicks the button is generate a new random number and assign the new value to ‘ndx’

        generateNewQuote: function(){
          this.ndx = parseInt(Math.random() * this.quotes.length); 
        }

that’s it.

And on my webpage, all my HTML does is display the appropriate entry in the array depending on the value of ‘ndx’… all done automatically.

<i>{{ quotes[ndx].person }}</i>

That’s it.

The VueJS framework will then fill in everything in between the {{ }} with the correct array value.

My JS code does not manually update the text in the HTML. It doesn’t care how the HTML page is constructed. All my JS code takes care of is updating the variable value.

https://randomquote-owel.surge.sh/

1 Like
4

At the simplest level:

  • A series of HTML select tags which represent memory, processor etc.
  • Each option in the select has a name (which is what the user sees) and a value that represents cost (so some integer).
  • You have an HTML element that contains the total.
  • Use JS to listen to each select (so you need to understand event listeners in JS). When a user selects an option, add it to the total.

This is a good enough basis, and is a very simple start. Example (delete/comment out the CSS to see even simpler version, it’s not needed):

Select boxes could turn out to a be a bit constraining, especially when styling with CSS, so you could make each one a list of items, with descriptions etc - JS can be used to say add a class to an item in one of these groups to show its selected. You could put each group under a heading, and have the group accordian open/closed when the heading is clicked. And so on.

1 Like