Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--<div></div> ini buat ngapain ya-->
<div></div>
<div class="container">
<!-- biasain jangan pakai id, hampir all the time pake class cukup kok-->
<div id="judul"><h1>Rock Paper Scissor</h1></div>
<div id="ask"><h1>Let's play! What you got?</h1></div>
<div id="choices">
Expand All @@ -17,19 +19,23 @@
<button onclick="playem('scissor')">Scissor</button>
</div>
<div id="result">
<!-- inconsistent, ini ada yang namanya indo, ada yang namanya pake inggris-->
<div id="statement"><p id="tulisan">Play and see your luck :)</p></div>
<div class="scores">
<div id="win">
<h4>Wins</h4>
<!-- kalo 2 kata jangan disambung gini, selector biasa pisahin pake -, kayak win-score -->
<p id="winscore">-</p>
</div>
<div id="lose">
<!-- losses mungkin?-->
<h4>Loses</h4>
<p id="losescore">-</p>
</div>
</div>
</div>
</div>
<!-- good-->
<div>Made by Edward Alvin, visit <a href="https://github.com/ThePrevailingOne/">github.com/ThePrevailingOne/</a> for more</div>
<script src="javascript.js"></script>
</body>
Expand Down
25 changes: 24 additions & 1 deletion javascript.js
Original file line number Diff line number Diff line change
@@ -1,44 +1,66 @@

// Global variables ><
let wins = 0;
let loses = 0;

// hapus semua console lognya setelah selesai local testing
console.log("olaa");
const res = document.querySelector("#tulisan");

// winp sama losep agak confusing (winPointNode atau losePointNode mungkin, js pake camelCase haha)
let winp = document.querySelector("#winscore");
let losep = document.querySelector("#losescore");

// console log
console.log(res.textContent);
console.log("hello");

// Naming, I think playem is not a good name, simply playRoundWith(playerMove) itu mungkin lebih enak dibaca
function playem(move) {
let choice = Math.floor(Math.random()*3);
let compMoves = ['rock', 'paper', 'scissor'];
let compMove = compMoves[choice];
// console log
console.log(choice);

determiner(move, compMove);
}

// Naming, I think handleWin is a much better name
// there shouldnt be any space after function nam,e
function win (player, comp) {
wins += 1;
winp.textContent = wins;
res.textContent = "You beat " + comp + " with " + player + ", nice!"
}

// sama kayak di atas
function lose (player, comp) {
loses += 1;
losep.textContent = loses;
res.textContent = "Boo, your " + player + " lose to " + comp + "!";
}

// comp variable is not used
function tie(player, comp) {
res.textContent = "Looks like it's a tie between " + player + "!";
}

// Naming, probably handleResult atau semacamnya is a better name
function determiner (player, comp) {
// btw daripada pake string gini enak pake enum: https://www.sohamkamani.com/blog/2017/08/21/enums-in-javascript/
// kalo string gini typo 1 gg hahaha

// Javascript equalizernya pake ===, bukan ==. Banyak hal menarik bisa terjadi kalo pake ==
// Basically === itu determine dia same type sama same value
if (player == 'rock') {
if (comp == 'scissor') {
win(player, comp);
} else if (comp == 'paper') {
lose(player, comp);
} else {
tie(player, comp);
// unnecessary semicolon, abis if braces ga perlu semicolon
};
} else if (player == 'paper') {
if (comp == 'scissor') {
Expand All @@ -57,4 +79,5 @@ function determiner (player, comp) {
lose(player, comp);
};
}
}
}
// Biasain kasih endline after the last line
3 changes: 3 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@500&display=swap');

/*global? biasanya gini ditaruhnya di body*/
* {
/*buat 0 biasa ga pake 0px*/
margin: 0px;
font-family: 'Baloo Tamma 2', cursive;
color: white;
Expand Down Expand Up @@ -45,6 +47,7 @@ button:hover {
}

button:active {
/* shld use 0 instead of 0px */
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

Expand Down