Halfbax
Erfahrenes Mitglied
Guten Abend
In meinem Kurs habe ich die Aufgabe mir ein Programm o.ä. wie eine Programmier-/Scriptsprache vorzustellen. Ich habe mir dementsprechend etwas interessantes heraus gesucht. Es handelt sich hierbei um xHTML, PHP und CSS. Nun stehe ich vor dem Problem, das ich nichts komplexes in Anspruch nehmen kann. Deswegen denke ich an einem Taschenrechner.
Nun habe ich einige Fragen zum Layout, da ich selber noch blutiger Anfänger bin. Grundlegend möchte ich etwas optisch ansprechendes gestalten und nicht nur einen Taschenrechner mit schwarzer Schrift auf weißen Hintergrund.
Mein derzeitiger Stand sieht folgendermaßen aus, dass ich...
Hättet Ihr Tipps wie ich es "schön" darstellen kann?
http://leon-spors.de/taschenrechner.php
Ich danke im vorraus.
P.S Ich nehme gerne auch Tipps zum Thema PHP an, besonders wenn es um Sprachentrennung geht -> Template.
Nachtrag: Ich plane noch die Einführung der Datenspeicherung von den letzen 10 Werten in eine MYSQL Datenbank unter Berücksichtung von Injection. Vielleicht kann man das direkt mit einbinden ins neue Design.
Mit freundlichen Grüßen
Leon
In meinem Kurs habe ich die Aufgabe mir ein Programm o.ä. wie eine Programmier-/Scriptsprache vorzustellen. Ich habe mir dementsprechend etwas interessantes heraus gesucht. Es handelt sich hierbei um xHTML, PHP und CSS. Nun stehe ich vor dem Problem, das ich nichts komplexes in Anspruch nehmen kann. Deswegen denke ich an einem Taschenrechner.
Nun habe ich einige Fragen zum Layout, da ich selber noch blutiger Anfänger bin. Grundlegend möchte ich etwas optisch ansprechendes gestalten und nicht nur einen Taschenrechner mit schwarzer Schrift auf weißen Hintergrund.
Mein derzeitiger Stand sieht folgendermaßen aus, dass ich...
- die Berechnung fehlerfrei darstellen kann.
- ein Wrapper verwende.
- das Ergebnis in einem CSS-Popup (kein JS) darstelle.
Hättet Ihr Tipps wie ich es "schön" darstellen kann?
http://leon-spors.de/taschenrechner.php
PHP:
<!--
@author : Leon Spors
@version: 001
-->
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL);
/*
Mathematical class
*/
class math {
/*
The params will get sumed up
@param decimal variables
@return result
*/
function addition($arg_1, $arg_2)
{
return $arg_1 + $arg_2;
}
/*
The params will get subtracted up
@param decimal variables
@return result
*/
function subtract($arg_1, $arg_2)
{
return $arg_1 - $arg_2;
}
/*
The params will be multiplied
@param decimal variables
@return result
*/
function multiply($arg_1, $arg_2)
{
return $arg_1 * $arg_2;
}
/*
Param1 divides Param2
@param decimal variables
@return result
*/
function divide($arg_1, $arg_2)
{
return $arg_1 / $arg_2;
}
}
?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Taschenrechner</title>
<!-- Stylesheet -->
<style type="text/css">
.wrapper {
width: 150px;
margin: 0 auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.result {
margin: 70px auto;
padding: 20px;
background: #fff;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.result h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.result .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.result .close:hover {
color: red;
}
.result .content {
max-height: 30%;
overflow: auto;
}
</style>
</head>
<body>
<!-- Body -->
<div class="wrapper">
<form action="#result" id="main" method="POST">
Zahl 1: <input type="text" name="a" size="4"><br>
Zahl 2: <input type="text" name="b" size="4"><br><br>
<fieldset>
<input type="radio" id="add" name="mathMethod" value="Addieren" checked="true">
<label for="radio_add">Addieren</label><br>
<input type="radio" id="sub" name="mathMethod" value="Subtrahieren">
<label for="radio_sub">Subtrahieren</label><br>
<input type="radio" id="multi" name="mathMethod" value="Multiplizieren">
<label for="radio_sub">Multiplizieren</label><br>
<input type="radio" id="divi" name="mathMethod" value="Dividieren">
<label for="radio_sub">Dividieren</label><br>
</fieldset>
<input type="submit" name="submit" value="Berechnen">
</form>
</div>
<!-- Popup -->
<div id="result" class="overlay">
<div class="result">
<h2>Ergebnis</h2>
<a class="close" href="#">×</a>
<div class="content">
<?php
$m = new math();
if (isset($_POST['a']) || !empty($_POST['a']) || isset($_POST['b']) || !empty($_POST['b']))
{
switch ($_POST['mathMethod']) {
case 'Subtrahieren':
echo $m->subtract($_POST['a'], $_POST['b']);
break;
case 'Multiplizieren':
echo $m->multiply($_POST['a'], $_POST['b']);
break;
case 'Dividieren':
echo $m->divide($_POST['a'], $_POST['b']);
break;
default:
echo $m->addition($_POST['a'], $_POST['b']);
break;
}
}
?>
</div>
</div>
</div>
</body>
</html>Ich danke im vorraus.
P.S Ich nehme gerne auch Tipps zum Thema PHP an, besonders wenn es um Sprachentrennung geht -> Template.
Nachtrag: Ich plane noch die Einführung der Datenspeicherung von den letzen 10 Werten in eine MYSQL Datenbank unter Berücksichtung von Injection. Vielleicht kann man das direkt mit einbinden ins neue Design.
Mit freundlichen Grüßen
Leon
Zuletzt bearbeitet:
