Forums:

Comments on a hobby project with HTML, CSS, JavaScript and PHP.

Knute Snortum

Sheriff

Posts: 7125

184

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi everyone! I've created a hobby project, a web app that uses HTML, CSS, JavaScript, and PHP for the backend. It helps you have find words in games like Scrabble, Wordle, and crosswords. The code is here: https://github.com/ksnortum/find-words-web and it's live here: https://snortum.net/findwords Any useful comments would be welcomed.

There is an extensive help page on how to use the app in the footer. You can find Wordle and crossword puzzles at the NY Times and Washington Post sights.

(I've cross-posted this to the HTML, CSS, and JavaScript forum.)

All things are lawful, but not all things are profitable.

Al Hobbs

Bartender

Posts: 669

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

What is the reason for your choice of backend?

Knute Snortum

Sheriff

Posts: 7125

184

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Basically because my website server (Tiger Tech) only has PHP available. I might have done the backend in Java or Node.js otherwise.

All things are lawful, but not all things are profitable.

Val Darrant

Greenhorn

Posts: 17

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I do not complete many of these puzzles but I do have to say: your project is very impressive. I do suggest more CSS elements or a more elaborated website, but that is your decision if you want to edit or not. Other than that, keep up the good work! Awesome job!

- Val Darrant
Wyoming and Montana's the place for a good Western book, ain't it? I reckon so.
Keep Western literature alive!

Knute Snortum

Sheriff

Posts: 7125

184

I like...

posted 2 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

Thank you! Yes, web design has always been my weak point. It's probably something I should look into.

All things are lawful, but not all things are profitable.

Val Darrant

Greenhorn

Posts: 17

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,
If you are open to it, I can help you. If you could attack that PHP file to the HTML page (or if you have already done so), you could add a <style></style> tag on the head of the website. You could also source a CSS file to the HTML code, but I prefer the style method.

I will post my web styling code on the following post for the sake of organization.

Additional to web styling, I do suggest a views count on the footer of the page to track views. You can do so with a JS cloud variable. You could use it from here: https://kihtrak.com/cloud_variable/ (not sponsored)

- Val Darrant
Wyoming and Montana's the place for a good Western book, ain't it? I reckon so.
Keep Western literature alive!

Val Darrant

Greenhorn

Posts: 17

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

<!DOCTYPE html>
<html>
<head>
<title>Find Words</title>
<script>
     function redirect(){
window.location.href="snortum.net/findwords/"
}
</script>

<style>
.top{
background-color: #d9d9d9; 
border: 0px;
margin: 0px;
padding: 70px;
font-family: Times;
font-size: 32pt;
}
</style>

<style>
.desc{
background-color:red;
border: 0px;
margin: 0px;
padding: 30px;
font-family: Times;
font-size: 20pt;
}
</style>

</head>
<body>

<h1 class="top" onclick="redirect();">Find Words</h1>
<h3 class="desc">Having a hard time solving Scrabble, crossword, or Wordle? 
<br/>
<br/>
This page can help!</h3>


</body>
</html>

I hope this helped!

- Val Darrant
Wyoming and Montana's the place for a good Western book, ain't it? I reckon so.
Keep Western literature alive!

Campbell Ritchie

Marshal

Posts: 79978

397

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Good to see you back, Knute

VS, please give a bit of explanation about your code to those who are not familiar with CSSs. It probably only needs a sentence or two. Please beware of those long <-- comments --> inside code tags, because they can make the lines too long to read.

Java 8 (verified skill)
Skill verified by Jeanne Boyarsky

Knute Snortum

Sheriff

Posts: 7125

184

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Good to see you back, Knute

Thanks, Campbell.

And thanks, Val for the suggestions. I will try them out.

All things are lawful, but not all things are profitable.

Val Darrant

Greenhorn

Posts: 17

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You are so very very welcome!

- Val Darrant
Wyoming and Montana's the place for a good Western book, ain't it? I reckon so.
Keep Western literature alive!

Val Darrant

Greenhorn

Posts: 17

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Campbell Ritchie wrote:Good to see you back, Knute

VS, please give a bit of explanation about your code to those who are not familiar with CSSs. It probably only needs a sentence or two. Please beware of those long <-- comments --> inside code tags, because they can make the lines too long to read.

So the CSS code in the example above is aiming to demonstrate a title segment with a gray background and with a specific font size and family. This is the "top" class, as I typically call it. It has no margins or borders, but does have some fill (padding) in it. The "desc" class is a smaller segment providing a description of the page's content. It has a red background, specifying margins, borders, font, font size, and so on.

The HTML code begins with an <!DOCTYPE html> and follows along with html, head, and body tags. The head provides information that is not visible by the viewer, the body provides the information seen by the viewer. h1 and h3 provide different headings of the page based on importance (instead of size, as many perceive it). The "class" in the h1 and h3 tags define a specific CSS group of code. Therefore, whatever is in between the beginning and closing tags of the h1 or h3 tags will apply to the CSS code of that class. That is how the different segments are created by the different details needed.

The JS function as shown below describes a function that redirects the user to the home page:

This function would be applied to when the home text would be clicked.
I hope this helped! I hope to see those CSS changes on your webpage, Knute!

- Val Darrant
Wyoming and Montana's the place for a good Western book, ain't it? I reckon so.
Keep Western literature alive!

Piet Souris

Bartender

Posts: 5567

213

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

hi Knute,

long time no see! Welcome back.

Very nice site. There was a topic about Wordfeud about a year ago, and I showed a helper-program in java (see: topic). However, my sister was unable to install java on her machine, no matter what I tried, and you gave me the idea to transform the thing to a website. Now I have no knowledge of php, so I have some questions:

1) do you need to use php or some other server-related thing? What would happen if you simply use the dictionaries in javascript? Would that mean all the dictionaries would be loaded on the user-pc?

