DEV Community: inputduck

Virtual Pet Fish - Progress update 29th June

inputduck — Wed, 29 Jun 2022 18:35:39 +0000

First of all, I tried to recreate the original QBasic version as it would have appeared in the DOS Prompt all those years ago. But with HTML and CSS. I probably could have made it with Bash, but learning Bash just for a screenshot felt like more hassle that necessary.

This was as close as I could get to a visual of what the old game looked like. Cheap and easy and actually strangely exciting for 12 year old me.

And I spent the majority of my time today trying to get the thing to look somewhere close, whilst being useable and not just ascii. I think i have something. It looks old school, but I think it will do everything i need it to. Ladies and gentlemen, I present, Fish Tank v2

It's not sparkling or anything, but I like it so far. I have made a grid of 24 squares by 8 squares that the fish will move around on. I arranged them with flexbox and I sort of have an idea of what I will do to make the fish move around. But I don't want to say too much about it in case I mess it up and have to start again. Essentially the shape of the fish is made up of 5 styled classes, the body, the head, the head curve (so it doesn't look too much like an orange pill), the tail and the tail curve. The fish will be placed by adding the class to the fish tank grid cells and when it moves, taking that class away.

I also realised that I would need to make another version of the fish that faces to the left, for when it swims to the left.

I feel strangely proud of the thing.

Also, I have decided to name the fish Bread after a fish that I had at university. But also, the food that it eats will be slices of bread. So I don't know if that's going to be too confusing.

Remaking my first childhood project - a virtual pet fish

inputduck — Tue, 28 Jun 2022 10:45:19 +0000

When I started learning how to code, my first language was Microsoft QBasic. I was learning on an old IBM 286 that my dad found in storage at the place he worked and I had decided that I was going to make a pet fish. It would swim, it would eat, it would play paper, rock, scissors with me...Basically I wanted a tamagotchi.

I got to a point where an animation would play of the little ascii fish swimming from left to right and then you would choose what you wanted to do. I learned how to make a little animated slice of bread that would disappear. I learned how to make the fish "randomly" swim up or down as it moved across the screen. And that's as far as I got before the computer completely failed and I lost the whole thing. But that project has always been in the back of my mind.

So I am starting it again. But differently.

I am going to make it in HTML, CSS and Javascript. It will have the little aquarium animation. It will have the bread eating animation. It will play paper, rock, scissors. But it will do so much more.

I am still working out what I want to do with it in general. I just know that 12 year old me would be really happy to see this project come to completion after losing it so many years ago.

This is basically where I am going to talk through what I have learned, what I am doing, how I am doing it. I want to make a record of the process to give myself the chance to solidify my learning, but also I wanted to be able to show this to other people who might be interested. They say that the best way to learn is to teach, so that's my plan.

}0D

Parts of the input element

inputduck — Sun, 04 Apr 2021 20:07:15 +0000

I have struggled with the input element a lot in my HTML journey. It's something that I find quite daunting for some reason. So I decided to go over it again and make notes to explain it to myself. Then I thought that I would put those notes here just in case they might be helpful to someone else.

So...the syntax goes as follows (not necessarily in this order, this is just the order I learned it)

<label for="house">
<input id="house" type="radio" name="accomodation" value="house" default checked>
</label>

Label for... This is the way that you connect the word "house" with the input on the form. The label is to help people understand what they are clicking on. It also helps screen readers or other accessibility software describe the site in a useful way to those who need it.
input id... This should be the same as the label so that they are connected and people will know what they are clicking.
type... This can be a number of different things. Radio buttons, checkboxes and text inputs are just a few examples.
name... This is the name of the group of options you can select from. Any elements with the same name will be grouped together. In the case of radio buttons, only one option with the name accomodation would be selectable.
value... This is the one that always baffled me until today. Value is how the information from the form will be stored. If not specified, the value for "value" when it is selected will be "on". This is obviously not very useful if you have a bunch of different information on one form. Specifying a value in this part will mean that the information will be understandable when it is processed. In this example the information sent when the form is submitted would be "accomodation=house" because the value is set to "house".
default... If nothing is selected and the form is submitted, the default selection will be chosen. This has different outcomes depending upon the type of input used. For radio buttons and checkboxes it sets the option as "checked". For text boxes and passwords it is used to define the text that appears in the boxes before they are interacted with. For buttons it is used to define the text written on the button.
checked... As far as I am aware (meaning that I can't find any information to the contrary) checked is only used with radio buttons and checkboxes and serves the same function as using default. Please do let me know if that's wrong.

It's definitely not a full list of all the options available, but I know that I understand it a lot better than I did before. I think that explaining a system in your own words helps you understand what that system does and solidifies what you have learned. That's the main reason I have written this. If you see anything wrong here, please let me know so that I can learn from it.

Finally, please don't assume that I know what I'm talking about. This is literally just a longer form version of the notes I took while I was working through the input section of my web development course. I might be wrong about some part or all parts of it.

Much Love,

Anton