#Create cross word puzzle for free#

It could take up even less room by implementing CSS Grid differently here, but I opted to do it this way. The crossword puzzle algorithm takes your list of words as input, and then randomly generates many possible puzzles using these words. The number is then made to be the width and height of 1 grid square so that it takes up as little space as possible within the grid. Enter a title in the title box and in the clues textbox make a colon-separated list of answers followed by their clues. */Įach number is placed at the start position of its related group of input elements (or word). This means I can use the :valid pseudo-class to style valid elements. It cannot look backwards in the DOM (or up the DOM tree) and style something before the current element (at the moment at least anyway).

In seconds, youll have a crossword puzzle with just the words you want. Its never been simpler: just give EclipseCrossword a list of words and clues, and it does the rest.

#Create cross word puzzle for free#

Create puzzles for free and more By default you don't need an account and you can create two puzzles for free, with 60 player sessions per month. EclipseCrossword is the fast, easy, free way to create crossword puzzles in minutes. Instructions: Start each line with an answer word, then type a slash '/' character, then the clue. This way you can make changes as you go and directly see the result. Rhode Island / The only state with two unique words in its name. CSS can only style elements that are after the currently selected element. Make your crossword puzzle here Example: Delaware / The first state. If each of the elements in that group is valid (which can be verified using the :valid pseudo selector), then we can use CSS to style an element that appears later in the DOM (using an advanced CSS selector called the general sibling selector) that will indicate that the word is correct.ĭue to how sibling selectors work, and how CSS works in general, this element has to appear later in the DOM. Each group of input elements represents a word in the crossword.

EclipseCrossword is totally free, not a trial. The input elements are visually laid out in groups (exactly how a crossword puzzle is). Its easier than you think to create a great-looking custom crossword puzzle with the exact words that you want. Use our crossword puzzle maker to create your own crossword puzzle with custom words and clues to quiz kids on vocabulary, reading comprehension, and more. That puts our basic skeleton in place so we can add more elements and start styling things. I ended up with the following basic structure, with HTML comments included to show what the different sections will accomplish: Here’s how it’s done STEP 1: Click here to get to the online crossword puzzle maker, and follow the listed instructions.

So, first thing’s first, let’s create the board itself!