diff --git a/2024/9-12-2024 (Week 7.1 AI)/index.html b/2024/9-12-2024 (Week 7.1 AI)/index.html
new file mode 100644
index 0000000..3c8582a
--- /dev/null
+++ b/2024/9-12-2024 (Week 7.1 AI)/index.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+ Conversion Program - saku
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/2024/9-12-2024 (Week 7.1 AI)/script.js b/2024/9-12-2024 (Week 7.1 AI)/script.js
new file mode 100644
index 0000000..8cc6644
--- /dev/null
+++ 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"
+ }
+}
\ No newline at end of file
diff --git a/2024/9-12-2024 (Week 7.1 AI)/style.css b/2024/9-12-2024 (Week 7.1 AI)/style.css
new file mode 100644
index 0000000..5ae968d
--- /dev/null
+++ 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 */
+ }
+}
\ No newline at end of file