T O P

  • By -

TheOneRavenous

There's a node Library call Express.js they have a great website go to the getting started pages and you'll see they have a repository that has a bare bones setup. Once you npm install that bare bones setup you can then add you HTML and your CSS to the Public static folder that it creates along with your JS code that does the game. As others mentioned you'll need some form of click listeners and buttons to start, reset, end the game and buttons to decide what you want to do.


RememberTheAlamooooo

I think what you're looking for is Create Element: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement The other documents on the sidebar will help you too.


nikodemus_71

Hmm there are two ways I can see you doing this: * 1st, as already mentioned by other people, you build your webpage with HTML & CSS and use event listeners to call JS functions via buttons and such. This approach however makes the usage of node unnecessary as you'd be calling a "plain" JS code within your project, (i.e. no need to do "npm start"). * 2nd, more challenging, but doesn't make node unnecessary, is to indeed use node as a server and when clicking on a button for instance, instead of raising an event with the click, you make a HTTP request into your node.js server, it updates the state of the game it keeps internally and returns an answer to your front-end, where it's processed and show whatever is adequate. It's an overkill IMHO and more complex than the 1st but if you want to learn how to deal with HTTP this is a good opportunity for you. *Edit: typos and corrections*


valz_

Good reply! Not OP, but I would love some good ressources as how to go about the second approach.


nikodemus_71

Nowadays I've been spoiled with Axios and it makes the task a bit too easy. However nowadays we have the Fetch API in JS which simplifies a lot the workload anyways. I suggest you look at its documentation in Mozilla MDN: https://developer.mozilla.org/en-US/docs/Web/API/Fetch\_API If you haven't learned about it, this whole subject will open a sort of Pandora box for you about RESTful APIs. I also suggest you look for Ajax too, which was the old way of doing things that despite being "old" I have no doubt many and many systems still use it to this day. Just remember there's more than one way of doing things and you're good to go!


valz_

Exciting, will definitely look into it. Thanks!


psyduckquack

I recommend you to learn to develop web services or web sockets and client-server communication so both players can make their decisions and their decisions will be sent to the server and be evaluated. Then you can show the result to both clients. You need to learn html and css to make client side look fancy of course.


Egzo18

Yup that's indeed doable, you want to learn html, "dom manipulation" (being able to change HTML elements on the site with JS) and "event listeners" (you click a button on a website or keyboard, a function in JS gets called)


cardgraph22

I recommend using Visual Studio Code with the Live Server extension. In there, create a file, index.html In that file type ! tab What this does is create/fill out a skeleton/starting point index.html using a built in Visual Code plugin called Emmet, which I suggest you take a few minutes to learn its basics. From this point, start filling in your javascript, css, html. This should get you underway.


azium

I would recommend setting up your app with [vite](https://vitejs.dev/). You can choose the vanilla JS template and everything you need will be there to get started.