Skip to main content
Code Review

Return to Answer

Commonmark migration
Source Link

I applaud you for wanting to move away from frameworks you have come to rely on - it will definitely help you in the long run when it comes to debugging in the future!

Here are a few things I noticed, and that could be improved with your calculator.

##HTML

HTML

  1. Try to stay away from inline styles. Adding style attributes for single elements might seem like an easy way to quickly apply a style, but it makes your HTML messy and CSS hard to debug. Inline styles will override CSS, which eventually leads to using !important. You also don't give the browser the chance to cache that style, as it will for CSS documents which rarely change.
  2. Try to avoid using onclick attributes to hook up Javascript events to elements. This also falls under the category of Don't Repeat Yourself (DRY), since a lot of the events call the code function. It's possible to handle this with one event and one event listener that looks at the innerText of the caller!
  3. Courtesy of Ismael in the comments: You're missing a doctype! Fortunately, the HTML5 doctype is super easy. Just add <!doctype html> before your <html> tag.
  4. You need to add a <title> tag to your head section, which gives the page the name that appears in the taskbar and tab of a user's web browser.
  5. See if you can save your CSS in an external stylesheet (file.css for example) and reference it in the head section like so: <link rel="stylesheet" href="file.css">

##Javascript

Javascript

  1. There's a loooot of ternary action happening in the code function to the point of making it unreadable. I'm not quite sure what this function even does at first glance - I have to format it extensively to begin to see how it works. It looks like it eventually creates a function from a string, which I think is a pretty clever way to solve the classic calculator problem in JS.
  2. To implement the change I mentioned above about onclick and code, see @cimmanon's answer, which is much better than what I had here previously.

If you apply a specific class to all buttons that call code, you can get rid of that nasty switch completely.

  1. rezPlz is an interesting variable name ;)

And some nitpicky things:

  1. It's good practice to put semicolons after settings variables and expressions - var code = function() { ... }; is an example of this. However, you don't need a semicolon after explicit function declarations, such as function restring(str) { ... };. Source
  2. Because of your use of onclick, the code won't run if the script is found outside the body. In this case, it's between </body> and </html>, which is pretty weird. Including scripts this way (I believe) also forces the browser to wait until the script is done loading before it displays anything to the user!
  3. I'm not sure if it's because you wanted to include all your code in one code block for this question, but having CSS at the end of the document - especially in <style> tags - is just bizarre. This causes a FOUC! Source

Hopefully this helps!

I applaud you for wanting to move away from frameworks you have come to rely on - it will definitely help you in the long run when it comes to debugging in the future!

Here are a few things I noticed, and that could be improved with your calculator.

##HTML

  1. Try to stay away from inline styles. Adding style attributes for single elements might seem like an easy way to quickly apply a style, but it makes your HTML messy and CSS hard to debug. Inline styles will override CSS, which eventually leads to using !important. You also don't give the browser the chance to cache that style, as it will for CSS documents which rarely change.
  2. Try to avoid using onclick attributes to hook up Javascript events to elements. This also falls under the category of Don't Repeat Yourself (DRY), since a lot of the events call the code function. It's possible to handle this with one event and one event listener that looks at the innerText of the caller!
  3. Courtesy of Ismael in the comments: You're missing a doctype! Fortunately, the HTML5 doctype is super easy. Just add <!doctype html> before your <html> tag.
  4. You need to add a <title> tag to your head section, which gives the page the name that appears in the taskbar and tab of a user's web browser.
  5. See if you can save your CSS in an external stylesheet (file.css for example) and reference it in the head section like so: <link rel="stylesheet" href="file.css">

##Javascript

  1. There's a loooot of ternary action happening in the code function to the point of making it unreadable. I'm not quite sure what this function even does at first glance - I have to format it extensively to begin to see how it works. It looks like it eventually creates a function from a string, which I think is a pretty clever way to solve the classic calculator problem in JS.
  2. To implement the change I mentioned above about onclick and code, see @cimmanon's answer, which is much better than what I had here previously.

If you apply a specific class to all buttons that call code, you can get rid of that nasty switch completely.

  1. rezPlz is an interesting variable name ;)

And some nitpicky things:

  1. It's good practice to put semicolons after settings variables and expressions - var code = function() { ... }; is an example of this. However, you don't need a semicolon after explicit function declarations, such as function restring(str) { ... };. Source
  2. Because of your use of onclick, the code won't run if the script is found outside the body. In this case, it's between </body> and </html>, which is pretty weird. Including scripts this way (I believe) also forces the browser to wait until the script is done loading before it displays anything to the user!
  3. I'm not sure if it's because you wanted to include all your code in one code block for this question, but having CSS at the end of the document - especially in <style> tags - is just bizarre. This causes a FOUC! Source

Hopefully this helps!

I applaud you for wanting to move away from frameworks you have come to rely on - it will definitely help you in the long run when it comes to debugging in the future!

Here are a few things I noticed, and that could be improved with your calculator.

HTML

  1. Try to stay away from inline styles. Adding style attributes for single elements might seem like an easy way to quickly apply a style, but it makes your HTML messy and CSS hard to debug. Inline styles will override CSS, which eventually leads to using !important. You also don't give the browser the chance to cache that style, as it will for CSS documents which rarely change.
  2. Try to avoid using onclick attributes to hook up Javascript events to elements. This also falls under the category of Don't Repeat Yourself (DRY), since a lot of the events call the code function. It's possible to handle this with one event and one event listener that looks at the innerText of the caller!
  3. Courtesy of Ismael in the comments: You're missing a doctype! Fortunately, the HTML5 doctype is super easy. Just add <!doctype html> before your <html> tag.
  4. You need to add a <title> tag to your head section, which gives the page the name that appears in the taskbar and tab of a user's web browser.
  5. See if you can save your CSS in an external stylesheet (file.css for example) and reference it in the head section like so: <link rel="stylesheet" href="file.css">

Javascript

  1. There's a loooot of ternary action happening in the code function to the point of making it unreadable. I'm not quite sure what this function even does at first glance - I have to format it extensively to begin to see how it works. It looks like it eventually creates a function from a string, which I think is a pretty clever way to solve the classic calculator problem in JS.
  2. To implement the change I mentioned above about onclick and code, see @cimmanon's answer, which is much better than what I had here previously.

If you apply a specific class to all buttons that call code, you can get rid of that nasty switch completely.

  1. rezPlz is an interesting variable name ;)

And some nitpicky things:

  1. It's good practice to put semicolons after settings variables and expressions - var code = function() { ... }; is an example of this. However, you don't need a semicolon after explicit function declarations, such as function restring(str) { ... };. Source
  2. Because of your use of onclick, the code won't run if the script is found outside the body. In this case, it's between </body> and </html>, which is pretty weird. Including scripts this way (I believe) also forces the browser to wait until the script is done loading before it displays anything to the user!
  3. I'm not sure if it's because you wanted to include all your code in one code block for this question, but having CSS at the end of the document - especially in <style> tags - is just bizarre. This causes a FOUC! Source

Hopefully this helps!

replaced http://stackoverflow.com/ with https://stackoverflow.com/
Source Link

I applaud you for wanting to move away from frameworks you have come to rely on - it will definitely help you in the long run when it comes to debugging in the future!

Here are a few things I noticed, and that could be improved with your calculator.

##HTML

  1. Try to stay away from inline styles. Adding style attributes for single elements might seem like an easy way to quickly apply a style, but it makes your HTML messy and CSS hard to debug. Inline styles will override CSS, which eventually leads to using !important. You also don't give the browser the chance to cache that style, as it will for CSS documents which rarely change.
  2. Try to avoid using onclick attributes to hook up Javascript events to elements. This also falls under the category of Don't Repeat Yourself (DRY), since a lot of the events call the code function. It's possible to handle this with one event and one event listener that looks at the innerText of the caller!
  3. Courtesy of Ismael in the comments: You're missing a doctype! Fortunately, the HTML5 doctype is super easy. Just add <!doctype html> before your <html> tag.
  4. You need to add a <title> tag to your head section, which gives the page the name that appears in the taskbar and tab of a user's web browser.
  5. See if you can save your CSS in an external stylesheet (file.css for example) and reference it in the head section like so: <link rel="stylesheet" href="file.css">

##Javascript

  1. There's a loooot of ternary action happening in the code function to the point of making it unreadable. I'm not quite sure what this function even does at first glance - I have to format it extensively to begin to see how it works. It looks like it eventually creates a function from a string, which I think is a pretty clever way to solve the classic calculator problem in JS.
  2. To implement the change I mentioned above about onclick and code, see @cimmanon's answer, which is much better than what I had here previously.

