Build a Cash Register

HTML-CSS
1

Please help me about css in Build a Cash Register Project.

This is a completely unrelated part of the test to pass or fail the project, but I’m writing the CSS for the final step.

 <div id="drawer-top">
        <p id="price"></p>   
      </div>
      <div id="connecter"></div>
      <div id="drawer-middle">
        <div id="drawer-middle-pattern">
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
        </div>

:root {
  --background: #0A0A23;
  --color: #FFFFFFFF;
  --register: #99c9ff;
  --button: linear-gradient(#fecc4c, #ffac33);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  background : var(--background);
  color : var(--color);
  font-family: Times New Roman;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#drawer-middle {
  background: var(--register);
  width: 325px;
  height: 250px;
  border-radius: 10% 10% 0% 0%;
  position: relative;
}

#drawer-middle-pattern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
}

.pattern {
  background-color: var(--background);
  border-radius: 10%;
  width: 20px;
  height: 20px;
}

I want to place a “.pattern” 3x3, but I can’t get it to work.
I can’t figure out why it’s not working.

I would appreciate any help from the experts.

2

First thing I notice is that you need a closing tag </div>. That might be causing issues. I also notice that the register is very small and tucked up in the top left corner of the screen when I plug in your code. I would fix those first. Here is what it looks like when I put in your code plus some borders to see what is what https://codepen.io/Magopolis/pen/qBeXbdV?editors=1100

Are you trying to do something like what is in the red box?
Screen Shot 2024-10-19 at 9.04.35 PM

3

I appreciate your reply.

  1. the number of div elements
    My presentation of the code was not accurate,
    I have confirmed that the number of div elements is fine.

  2. what I want to do
    As you said, what I want to do by CSS is what you presented to me.

<div id="drawer-middle-pattern">
          <span class="pattern"> <span> →changed <button></button>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
          <span class="pattern"> <span>
        </div>

Changing elements from span to button, a pattern “3x3” is showed.
However remaining span elements, it’s not showed.

Can I ask why does it not work well with the span element, but it does with the button element?
What is a difference from these elements?

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.