Een eenvoudige rekenmachine maken met HTML, CSS en JavaScript
De beste manier om JavaScript te leren is door projecten te bouwen. Als je een goede webontwikkelaar wilt worden, moet je zo snel mogelijk beginnen met het maken van projecten. Je kunt beginnen met het bouwen van beginnersprojecten zoals een eenvoudige rekenmachine, digitale klok of stopwatch.
Door gebruik te maken van fundamentele webtechnologieën zoals HTML, CSS en JavaScript kun je eenvoudig een eenvoudige rekenmachine maken die elementaire rekenkundige bewerkingen kan uitvoeren, zoals optellen, aftrekken, vermenigvuldigen en delen.
Kenmerken van de rekenmachine
Het doel van dit project is om een geavanceerde rekenmachine te maken met de volgende mogelijkheden:
Het apparaat kan fundamentele wiskundige bewerkingen uitvoeren, zoals optellen, aftrekken, delen en vermenigvuldigen.
⭐ Het apparaat kan decimale bewerkingen uitvoeren.
De rekenmachine geeft oneindig weer als uitvoer wanneer wordt geprobeerd het resultaat van het delen van een hoeveelheid door een waarde van nul te berekenen.
De zoekmachine geeft geen antwoord als de ingevoerde uitdrukking ongeldig wordt geacht. Ter illustratie: het invoeren van “5\+9” levert geen resultaten op.
Met de functie “Scherm wissen” kan alle inhoud op het scherm onmiddellijk worden verwijderd.
De broncode die bij deze poging is gebruikt, is toegankelijk gemaakt via een GitHub repository, die je toestemming geeft om het zonder kosten te gebruiken onder de voorwaarden van de MIT-licentie. Als je een operationeel voorbeeld van dit project wilt bekijken, bezoek dan onze demonstratie.
Onderdelen van de rekenmachine
De rekenmachine bestaat uit de volgende onderdelen:
De reeks wiskundige bewerkingen bestaat uit optellen weergegeven door het symbool “\+”, aftrekken aangeduid als “-”, vermenigvuldigen aangeduid met “*” en delen aangeduid met “/”.
De cijfers en het decimaalteken bestaan uit getallen van 0 tot en met 9 en het decimaalteken (.).
Het displayscherm toont een visuele weergave van de wiskundige uitdrukking en de bijbehorende uitkomst.
De knop “Wis scherm” is een gebruiksvriendelijk hulpmiddel waarmee je alle huidige wiskundige uitdrukkingen op het scherm kunt wissen, zodat je in de toekomst met een schone lei kunt rekenen.
De knop “Berekenen” is een commando dat een ingevoerde wiskundige uitdrukking evalueert, wat resulteert in een weergegeven uitvoerwaarde.
Mapstructuur van het rekenmachineproject
Om een interactieve webapplicatie voor rekenmachines te maken, maak je een hoofdmap aan die “Calculator” heet. Deze map bevat verschillende essentiële onderdelen zoals HTML-, CSS- en JavaScript-bestanden. Je kunt de namen van deze bestanden naar eigen inzicht kiezen, maar het is verstandig om je te houden aan de conventies voor de naamgeving van elk bestandstype. In overeenstemming met wat gebruikelijk is, moet het HTML-bestand de titel “index.html” dragen, terwijl het bijbehorende CSS-bestand “styles.css” moet heten en het JavaScript-bestand “script.js”. Over het algemeen wordt aanbevolen om zowel de JavaScript- als de HTML/CSS-naamgevingsstandaarden na te leven om consistentie te garanderen en een soepele samenwerking tussen ontwikkelaars te bevorderen.
Structuur toevoegen aan de rekenmachine met HTML
Open het bestand “index.html” en voeg de meegeleverde HTML-code voor de rekenmachine als volgt in:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simple Calculator using HTML, CSS and JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class="calculator" >
<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
<!-- clearScreen() function clears all the values -->
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="\\+" onclick="display('\\+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>
<!-- calculate() function evaluates the mathematical expression -->
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
De huidige onderneming gebruikt atag om de algemene configuratie van de rekenmachine vast te stellen. Daarbinnen zijn er vijf tags, die elk een horizontaal deel van de rekenmachine voorstellen. Elk heeft zijn eigen corresponderende tag, waarbinnen zich tags bevinden die het beeldscherm en de functietoetsen van de rekenmachine omvatten.
De rekenmachine stylen met CSS
Open het bestand “styles.css” en voeg de volgende CSS-code in om een rekenmachine op de website te implementeren:
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
#btn {
background-color: #fb0066;
}
input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
input:active[type=button] {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
De meegeleverde code definieert een aangepaste HTML-tag, “calc”, die een rekenmachine-interface voorstelt, inclusief knoppen voor verschillende wiskundige bewerkingen zoals optellen, aftrekken, vermenigvuldigen, delen, wissen en gelijk aan. Het bevat ook invoervelden voor twee getallen en een gelijkheidsteken. Het knoplabel wordt boven elke knop weergegeven met absolute positionering binnen een eigen div-element met padding en een randradius. Daarnaast wordt gebruikgemaakt van Tailwind CSS-klassen zoals flex, px-4, py-2, rounded-md, bg-white, text-red-500, hover:bg-gray-100, focus:outline-none en transition om het uiterlijk van de calc-tag te stylen.Ten slotte importeert het de lettertypefamilie Orbitron van Google Fonts met behulp van de “@import
Functionaliteit toevoegen aan de rekenmachine met JavaScript
Wijzig het bestaande bestand “script.js” door de meegeleverde JavaScript-code op te nemen om de functionaliteit van de basisrekenmachine als volgt uit te breiden:
// This function clears all the values
function clearScreen() {
document.getElementById("result").value = "";
}
// This function displays the values
function display(value) {
document.getElementById("result").value \\+= value;
}
// This function evaluates the expression and returns the result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
De JavaScript-code begrijpen
De bovengenoemde functies geven de rekenmachine specifieke mogelijkheden, waaronder het wissen van het scherm, de visuele weergave van de uitvoer en het uitvoeren van wiskundige bewerkingen.
Waarden wissen
De functie clearScreen() gebruikt de identifier van het element met de opgegeven ID, bekend als “resultaat”, om toegang te krijgen tot het Document Object Model (DOM) en de inhoud ervan te wijzigen door deze in te stellen op een lege tekenreeks. Dit proces wordt het manipuleren van het DOM genoemd. Verschillende delen van een webpagina kunnen worden geopend en gewijzigd met behulp van DOM-selectors, wat specifieke codes zijn die bepaalde elementen binnen de DOM-hiërarchie identificeren om hun eigenschappen of inhoud te wijzigen.
function clearScreen() {
document.getElementById("result").value = "";
}
Waarden weergeven
De implementatie van de functie display() omvat het verkrijgen van toegang tot het Document Object Model (DOM) via de identifier die is gekoppeld aan de geselecteerde optie, en vervolgens het koppelen van de bijbehorende waarde aan het geïdentificeerde element binnen het DOM.
function display(value) {
document.getElementById("result").value \\+= value;
}
Uitdrukking evalueren
De functie calculate() haalt de geëvalueerde waarde van een uitdrukking op door het Document Object Model (DOM) te openen via de identifier van een specifiek element en vervolgens de functie eval() te gebruiken om de uitdrukking te evalueren. Vervolgens wordt het berekende resultaat opnieuw toegewezen aan het aangewezen element.
De JavaScript evaluate() functie dient voor het berekenen van een gegeven uitdrukking, die als invoer voor de functie wordt gegeven, en levert vervolgens de uitkomst op die van een dergelijke uitdrukking is afgeleid.
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
Coole programmeerprojecten ontwikkelen
Een effectieve manier om je programmeervaardigheid te vergroten is het ontwikkelen van projecten, of je nu een beginner bent of na een lange pauze weer aan het coderen bent. Het succesvol voltooien en implementeren van functionele toepassingen, inclusief toepassingen met basisfunctionaliteit, kan het zelfvertrouwen versterken.
Er is inderdaad een overvloed aan toegankelijke ondernemingen, variërend van recreatieve activiteiten zoals schaken en tic-tac-toe tot praktische hulpmiddelen zoals to-do lijsten, gewichtsomzetters en countdown timers waarmee je kunt experimenteren.
Dompel jezelf onder in deze projecten om je ontwikkelvaardigheden te verbeteren door praktische ervaring op te doen via praktijkgericht leren.