If you apply a specific class to all buttons that call code, you can get rid of that nasty switch completely.

  1. rezPlz is an interesting variable name ;)

And some nitpicky things:

  1. It's good practice to put semicolons after settings variables and expressions - var code = function() { ... }; is an example of this. However, you don't need a semicolon after explicit function declarations, such as function restring(str) { ... };. Source Source
  2. Because of your use of onclick, the code won't run if the script is found outside the body. In this case, it's between </body> and </html>, which is pretty weird. Including scripts this way (I believe) also forces the browser to wait until the script is done loading before it displays anything to the user!
  3. I'm not sure if it's because you wanted to include all your code in one code block for this question, but having CSS at the end of the document - especially in <style> tags - is just bizarre. This causes a FOUC! Source

Hopefully this helps!

I applaud you for wanting to move away from frameworks you have come to rely on - it will definitely help you in the long run when it comes to debugging in the future!

Here are a few things I noticed, and that could be improved with your calculator.

##HTML

  1. Try to stay away from inline styles. Adding style attributes for single elements might seem like an easy way to quickly apply a style, but it makes your HTML messy and CSS hard to debug. Inline styles will override CSS, which eventually leads to using !important. You also don't give the browser the chance to cache that style, as it will for CSS documents which rarely change.
  2. Try to avoid using onclick attributes to hook up Javascript events to elements. This also falls under the category of Don't Repeat Yourself (DRY), since a lot of the events call the code function. It's possible to handle this with one event and one event listener that looks at the innerText of the caller!
  3. Courtesy of Ismael in the comments: You're missing a doctype! Fortunately, the HTML5 doctype is super easy. Just add <!doctype html> before your <html> tag.
  4. You need to add a <title> tag to your head section, which gives the page the name that appears in the taskbar and tab of a user's web browser.
  5. See if you can save your CSS in an external stylesheet (file.css for example) and reference it in the head section like so: <link rel="stylesheet" href="file.css">

##Javascript

  1. There's a loooot of ternary action happening in the code function to the point of making it unreadable. I'm not quite sure what this function even does at first glance - I have to format it extensively to begin to see how it works. It looks like it eventually creates a function from a string, which I think is a pretty clever way to solve the classic calculator problem in JS.
  2. To implement the change I mentioned above about onclick and code, see @cimmanon's answer, which is much better than what I had here previously.

If you apply a specific class to all buttons that call code, you can get rid of that nasty switch completely.

  1. rezPlz is an interesting variable name ;)

And some nitpicky things:

  1. It's good practice to put semicolons after settings variables and expressions - var code = function() { ... }; is an example of this. However, you don't need a semicolon after explicit function declarations, such as function restring(str) { ... };. Source
  2. Because of your use of onclick, the code won't run if the script is found outside the body. In this case, it's between </body> and </html>, which is pretty weird. Including scripts this way (I believe) also forces the browser to wait until the script is done loading before it displays anything to the user!
  3. I'm not sure if it's because you wanted to include all your code in one code block for this question, but having CSS at the end of the document - especially in <style> tags - is just bizarre. This causes a FOUC! Source

Hopefully this helps!

I applaud you for wanting to move away from frameworks you have come to rely on - it will definitely help you in the long run when it comes to debugging in the future!

Here are a few things I noticed, and that could be improved with your calculator.

##HTML

  1. Try to stay away from inline styles. Adding style attributes for single elements might seem like an easy way to quickly apply a style, but it makes your HTML messy and CSS hard to debug. Inline styles will override CSS, which eventually leads to using !important. You also don't give the browser the chance to cache that style, as it will for CSS documents which rarely change.
  2. Try to avoid using onclick attributes to hook up Javascript events to elements. This also falls under the category of Don't Repeat Yourself (DRY), since a lot of the events call the code function. It's possible to handle this with one event and one event listener that looks at the innerText of the caller!
  3. Courtesy of Ismael in the comments: You're missing a doctype! Fortunately, the HTML5 doctype is super easy. Just add <!doctype html> before your <html> tag.
  4. You need to add a <title> tag to your head section, which gives the page the name that appears in the taskbar and tab of a user's web browser.
  5. See if you can save your CSS in an external stylesheet (file.css for example) and reference it in the head section like so: <link rel="stylesheet" href="file.css">

