Documentation of Dariyan's Developments

Project 1: Designing a casino game using HTML, css & eventually, a little bit of JavaScript.

CRAPS! I chose craps.

Wed., June 1st 2022

After reviewing the three project options of GUI portion of assignment, I chose CRAPS project. I find it ironic considering that I don't parttake in "gambling", not necessarily because I'm against it, I have the worst luck when it comes to betting anything. HA!


But I'm always up for a challenge and wanted to take advantage of my creativity. Solely based on what I can remember (design-wise on general slot machines or table games) and what I'd prefer to see in terms of understanding it without ever playing it before. While I'm skimming through the "How to Play Casino Craps for Beginners" blog provided by the professor, I'm refraining from searching for images (for the sake of creativity and originality, LOL).


I already have an idea how I'd go about it. I'm going to quickly draft my ideas, then I'll get the repository going and all that jive.

Main window (richtextbox) should be the PLAYING AREA: Round level, encouraging messages, dices and results. Sectioned next to main window (groupbox) with increase/decrease buttons, roll, reset. Second window (richtextbox) to track win/lose results. Maybe with balance and points. or label style to display balance and points.

And while I'm typing all of these out, I'm well aware that I'll be developing GUIs in HTML and CSS with a bit of JavaScript, I used the C# form terms just to give myself a vision without actual painting. That said, I got the repo up and running, I figured now would be the time to do lecture reviews for some great re-freshers.


Speaking of refresher, a boost of afternoon caffeine couldn't do harm with my creativity juice. Woot!

Dwight Schrute getting ready to defeat

What the 'script'?!

Thurs., June 2nd 2022

I spent some time reviewing lectures to touch on the basics of JavaScript and my mind doesn't seem to register the 'script src' concept each and every time.


Until I realized that I consistently missed on adding the alert(); because I had used it interchangeably with another method script without citing the "source".

Dwight Schrute says Oh

Once I had that figured out, I took a dig into JavaScript operators to ensure I understood when and why to use "===" and/or "==" both in C# AND JavaScript. I need to get comfortable with these concepts as I'm developing some design ideas for CRAPS project. Or any other developments.


As far as front-end part goes, there's a few things I need to add onto what I've started since Wednesday:

I will need to utilize TABLES to sort out the BUTTON (organized layout). Contents should be layered in mininum of two DIVS; First DIV: HERO-IMAGE with CRAPS' rules above a container that holds the playing area. Second DIV: PLAYING area with GRID-Template, rows and columns still being determined.

I'll figure out the color themes. Initially thought of emerald green and gold accents, but that will be taken care of towards finalization.

Lay it out, layout!

Sat., June 4th 2022

I followed through with some the ideas I had a couple days back and this is just about 10 minutes in, very basic but so far so good! I got the DIVs in like I intended, made some adjustments on the location and I'm going to use some of the DL tags in the game rules. Initially had envisioned a hero-image and decided to go with a similar concept but another DIV, so I can better control sectionally as far as styling goes.


Ideas updated: Read over the rules of the game once again and figured it's simple but not simple. I'm not going to think too much into it, as I'm feeling pretty confident it'll look how I envisioned. (I'm a perfectionist, my work will be my best work and ALWAYS a WIP.)



Early stages of development (1 of 4 photos). Refer to following updates.

Note to self: Get on with these MEDIA QUERIESSSS.

Can't use form elements without the FORM tag! Or can you?

Sun., June 5th 2022

Alright, first things first-- I forgot that the iFrames I previously added into yesterday's blog is a live-time display, luckily I had taken a screenshot of the original layout I spent that "10 minutes" on. ;) Anyway, I'll keep the iFrames and add the screenshot while I'm at it.


That said, back to the topic-- I'm still testing this theory, whether form elements can't be used without using the form tag, as with many other hiccups along the way. I made it as far as adding GRID into nested DIV ids and classes, as I knew I needed more practice on these concepts. Ironically, I stumbled upon an issue with getting the columns set utilizing classes. What seems to me is working with IDs are much easier to manipulate, in terms of sectioned layouts.


I'm having a slight brain-fog from all these changes and discoveries, but it's entertaining. And somewhat therapeutic.


I'm positive that you CAN use the FORM elements OUTSIDE of the form tag.


I used Descriptive Lists to achieve what I could've done with Ordered Lists. HAHAHAH. Which, of course I corrected with favorable syntax.


Progress with DIV concepts and revised GRID displays multiple times.


Forms, Input Types, Output Tags..

Mon., June 6th 2022

When I started working on GUIs for Craps game project, I had it in the back of my mind that I would need to utilize FORM tags, with all the other elements necessary. I had to ensure I wasn't investing "too much" time into placing appropriate ones, by "substituting" them with mainly P tags. Right now, the utilization of OUTPUT element and everything about "math" are seemingly complicated: this calls for a review through repos made from Front-End Web class lectures.


I didn't have the need to use Tables like I thought I would. That gives me extra time to review my syntaxes so far, eliminate some of the P tags with actual Input Type elements (wherever I think is applicable).


Pretty confident I will get the JavaScript functionality sorted out, but it's obviously something I need to be mindful when developing this project -- so they can be wired up with less headaches, simply because they've been prepped for the second part of the development... Those darn JS Scripts.


Oh boy, this is probably a little over a couple hours since the last paragraph was written in this section. I might've spent a little too much time on manipulating to make my design appealing, CSS effects and then some... When I probably should've focused on Media Queries at this point.


Well, at least I was able to refresh myself on some topics since the VERY BEGINNING of this quarter. I'm pretty content with the most part of my Front-Ens assignment. I figured I can add and tweaks some stuff along the way, once this part-one is graded.


Dwight Schrute says We'll See
Gifs from GIPHY