I am by no means a javascript/html/css
developer, just somethings I noticed, and some things I would recommend as a customer. I invite someone who is more experienced with javascript to review this code, as I rarely touch on it in this review.
Tags
Unless you're using XHTML
, which it doesn't look like it, <link>
does not need to be closed (/>
), as it's a "self closing" tag. The same goes with the <hr>
tag and the <meta>
tag.
Scaling
I would recommend putting this piece of html in the header as well:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This is used to set styles and other website attributes to render the site on different devices. This tag decides how to scale the website. If I open the website on my computer, it will scale accordingly. If I open the website on my phone, a much smaller screen (at the time of writing, you never know), it will scale according to that smaller screen size.
Customer Perspective
Here are some things I noticed, if I was a customer on this website:
- Shopping Cart: Let's say I wanted to buy two
Logitech Mouse
, one to use and another one as a backup if the first one craps out. I press the button twice, and check the cart, only to see one item in my cart! The cart should display how many total items are in the cart, regardless if they are the same item or not. With the way it's set up now, someone can keep pressing theAdd to Cart
button, not knowing at checkout they are buying 8 mice! Of course they'll notice the price, hopefully... - Description: I would have a short description about the item, maybe even being redirected to this description after pressing
Add to Cart
. If you go down this route, consider changing the name of the button toView Product
or something along those lines. I realize that this is a mockup, but it's something to consider. - Joe Doe?: I see that you have a user already signed in, and a
logout
button available. If you intend on having users log in and buying these items, you have a whole other beast to conquer. Here is a simple login form using jQuery you might want to take a look at. - Pizzazz: When creating a website, for any reason, it should be inviting. As it stands, your website is just black and white. Add a cool background image, some different colors, something! Just having a little color can go a long way. Even just a little color and having images for your products can make your website seem professional. Take a look at Amazon. Without the images and adds, their website is very simple. You don't need crazy colors and other out-of-this-world imagery to attract users. A splash of color here and there can do wonders.
Javascript
My one thing on javascript
, that I notice in some java
/c#
programs too.
// Check type
if (typeof object !== "object") return false;
I'm sorry, but I can't stand not having brackets around one line if statements. It makes it look so separated from everything else, and just doesn't look appealing to me. In my opinion, this code should look like
//Check type
if (typeof object !== "object") {
return false;
}
Yeah, it takes up two more lines, but it's two bytes more, and it makes it consistent with all the bracketed code around it. Those are my two cents on your javascript
.
Mozilla Developer Network, a comprehensible, usable, and accurate resource for everyone developing on the Open Web (thanks to Sᴀᴍ Onᴇᴌᴀ for pointing this resource out.)
- 10.8k
- 5
- 38
- 102