Dear Dev,
Today I learned about functions in JavaScript. It's still a bit confusing, but I'll try to explain what I understood.
In JavaScript, a function is a block of code that performs a specific task.
It can be reused multiple times throughout a program.
Functions are defined using the function keyword followed by a name and a set of parentheses.
Any parameters that the function requires are listed inside the parentheses.
I tried to build a calculator!
let num1 = prompt("Choose a first number");
num1 = parseInt(num1);
document.getElementById("num1-el").textContent = num1;
I started by creating a variable num1, assigned a prompt with the question 'Choose a first number,' and then converted the var num1 to a number.
Then came the discovery of document.getElementById!
Wow, I was so excited to learn how to communicate with the DOM!
So, I assigned the content of num1 to the element #num1-el.
Then I did the same thing for the var num2.
let num2 = prompt("Choose a second number");
num2 = parseInt(num2);
document.getElementById("num2-el").textContent = num2;
This is html for num1 and num2
<span id="num1-el">0</span>
<span id="num2-el">0</span>
Next, I created buttons in my HTML for addition, subtraction, division, and multiplication.
<div class="box-btn">
<button onclick="add()">Add</button>
<button onclick="subtract()">Subtract</button>
<button onclick="divide()">Divide</button>
<button onclick="multiply()">Multiply</button>
</div>
I have already inserted the name of my function in the onclick.
function add() {
let result = num1 + num2;
sumEl.textContent = num1 + " + " + num2 + " = " + result;
}
It was so simple! I remember during my lessons, I used to wonder, 'What is the real purpose of a function?'
I didn't understand...
But now, with this simple project, I am finally starting to understand the importance of functions
I finally understood how DOM elements communicate with my JavaScript script.
I can finally see the light at the end of the tunnel!
So, I'm going to improve my code and build simple little projects, like a quote generator! Because I can see in my mind how it's possible to do it :)
And all of this thanks to the resources available online on the internet!
There are plenty of courses, videos, tutorials accessible for free or at a cost.
But yes, if we have motivation, anything is possible :)
I feel a little embarrassed to show my project (but I'll still share the link :p) because it's a 'newbie project,' but one day I will be capable of creating beautiful projects in JavaScript
My Calculator:
https://github.com/Lysdora/TurtleCalc-Express
I'm also going to write a fiction story featuring a World of Warcraft hero and functions, similar to this story (my first story) :
https://murloc-craft.medium.com/murloc-the-noob-vs-the-variable-f2506812a0cf
Top comments (3)
Welcome to the DEV community 👋
I Hope You will enjoy here. Best of luck for your future.
Do Contact us for any kind of help.
Thanks Mannu ! :)
My Pleasure.