##Javascript

  1. There's a loooot of ternary action happening in the code function to the point of making it unreadable. I'm not quite sure what this function even does at first glance - I have to format it extensively to begin to see how it works. It looks like it eventually creates a function from a string, which I think is a pretty clever way to solve the classic calculator problem in JS.
  2. To implement the change I mentioned above about onclick and code, see @cimmanon's answer, which is much better than what I had here previously.

If you apply a specific class to all buttons that call code, you can get rid of that nasty switch completely.

  1. rezPlz is an interesting variable name ;)

And some nitpicky things:

  1. It's good practice to put semicolons after settings variables and expressions - var code = function() { ... }; is an example of this. However, you don't need a semicolon after explicit function declarations, such as function restring(str) { ... };. Source
  2. Because of your use of onclick, the code won't run if the script is found outside the body. In this case, it's between </body> and </html>, which is pretty weird. Including scripts this way (I believe) also forces the browser to wait until the script is done loading before it displays anything to the user!
  3. I'm not sure if it's because you wanted to include all your code in one code block for this question, but having CSS at the end of the document - especially in <style> tags - is just bizarre. This causes a FOUC! Source

Hopefully this helps!

replaced http://codereview.stackexchange.com/ with https://codereview.stackexchange.com/
Source Link

I applaud you for wanting to move away from frameworks you have come to rely on - it will definitely help you in the long run when it comes to debugging in the future!

Here are a few things I noticed, and that could be improved with your calculator.

##HTML

  1. Try to stay away from inline styles. Adding style attributes for single elements might seem like an easy way to quickly apply a style, but it makes your HTML messy and CSS hard to debug. Inline styles will override CSS, which eventually leads to using !important. You also don't give the browser the chance to cache that style, as it will for CSS documents which rarely change.
  2. Try to avoid using onclick attributes to hook up Javascript events to elements. This also falls under the category of Don't Repeat Yourself (DRY), since a lot of the events call the code function. It's possible to handle this with one event and one event listener that looks at the innerText of the caller!
  3. Courtesy of Ismael in the comments: You're missing a doctype! Fortunately, the HTML5 doctype is super easy. Just add <!doctype html> before your <html> tag.
  4. You need to add a <title> tag to your head section, which gives the page the name that appears in the taskbar and tab of a user's web browser.
  5. See if you can save your CSS in an external stylesheet (file.css for example) and reference it in the head section like so: <link rel="stylesheet" href="file.css">

##Javascript

  1. There's a loooot of ternary action happening in the code function to the point of making it unreadable. I'm not quite sure what this function even does at first glance - I have to format it extensively to begin to see how it works. It looks like it eventually creates a function from a string, which I think is a pretty clever way to solve the classic calculator problem in JS.
  2. To implement the change I mentioned above about onclick and code, see @cimmanon's answer @cimmanon's answer, which is much better than what I had here previously.

If you apply a specific class to all buttons that call code, you can get rid of that nasty switch completely.

  1. rezPlz is an interesting variable name ;)

And some nitpicky things:

  1. It's good practice to put semicolons after settings variables and expressions - var code = function() { ... }; is an example of this. However, you don't need a semicolon after explicit function declarations, such as function restring(str) { ... };. Source
  2. Because of your use of onclick, the code won't run if the script is found outside the body. In this case, it's between </body> and </html>, which is pretty weird. Including scripts this way (I believe) also forces the browser to wait until the script is done loading before it displays anything to the user!
  3. I'm not sure if it's because you wanted to include all your code in one code block for this question, but having CSS at the end of the document - especially in <style> tags - is just bizarre. This causes a FOUC! Source

Hopefully this helps!

I applaud you for wanting to move away from frameworks you have come to rely on - it will definitely help you in the long run when it comes to debugging in the future!

Here are a few things I noticed, and that could be improved with your calculator.

##HTML

  1. Try to stay away from inline styles. Adding style attributes for single elements might seem like an easy way to quickly apply a style, but it makes your HTML messy and CSS hard to debug. Inline styles will override CSS, which eventually leads to using !important. You also don't give the browser the chance to cache that style, as it will for CSS documents which rarely change.
  2. Try to avoid using onclick attributes to hook up Javascript events to elements. This also falls under the category of Don't Repeat Yourself (DRY), since a lot of the events call the code function. It's possible to handle this with one event and one event listener that looks at the innerText of the caller!
  3. Courtesy of Ismael in the comments: You're missing a doctype! Fortunately, the HTML5 doctype is super easy. Just add <!doctype html> before your <html> tag.
  4. You need to add a <title> tag to your head section, which gives the page the name that appears in the taskbar and tab of a user's web browser.
  5. See if you can save your CSS in an external stylesheet (file.css for example) and reference it in the head section like so: <link rel="stylesheet" href="file.css">

