@DanoSvK
Posted
Congratulation for your project.
Now. Let's start with some flexbox. We can use it to center your card vertically.
Another thing, you are complicating your files a little. It is a small project, there is no need to create several html and css files. It is confusing and difficult to read. But if done correctly or in bigger projects it is a good practice to segment a project. So thumbs up for the effort. But here all you need is one Html and one css file. For the second card to appear after clicking submit button, you could create a whole new card on top of the first one and then giving it display: block; style. In js you could then do this: element.style.display = 'block', so it will appear when you click submit.
You also rely too much on javascript when it comes to hover styles. All you have to do is .element:hover {style} in your css file.
I also have a simple chunk of code which you can use to easily click on those numbers and they will switch styles.
First of all, create a style in css:
.number-active { background-color: rgb(251, 116, 19); }
Then you can add this style using javascript. This is the function you created, but I simplified it.
function highlightSelected() { for (let i = 0; i < numbers.length; i++) { numbers[i].classList.remove("number-active"); } this.classList.add("number-active"); }
So in this code, we first run through all the numbers and remove the class we created from all the numbers. After that, we add class to (this) number. 'This' refers to addEventListener, so in our case the one specific button you clicked. And when we click another, the code does the same thing, it removes the style from all the buttons (including the one we clicked previously) and adds the style to another (this) we clicked.
Last thing, it is a good practice to put script after we close body:
<body><main-content></main-content></body> Hope this helps and keep grinding Brah, we are all gonna make it.
