Merge pull request #1 from micha003/truemain

Truemain
micha003 · Mar 21, 2023 · 419bdf5 · 419bdf5
2 parents 9547f46 + 8868f24
commit 419bdf5
Show file tree

Hide file tree

Showing 15 changed files with 345 additions and 34 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.vscode
diff --git a/README.md b/README.md
@@ -1,5 +1,29 @@
-# Cubipy
-
-Das ist ein Schulprojekt im Rahmen des Informatikunterrichts.
-
-*HINWEIS: Die Dateien .replit und replit.nix sind **NICHT** für die Nutzung notwendig und könne ignoriert werden!*
+
+# Cubipy - Online Körperrechner - Projekt im Informatikunterricht
+
+**Aktuell verfügbare Körper:**
+
+- Quader
+- Kegel
+- Kugel
+- Zylinder
+
+**In Planung:**
+
+- Würfel
+- Pyramide
+- Prisma
+
+---
+
+Die Dateien _.replit_ und _replit.nix_ können ignoriert werden, weil sie nicht für die Funktionstüchtigkeit des Programms nötig sind. Gleiches gilt für _.gitignore_.
+
+---
+
+### TODOS
+
+- [ ] Infotexte einfügen
+- [ ] Bilder zu den Infotexten einfügen
+- [ ] mehr Körper implementieren
+- [ ] neue Ideen für ein Design kreieren
+- [ ] das Programm um mehr als nur Körper erweitern (Arbeit mit Issues / PR's auf Github?)
diff --git a/formulas/Kreiskegel.txt b/formulas/Kreiskegel.txt
@@ -2,4 +2,4 @@ s d h
 Kantenlänge,Durchmesser Grundfläche, höhe
 
 V = 1/3*pi*r^2*h 
-s^2 = r^2 + h^2
+AO=
diff --git a/formulas/kugel.txt b/formulas/kugel.txt
@@ -1,5 +1,5 @@
-r  d
-radius, durchmesser
+r 
+radius
 
 Volumen: 4/3*pi*r^3
 oberflächeninhalt: 4*pi*r^2
diff --git a/index.html b/index.html
@@ -9,14 +9,30 @@
  </head>
 
  <body>
- <h1>Körperberechnung</h1>
+ <div id="body">
+ <h1>Cubipy - Körperberechnung</h1>
+
+ <p id="introText">Willkommen bei Cubipy, dem Online-Rechner für Körperberechnungen.</p>
+ <p id="introText">In Zukunft werden weitere Körperberechnungen zur Verfügung stehen.</p>
+
+ <ul>
+ <li>
+ <a href="quader.html">Quader</a>
+ </li>
+ <li>
+ <a href="kugel.html">Kugel</a>
+ </li>
+ <li>
+ <a href="zylinder.html">Zylinder</a>
+ </li>
+ <li>
+ <a href="kegel.html">Kegel</a>
+ </li>
+ </ul>
+
+ <i>Owner: Michael Vorogushyn</i>
+ </div>
 
- <ul>
- <li><a href="quader.html">Quader</a></li>
- <li><a href="kegel.html">Kegel</a></li>
- <li><a href="kugel.html">Kugel</a></li>
- <li><a href="zylinder.html">Zylinder</a></li>
- </ul>
  </body>
 
 </html>
diff --git a/kegel.html b/kegel.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+ <meta charset="UTF-8">
+ <title>Cubipy - Kegel</title>
+
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <h1>Kegel</h1>
+ <!-- 
+ TODO: Infotext hinzufügen
+ TODO: formatieren
+ TODO: Bildchen einfügen
+ TODO: Link to index.html
+ -->
+
+ <input type="number" id="mantellinie" placeholder="s">
+ <input type="number" id="diameter" placeholder="d">
+ <input type="number" id="height" placeholder="h">
+
+ <button onclick="calculate()">Berechnen</button>
+
+ <div id="result">
+ <p id="volumen">Volumen</p>
+ <p id="OA">Oberflächeninhalt</p>
+ </div>
+
+ <a href="index.html" id="home">Home</a>
+
+ <script src="script_kegel.js"></script>
+</body>
+</html>
diff --git a/kugel.html b/kugel.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+ <meta charset="UTF-8">
+ <title>Cubipy - Kugel</title>
+
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <h1>Kugel</h1>
+
+ <!-- 
+ TODO: Infotext hinzufügen
+ TODO: formatieren
+ TODO: Bildchen einfügen
+ -->
+
+ <input type="number" id="radius" placeholder="r">
+
+ <button onclick="calculate()">Berechnen</button>
+
+ <div id="result">
+ <p id="volumen">Volumen</p>
+ <p id="OA">Oberflächeninhalt</p>
+ </div>
+
+ <a href="index.html" id="home">Home</a>
+
+ <script src="script_kugel.js"></script>
+</body>
+</html>
diff --git a/quader.html b/quader.html
@@ -1,16 +1,34 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="style.css">
- <title>Körperberechnung Quader</title>
-</head>
-<body>
- <h1>Körperberechnung Quader</h1>
-
- <!--TODO: kleinen Infotext schreiben -->
- <input type="text" name="var_a">
- <input type="text" name="">
- <script src="script.js"></script>
-</body>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+ <meta charset="UTF-8">
+ <title>Cubipy - Quader</title>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <h1>Quader</h1>
+
+ <!-- 
+ TODO: Infotext hinzufügen
+ TODO: formatieren
+ TODO: Bildchen einfügen
+ -->
+
+ <input type="number" id="length" placeholder="a">
+ <input type="number" id="width" placeholder="b">
+ <input type="number" id="height" placeholder="c">
+
+ <button onclick="calculate()">Berechnen</button>
+
+ <div id="result">
+ <p id="volumen">Volumen</p>
+ <p id="OA">Oberflächeninhalt</p>
+ <p id="diagonal">Raumdiagonale</p>
+ </div>
+
+ <a href="index.html" id="home">Home</a>
+
+ <script src="script_quader.js"></script>
+</body>
+
 </html>
diff --git a/script.js b/script.js
diff --git a/script_kegel.js b/script_kegel.js
@@ -0,0 +1,24 @@
+// Kegelrechner
+
+function calculateVolumen() {
+ var radius = document.getElementById("diameter").value / 2;
+ var height = document.getElementById("height").value;
+
+ var volumen = Math.round((Math.PI * radius * radius * height) / 3);
+ document.getElementById("volumen").innerHTML =
+ "Volumen: " + String(volumen) + " cm³";
+}
+
+function calculateSurface() {
+ var mantellinie = document.getElementById("mantellinie").value;
+ var radius = document.getElementById("diameter").value / 2;
+
+ var OA = Math.round(Math.PI * radius * (radius + mantellinie));
+ document.getElementById("OA").innerHTML =
+ "Oberfläche: " + String(OA) + " cm²";
+}
+
+function calculate() {
+ calculateVolumen();
+ calculateSurface();
+}
diff --git a/script_kugel.js b/script_kugel.js
@@ -0,0 +1,20 @@
+function calculateVolumen() {
+ var radius = document.getElementById("radius").value;
+
+ var volumen = Math.round((4 / 3) * Math.PI * radius ** 3);
+ document.getElementById("volumen").innerHTML =
+ "Volumen " + String(volumen) + "cm³";
+}
+
+function calculateSurface() {
+ var radius = document.getElementById("radius").value;
+
+ var OA = Math.round(4 * Math.PI * radius ** 2);
+ document.getElementById("OA").innerHTML =
+ "Oberflächeninhalt " + String(OA) + "cm²";
+}
+
+function calculate() {
+ calculateVolumen();
+ calculateSurface();
+}
diff --git a/script_quader.js b/script_quader.js
@@ -0,0 +1,34 @@
+function calculateVolumen() {
+ var length = document.getElementById("length").value;
+ var width = document.getElementById("width").value;
+ var height = document.getElementById("height").value;
+ var volumen = length * width * height;
+ document.getElementById("volumen").innerHTML =
+ "Volumen: " + String(volumen) + " cm³";
+}
+
+function calculateSurface() {
+ var length = document.getElementById("length").value;
+ var width = document.getElementById("width").value;
+ var height = document.getElementById("height").value;
+ var OA = 2 * (length * width + length * height + width * height);
+ document.getElementById("OA").innerHTML =
+ "Oberfläche: " + String(OA) + " cm²";
+}
+
+function calculateDiagonal() {
+ var length = document.getElementById("length").value;
+ var width = document.getElementById("width").value;
+ var height = document.getElementById("height").value;
+ var diagonal = Math.round(
+ Math.sqrt(length * length + width * width + height * height)
+ );
+ document.getElementById("diagonal").innerHTML =
+ "Diagonale: " + String(diagonal) + " cm";
+}
+
+function calculate() {
+ calculateVolumen();
+ calculateSurface();
+ calculateDiagonal();
+}
diff --git a/script_zylinder.js b/script_zylinder.js
@@ -0,0 +1,18 @@
+function calculateVolumen() {
+ var radius = document.getElementById("radius").value;
+ var height = document.getElementById("height").value;
+ var volumen = Math.round(Math.PI * radius * radius * height);
+ document.getElementById("volumen").innerHTML = "Volumen: " + volumen + " cm³";
+}
+
+function calculateOA() {
+ var radius = document.getElementById("radius").value;
+ var height = document.getElementById("height").value;
+ var oa = 2 * Math.PI * radius * height;
+ document.getElementById("OA").innerHTML = "Oberfläche: " + oa + " cm²";
+}
+
+function calculate() {
+ calculateVolumen();
+ calculateOA();
+}
diff --git a/style.css b/style.css
@@ -1,4 +1,71 @@
 html {
  height: 100%;
  width: 100%;
+ text-align: center;
+}
+
+body {
+ background-color: lightseagreen;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+}
+
+div#body {
+ border: 3px solid black;
+ padding: 10px;
+ padding-top: 5px;
+ border-radius: 50px;
+}
+
+h1 {
+ text-decoration: underline;
+}
+
+p#introText {
+ font-size: 18px;
+}
+
+ul {
+ list-style-type: none;
+ padding: 20px;
+ font-size: 20px;
+}
+
+li {
+ display: inline;
+ padding: 10px;
+ border: 1px solid black;
+}
+
+li:hover {
+ background: white;
+}
+
+a {
+ text-decoration: none;
+ color: black;
+}
+
+input {
+ padding: 5 px;
+ font-size: 18px;
+ border: 1px solid black;
+}
+
+div#result {
+ margin-top: 20px;
+ font-size: 18px;
+ border: 1px solid black;
+ margin-right: 30%;
+ margin-left: 30%;
+}
+
+a#home {
+ text-decoration: none;
+ padding: 12px;
+ font-size: 18px;
+ color: magenta;
+ border: 1px solid black;
+ background: black;
 }