Latest solutions
Latest comments
- @tediko@darenhua
I absolutely love your work here. As a beginner, I've been intensely reading your github repo code, and there are just so many wonderful techniques. Just from reading, I learned so much about how to organize and break sass/css files into many (with layout, base, util folders...), niche things like aria-label, a resets.css/sass file... and a LOT more. Thank you for your wonderful work and documentation.
I have only been exposed to the tip of the iceberg of development- with a cookie-cutter code structure of one big "styles.css" file and one big "script.js" file, and I desperately want to write code that is more organized and can scale more neatly. If possible, could you explain a little the purpose of the div with the class "overlay", that you included before the calculator div? Also, I would greatly appreciate a little breakdown of how you personally tackle the task of splitting your sass files. As far as my beginner analysis goes: base is the folder for "initializing" sass files- like initiliazing with margin resets or font family
component is for any "component" styles, like modals or other popups that are normally hidden and not a part of the main webpage
layout is where the main webpage layout happens- for styles like changing display:, width/heights, padding/margins, position, etc... making the webpage layout properly
and utilities is for helper files with variables, animations, etc that are used in the main style files?
At the moment, I am also confused on where things like element background colors, things like font size of the text on the keypad keys, or even the background color of the body. Surprisingly for me, I can't find any style like
body{ background = blue; }
in the code haha! I'd love to hear any feedback on how I could get to the level you are at, or any tips/resources to getting to write more professional-feeling code.
Thank you so much!!!
- @darenhua@darenhua
AHH Apologies everyone! I was too excited to post the solution after finishing javascript work that I forgot I needed to make the page responsive...