DEV Community

FatimaAlam1234
FatimaAlam1234

Posted on

JS - Developer Skills (Guess game)

Apart from console.log() we have console.warning() an console.error() used to raise a warning and error respectively.

Debugger

debugger;
Enter fullscreen mode Exit fullscreen mode

A debugger window gets opened and after this line whatever is written the debugger stops at every line and we have manually make the code move to subsequent line.

CSS

To link a css file with html file ->
In html file ->

-> To change a general element like para use p:{}
-> To set properties for a class name -> .{class_name} {...}
-> To set properties for a id name -> #{id name} {...}

Image description

To change a style element ->
With **class **name of an element ->

#Syntax ->
document.querySelector('.{class_name').attribute= 'value'

document.querySelector('.message').testContent = 'Correct Answer';
Enter fullscreen mode Exit fullscreen mode

one more attribute is value

Onclick Event

Image description

the function alongside onclick is basically called as and when there is a click operation.
The !guess condition checks whether the user didn't enter any value and has clicked the button then in that case the gam window's message class displays that text.

Output

State Variable

Image description

Image description

Variable which is part of the application state.
In this context **score **is a state variable.

Functionality ->
Whenever we guess correct answer background goes green and the ? box gets wider ->

To target the entire page element which we have to use -> body.

Image description

Image description

Again !

It resets the window

HighScore

It sets the highscore to the highest score so far.

Removing recurring code using optimization techniques
The high and low code being almost same except for the message -> modify that.

Top comments (0)