I need help on the code | Smarter Dev | Page 1

manic agate Mar 16, 2023, 3:04 PM

#

Hello, I have been learning HTML, CSS and JavaScript for two weeks now. Today I created an extremely simple project, but I would like someone more experienced to look and point out possible errors or better ways to code.
https://github.com/ollivmonarch/first-simple-project

GitHub

GitHub - ollivmonarch/first-simple-project: A simple math game

A simple math game. Contribute to ollivmonarch/first-simple-project development by creating an account on GitHub.

manic agate Mar 16, 2023, 4:08 PM

#

I need help on the code

quick pawn Mar 16, 2023, 4:11 PM

#

Hello I am a professional web developer I can help you out

manic agate Mar 16, 2023, 4:11 PM

#

That is great

true folio Mar 16, 2023, 4:11 PM

#

It'd be nicer if you replaced the browser popup with your own popup using JS & an element

#

Then you'd be able to style it and make it a little less obnoxious (close automatically or if you click outside it)

manic agate Mar 16, 2023, 4:12 PM

#

I thought about it but I didn't know how to do it

true folio Mar 16, 2023, 4:13 PM

#

modal gets positioned with pos absolute, opacity: 0, pointer-events none;
js triggers > adds class to modal > the class changes the css so that it's now visible and has pointer events

manic agate Mar 16, 2023, 4:13 PM

#

I would like to know if the practices I used in JavaScript such as functions are correct

true folio Mar 16, 2023, 4:13 PM

#

https://get.foundation/sites/docs/reveal.html
Here's an example from a framework

Reveal | Foundation for Sites 6 Docs

Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal, our jQuery modal plugin, to make this easy for you.

manic agate Mar 16, 2023, 4:14 PM

#

true folio https://get.foundation/sites/docs/reveal.html Here's an example from a framework

Yes it's really much better

true folio Mar 16, 2023, 4:17 PM

#

normally JS and CSS is formatted a little differently I believe, very minor but it's probably easier long term if you (and anyone you work on projects with) have the same formatting.
Normally open bracket is like this

p {
    font-size: 16pt;
    margin: 20px;
}```
You could perhaps research some formatting standards, I need to do that eventually as well 🤣

#

also on your button hover you should move your transition value

#

If it's just on the button (not on hover) then it will work both on hover and off hover

button {
    transition: .3s;
}

#

That way the button doesn't instantly switch back to default styling when you move your mouse off it

#

and you don't need it on :hover at all

#

let displaySum = document.querySelector("#display-sum"),
sumInput = document.querySelector("#sum-input"),
countElement = document.querySelector("#count"),
input, 
firstNumber, 
secondNumber,
sum,
correct = 0,
wrong = 0;

Not sure if this is actually better or not but techincally you can define variables in a list like this if you're going to set a bunch of them in a row

#

rest looks decent you're doing really well for 2 weeks, with more experience you'll be doing good 👍

#

Attention to details like this will give you a bunch of random experience just from doing the extra improvements + you end up with better end product so it's worth doing.

manic agate Mar 16, 2023, 6:48 PM

#

Thank you very much

#I need help on the code