2
\$\begingroup\$

I've been asked to output the users name, what day of the week they were born on, output a line from a poem corresponding with the day they were born on, and their scores for a vark test. We were told to calculate the month of birth as a number and find the number/ month.

This is the first bit of code I've done and I'm just after some comments/feedback on it

MONTHS = 'JANFEBMARAPRMAYJUNJULAUGSEPOCTNOVDEC'; //months
document.write ('<h1>Introduce Yourself</h1><hr />');
var userName = ''; //create username variable
userName = prompt('Enter your First Name','Alex'); //prompt user for name

var dateString = prompt('Enter your birth date in the form dd mmm yyyy','26 APR    1988'); //get users date of birth
var substrings = dateString.split(' ');
var day = substrings[0];
var month = substrings[1];
var year = substrings[2];

var monthNumber = month.indexOf(MONTHS);
if (monthNumber >= 0); {
}

var poem = ["Sunday's child is fair and wise", "Monday's child is fair of face",        "Tuesday's child is full of grace", "Wednesday's child is full of woe", "Thursday's child has far to go", "Friday's child is loving and giving", "Saturday's child works hard for a living"]; 
var daysArray = new Array ('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',    'Friday', 'Saturday');
var birthDate = new Date(year, monthNumber/3, day);
var dayNumber = (birthDate.getDay());
var dayName = daysArray[dayNumber];
var dayPoem = poem[dayNumber];
document.writeln ('<p><ul><li><h2>My name is:  <font color="red"> '+ userName +' </font></li><li><h2> I was born on a '+ dayName +': <font color="blue"><em> '+dayPoem+' </em> </font></h2></li></ul></p>');


var varkString = prompt('Enter your VARK scores - [visual|aural|read|kinesthetic]','9|3|11|10');
var subStrings = varkString.split('|');
var visual = subStrings[0];
var aural = subStrings[1];
var read = subStrings[2];
var kinesthetic = subStrings[3];
var visualBar = 30*visual;
var auralBar = 30*aural;
var readBar = 30*read;
var kinestheticBar = 30*kinesthetic;
document.write ('<h2><font color="green">My Vark Scores</font></h2>');
document.writeln ('<img src="chart_key.png"/><br />');
document.writeln('<img src="bar_red.png" width='+visualBar+' height="25"/>('+visual+')<br />');
document.writeln('<img src="bar_yellow.png" width='+auralBar+' height="25"/>('+aural+')<br />');
document.writeln('<img src="bar_blue.png" width='+readBar+' height="25"/>('+read+')<br />');
document.writeln('<img src="bar_green.png" width='+kinestheticBar+' height="25"/>('+kinesthetic+')<br />');{
}
\$\endgroup\$
1
\$\begingroup\$

Judging by your code, you're a beginner in JS (blame it on document.write :P). Anyways, here's some tips to save you early on your JS journey.

MONTHS = 'JANFEBMARAPRMAYJUNJULAUGSEPOCTNOVDEC'; //months

Declare variables with a var. That's the proper practice, and when you start using functions, you don't accidentally declare globals. In addition, MONTHS is a set of month abbreviations. You probably want to use an array. Lastly, we still retain the convention of constants as call capital letters, so credits to that.

var MONTHS = ['JAN','FEB','MAR', ... ];

document.write ('<h1>Introduce Yourself</h1><hr />');

There are limited reasons to use document.write. The problem with it is that once the page is fully loaded, doing it will discard the entire page and the browser will write the content from a fresh blank page. This means its not suitable for after-page-creation operations.

Suggesting you look into DOM manipulation functions like document.createElement() and document.appendChild as well as document.querySelectorAll. This is as close to a library-like functionality as you get without ever using one.


userName = prompt('Enter your First Name','Alex'); //prompt user for name

While there's nothing against prompts, I suggest you explore more on forms and input elements. They are HTML elements that allow you to input data and have JS retrieve them.


var dateString = prompt('Enter your birth date in the form dd mmm yyyy','26 APR    1988'); //get users date of birth
var substrings = dateString.split(' ');
var day = substrings[0];
var month = substrings[1];
var year = substrings[2];

This will probably break if you don't check for the values. Have some form of validation to check if the values are valid.


var poem = ["Sunday's child is fair and wise", "Monday's child is fair of face",        "Tuesday's child is full of grace", "Wednesday's child is full of woe", "Thursday's child has far to go", "Friday's child is loving and giving", "Saturday's child works hard for a living"]; 
var daysArray = new Array ('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',    'Friday', 'Saturday');

You just declared poem using the literal notation, but not daysArray? Tsk3. Best practice is use literals whenever possible. Saves you keystrokes and looks less Java-ish.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.