Hur man bygger en enkel kalkylator med HTML, CSS och JavaScript
Det bästa sättet att lära sig JavaScript är att bygga projekt. Om du vill bli en bra webbutvecklare måste du börja skapa projekt så snart som möjligt. Du kan börja med att bygga nybörjarprojekt som en enkel miniräknare, digital klocka eller stoppur.
Med hjälp av grundläggande webbteknik som HTML, CSS och JavaScript kan man enkelt bygga en rudimentär miniräknare som kan utföra elementära aritmetiska operationer, inklusive addition, subtraktion, multiplikation och division.
Kalkylatorns egenskaper
Målet med detta projekt är att skapa en avancerad kalkylator med följande egenskaper:
Enheten kan utföra grundläggande matematiska operationer som addition, subtraktion, division och multiplikation.
⭐Den kommer att utföra decimaloperationer.
Räknaren ska visa oändlighet som sin utgång när man försöker beräkna resultatet av att dividera någon kvantitet med ett värde av noll.
Sökmotorn kommer inte att ge något svar om det inmatade uttrycket anses vara ogiltigt. Om du t.ex. skriver in “5\+\\+9” får du inga resultat.
Funktionen “Clear Screen” gör det möjligt att omedelbart ta bort allt innehåll på displayen, efter eget val.
Källkoden som använts i detta arbete har gjorts tillgänglig via ett GitHub-arkiv, vilket ger dig tillstånd att använda den utan kostnad enligt villkoren i MIT-licensen. Om du vill se ett fungerande exempel på detta projekt kan du besöka vår demonstration.
Kalkylatorns komponenter
Kalkylatorn består av följande komponenter:
Uppsättningen matematiska operationer omfattar addition som representeras av symbolen “\+”, subtraktion som betecknas med “-”, multiplikation som betecknas med “*” och division som betecknas med “/”.
Knappen för siffror och decimaltecken består av siffror från 0 till 9, samt decimaltecknet (.).
Displayen visar en visuell representation av det matematiska uttrycket och dess motsvarande resultat.
Knappen “Clear Screen” är ett användarvänligt verktyg som gör att du kan radera alla aktuella matematiska uttryck på displayen, vilket garanterar en nystart för dina framtida beräkningar.
Knappen “Beräkna” är ett kommando som utvärderar ett inmatat matematiskt uttryck, vilket resulterar i ett utdatavärde som visas på displayen.
Mappstruktur för kalkylatorprojektet
För att skapa en interaktiv webbapplikation för kalkylatorer ska du upprätta en primär katalog som kallas “Kalkylator”. Denna katalog kommer att innehålla olika viktiga komponenter som HTML-, CSS- och JavaScript-filer. Namnen på dessa filer kan väljas efter eget gottfinnande, men det är klokt att följa etablerade namnkonventioner för respektive filtyp. Enligt gängse praxis bör HTML-filen ha titeln “index.html”, medan den tillhörande CSS-filen bör heta “styles.css” och JavaScript-filen bör heta “script.js”. Det rekommenderas generellt att följa både JavaScript- och HTML/CSS-namnstandarder för att säkerställa konsekvens och underlätta samarbetet mellan utvecklare.
Lägga till struktur i kalkylatorn med HTML
Öppna filen “index.html” och infoga den medföljande HTML-koden för kalkylatorn, enligt följande:
<!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>
I detta projekt används atag för att fastställa den allmänna konfigurationen av kalkylatorn. Inom denna finns det fem taggar, var och en representerar en horisontell sektion av kalkylatorn. Var och en har sin egen motsvarande tagg, inom vilken det finns taggar som omfattar räknarens displayskärm och funktionstangenter.
Styling av kalkylatorn med CSS
Öppna filen “styles.css” och infoga följande CSS-kod för att implementera en kalkylator på webbplatsen:
@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;
}
Den medföljande koden definierar en anpassad HTML-tagg, “calc”, som representerar ett kalkylatorgränssnitt, inklusive knappar för olika matematiska operationer som addition, subtraktion, multiplikation, division, clear och equal to. Den innehåller också inmatningsfält för två siffror och ett likhetstecken. Knappetiketten visas ovanpå varje knapp med absolut positionering inom sitt eget div-element som har en padding- och border-radie. Dessutom använder den Tailwind CSS-klasser som flex, px-4, py-2, rounded-md, bg-white, text-red-500, hover:bg-gray-100, focus:outline-none, och transition för att styla calc-taggens utseende.Slutligen importeras typsnittsfamiljen Orbitron från Google Fonts med hjälp av “@import
Lägga till funktionalitet i kalkylatorn med JavaScript
Ändra den befintliga filen “script.js” genom att införliva den medföljande JavaScript-koden för att förbättra funktionaliteten i den grundläggande kalkylatorn enligt följande:
// 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;
}
Förstå JavaScript-koden
De ovan nämnda funktionerna ger räknaren specifika egenskaper, inklusive radering av skärmen, visuell presentation av utdata respektive utförande av matematiska operationer.
Rensa värden
Funktionen clearScreen() använder identifieraren för elementet med det angivna ID:t, känt som “result”, för att komma åt Document Object Model (DOM) och ändra dess innehåll genom att sätta det till en tom sträng. Denna process kallas vanligen för att manipulera DOM. Olika delar av en webbsida kan nås och ändras med hjälp av DOM-selektorer, som är specifika koder som identifierar vissa element i DOM-hierarkin i syfte att ändra deras egenskaper eller innehåll.
function clearScreen() {
document.getElementById("result").value = "";
}
Visa värden
Implementeringen av funktionen display() innebär åtkomst till Document Object Model (DOM) via den identifierare som är kopplad till det valda alternativet, och därefter kopplas motsvarande värde till det identifierade elementet inom DOM.
function display(value) {
document.getElementById("result").value \\+= value;
}
Utvärdera uttryck
Funktionen calculate() hämtar det utvärderade värdet av ett uttryck genom att komma åt Document Object Model (DOM) med hjälp av identifieraren för ett specifikt element, och därefter använda funktionen eval() för att utvärdera uttrycket. Därefter omfördelas det beräknade resultatet till det angivna elementet.
JavaScript-funktionen evaluate() har till syfte att beräkna ett givet uttryck, som tillhandahålls som indata till funktionen, och därefter ge det resultat som härrör från detta uttryck.
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
Utveckla coola programmeringsprojekt
Ett effektivt sätt att förbättra sina programmeringskunskaper är att utveckla projekt, oavsett om man är nybörjare eller återvänder till kodning efter ett längre uppehåll. Att framgångsrikt slutföra och implementera funktionella applikationer, inklusive de med grundläggande funktionalitet, kan stärka självförtroendet.
Det finns faktiskt en uppsjö av tillgängliga projekt, allt från fritidsaktiviteter som schack och tic-tac-toe till praktiska verktyg som att-göra-listor, viktomvandlare och nedräkningstimer som man kan experimentera med.
Fördjupa dig i dessa projekt för att förbättra dina utvecklingskunskaper genom att få praktisk erfarenhet genom hands-on inlärning.