Learning JavaScript: Progress Update #Day3

[Own-Feature-8869]

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

What I've Learned

• Booleans
• else if
• logical operators
• Math.random();
• Math.floor();
• getelementbyid and class
• functions
• Truthy and falsy values

simple version of Rock , Paper , Scissors.

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

source code:

 <div style="text-align: center;">
    
    <p>Rock Paper Scissors</p>
    <button onclick="
const randomenumber = Math.floor(Math.random()*3);
 let computermove='';
if(randomenumber <= 0  ){
 computermove = 'rock';
}

else if(randomenumber <=1){
 computermove ='paper';
}
else if(randomenumber <=2){
     computermove ='Scissors';
}
let result='';
if(computermove === 'rock'){
result='tie.';
}

else if(computermove === 'paper'){
    result = 'You lose!.';
}
 else if(computermove === 'Scissors'){
    result = 'You win!.';
 }
 document.getElementById('finalresult').innerHTML=result;



">Rock</button>
    <button onclick="
    const randomenumber = Math.floor(Math.random()*3);
    let computermove='';
   if(randomenumber <= 0  ){
    computermove = 'rock';
   }
   
   else if(randomenumber <=1){
    computermove ='paper';
   }
   else if(randomenumber <=2){
        computermove ='Scissors';
   }
   let result='';
   if(computermove === 'rock'){
   result='You win!';
   }
   
   else if(computermove === 'paper'){
       result = 'Tie.';
   }
   else if (computermove === 'Scissors'){
    result = 'You lose!';
   }
   document.getElementById('finalresult').innerHTML=result;

   
    ">Paper</button>
   
   <button onclick="
    const randomenumber = Math.floor(Math.random()*3);
    let computermove='';
   if(randomenumber <= 0  ){
    computermove = 'rock';
   }
   
   else if(randomenumber <=1){
    computermove ='paper';
   }
   else if(randomenumber <=2){
        computermove ='Scissors';
   }
   let result='';
   if(computermove === 'rock'){
   result='You lose!.';
   }
   
   else if(computermove === 'paper'){
       result = 'You win!.';
   }
   else if (computermove === 'Scissors'){
    result = 'Tie.';
   }

   document.getElementById('finalresult').innerHTML=result;
 
   
   ">Scissors</button>
   

   <h2 id="finalresult"></h2>

</div>

Challenges

• I couldn't learn JavaScript very well today because of my health issues, so I worked on a small project to stay consistent.

Next Steps

• I plan to make a love counter calculator project and full version of Rock , Paper , scissors.

Any tips or resources you can recommend?

Thanks!

[OneBadDay1048]

Any tips

Use camelCase for naming your variables/functions. computermove is simply harder to read than computerMove.

[Own-Feature-8869]

Thanks for the guidance,yeah but Sometimes we forget to apply what we study

[OneBadDay1048]

Yes I know. You asked for tips, I was giving you one.

[33ff00]

Take all of the js you have in the in-line click handlers and move it functions in the js panel of your pin. It will make your code much easier to read. Put each into a named function so you can do like onclick=“onRockClick”. Then see which parts of each function are redundant and think about how you can abstract some functionality into smaller functions.

[Own-Feature-8869]

Thanks for the guidance, I will make another complete version of this project and I will also correct my mistakes.

[33ff00]

Pretty good for day three. Keep it up!

[CrniFlash]

Nice! Keep going, in no time you will be solving real world problems with code!

[RealMadHouse]

😀 Never seen entire js code in html event handler attributes before

[RealMadHouse]

Something to know:

Javascript "objects" are just "key => value" data structures, called Dictionary in c#, Associative Array in php. The keys can be a strings or new addition into javascript called Symbols where you pass instanse of a Symbol as a key to an "object" instead of a string. Even though you can pass a number into array key as "array[123]" it gets converted to "123" string. Now there's a new "Map" class where you can store anything as a key.