純粋なHTML、CSSとJS
7081 ワード
私はthebestdegree.comのための重み付けグレード電卓プロジェクトで働いた.いくつかの研究の後、私はJSの静的なHTMLは、プロジェクトのための最良の方法を発見した.プロジェクトを構築するとき、私は若干の考えを共有します、そして、うまくいけば、それはコミュニティに知識を加えます.
割り当てグレード、コースグレードパーセンテージ.例:グレード83、パーセンテージ15.パーセンテージ/ポイントの変更-高度なモードオプションを使用すると、あなたの等級を設定することができますツールを探している場合は、この関数は必須です.CSSによる最終的なページレイアウトは、weighted grade calculatorページで見られることができます. パーセンテージ等級点を文字資本部に変換するためのは、以下のgrading scale tableを基準として使用した. 追加の入力フィールドを追加する行ボタンを追加します.データを入力した後、“計算”ボタンを押すと重み付け計算された等級平均は、結果の領域に表示されることです.また、次の式は、最終的な試験で達成するために必要な最小の等級を計算するために使用されました:要件=(AIM -現在のX(100 %-最終重量))/最終重量.
追加関数
上の関数の一部を埋めるJavaScriptコード
$("#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 = " <div class='field is-horizontal'>"+"<div class='field-label is-small'>"+"<label class='label'>"+row+".</label>"+"</div>"+
"<div class='field-body'>"+
"<div class='field'>"+
"<p class='control is-expanded has-icons-left'>"+
"<input class='input is-rounded is-small is-info grade'"+
"onkeypress='return isNumberKey(event)' type='text' placeholder='Grade(%) e.g. 75'>"+
"<span class='icon is-small is-left'>"+
"<i class='fas fa-pencil-alt'></i></span></p></div>"+
"<div class='field'>"+
"<div class='control is-expanded has-icons-left'>"+
"<input class='input is-small is-rounded is-danger weight' onkeypress='return isNumberKey(event)' type='text' placeholder='Weight(%) e.g. 15'>"+
"<span class='icon is-small is-left'>"+
"<i class='fas fa-pencil-alt'></i></span></div></div></div></div></div>";
}
else{
$newRow = " <div class='field is-horizontal'>"+"<div class='field-label is-small'>"+"<label class='label'>"+row+".</label>"+"</div>"+
"<div class='field-body'>"+
"<div class='field'>"+
"<p class='control is-expanded has-icons-left'>"+
"<input class='input is-rounded is-small is-info grade'"+
"onkeypress='return isNumberKey(event)' type='text' placeholder='Grade(points) e.g. 15'>"+
"<span class='icon is-small is-left'>"+
"<i class='fas fa-pencil-alt'></i></span></p></div>"+
"<div class='field'>"+
"<div class='control is-expanded has-icons-left'>"+
"<input class='input is-small is-rounded is-danger weight' onkeypress='return isNumberKey(event)' type='text' placeholder='Points available(points) e.g. 20'>"+
"<span class='icon is-small is-left'>"+
"<i class='fas fa-pencil-alt'></i></span></div></div></div></div></div>";
}
$("#table").append($newRow);
row += 1;
});
Reference
この問題について(純粋なHTML、CSSとJS), 我々は、より多くの情報をここで見つけました https://dev.to/gradecalculator/college-weighted-grade-calculator-with-pure-html-css-js-2p00テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol