I decided to try making a tutorial this time.
You want to give the user a nice experience while on your page. You can make that happen by breaking up some of the information into easier read information.
One such way would be by using lists.
Lists have multiple forms and purposes.
For instance, lets so you needed a numbered list 1 to 10. You would want to use <ol> or Ordered list.
Maybe numbers aren’t nessasary for your list instead you want bullet points of important information. <ul> Unordered list would be best for that situation.
Now that we have stated a list we need <li> List items. These each go on their own line and this is the information accompanied by the number or bullet.
We also have <dl> definition lists. These are used for a series of terms and their definitions.
Within the definition lists we would use <dt> as the term to be defined and <dd> to place the definition information.
One such way to do that is with CSS code.
CSS treats HTML elements as if each one is a box. You can control where to move these boxes
By default these boxes are sized just big enough to hold it’s content but by using height and width properties you can set your own dimensions.
One of the most popular ways to change properties is with pixels other methods include percentages or ems.
Important when using percentages the size of the box is relative to the size of the browser window! So keep that in mind.
Ems box sizes are based off the size of text within.
The first part of our solution here is min-width this property specifies the smallest size a box can be displayed. Which can control visability on small screens.
The second part of our solution is max-width this property makes sure the lines of text don’t appear to big on large screens.
We have width down but now we need to control the height and the solution here will be an easy one.
The first part is min-height specifies the smallest box’s height should be. Keep this in mind for the small screens.
The seoncd part is max-height used to control the height when viewing on large screens.
We can solve this problem with the overflow: property with CSS in two different ways.
Every box has 3 available properties can be adjusted to control its appearance.
Border these can be used to seperate the edges of one box from another
Margin sets the edge outside the border, if you want a gap between 2 borders use margin.
Padding says how much space between the content within the box and the border of the box.
By using that trio above you can give your user a much better visual experience on your webpage.
Part of a good user experience is that it should be unique. Multiple decisions and functions happening based off the user’s choice.
That’s where if statements come in.
By saving the answer results in a variable then running that through an if statement, to see if they got enough points, you can make the code give your user a reward message. This is how it looks:
if (score >= 50) {
congratulate();
}
But wait, what happens if the user gets less than 50 points?? We’re going to need an else statement after the if statement
if (score >= 50) {
congratulate();
} else { encourage(); }
Now your code takes the variable score and says “if score is more than or equal to 50 then i’ll run the congratulate function, if thats not true then i’ll just give them a encourage function.”
By using a level variable that could be raised after a certain amount of correct answers paired up with the switch statement.
Switch doesnt use an if or else statement instead it changes based off the level variable’s case. Once the level variable matches the case string ie ‘One’, ‘Two’, ‘Three’ it runs that code. After that you would add a break; which will stop the rest of the code from running.
Page 164 for the graphic
Something to remember about Truthy & Falsey values, every value in Javascript can be treated as if it were true or false. This can create some interesting side effects.
Think of a situation what would need the code to check a condition and when that condition is true it would run a line of code.
As my user gets more points in that quiz I want to change the level inside the switch statement
You could set a loop such as:
for (var score = 0; score < 5; score++) {
level == ‘One’;
}
TAs please let me know if this code above is not correct or it’s not being used correctly.
While loops run as long as the condition within the parentheses is true. Within the while loop you can place statements to be run until the condition is false.
My mind goes to a video game health bar, while health is above x amount the ‘beingAlive’ variable would be True.
The main difference here is statements in the code block go before the condition. This means the statement in Do While loops always runs at least once.
Reference page 180 and 181 for a great example by the book for using a while loop.