The latest articles on DEV Community by Grade Calculator (@gradecalculator). https://dev.to/gradecalculator https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F843681%2F0008eb6e-7360-410d-9c04-72e637742d34.png https://dev.to/gradecalculator en Grade Calculator Sun, 10 Apr 2022 09:46:01 +0000 https://dev.to/gradecalculator/college-weighted-grade-calculator-with-pure-html-css-js-2p00 https://dev.to/gradecalculator/college-weighted-grade-calculator-with-pure-html-css-js-2p00 <p>I worked on a weighted grade calculator project for <a href="https://www.thebestdegree.com/">thebestdegree.com</a>. After some research, I found JS static HTML is the best way for the project. I share some thoughts when building the project, and hopefully it adds knowledge to the community.</p> <h2> Functions Added </h2> <ol> <li><p>Assignment grade, course grade percentage. Example: grade 83, percentage 15. Percentage/point change - Advanced Mode Options if you're looking for a tool that can help you set your grading scale, this function is a must. Final page layout with CSS can be seen on the <a href="https://www.thebestdegree.com/grade-calculator/">weighted grade calculator</a> page.</p></li> <li><p>For converting the percentage grade points to letter capital part, the following <a href="https://ww2.hunter.cuny.edu/students/academic-planning/degree-requirements/construct-an-academic-plan/gpa-calculator/grading-scale/">grading scale table</a> was used as a reference.</p></li> <li><p>Set an Add Row button to add additional input fields. After entering the data, press the "Calculate" button and the weighted calculated grade point average is to be shown in the results area. Also, The following formula was used to calculate the minimum grade you need to achieve on the final exam: Requirements = (Aim - Current × (100% - Final Weight)) / Final Weight.</p></li> </ol> <h2> The Javascript code to fill some of the functions above </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$("#points").delegate(".changetopoints", "click", function() { $(".grade").attr("placeholder","Grade(points) e.g. 15"); $(".weight").attr("placeholder","Points Available(points) e.g. 20"); $("#points").addClass("is-primary"); $("#percent").removeClass("is-primary"); document.getElementById("totalpoints").style = "margin-top:0.6em; margin-left:0.6em; display:block;"; $("#percent").removeClass("click"); $("#percent").addClass("nonclick"); $("#points").removeClass("nonclick"); $("#points").addClass("click"); tip.innerHTML = "Points received in the blue column, points available in the red column." reset(); }); $("#percent").delegate(".changetopecent", "click", function() { $(".grade").attr("placeholder","Grade(%) e.g. 75"); $(".weight").attr("placeholder","Weight(%) e.g. 15"); $("#points").removeClass("is-primary"); $("#percent").addClass("is-primary"); document.getElementById("totalpoints").style = "margin-top:-0.6em; margin-left:0.6em; display:none;"; $("#percent").removeClass("nonclick"); $("#percent").addClass("click"); $("#points").removeClass("click"); $("#points").addClass("nonclick"); tip.innerHTML = "Grades in the blue column, weights in the red column. " reset(); }); $("#reset").click(function() { reset(); }); $("#assignment").delegate(".add", "click", function() { if($("#percent").is(".is-primary")){ $newRow = " &lt;div class='field is-horizontal'&gt;"+"&lt;div class='field-label is-small'&gt;"+"&lt;label class='label'&gt;"+row+".&lt;/label&gt;"+"&lt;/div&gt;"+ "&lt;div class='field-body'&gt;"+ "&lt;div class='field'&gt;"+ "&lt;p class='control is-expanded has-icons-left'&gt;"+ "&lt;input class='input is-rounded is-small is-info grade'"+ "onkeypress='return isNumberKey(event)' type='text' placeholder='Grade(%) e.g. 75'&gt;"+ "&lt;span class='icon is-small is-left'&gt;"+ "&lt;i class='fas fa-pencil-alt'&gt;&lt;/i&gt;&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;"+ "&lt;div class='field'&gt;"+ "&lt;div class='control is-expanded has-icons-left'&gt;"+ "&lt;input class='input is-small is-rounded is-danger weight' onkeypress='return isNumberKey(event)' type='text' placeholder='Weight(%) e.g. 15'&gt;"+ "&lt;span class='icon is-small is-left'&gt;"+ "&lt;i class='fas fa-pencil-alt'&gt;&lt;/i&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"; } else{ $newRow = " &lt;div class='field is-horizontal'&gt;"+"&lt;div class='field-label is-small'&gt;"+"&lt;label class='label'&gt;"+row+".&lt;/label&gt;"+"&lt;/div&gt;"+ "&lt;div class='field-body'&gt;"+ "&lt;div class='field'&gt;"+ "&lt;p class='control is-expanded has-icons-left'&gt;"+ "&lt;input class='input is-rounded is-small is-info grade'"+ "onkeypress='return isNumberKey(event)' type='text' placeholder='Grade(points) e.g. 15'&gt;"+ "&lt;span class='icon is-small is-left'&gt;"+ "&lt;i class='fas fa-pencil-alt'&gt;&lt;/i&gt;&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;"+ "&lt;div class='field'&gt;"+ "&lt;div class='control is-expanded has-icons-left'&gt;"+ "&lt;input class='input is-small is-rounded is-danger weight' onkeypress='return isNumberKey(event)' type='text' placeholder='Points available(points) e.g. 20'&gt;"+ "&lt;span class='icon is-small is-left'&gt;"+ "&lt;i class='fas fa-pencil-alt'&gt;&lt;/i&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"; } $("#table").append($newRow); row += 1; }); </code></pre> </div> javascript webdev html programming