AI Class

MafuSaku · Dec 9, 2024 · 7854d0c · 7854d0c
1 parent 16d7a29
commit 7854d0c
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 0 deletions.
diff --git a/2024/9-12-2024 (Week 7.1 AI)/index.html b/2024/9-12-2024 (Week 7.1 AI)/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conversion Program - saku</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <main>
+        <header class="topbar">
+            <h1>โปรแกรมแปลงค่า</h1>
+        </header>
+
+        <section class="celsius">
+            <div class="container">
+                <h2>องศาเซลเซียส</h2>
+                <input type="text" id="celsiusInput" placeholder="Enter °C">
+                <input type="button" value="แปลงค่า" onclick="convertCelsius()">
+                <span id="celsiusResult"></span>
+            </div>
+        </section>
+
+        <section class="meters">
+            <div class="container">
+                <h2>เมตร</h2>
+                <input type="text" id="meterInput" placeholder="Enter meters">
+                <input type="button" value="แปลงค่า" onclick="convertMeters()">
+                <span id="meterResult"></span>
+            </div>
+        </section>
+
+        <section class="kilograms">
+            <div class="container">
+                <h2>กิโลกรัม</h2>
+                <input type="text" id="kilogramInput" placeholder="Enter kg">
+                <input type="button" value="แปลงค่า" onclick="convertKilograms()">
+                <span id="kilogramResult"></span>
+            </div>
+        </section>
+    </main>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/2024/9-12-2024 (Week 7.1 AI)/script.js b/2024/9-12-2024 (Week 7.1 AI)/script.js
@@ -0,0 +1,56 @@
+// Function to convert Celsius to Fahrenheit
+function convertCelsius() {
+    // Get the value from the Celsius input field and convert it to a float
+    const celsius = parseFloat(document.getElementById('celsiusInput').value);
+
+    // Check if the input is a valid number
+    if (!isNaN(celsius)) {
+        // Convert Celsius to Fahrenheit using the formula
+        const fahrenheit = (celsius * 9/5) + 32;
+
+        // Display the result, removing .00 if it's a whole number
+        document.getElementById('celsiusResult').innerText = 
+            `${fahrenheit.toString() === '0' ? '0' : fahrenheit.toFixed(2).replace(/\.00$/, '')}°F ฟาเรนไฮต์`;
+    } else {
+        // If the input is not a valid number, show an error message
+        document.getElementById('celsiusResult').innerText = 'กรุณาใส่ค่า'; // "Please enter a value"
+    }
+}
+
+// Function to convert Meters to Centimeters
+function convertMeters() {
+    // Get the value from the Meters input field and convert it to a float
+    const meters = parseFloat(document.getElementById('meterInput').value);
+
+    // Check if the input is a valid number
+    if (!isNaN(meters)) {
+        // Convert Meters to Centimeters (1 meter = 100 centimeters)
+        const centimeters = meters * 100;
+
+        // Display the result, removing .00 if it's a whole number
+        document.getElementById('meterResult').innerText = 
+            `${centimeters.toString() === '0' ? '0' : centimeters.toFixed(2).replace(/\.00$/, '')}cm เซนติเมตร`;
+    } else {
+        // If the input is not a valid number, show an error message
+        document.getElementById('meterResult').innerText = 'กรุณาใส่ค่า'; // "Please enter a value"
+    }
+}
+
+// Function to convert Kilograms to Grams
+function convertKilograms() {
+    // Get the value from the Kilograms input field and convert it to a float
+    const kilograms = parseFloat(document.getElementById('kilogramInput').value);
+
+    // Check if the input is a valid number
+    if (!isNaN(kilograms)) {
+        // Convert Kilograms to Grams (1 kilogram = 1000 grams)
+        const grams = kilograms * 1000;
+
+        // Display the result, removing .00 if it's a whole number
+        document.getElementById('kilogramResult').innerText = 
+            `${grams.toString() === '0' ? '0' : grams.toFixed(2).replace(/\.00$/, '')}g กรัม`;
+    } else {
+        // If the input is not a valid number, show an error message
+        document.getElementById('kilogramResult').innerText = 'กรุณาใส่ค่า'; // "Please enter a value"
+    }
+}
diff --git a/2024/9-12-2024 (Week 7.1 AI)/style.css b/2024/9-12-2024 (Week 7.1 AI)/style.css
@@ -0,0 +1,97 @@
+/* General styles for centering text */
+* {
+    text-align: center;
+}
+
+/* Top bar header styling */
+header.topbar {
+    font-size: 1.25rem; /* 20px */
+    padding: 1.25rem; /* 20px */
+    border: 4px solid;
+    border-radius: 0.625rem; /* 10px */
+    background-color: lightgray;
+    box-shadow: 0.625rem 0.625rem; /* 10px */
+    max-width: 300px;
+    margin: 1.25rem auto; /* 20px */
+}
+
+/* Section styling for conversion inputs */
+section {
+    margin: 1.25rem auto; /* 20px */
+    display: flex; /* Use flexbox for alignment */
+    justify-content: center; /* Center the content */
+}
+
+/* Container styling for each conversion section */
+.container {
+    font-size: 1.25rem; /* 20px */
+    padding: 1rem; /* Increased padding for more space */
+    border: 4px solid;
+    border-radius: 0.625rem; /* 10px */
+    background-color: lightgray;
+    max-width: 300px; /* Set a max width to prevent stretching */
+    width: 100%; /* Allow it to take full width up to max-width */
+    margin: 0 1rem; /* Add horizontal margin for spacing */
+    box-shadow: 0.625rem 0.625rem 0.625rem rgba(0, 0, 0, 0.2); /* Added box shadow */
+}
+
+/* Heading styling for each conversion section */
+h2 {
+    font-size: 1.5rem; /* 24px */
+    margin-bottom: 0.625rem; /* 10px */
+}
+
+/* Input field styling */
+input[type="text"] {
+    font-size: 1.125rem; /* 18px */
+    padding: 0.625rem; /* 10px */
+    border: 2px solid;
+    border-radius: 0.3125rem; /* 5px */
+    width: 9.375rem; /* 150px */
+    box-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.1); /* 2px 2px 5px */
+}
+
+/* Button styling */
+input[type="button"] {
+    display: inline-block;
+    border-radius: 0.625rem; /* Rounded corners */
+    background-color: #FFA500;
+    border: none;
+    color: black;
+    text-align: center;
+    font-size: 1.25rem; /* Reduced size from 1.75rem to 1.25rem */
+    padding: 0.625rem; /* Reduced padding */
+    width: 9.375rem; /* 150px */
+    transition: all 0.5s;
+    cursor: pointer;
+    margin-left: 0.625rem; /* 10px */
+}
+
+input[type="button"]:hover {
+    background-color: #d3d3d3; /* Slightly darker gray on hover */
+}
+
+/* Result text styling */
+span {
+    font-size: 1.25rem; /* 20px */
+    padding: 0.625rem; /* 10px */
+    margin-left: 0.625rem; /* 10px */
+    display: inline-block; /* Ensure it behaves like a block for spacing */
+}
+
+/* Responsive design for smaller screens */
+@media (max-width: 37.5rem) { /* 600px */
+    header.topbar {
+        font-size: 1.5rem; /* 24px */
+    }
+
+    input[type="text"], input[type="button"] {
+        width: 100%; /* Full width on small screens */
+        margin: 0.3125rem 0; /* 5px */
+    }
+
+    .container {
+        width: 100%; /* Full width on small screens */
+        margin: 0; /* Remove horizontal margin */
+    }
+}