##Javascript

  1. There's a loooot of ternary action happening in the code function to the point of making it unreadable. I'm not quite sure what this function even does at first glance - I have to format it extensively to begin to see how it works. It looks like it eventually creates a function from a string, which I think is a pretty clever way to solve the classic calculator problem in JS.
  2. To implement the change I mentioned above about onclick and code, see @cimmanon's answer, which is much better than what I had here previously.

If you apply a specific class to all buttons that call code, you can get rid of that nasty switch completely.

  1. rezPlz is an interesting variable name ;)

And some nitpicky things:

  1. It's good practice to put semicolons after settings variables and expressions - var code = function() { ... }; is an example of this. However, you don't need a semicolon after explicit function declarations, such as function restring(str) { ... };. Source
  2. Because of your use of onclick, the code won't run if the script is found outside the body. In this case, it's between </body> and </html>, which is pretty weird. Including scripts this way (I believe) also forces the browser to wait until the script is done loading before it displays anything to the user!
  3. I'm not sure if it's because you wanted to include all your code in one code block for this question, but having CSS at the end of the document - especially in <style> tags - is just bizarre. This causes a FOUC! Source

Hopefully this helps!

I applaud you for wanting to move away from frameworks you have come to rely on - it will definitely help you in the long run when it comes to debugging in the future!

Here are a few things I noticed, and that could be improved with your calculator.

##HTML

  1. Try to stay away from inline styles. Adding style attributes for single elements might seem like an easy way to quickly apply a style, but it makes your HTML messy and CSS hard to debug. Inline styles will override CSS, which eventually leads to using !important. You also don't give the browser the chance to cache that style, as it will for CSS documents which rarely change.
  2. Try to avoid using onclick attributes to hook up Javascript events to elements. This also falls under the category of Don't Repeat Yourself (DRY), since a lot of the events call the code function. It's possible to handle this with one event and one event listener that looks at the innerText of the caller!
  3. Courtesy of Ismael in the comments: You're missing a doctype! Fortunately, the HTML5 doctype is super easy. Just add <!doctype html> before your <html> tag.
  4. You need to add a <title> tag to your head section, which gives the page the name that appears in the taskbar and tab of a user's web browser.
  5. See if you can save your CSS in an external stylesheet (file.css for example) and reference it in the head section like so: <link rel="stylesheet" href="file.css">

##Javascript

  1. There's a loooot of ternary action happening in the code function to the point of making it unreadable. I'm not quite sure what this function even does at first glance - I have to format it extensively to begin to see how it works. It looks like it eventually creates a function from a string, which I think is a pretty clever way to solve the classic calculator problem in JS.
  2. To implement the change I mentioned above about onclick and code, see @cimmanon's answer, which is much better than what I had here previously.

If you apply a specific class to all buttons that call code, you can get rid of that nasty switch completely.

  1. rezPlz is an interesting variable name ;)

And some nitpicky things:

  1. It's good practice to put semicolons after settings variables and expressions - var code = function() { ... }; is an example of this. However, you don't need a semicolon after explicit function declarations, such as function restring(str) { ... };. Source
  2. Because of your use of onclick, the code won't run if the script is found outside the body. In this case, it's between </body> and </html>, which is pretty weird. Including scripts this way (I believe) also forces the browser to wait until the script is done loading before it displays anything to the user!
  3. I'm not sure if it's because you wanted to include all your code in one code block for this question, but having CSS at the end of the document - especially in <style> tags - is just bizarre. This causes a FOUC! Source

Hopefully this helps!

Update title tip
Source Link
Scott
  • 285
  • 1
  • 7
Loading
You learn something new every day
Source Link
Scott
  • 285
  • 1
  • 7
Loading
Improvements from Ismael Miguel, thank you!; added 8 characters in body
Source Link
Scott
  • 285
  • 1
  • 7
Loading
Source Link
Scott
  • 285
  • 1
  • 7
Loading
lang-css

AltStyle によって変換されたページ (->オリジナル) /