Skip to content

Commit

Permalink
Website for Digital Business Class
Browse files Browse the repository at this point in the history
  • Loading branch information
@MafuSaku
MafuSaku authored Dec 4, 2024
1 parent 1f197e8 commit 16d7a29
Show file tree
Hide file tree
Showing 3 changed files with 241 additions and 0 deletions.
61 changes: 61 additions & 0 deletions 2024/3-12-2024 (Week 6)/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meow</title>

<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<h1>โปรแกรมตัดเกรด</h1>

<p class="text_1">กรอกคะแนน</p>

<div class="text_2">
<label for="score1">วิชาเทคโนโลยีคอมพิวเตอร์</label>
<input type="text" id="score1" name="score1" placeholder="0-100" required>
<br>
</div>

<div class="text_3">
<label for="score2">วิชาวงจรไฟฟ้า</label>
<input type="text" id="score2" name="score2" placeholder="0-100" required>
<br>
</div>

<div class="text_4">
<label for="score3">วิชาไมโครคอนโทรเลอร์</label>
<input type="text" id="score3" name="score3" placeholder="0-100" required>
<br>
</div>

<br>

<button class="button" style="vertical-align: middle;" type="submit" onclick="grade(), grade2(), grade3(), onSubmit()"><span>Submit</span></button>

<h1>ผลคะแนน</h1>

<div class="box1">
<h3>วิชาเทคโนโลยีคอมพิวเตอร์</h3>
<p class="text_11" id="show"></p>
<br>
</div>

<div class="box2">
<h3>วิชาวงจรไฟฟ้า</h3>
<p class="text_11" id="show2"></p>
<br>
</div>

<div class="box_3">
<h3>วิชาไมโครคอนโทรเลอร์</h3>
<p class="text_11" id="show3"></p>
<br>
</div>

<script src="script.js"></script>
</main>
</body>
</html>
71 changes: 71 additions & 0 deletions 2024/3-12-2024 (Week 6)/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
function grade() {
var score = document.getElementById("score1").value;

if (score < 50)
document.getElementById("show").innerHTML = "เกรด : F 'ไม่ผ่าน'"
if (score >= 50 && score < 60)
document.getElementById("show").innerHTML = "เกรด : D 'ผ่าน'"
if (score >= 60 && score < 70)
document.getElementById("show").innerHTML = "เกรด : C 'ผ่าน'"
if (score >= 70 && score < 80)
document.getElementById("show").innerHTML = "เกรด : B 'ผ่าน'"
if (score >= 80)
document.getElementById("show").innerHTML = "เกรด : A 'ผ่าน'"
if (isNaN(score))
document.getElementById("show").innerHTML = "ข้อมูลไม่ถูกต้อง"
if (score == "")
document.getElementById("show").innerHTML = "กรุณาใส่คะแนน"
}

function grade2() {
var score = document.getElementById("score2").value;

if (score < 50)
document.getElementById("show2").innerHTML = "เกรด : F 'ไม่ผ่าน'"
if (score >= 50 && score < 60)
document.getElementById("show2").innerHTML = "เกรด : D 'ผ่าน'"
if (score >= 60 && score < 70)
document.getElementById("show2").innerHTML = "เกรด : C 'ผ่าน'"
if (score >= 70 && score < 80)
document.getElementById("show2").innerHTML = "เกรด : B 'ผ่าน'"
if (score >= 80)
document.getElementById("show2").innerHTML = "เกรด : A 'ผ่าน'"
if (isNaN(score))
document.getElementById("show2").innerHTML = "ข้อมูลไม่ถูกต้อง"
if (score == "")
document.getElementById("show2").innerHTML = "กรุณาใส่คะแนน"
}

function grade3() {
var score = document.getElementById("score3").value;

if (score < 50)
document.getElementById("show3").innerHTML = "เกรด : F 'ไม่ผ่าน'"
if (score >= 50 && score < 60)
document.getElementById("show3").innerHTML = "เกรด : D 'ผ่าน'"
if (score >= 60 && score < 70)
document.getElementById("show3").innerHTML = "เกรด : C 'ผ่าน'"
if (score >= 70 && score < 80)
document.getElementById("show3").innerHTML = "เกรด : B 'ผ่าน'"
if (score >= 80)
document.getElementById("show3").innerHTML = "เกรด : A 'ผ่าน'"
if (isNaN(score))
document.getElementById("show3").innerHTML = "ข้อมูลไม่ถูกต้อง"
if (score == "")
document.getElementById("show3").innerHTML = "กรุณาใส่คะแนน"
}

function onSubmit(){
var firstScore = document.getElementById("show").innerHTML;
var secondScore = document.getElementById("show2").innerHTML;
var thirdScore = document.getElementById("show3").innerHTML;

alert(
"การกรอกคะแนนของคุณ" +
"\nผลคะแนนที่ได้ของแต่ละวิชาคือ" +
"\nวิชาเทคโนโลยีคอมพิวเตอร์: " + firstScore +
"\nวิชาวงจรไฟฟ้า: " + secondScore +
"\nวิชาไมโครคอนโทรเลอร์: " + thirdScore
);

};
109 changes: 109 additions & 0 deletions 2024/3-12-2024 (Week 6)/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
* {
text-align: center;
}

.text_1 {
font-size: 20px;
padding: 20px;
border: 4px solid;
border-radius: 10px;
background-color: lightgray;
box-shadow: 10px 10px;
max-width: 200px;
}

h1 {
padding: 20px;
border: 4px solid;
border-radius: 10px;
background-color: lightgray;
box-shadow: 10px 10px;
max-width: 200px;
}

h1, .text_1 {
margin-left: 810px;
}

.button {
display: inline-block;
border-radius: 4px;
background-color: lightgray;
border: none;
color: black;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right: 25px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}

.text_2, .text_3, .text_4 {
margin-left: 810px;
border: 4px solid;
border-radius: 10px;
background-color: lightgray;
box-shadow: 10px 10px;
width: 200px;
padding: 20px;
}

#score_math, #score_english, #score_science {
border-radius: 20px;
}

h3, .text_11 {
display: inline;
}

.text_11 {
margin-left: 20px;
}

h3, .text_11 {
padding: 10px;
border: 4px solid;
border-radius: 10px;
background-color: lightgray;
box-shadow: 10px 10px;
max-width: 200px;
}

.box1 {
margin-top: 29px;
}

.box1, .box2, .box3 {
margin-bottom: 40px;
}

label {
font-weight: 600;
}

0 comments on commit 16d7a29

Please sign in to comment.