DEV Community

murloc-craft
murloc-craft

Posted on

{Day1} function

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

This is html for num1 and num2

    <span id="num1-el">0</span>
    <span id="num2-el">0</span>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

I have already inserted the name of my function in the onclick.

function add() {
  let result = num1 + num2;
  sumEl.textContent = num1 + " + " + num2 + " = " + result;
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
mannu profile image
Mannu

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.

Collapse
 
murloc-craft profile image
murloc-craft

Thanks Mannu ! :)

Collapse
 
mannu profile image
Mannu

My Pleasure.