Adding a bonus puzzle to the CSS crossword

JavaScript
1 
<h2>CLUE: ...and Stripes</h2>
<style>
$color-focus-item: #FFFF74;


.clue-box-container {
  position: relative;
  background: #FFFFFF;
}

.clue-box__item {
	border: 1px solid #000000;
	background: transparent;
	position: relative;
	z-index: 100;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
 	 width: 40px;
	height: 40px; 

	}
.clue-box__item:active, .clue-box__item:focus {
  background: #FFFF74;
  border: 1px solid #000000;
  outline: 1px solid #000000;
  padding:0px
   }
</style>
<div class="clues">
<input id="item1-1" class="clue-box__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
<input id="item1-2" class="clue-box__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<input id="item1-3" class="clue-box__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item1-4" class="clue-box__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
<input id="item1-5" class="clue-box__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
</div>
</html>

I would like to add a “bonus” puzzle ,separate from the crossword grid, consisting of 5 input squares (spells stars)with the active square being yellow and the highlight being khaki as in crossword; also if all the inputs are right, puzzle will display a checkmark beside the boxes and , “You Are Correct”. Of course, this code will be incorporated in the crossword as one puzzle. I kinda started the code, but may not need all of this since the code will be combined; can you help to achieve this? I hope this makes sense.

2

No I cannot help you to achieve that.

3

Ok thanks

4

What does fork this code mean?

Sorry for asking you that yesterday, I guess I got too excited.

5

It means to make a separate copy.

6

I have created a row of boxes(input squares), separate from the crossword puzzle grid with an active focus square and named the variable clue-box, but does not move when enter a letter. Do I need another function to make the cell move and the word highlight? Also do I need to add the keyboard listeners to the clue-box? Thanks.

7

As this is has diverged from the CSS crossword to adding a bonus puzzle, I’ve moved this and related posts to a new discussion thread.

1 Like
8

The CSS-Only crossword is not a good way to create a crossword or other related puzzles, as it uses many techniques that are very difficult to use on other puzzles that you create.

A whole new set of JavaScript code would need to be created to achieve that. I will not be helping with that.

1 Like
9

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