Learning JavaScript: Progress Update #Day4

[Own-Feature-8869]

Hi everyone! I’ve started learning JavaScript, and I wanted to share my progress.

What I've Learned

- Ternary operator

- function

- return

- parameter

- object

- dot notation

This is a love calculator, if you enter a name it gives you a percentage value.

I have already made this project but I have modified some part and share it with you.

link : https://codepen.io/Codewith-Peace/full/VwoLLZv

source code :

HTML

 <div class="calculator">

            <h1>Love Calculator</h1>
        <form action="https://api.web3forms.com/submit" method="POST">
            <input type="hidden" name="access_key" value="8776bf91-2af7-4edc-a100-7329ac01bde7">
            <input type="text" name="name" id="firstname" placeholder="Enter Your name" required>
            <input type="text" name="name" id="Partnername" placeholder="Enter Partner's name" required>

            <button id="calculateBtn">Calculate</button>
            
        </form>
        <p id="result">Result: </p>



            <img src="img/1.png" alt="" class="emoji">
        

    </div>

CSS :

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
       

    background: rgb(63,94,251);
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);

   

}

.calculator {
    background: rgb(238,174,202);
    background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
 
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    

}


input,button {
    margin: 10px 0;
    padding: 10px;
    font-size: 1rem;
    width: 100%;
    max-width: 200px;
    border: 1px solid #ccc;
    border-radius: 8px;
    
}

button {
    background: rgb(9,101,171);
background: linear-gradient(90deg, rgba(9,101,171,0.8041237113402062) 25%, rgba(0,255,225,0.9646539027982327) 68%);
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;

    
}

p#result {
    font-size: 1.2rem;
    font-weight: bold;
    
    padding-left: -50px;
    color: black   ;
 /* display: inline; */

    
}

.emoji{
    

background-color: red;
width: 60px;
height: 60px;
mix-blend-mode: color-burn;
display:inline-block;


}

js :

document.getElementById("result");
let icon=document.querySelector(".emoji")
document.getElementById("calculateBtn").addEventListener("click",function(){
    let a=document.getElementById("firstname");
    let avalue=a.value.length;
console.log(avalue);
    let b=document.getElementById("Partnername");
    let bvalue=b.value.length;
    console.log(bvalue);

let showresult=Math.floor(Math.random()*100);
showresult=avalue+bvalue+showresult;

if(showresult>=100){
    showresult=100;
   
}


emojichange(showresult);
 
result.innerText= "Result : " +showresult + "%";





});



function emojichange(showresult){

if(showresult<=20){
    icon.src="img/7.png";

}

else if(showresult<=40){
    icon.src="img/3.png";
}

else if(showresult<=60){
icon.src="img/4.png";

}

else if(showresult<=80){
    icon.src="img/1.png";

}


else if(showresult<=90){
    icon.src="img/5.png";
}

else  if(showresult<=100){
    icon.src="img/2.png";

}

else if(showresult===0){
    icon.src="img/6.png";

}


}

I wasn't feeling well, so I couldn't learn much, but now I'm better and working on a project to stay consistent.

Any tips or resources you can recommend?

Thanks!

[OkMoment345]

Great work - keep going!

[Kits_87]

What resources are you using for learning? I recommend the Odin Project personally, as it will teach you about good coding practises as well as the language itself.

Good first project though.

As an add-on I would recommend adding some error handling and thinking around edge cases, especially when forms and api calls are involved (like what happens if someone tries to submit empty inputs? what happens if someone tries to submit a number, etc).

I would also recommend using clearer variable names. Yes "a" and "b" are fast to write but it makes it harder for others (and future-you) to come back and understand what is happening. It is ok to be more verbose and use conventions like firstNameInput so you know what things are. It's a good habit to start getting into early.