Feedback on Improving CSS-Only Crossword - with JavaScript

JavaScript
22

Does the codepen crossword not display correctly? Please give more details about that please.

23

No. I made the html file then attached a separate css file and it didn’t display right.

24

Well in that case it’s what you’re doing with your separate files that you need help with.

25

In the html where it says div class=crossword board container, does something go under this? I notice a space between this and the div for the crossword board.

26

It’s just a blank line. The original person that developed the css-only crossword did that for some unknown reason.

28

I attached the css stylesheet like this
link rel= “stylesheet” type= text/css href= “grid.css”

1 Like
29

@jackson108 rather than copying and pasting code from CodePen, you can export all the code in one go, which you can then upload to your host ot localhost.

At the bottom of the page you’ll see an Export link. Click that, then click Export Zip, and bingo, it’s all yours! No fuss, no sweat, and no errors.

3 Likes
30

While adding the different variations to a Collection, I found where some parts of the code had been misplaced to, and removed ones that shouldn’t have been there.

Of course that means the link for part 8 out of 8 was the wrong link, even though it had the same code, so I’ve updated it on my posts because, you know, ocd issues :slight_smile:

The full collection is at https://codepen.io/collection/DPZJYy?grid_type=list
Part 8 is at https://codepen.io/pmw57/pen/eYpxKKa

2 Likes
31

How would you attach a stylesheet that uses both css and scss to html?

32

Firstly, why not export the code and you can see how it works.

Secondly, a stylesheet does not include both CSS and SCSS. A stylesheet only includes CSS code. As has been explained to you in another post, SCSS has to be compiled into CSS to be used.

33

I tried clicking the export link like you said but there were no options that popped up.

34

Do you not see this?

Opera Snapshot_2020-05-24_103650_codepen.io

35

Yes I saw the bottom black line but the white did not popup

36

Try a different browser?

1 Like
37

I have a suggestion.

In post #9 it was said that you want to use it as an app on Kindle. We don’t deal with kindle here. You might be able to gain assistance with that though in the Mobile forum

38

2 posts were merged into an existing topic: Improving CSS-Only Crossword - with JavaScript

39

Under , “Getting All Cells” what do the three dots(…)
mean after let all cells, does something go here? and where it has input id… do all the input id’s go here?

40

I don’t know what you mean with “Getting All Cells”. Can you direct me more carefully to the place?

41

under Getting All Cells

let allCells = [];
function getAllCells(board) {
    return Array.from(board.querySelectorAll("input"));
}

… (three dots)

All of the cells have an identifier that tells us their row and column.

<input id="item1-2" ... /> do all input id’s go here

42

Sorry, but that still doesn’t help me to understand where you are seeing that.