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 så snart som möjligt. Du kan börja med att bygga projekt på nybörjarnivå som en enkel miniräknare, digital klocka, stoppur, etc.
I den här artikeln får du lära dig hur du gör en enkel kalkylator med HTML, CSS och JavaScript. Denna miniräknare kan utföra grundläggande matematiska operationer som addition, subtraktion, multiplikation och division.
Låt oss börja.
Komponenter i räknaren
Kalkylatorn består av följande komponenter:
Matematiska operatörer: Addition (+), Subtraktion (-), Multiplikation
och division (/).Siffror och decimalknapp
: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .Skärm
: Den visar det matematiska uttrycket och resultatet.Rensa skärmknapp
: Det rensar alla matematiska värden.Knappen Beräkna (=)
: Den utvärderar det matematiska uttrycket och returnerar resultatet.
Mappstruktur för kalkylatorprojektet Skapa en rotmapp som innehåller HTML-, CSS- och JavaScript-filerna. Du kan namnge filerna vad du vill. Här heter rotmappenKalkylator . Enligt standardnamnkonventionen namnges HTML-, CSS- och JavaScript-filernaindex.html ,styles.css , och script.js
respektive.
HTML-kod Öppna index.html
<!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="https://www.makeuseof.com/build-a-simple-calculator-using-html-css-javascript/styles.css">
</head>
<body>
<table class = "calculator" >
<tr>
<td colspan = "3"> <input class = "display-box" type = "text" id = "result" disabled /> </td>
<!-- clearScreen() function clear all the values -->
<td> <input class = "button" type = "button" value = "C" onclick = "clearScreen()" style = "background-color: #fb0066;" /> </td>
</tr>
<tr>
<!-- display() function display the value of clicked button -->
<td> <input class = "button" type = "button" value = "1" onclick = "display('1')" /> </td>
<td> <input class = "button" type = "button" value = "2" onclick = "display('2')" /> </td>
<td> <input class = "button" type = "button" value = "3" onclick = "display('3')" /> </td>
<td> <input class = "button" type = "button" value = "https://www.makeuseof.com/" onclick = "display("https://www.makeuseof.com/")" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "4" onclick = "display('4')" /> </td>
<td> <input class = "button" type = "button" value = "5" onclick = "display('5')" /> </td>
<td> <input class = "button" type = "button" value = "6" onclick = "display('6')" /> </td>
<td> <input class = "button" type = "button" value = "-" onclick = "display('-')" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "7" onclick = "display('7')" /> </td>
<td> <input class = "button" type = "button" value = "8" onclick = "display('8')" /> </td>
<td> <input class = "button" type = "button" value = "9" onclick = "display('9')" /> </td>
<td> <input class = "button" type = "button" value = "+" onclick = "display('+')" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "." onclick = "display('.')" /> </td>
<td> <input class = "button" type = "button" value = "0" onclick = "display('0')" /> </td>
<!-- calculate() function evaluate the mathematical expression -->
<td> <input class = "button" type = "button" value = "=" onclick = "calculate()" style = "background-color: #fb0066;" /> </td>
<td> <input class = "button" type = "button" value = "*" onclick = "display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="https://www.makeuseof.com/build-a-simple-calculator-using-html-css-javascript/script.js"></script>
</body>
</html>
fil och klistra in följande kod: Kalkylatorns struktur skapas med hjälp av
taggar (tabelldata) som håller skärmbilden och knapparna på räknaren.
CSS-kod Öppna styles.css
@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%;
}
.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;
}
.button:active {
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;
}
fil och klistra in följande kod: Ovanstående CSS används för att styla räknaren. De .klass selector används för att välja element med ett specifikt klassattribut. De.kalkylator ,.display-box , och .knapp klassväljare används för att utforma tabellstrukturen, displayskärmen respektive knapparna på räknaren. @importera används för att importera Orbitron teckensnittsfamilj
från Google fonts.
JavaScript-kod Öppna script.js
// This function clear all the values
function clearScreen() {
document.getElementById("result").value = "";
}// This function display values
function display(value) {
document.getElementById("result").value += value;
}
// This function evaluates the expression and return result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
fil och klistra in följande kod:
Förstå JavaScript-koden Derensa skärmen() ,visa() , och Beräkna()
funktioner används för att lägga till funktionalitet till kalkylatorn.
Rensa värden De rensa skärmen()
function clearScreen() {
document.getElementById("result").value = "";
}
funktionen får åtkomst till DOM med hjälp av resultatets ID och rensa dess värde genom att tilldela den en tom sträng.
Visar värden visa()
function display(value) {
document.getElementById("result").value += value;
}
funktionen får åtkomst till DOM med hjälp av resultatets ID och lägger till värdet för den klickade knappen till resultatet.
Utvärdera uttryck De Beräkna() funktionen får åtkomst till DOM med hjälp av id för resultatet och utvärderar uttrycket med hjälp av eval()
fungera. Det utvärderade värdet av uttrycket tilldelas återigen resultatet.Notera : Den eval()
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
funktion används i JavaScript för att utvärdera uttrycket som skickas till det som en parameter. Den returnerar det utvärderade resultatet av det matematiska uttrycket.
Om du vill ta en titt på den fullständiga källkoden som används i den här artikeln, här är GitHub-förvaret. Om du vill ta en titt på liveversionen av det här projektet kan du också kolla in den via GitHub.
Utveckla coola programmeringsprojekt
Du kan höja dina ingenjörskunskaper till nästa nivå genom att utveckla projekt. Oavsett om du är nybörjare eller om du börjar börja med kodning igen efter en viss ledighet, kan utveckling av projekt vara till stor hjälp för att stärka ditt självförtroende.
Du kan prova många enkla projekt som ett schackspel, att göra-lista-app, viktkonverteringsverktyg, Tic Tac Toe-spel, Rock Paper Scissors-spel, Web Scraper med Python, inloggningssystem, chatbot, ormspel, Tetris-spel, tipskalkylator , Countdown Clock, URL Shortener, etc.
Smutsa ner händerna med dessa projekt och bli en bättre utvecklare.
Om författaren
Yuvraj Chandra (80 artiklar publicerade)
Yuvraj är en datavetenskapsstudent vid University of Delhi, Indien. Han brinner för Full Stack Web Development. När han inte skriver undersöker han djupet i olika teknologier.
Mer från Yuvraj Chandra
Prenumerera på vårt nyhetsbrev free Gå med i vårt nyhetsbrev för tekniska tips, recensioner,
e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
Cookie Settings
