Web Design Project: Winning Design 2nd Month

Projects

Web Design Background 

A little while ago, I challenged myself to create some web designs as part of my foray into web development with the winner being implemented in Codepen.

I had Glitch as the winning design for March.

Last month I came up with these 3 designs:

And the winner of last month design is –

Guess my Number

My biggest design challenge with implementing Guess my Number was optimizing the site to ensure that it can be viewed across  screen sizes (desktop, tablet, mobile) and browsers (Chrome, Firefox, iOS and Internet Explorer).  The design is far from being perfect and I realise that I can keep on optimizing things a little bit more

BUT

we have time constraints in real life so I really can’t postpone this any longer.

Here’s the original design

Guess Incorrect

And here’s my implementation

Guess my Number

 

Design Differences

The obvious ones are to do with the icons; the splash of red behind the robot, the person’s head, and both the robot and person icons where the numbers are displayed. These have been omitted due to time – they’re not as tricky as other parts of this design but they are time-consuming.

Here’s the link to my implementation.

Perhaps a note for my next design is to do the mobile-first approach. In practical terms, that means coming up with the must-have content and structure first then progressively building up the site with additional feature requirements. Let’s see how we go.

Observations

JavaScript

My biggest takeout here is getting my feet wet with JS, for example:

// Substitute function

function substitute(){
var userValue = document.getElementById('myNumberBox').value;
var userResult = document.getElementById('myNumber');
userResult.innerHTML = userValue;

var robotNumber = Math.floor(Math.random()*10+1);
var botResult = document.getElementById('botNumber');
botResult.innerHTML = robotNumber;

which I’m using to store values and create a random number for the robot respectively.

And then there’s a matching function of the user input to the random number generated:

if(userValue != robotNumber) {
var msgValueX = "Incorrect. I win again.";
document.getElementById('userMessage').innerHTML = msgValueX;
}else{
var msgValue = "Booya! You got it right. Is this your lucky day?";
document.getElementById('userMessage').innerHTML = msgValue;
}

And of course this all has to be hooked into html and css respectively.

CSS Flexbox

I tried to float elements at first but it didn’t really work out (multiple screen size problems and x-browser compatibility issues). I know what the problem is now but haven’t had the chance to fix it.

And so I went down the Flexbox route once again – although the work is still unfinished. My code is not DRY and could do with the cleanup. But it is functional and the content is there. This meets my success criteria.

(I’ll solve the problems by practicing more)

Can this be improved?

Of course and I’ve alluded to this in the last point. Nothing beats constant practice. And I’ll do just that starting from –

NOW

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s