2) can you describe in a few words how a java program would have looked instead of 'find-words.php'? Like, how would you detect the input? How would you decode json?

3) I have made a Wordle-version (my version), but as it is now it is only in Dutch. May I use one of your dictionaries to also allow for English?

Thanks!

There are three kinds of actuaries: those who can count, and those who can't.

Stephan van Hulst

Saloon Keeper

Posts: 15731

368

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I echo the sentiments, it's good to see you back Knute.

I can't take a look at your code right now, but I'd like to take a squiz at it when my plane lands.

Have you considered using Laravel? I haven't used it in ages so I don't know its current state, but as much as I hated using PHP, Laravel made the development of web applications in PHP pretty fun.

Knute Snortum

Sheriff

Posts: 7125

184

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello Piet and Stephan and thanks you for your kind words.

1) The use of PHP was purely because it's what my web server company offers, but it did take me back to when I was programming in Perl. I thought about writing it all in JavaScript, but I wasn't sure how I could get at the dictionaries on the server. There's probably some way, but I don't know it. I did want to try a client-server setup though.

2) I don't know how you would communicate from a client to a Java back-end, although I'm sure it happens all the time.

3) You can certainly use one of the English text dictionary files I use. I'll try attaching the Collins dictionary -- I don't think it will be too big.

Stephan: I haven't heard of Laravel, I'll look into it.

Filename: collins.txt

Description: English text dictionary for Scrabble

File size: 3 megabytes

Download Attachment

All things are lawful, but not all things are profitable.

Knute Snortum

Sheriff

Posts: 7125

184

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

It turns out that my server does have Node.js (server-side JavaScript) so I could have written everything in JS. That might be something to try later on.

All things are lawful, but not all things are profitable.

Stephan van Hulst

Saloon Keeper

Posts: 15731

368

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Knute Snortum wrote:I don't know how you would communicate from a client to a Java back-end, although I'm sure it happens all the time.

Yes, I'm pretty sure that Java is still one of the most-used languages for web application back-ends. There are many application frameworks available that let you implement a REST or SOAP API relatively easily. My personal framework of choice is JAX-RS, which is available out of the box on any enterprise application container, or if you're using an application container that only supports web profile (such as Tomcat) then you can use JAX-RS by adding the Eclipse Jersey dependency to your project. Another popular choice is Spring Web MVC.

Of course, all of this depends on your server supporting Java.

Stephan: I haven't heard of Laravel, I'll look into it.

Let me know what you think.

They worship nothing. They say it's because nothing is worth fighting for. Like this tiny ad:

Gift giving made easy with the permaculture playing cards

https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing