#JavaScript-based applications | Explore Tumblr posts and blogs

jcmarchi · 1 month ago

Text

How to Create Multi-Step Forms With Vanilla JavaScript and CSS

New Post has been published on https://thedigitalinsider.com/how-to-create-multi-step-forms-with-vanilla-javascript-and-css/

How to Create Multi-Step Forms With Vanilla JavaScript and CSS

Multi-step forms are a good choice when your form is large and has many controls. No one wants to scroll through a super-long form on a mobile device. By grouping controls on a screen-by-screen basis, we can improve the experience of filling out long, complex forms.

But when was the last time you developed a multi-step form? Does that even sound fun to you? There’s so much to think about and so many moving pieces that need to be managed that I wouldn’t blame you for resorting to a form library or even some type of form widget that handles it all for you.

But doing it by hand can be a good exercise and a great way to polish the basics. I’ll show you how I built my first multi-step form, and I hope you’ll not only see how approachable it can be but maybe even spot areas to make my work even better.

We’ll walk through the structure together. We’ll build a job application, which I think many of us can relate to these recent days. I’ll scaffold the baseline HTML, CSS, and JavaScript first, and then we’ll look at considerations for accessibility and validation.

I’ve created a GitHub repo for the final code if you want to refer to it along the way.

The structure of a multi-step form

Our job application form has four sections, the last of which is a summary view, where we show the user all their answers before they submit them. To achieve this, we divide the HTML into four sections, each identified with an ID, and add navigation at the bottom of the page. I’ll give you that baseline HTML in the next section.

Navigating the user to move through sections means we’ll also include a visual indicator for what step they are at and how many steps are left. This indicator can be a simple dynamic text that updates according to the active step or a fancier progress bar type of indicator. We’ll do the former to keep things simple and focused on the multi-step nature of the form.,

The structure and basic styles

We’ll focus more on the logic, but I will provide the code snippets and a link to the complete code at the end.

Let’s start by creating a folder to hold our pages. Then, create an index.html file and paste the following into it:

Open HTML

<form id="myForm"> <section class="group-one" id="one"> <div class="form-group"> <div class="form-control"> <label for="name">Name <span style="color: red;">*</span></label> <input type="text" id="name" name="name" placeholder="Enter your name"> </div> <div class="form-control"> <label for="idNum">ID number <span style="color: red;">*</span></label> <input type="number" id="idNum" name="idNum" placeholder="Enter your ID number"> </div> </div> <div class="form-group"> <div class="form-control"> <label for="email">Email <span style="color: red;">*</span></label> <input type="email" id="email" name="email" placeholder="Enter your email"> </div> <div class="form-control"> <label for="birthdate">Date of Birth <span style="color: red;">*</span></label> <input type="date" id="birthdate" name="birthdate" max="2006-10-01" min="1924-01-01"> </div> </div> </section> <section class="group-two" id="two"> <div class="form-control"> <label for="document">Upload CV <span style="color: red;">*</span></label> <input type="file" name="document" id="document"> </div> <div class="form-control"> <label for="department">Department <span style="color: red;">*</span></label> <select id="department" name="department"> <option value="">Select a department</option> <option value="hr">Human Resources</option> <option value="it">Information Technology</option> <option value="finance">Finance</option> </select> </div> </section> <section class="group-three" id="three"> <div class="form-control"> <label for="skills">Skills (Optional)</label> <textarea id="skills" name="skills" rows="4" placeholder="Enter your skills"></textarea> </div> <div class="form-control"> <input type="checkbox" name="terms" id="terms"> <label for="terms">I agree to the terms and conditions <span style="color: red;">*</span></label> </div> <button id="btn" type="submit">Confirm and Submit</button> </section> <div class="arrows"> <button type="button" id="navLeft">Previous</button> <span id="stepInfo"></span> <button type="button" id="navRight">Next</button> </div> </form> <script src="script.js"></script>

Looking at the code, you can see three sections and the navigation group. The sections contain form inputs and no native form validation. This is to give us better control of displaying the error messages because native form validation is only triggered when you click the submit button.

Next, create a styles.css file and paste this into it:

Open base styles

:root --primary-color: #8c852a; --secondary-color: #858034; body font-family: sans-serif; line-height: 1.4; margin: 0 auto; padding: 20px; background-color: #f4f4f4; max-width: 600px; h1 text-align: center; form background: #fff; padding: 40px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; .form-group display: flex; gap: 7%; .form-group > div width: 100%; input:not([type="checkbox"]), select, textarea width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; .form-control margin-bottom: 15px; button display: block; width: 100%; padding: 10px; color: white; background-color: var(--primary-color); border: none; border-radius: 4px; cursor: pointer; font-size: 16px; button:hover background-color: var(--secondary-color); .group-two, .group-three display: none; .arrows display: flex; justify-content: space-between align-items: center; margin-top: 10px; #navLeft, #navRight width: fit-content; @media screen and (max-width: 600px) .form-group flex-direction: column;

Open up the HTML file in the browser, and you should get something like the two-column layout in the following screenshot, complete with the current page indicator and navigation.

Adding functionality with vanilla JavaScript

Now, create a script.js file in the same directory as the HTML and CSS files and paste the following JavaScript into it:

Open base scripts

const stepInfo = document.getElementById("stepInfo"); const navLeft = document.getElementById("navLeft"); const navRight = document.getElementById("navRight"); const form = document.getElementById("myForm"); const formSteps = ["one", "two", "three"]; let currentStep = 0; function updateStepVisibility() formSteps.forEach((step) => document.getElementById(step).style.display = "none"; ); document.getElementById(formSteps[currentStep]).style.display = "block"; stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`; navLeft.style.display = currentStep === 0 ? "none" : "block"; navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block"; document.addEventListener("DOMContentLoaded", () => navLeft.style.display = "none"; updateStepVisibility(); navRight.addEventListener("click", () => if (currentStep < formSteps.length - 1) currentStep++; updateStepVisibility(); ); navLeft.addEventListener("click", () => if (currentStep > 0) currentStep--; updateStepVisibility(); ); );

This script defines a method that shows and hides the section depending on the formStep values that correspond to the IDs of the form sections. It updates stepInfo with the current active section of the form. This dynamic text acts as a progress indicator to the user.

It then adds logic that waits for the page to load and click events to the navigation buttons to enable cycling through the different form sections. If you refresh your page, you will see that the multi-step form works as expected.

Multi-step form navigation

Let’s dive deeper into what the Javascript code above is doing. In the updateStepVisibility() function, we first hide all the sections to have a clean slate:

formSteps.forEach((step) => document.getElementById(step).style.display = "none"; );

Then, we show the currently active section:

document.getElementById(formSteps[currentStep]).style.display = "block";`

Next, we update the text that indicators progress through the form:

stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`;

Finally, we hide the Previous button if we are at the first step and hide the Next button if we are at the last section:

navLeft.style.display = currentStep === 0 ? "none" : "block"; navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";

Let’s look at what happens when the page loads. We first hide the Previous button as the form loads on the first section:

document.addEventListener("DOMContentLoaded", () => navLeft.style.display = "none"; updateStepVisibility();

Then we grab the Next button and add a click event that conditionally increments the current step count and then calls the updateStepVisibility() function, which then updates the new section to be displayed:

navRight.addEventListener("click", () => if (currentStep < formSteps.length - 1) currentStep++; updateStepVisibility(); );

Finally, we grab the Previous button and do the same thing but in reverse. Here, we are conditionally decrementing the step count and calling the updateStepVisibility():

navLeft.addEventListener("click", () => if (currentStep > 0) currentStep--; updateStepVisibility(); );

Handling errors

Have you ever spent a good 10+ minutes filling out a form only to submit it and get vague errors telling you to correct this and that? I prefer it when a form tells me right away that something’s amiss so that I can correct it before I ever get to the Submit button. That’s what we’ll do in our form.

Our principle is to clearly indicate which controls have errors and give meaningful error messages. Clear errors as the user takes necessary actions. Let’s add some validation to our form. First, let’s grab the necessary input elements and add this to the existing ones:

const nameInput = document.getElementById("name"); const idNumInput = document.getElementById("idNum"); const emailInput = document.getElementById("email"); const birthdateInput = document.getElementById("birthdate") const documentInput = document.getElementById("document"); const departmentInput = document.getElementById("department"); const termsCheckbox = document.getElementById("terms"); const skillsInput = document.getElementById("skills");

Then, add a function to validate the steps:

Open validation script

function validateStep(step)

Here, we check if each required input has some value and if the email input has a valid input. Then, we set the isValid boolean accordingly. We also call a showError() function, which we haven’t defined yet.

Paste this code above the validateStep() function:

Now, add the following styles to the stylesheet:

Open validation styles

input:focus, select:focus, textarea:focus outline: .5px solid var(--primary-color); input.error, select.error, textarea.error outline: .5px solid red; .error-message font-size: x-small; color: red; display: block; margin-top: 2px; .arrows color: var(--primary-color); font-size: 18px; font-weight: 900; #navLeft, #navRight display: flex; align-items: center; gap: 10px; #stepInfo color: var(--primary-color);

If you refresh the form, you will see that the buttons do not take you to the next section till the inputs are considered valid:

Finally, we want to add real-time error handling so that the errors go away when the user starts inputting the correct information. Add this function below the validateStep() function:

Open real-time validation script

function setupRealtimeValidation() nameInput.addEventListener("input", () => if (nameInput.value.trim() !== "") clearError(nameInput); ); idNumInput.addEventListener("input", () => if (idNumInput.value.trim() !== "") clearError(idNumInput); ); emailInput.addEventListener("input", () => if (emailInput.validity.valid) clearError(emailInput); ); birthdateInput.addEventListener("change", () => if (birthdateInput.value !== "") clearError(birthdateInput); ); documentInput.addEventListener("change", () => if (documentInput.files[0]) clearError(documentInput); ); departmentInput.addEventListener("change", () => if (departmentInput.value !== "") clearError(departmentInput); ); termsCheckbox.addEventListener("change", () => if (termsCheckbox.checked) clearError(termsCheckbox); );

This function clears the errors if the input is no longer invalid by listening to input and change events then calling a function to clear the errors. Paste the clearError() function below the showError() one:

function clearError(input) const formControl = input.parentElement; const errorSpan = formControl.querySelector(".error-message"); input.classList.remove("error"); errorSpan.textContent = "";

And now the errors clear when the user types in the correct value:

The multi-step form now handles errors gracefully. If you do decide to keep the errors till the end of the form, then at the very least, jump the user back to the erroring form control and show some indication of how many errors they need to fix.

Handling form submission

In a multi-step form, it is valuable to show the user a summary of all their answers at the end before they submit and to offer them an option to edit their answers if necessary. The person can’t see the previous steps without navigating backward, so showing a summary at the last step gives assurance and a chance to correct any mistakes.

Let’s add a fourth section to the markup to hold this summary view and move the submit button within it. Paste this just below the third section in index.html:

Open HTML

<section class="group-four" id="four"> <div class="summary-section"> <p>Name: </p> <p id="name-val"></p> <button type="button" class="edit-btn" id="name-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>ID Number: </p> <p id="id-val"></p> <button type="button" class="edit-btn" id="id-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>Email: </p> <p id="email-val"></p> <button type="button" class="edit-btn" id="email-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>Date of Birth: </p> <p id="bd-val"></p> <button type="button" class="edit-btn" id="bd-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>CV/Resume: </p> <p id="cv-val"></p> <button type="button" class="edit-btn" id="cv-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>Department: </p> <p id="dept-val"></p> <button type="button" class="edit-btn" id="dept-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>Skills: </p> <p id="skills-val"></p> <button type="button" class="edit-btn" id="skills-edit"> <span>✎</span> <span>Edit</span> </button> </div> <button id="btn" type="submit">Confirm and Submit</button> </section>

Then update the formStep in your Javascript to read:

const formSteps = ["one", "two", "three", "four"];

Finally, add the following classes to styles.css:

.summary-section display: flex; align-items: center; gap: 10px; .summary-section p:first-child width: 30%; flex-shrink: 0; border-right: 1px solid var(--secondary-color); .summary-section p:nth-child(2) width: 45%; flex-shrink: 0; padding-left: 10px; .edit-btn width: 25%; margin-left: auto; background-color: transparent; color: var(--primary-color); border: .7px solid var(--primary-color); border-radius: 5px; padding: 5px; .edit-btn:hover border: 2px solid var(--primary-color); font-weight: bolder; background-color: transparent;

Now, add the following to the top of the script.js file where the other consts are:

const nameVal = document.getElementById("name-val"); const idVal = document.getElementById("id-val"); const emailVal = document.getElementById("email-val"); const bdVal = document.getElementById("bd-val") const cvVal = document.getElementById("cv-val"); const deptVal = document.getElementById("dept-val"); const skillsVal = document.getElementById("skills-val"); const editButtons = "name-edit": 0, "id-edit": 0, "email-edit": 0, "bd-edit": 0, "cv-edit": 1, "dept-edit": 1, "skills-edit": 2 ;

Then add this function in scripts.js:

function updateSummaryValues() nameVal.textContent = nameInput.value; idVal.textContent = idNumInput.value; emailVal.textContent = emailInput.value; bdVal.textContent = birthdateInput.value; const fileName = documentInput.files[0]?.name; if (fileName) const extension = fileName.split(".").pop(); const baseName = fileName.split(".")[0]; const truncatedName = baseName.length > 10 ? baseName.substring(0, 10) + "..." : baseName; cvVal.textContent = `$truncatedName.$extension`; else cvVal.textContent = "No file selected"; deptVal.textContent = departmentInput.value; skillsVal.textContent = skillsInput.value || "No skills submitted"; }

This dynamically inserts the input values into the summary section of the form, truncates the file names, and offers a fallback text for the input that was not required.

Then update the updateStepVisibility() function to call the new function:

function updateStepVisibility() formSteps.forEach((step) => document.getElementById(step).style.display = "none"; ); document.getElementById(formSteps[currentStep]).style.display = "block"; stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`; if (currentStep === 3) updateSummaryValues(); navLeft.style.display = currentStep === 0 ? "none" : "block"; navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";

Finally, add this to the DOMContentLoaded event listener:

Object.keys(editButtons).forEach((buttonId) => const button = document.getElementById(buttonId); button.addEventListener("click", (e) => currentStep = editButtons[buttonId]; updateStepVisibility(); ); );

Running the form, you should see that the summary section shows all the inputted values and allows the user to edit any before submitting the information:

And now, we can submit our form:

form.addEventListener("submit", (e) => e.preventDefault(); if (validateStep(2)) alert("Form submitted successfully!"); form.reset(); currentFormStep = 0; updateStepVisibility(); );

Our multi-step form now allows the user to edit and see all the information they provide before submitting it.

Accessibility tips

Making multi-step forms accessible starts with the basics: using semantic HTML. This is half the battle. It is closely followed by using appropriate form labels.

Other ways to make forms more accessible include giving enough room to elements that must be clicked on small screens and giving meaningful descriptions to the form navigation and progress indicators.

Offering feedback to the user is an important part of it; it’s not great to auto-dismiss user feedback after a certain amount of time but to allow the user to dismiss it themselves. Paying attention to contrast and font choice is important, too, as they both affect how readable your form is.

Let’s make the following adjustments to the markup for more technical accessibility:

Add aria-required="true" to all inputs except the skills one. This lets screen readers know the fields are required without relying on native validation.

Add role="alert" to the error spans. This helps screen readers know to give it importance when the input is in an error state.

Add role="status" aria-live="polite" to the .stepInfo. This will help screen readers understand that the step info keeps tabs on a state, and the aria-live being set to polite indicates that should the value change, it does not need to immediately announce it.

In the script file, replace the showError() and clearError() functions with the following:

function showError(input, message) const formControl = input.parentElement; const errorSpan = formControl.querySelector(".error-message"); input.classList.add("error"); input.setAttribute("aria-invalid", "true"); input.setAttribute("aria-describedby", errorSpan.id); errorSpan.textContent = message; function clearError(input) const formControl = input.parentElement; const errorSpan = formControl.querySelector(".error-message"); input.classList.remove("error"); input.removeAttribute("aria-invalid"); input.removeAttribute("aria-describedby"); errorSpan.textContent = "";

Here, we programmatically add and remove attributes that explicitly tie the input with its error span and show that it is in an invalid state.

Finally, let’s add focus on the first input of every section; add the following code to the end of the updateStepVisibility() function:

const currentStepElement = document.getElementById(formSteps[currentStep]); const firstInput = currentStepElement.querySelector( "input, select, textarea" ); if (firstInput) firstInput.focus();

And with that, the multi-step form is much more accessible.

Conclusion

There we go, a four-part multi-step form for a job application! As I said at the top of this article, there’s a lot to juggle — so much so that I wouldn’t fault you for looking for an out-of-the-box solution.

But if you have to hand-roll a multi-step form, hopefully now you see it’s not a death sentence. There’s a happy path that gets you there, complete with navigation and validation, without turning away from good, accessible practices.

And this is just how I approached it! Again, I took this on as a personal challenge to see how far I could get, and I’m pretty happy with it. But I’d love to know if you see additional opportunities to make this even more mindful of the user experience and considerate of accessibility.

References

Here are some relevant links I referred to when writing this article:

How to Structure a Web Form (MDN)

Multi-page Forms (W3C.org)

Create accessible forms (A11y Project)

2 notes · View notes

esoxy · 1 year ago

Text

So let's get into the nitty-gritty technical details behind my latest project, the National Blue Trail round-trip search application available here:

This project has been fun with me learning a lot about plenty of technologies, including QGis, PostGIS, pgRouting, GTFS files, OpenLayers, OpenTripPlanner and Vita.

So let's start!

In most of my previous GIS projects I have always used custom made tools written in ruby or Javascript and never really tried any of the "proper" GIS tools, so it was a good opportunity for me to learn a bit of QGIS. I hoped I could do most of the work there, but soon realized it's not fully up to the job, so I had to extend the bits to other tools at the end. For most purposes I used QGis to import data from various sources, and export the results to PostGIS, then do the calculations in PostGIS, re-import the results from there and save them into GeoJSON. For this workflow QGIS was pretty okay to use. I also managed to use it for some minor editing as well.

I did really hope I could avoid PostGIS, and do all of the calculation inside QGIS, but its routing engine is both slow, and simply not designed for multiple uses. For example after importing the map of Hungary and trying to find a single route between two points it took around 10-15 minutes just to build the routing map, then a couple seconds to calculate the actual route. There is no way to save the routing map (at least I didn't find any that did not involve coding in Python), so if you want to calculate the routes again you had to wait the 10-15 minute of tree building once more. Since I had to calculate around 20.000 of routes at least, I quickly realized this will simply never work out.

I did find the QNEAT3 plugin which did allow one to do a N-M search of routes between two set of points, but it was both too slow and very disk space intense. It also calculated many more routes than needed, as you couldn't add a filter. In the end it took 23 hours for it to calculate the routes AND it created a temporary file of more than 300Gb in the process. After realizing I made a mistake in the input files I quickly realized I won't wait this time again and started looking at PostGIS + pgRouting instead.

Before we move over to them two very important lessons I learned in QGIS:

There is no auto-save. If you forget to save and then 2 hours later QGIS crashes for no reason then you have to restart your work

Any layer that is in editing mode is not getting saved when you press the save button. So even if you don't forget to save by pressing CTRL/CMD+S every 5 seconds like every sane person who used Adobe products ever in their lifetimes does, you will still lose your work two hours later when QGIS finally crashes if you did not exit the editing mode for all of the layers

----

So let's move on to PostGIS.

It's been a while since I last used PostGIS - it was around 11 years ago for a web based object tracking project - but it was fairly easy to get it going. Importing data from QGIS (more specifically pushing data from QGIS to PostGIS) was pretty convenient, so I could fill up the tables with the relevant points and lines quite easily. The only hard part was getting pgRouting working, mostly because there aren't any good tutorials on how to import OpenStreetMap data into it. I did find a blog post that used a freeware (not open source) tool to do this, and another project that seems dead (last update was 2 years ago) but at least it was open source, and actually worked well. You can find the scripts I used on the GitHub page's README.

Using pgRouting was okay - documentation is a bit hard to read as it's more of a specification, but I did find the relevant examples useful. It also supports both A* search (which is much quicker than plain Dijsktra on a 2D map) and searching between N*M points with a filter applied, so I hoped it will be quicker than QGIS, but I never expected how quick it was - it only took 5 seconds to calculate the same results it took QGIS 23 hours and 300GB of disk space! Next time I have a GIS project I'm fairly certain I will not shy away from using PostGIS for calculations.

There were a couple of hard parts though, most notably:

ST_Collect will nicely merge multiple lines into one single large line, but the direction of that line looked a bit random, so I had to add some extra code to fix it later.

ST_Split was similarly quite okay to use (although it took me a while to realize I needed to use ST_Snap with proper settings for it to work), but yet again the ordering of the segments were off a slight bit, but I was too lazy to fix it with code - I just updated the wrong values by hand.

----

The next project I had never used in the past was OpenTripPlanner. I did have a public transport project a couple years ago but back then tools like this and the required public databases were very hard to come by, so I opted into using Google's APIs (with a hard limit to make sure this will never be more expensive than the free tier Google gives you each month), but I have again been blown away how good tooling has become since then. GTFS files are readily available for a lot of sources (although not all - MAV, the Hungarian Railways has it for example behind a registration paywall, and although English bus companies are required to publish this by law - and do it nicely, Scottish ones don't always do it, and even if they do finding them is not always easy. Looks to be something I should push within my party of choice as my foray into politics)

There are a couple of caveats with OpenTripPlanner, the main one being it does require a lot of RAM. Getting the Hungarian map, and the timetables from both Volánbusz (the state operated coach company) and BKK (the public transport company of Budapest) required around 13GB of RAM - and by default docker was only given 8, so it did crash at first with me not realizing why.

The interface of OpenTripPlanner is also a bit too simple, and it was fairly hard for me to stop it from giving me trips that only involve walking - I deliberately wanted it to only search between bus stops involving actual bus travel as the walking part I had already done using PostGIS. I did however check if I could have used OpenTripPlanner for that part as well, and while it did work somewhat it didn't really give optimal results for my use case, so I was relieved the time I spend in QGIS - PostGIS was not in vain.

The API of OpenTripPlanner was pretty neat though, it did mimic Google's route searching API as much as possible which I used in the past so parsing the results was quite easy.

----

Once we had all of the data ready, the final bit was converting it to something I can use in JavaScript. For this I used my trusted scripting language I use for such occasion for almost 20 years now: ruby. The only interesting part here was the use of Encoded Polylines (which is Google's standard of sending LineString information over inside JSON files), but yet again I did find enough tools to handle this pretty obscure format.

----

Final part was the display. While I usually used Leaflet in the past I really wanted to try OpenLayers, I had another project I had not yet finished where Leaflet was simply too slow for the data, and I had a very quick look at OpenLayers and saw it could display it with an acceptable performance, so I believed it might be a good opportunity for me to learn it. It was pretty okay, although I do believe transparent layers seem to be pretty slow under it without WebGL rendering, and I could not get WebGL working as it is still only available as a preview with no documentation (and the interface has changed completely in the last 2 months since I last looked at it). In any case OpenLayers was still a good choice - it had built in support for Encoded Polylines, GPX Export, Feature selection by hovering, and a nice styling API. It also required me to use Vita for building the application, which was a nice addition to my pretty lacking knowledge of JavaScript frameworks.

----

All in all this was a fun project, I definitely learned a lot I can use in the future. Seeing how well OpenTripPlanner is, and not just for public transport but also walking and cycling, did give me a couple new ideas I could not envision in the past because I could only do it with Google's Routing API which would have been prohibitively expensive. Now I just need to start lobbying for the Bus Services Act 2017 or something similar to be implemented in Scotland as well

21 notes · View notes

fuzzyfoe · 3 months ago

Note

if pet hotel had little games and activities like neopets or club penguin puffle games, what would they be?

whatever would be within my skill level to program i guess

i think i would start out with a game where the pet is holding a basket beneath some trees and you have to catch falling fruit by moving the pet left and right. sounds nice and simple enough, and once i had enough of a variety of simple games i would then feel free to try and experiment with something more complex and take as much time as i need since the simple games are able to fill that space where something needs to be right now

if i made this a website-based virtual pet game like neopets and flight rising are, something that's gonna be tricky and would probably take me a long time is i would have to learn how to make an html5 application (which is what these games would be if this was the case, since flash is dead) that would be able to read pet information and user information from a database so the pet could appear in the minigame, be able to modify values like the amount of money the player has so the player can earn money by playing these games, and this database needs to be able to be read and written to by both these minigames and by regular pages like a player's profile page where you'd be able to see your current money balance, for instance. The only experience I have in regards to creating an html5 application is running the html dist Gradle command that libGDX has, which just converts all of your java code into javascript as its own contained thing when for this I would need to make something that actually has the ability to talk to other things. I would have to learn a ton of php in order to make this a thing as well, which I don't have a lot of experience with either.

If I were to turn the pet hotel into a fully-fledged automated and programmable game with my current knowledge and skillset, I think I'd have an easier time using libGDX and Java Swing to make it, and then people would have to download a jar file for it off of itch.io in order to play it. I feel like more people would play it if the game was entirely website-based because people don't really like to download things, which is kind of understandable, but learning web development is really hard and from what little I do know about it I'm kind of bad at it. I took a class where I learned how web sockets work in Java so I think I could be able to make something that connects online like this, but I would have to rent some server space in order to do this so the pet hotel would become something that starts actually costing me money to run if I did this. Also I already have a full-time job so the progress I would make on this would be pretty slow, and sometimes I struggle to muster up the motivation to even just make regular art during the time that I'm not working because my brain just kind of sucks like that. So for now i just run this thing that pretends to be a video game but is actually not because my brain prefers the instant gratification of watching youtube videos and playing video games that other people have already made instead of using that time to learn how to make a video game myself

#asks #pet hotel

3 notes · View notes

writter123 · 6 months ago

Text

Key Programming Languages Every Ethical Hacker Should Know

In the realm of cybersecurity, ethical hacking stands as a critical line of defense against cyber threats. Ethical hackers use their skills to identify vulnerabilities and prevent malicious attacks. To be effective in this role, a strong foundation in programming is essential. Certain programming languages are particularly valuable for ethical hackers, enabling them to develop tools, scripts, and exploits. This blog post explores the most important programming languages for ethical hackers and how these skills are integrated into various training programs.

Python: The Versatile Tool

Python is often considered the go-to language for ethical hackers due to its versatility and ease of use. It offers a wide range of libraries and frameworks that simplify tasks like scripting, automation, and data analysis. Python’s readability and broad community support make it a popular choice for developing custom security tools and performing various hacking tasks. Many top Ethical Hacking Course institutes incorporate Python into their curriculum because it allows students to quickly grasp the basics and apply their knowledge to real-world scenarios. In an Ethical Hacking Course, learning Python can significantly enhance your ability to automate tasks and write scripts for penetration testing. Its extensive libraries, such as Scapy for network analysis and Beautiful Soup for web scraping, can be crucial for ethical hacking projects.

JavaScript: The Web Scripting Language

JavaScript is indispensable for ethical hackers who focus on web security. It is the primary language used in web development and can be leveraged to understand and exploit vulnerabilities in web applications. By mastering JavaScript, ethical hackers can identify issues like Cross-Site Scripting (XSS) and develop techniques to mitigate such risks. An Ethical Hacking Course often covers JavaScript to help students comprehend how web applications work and how attackers can exploit JavaScript-based vulnerabilities. Understanding this language enables ethical hackers to perform more effective security assessments on websites and web applications.

Biggest Cyber Attacks in the World

youtube

C and C++: Low-Level Mastery

C and C++ are essential for ethical hackers who need to delve into low-level programming and system vulnerabilities. These languages are used to develop software and operating systems, making them crucial for understanding how exploits work at a fundamental level. Mastery of C and C++ can help ethical hackers identify and exploit buffer overflows, memory corruption, and other critical vulnerabilities. Courses at leading Ethical Hacking Course institutes frequently include C and C++ programming to provide a deep understanding of how software vulnerabilities can be exploited. Knowledge of these languages is often a prerequisite for advanced penetration testing and vulnerability analysis.

Bash Scripting: The Command-Line Interface

Bash scripting is a powerful tool for automating tasks on Unix-based systems. It allows ethical hackers to write scripts that perform complex sequences of commands, making it easier to conduct security audits and manage multiple tasks efficiently. Bash scripting is particularly useful for creating custom tools and automating repetitive tasks during penetration testing. An Ethical Hacking Course that offers job assistance often emphasizes the importance of Bash scripting, as it is a fundamental skill for many security roles. Being proficient in Bash can streamline workflows and improve efficiency when working with Linux-based systems and tools.

SQL: Database Security Insights

Structured Query Language (SQL) is essential for ethical hackers who need to assess and secure databases. SQL injection is a common attack vector used to exploit vulnerabilities in web applications that interact with databases. By understanding SQL, ethical hackers can identify and prevent SQL injection attacks and assess the security of database systems. Incorporating SQL into an Ethical Hacking Course can provide students with a comprehensive understanding of database security and vulnerability management. This knowledge is crucial for performing thorough security assessments and ensuring robust protection against database-related attacks.

Understanding Course Content and Fees

When choosing an Ethical Hacking Course, it’s important to consider how well the program covers essential programming languages. Courses offered by top Ethical Hacking Course institutes should provide practical, hands-on training in Python, JavaScript, C/C++, Bash scripting, and SQL. Additionally, the course fee can vary depending on the institute and the comprehensiveness of the program. Investing in a high-quality course that covers these programming languages and offers practical experience can significantly enhance your skills and employability in the cybersecurity field.

Certification and Career Advancement

Obtaining an Ethical Hacking Course certification can validate your expertise and improve your career prospects. Certifications from reputable institutes often include components related to the programming languages discussed above. For instance, certifications may test your ability to write scripts in Python or perform SQL injection attacks. By securing an Ethical Hacking Course certification, you demonstrate your proficiency in essential programming languages and your readiness to tackle complex security challenges. Mastering the right programming languages is crucial for anyone pursuing a career in ethical hacking. Python, JavaScript, C/C++, Bash scripting, and SQL each play a unique role in the ethical hacking landscape, providing the tools and knowledge needed to identify and address security vulnerabilities. By choosing a top Ethical Hacking Course institute that covers these languages and investing in a course that offers practical training and job assistance, you can position yourself for success in this dynamic field. With the right skills and certification, you’ll be well-equipped to tackle the evolving challenges of cybersecurity and contribute to protecting critical digital assets.

#ethical hacking #ethicalhackingcourse #ethicalhackinginstitute #Youtube

3 notes · View notes

digitalgla · 4 months ago

Text

Jclicksolutions Launches MERN Stack Training in Nagercoil: Empowering Aspiring Full-Stack Developers

The demand for skilled web developers continues to rise as businesses across industries move online. To meet this growing need, Jclicksolutions is excited to offer an intensive MERN Stack training program in Nagercoil, providing aspiring developers and professionals with the essential skills to build full-stack web applications. This program focuses on the MERN Stack, a popular framework that uses JavaScript across both front-end and back-end development, making it an ideal solution for dynamic and scalable applications.

What is the MERN Stack?

The MERN Stack is a combination of four powerful technologies:

MongoDB: A NoSQL database, perfect for handling and managing large amounts of data with flexibility and ease.

Express.js: A fast and minimalist web framework for Node.js, used to build robust server-side applications.

React.js: A highly efficient JavaScript library developed by Facebook for creating interactive user interfaces.

Node.js: A runtime environment that allows JavaScript to be used for server-side scripting, enabling full-stack development using a single language.

The MERN Stack is one of the most sought-after development frameworks due to its versatility, scalability, and widespread use in the industry. Companies across the globe are adopting MERN Stack for building responsive and efficient web applications, creating a significant demand for developers proficient in this framework.

Why Choose Jclicksolutions in Nagercoil?

JClickSolutions is a leading IT training provider, known for delivering industry-relevant programs that prepare students for real-world challenges. The MERN Stack course in Nagercoil offers several unique benefits:

Comprehensive Curriculum: The course covers all core elements of the MERN Stack, providing in-depth training on MongoDB, Express, React, and Node.js. Participants will gain practical experience in front-end and back-end development, enabling them to build complete web applications from scratch.

Hands-on Learning: The training is project-based, giving students the opportunity to work on real-world applications. By building live projects, participants will develop practical skills and a strong portfolio that showcases their expertise.

Expert Instructors: Jclicksolutions' MERN Stack training is led by experienced developers with years of experience in full-stack development. They provide personalized guidance and mentorship, helping students understand the nuances of each technology.

Flexible Learning Options: The course offers flexible schedules, including both online and in-person classes, catering to students, working professionals, and tech enthusiasts. This allows participants to learn at their own pace while balancing other commitments.

Career Support: Jclicksolutions provides end-to-end career support, including resume building, interview preparation, and job placement assistance. Graduates of the MERN Stack program are well-prepared to enter the job market and secure positions in top tech companies.

The Growing Demand for MERN Stack Developers

The rise of web-based applications has increased the demand for full-stack developers proficient in frameworks like MERN. With companies looking for scalable, high-performance solutions, MERN Stack has become a go-to choice for building modern web applications. Learning the MERN Stack opens up numerous job opportunities, from startups to large enterprises.

Why Nagercoil?

As a growing tech hub, Nagercoil is witnessing increased investment in IT and software development sectors. Jclicksolutions' decision to offer MERN Stack training in Nagercoil comes at a perfect time, giving local talent the opportunity to develop skills without relocating to larger cities. The course provides a gateway to lucrative career options in web development, both locally and globally.

Conclusion

The MERN Stack training program at Jclicksolutions in Nagercoil is the perfect stepping stone for anyone looking to build a successful career in web development. With its industry-aligned curriculum, hands-on projects, and expert mentorship, participants will gain the skills and confidence needed to excel in today’s competitive tech landscape.

For more details or to register, visit www.jclicksolutions.in today!

#MERN STACK in Nagercoil

#MERNSTACKinNagercoil

#Jclicksolutions

#JclicksolutionsMERNSTACKinNagercoil

#MERN STACK in Nagercoil

2 notes · View notes

tech-ahead-corp · 2 years ago

Text

youtube

Web Development Company

A professional firm specializing in web development services, delivering high-quality websites and applications!

0 notes

eddyprince321 · 5 months ago

Text

Best of Web Development Courses: A Comprehensive Guide

Web development is a vital skill in today’s digital world. Whether you're aspiring to become a professional web developer or looking to enhance your skills, selecting the right web development course is crucial. With countless options available, it can be overwhelming to know where to start. This article provides a guide to the best web development courses available, helping you navigate through the top choices and find the one that suits your needs.

Why Take a Web Development Course?

Web development encompasses everything from creating basic websites to complex applications. The demand for skilled web developers is consistently high as businesses transition to digital platforms. By taking a web development course, you can:

Enhance your coding skills: Learn programming languages like HTML, CSS, JavaScript, and more.

Gain practical experience: Hands-on projects help you build a portfolio to showcase your skills.

Stay updated with industry trends: Modern courses keep you informed on the latest technologies and best practices.

Open career opportunities: Web development is a versatile field with various career paths such as front-end, back-end, or full-stack development.

Now, let’s dive into the top 10 web development courses that will give you the edge you need.

Top 10 Web Development Courses

The Web Developer Bootcamp – UdemyOverview: This course, created by Colt Steele, is one of the most popular web development bootcamps available. It covers everything from HTML, CSS, and JavaScript to more advanced topics like Node.js and Express.Why it stands out:

Over 63 hours of content.

Project-based learning with real-world applications.

Affordable pricing with regular discounts.

Ideal for: Beginners looking to get an in-depth introduction to web development.

Full-Stack Web Development with React – Coursera (offered by Hong Kong University of Science and Technology)Overview: This course focuses on the MERN stack (MongoDB, Express, React, Node). It's offered through Coursera by the Hong Kong University of Science and Technology, which gives it a reputable edge.Why it stands out:

Covers both front-end (React) and back-end development.

Offers a certificate from a prestigious institution.

Focuses on responsive web design.

Ideal for: Learners who want to focus on full-stack web development.

The Odin ProjectOverview: The Odin Project is a free, open-source curriculum that takes you through the entire web development process. It focuses on Ruby on Rails, JavaScript, and offers plenty of hands-on projects.Why it stands out:

Completely free with a community of learners.

Comprehensive learning paths from beginner to advanced.

Emphasizes practical projects.

Ideal for: Self-motivated learners looking for a free, community-driven option.

CS50’s Web Programming with Python and JavaScript – edX (Harvard University)Overview: CS50 is Harvard’s famous computer science course, and this specific track focuses on web programming. You’ll learn about Python, Django, JavaScript, and SQL through this rigorous program.Why it stands out:

Offered by Harvard University.

Covers complex web development topics such as Django and security.

Highly challenging, suitable for intermediate to advanced learners.

Ideal for: Developers with some background looking to dive deeper into web programming.

Complete Web Development Bootcamp – Udemy (Dr. Angela Yu)Overview: Dr. Angela Yu’s bootcamp is highly rated on Udemy for its engaging teaching style and comprehensive approach. You’ll learn HTML, CSS, JavaScript, Node.js, React, and even a little bit of web design.Why it stands out:

Over 55 hours of content.

Fun and engaging style with a focus on building projects.

Regularly updated to reflect the latest technologies.

Ideal for: Beginners who want to build a solid foundation in web development.

Responsive Web Design – freeCodeCampOverview: FreeCodeCamp is known for offering free, self-paced coding lessons, and its Responsive Web Design certification is one of the most popular. You’ll learn HTML5, CSS3, and responsive design principles.Why it stands out:

Free and self-paced.

300 hours of content including hands-on projects.

Community support and real-world project building.

Ideal for: Those looking for a free, structured way to learn responsive web design.

Zero to Mastery Complete Web Developer – Udemy (Andrei Neagoie)Overview: Andrei Neagoie’s course takes a hands-on approach to web development, covering everything from HTML and CSS to advanced topics like React and Node.js.Why it stands out:

Covers both front-end and back-end development.

Real-world projects like building a chat application.

Regularly updated to reflect industry changes.

Ideal for: Beginners to intermediate learners looking for comprehensive training.

Modern React with Redux – Udemy (Stephen Grider)Overview: React is one of the most in-demand front-end technologies today, and Stephen Grider’s course is perfect for those looking to specialize in it. This course covers React and Redux, focusing on building dynamic web applications.Why it stands out:

Specialized focus on React and Redux.

Project-based learning.

Great for intermediate learners.

Ideal for: Developers looking to specialize in React.

Learn Web Development – Mozilla Developer NetworkOverview: MDN’s web development course is a comprehensive, free resource that covers all aspects of web development. It’s created by the Mozilla Developer Network, known for its high-quality documentation.Why it stands out:

Free and constantly updated.

Covers the basics to advanced topics.

Reliable and well-documented resources.

Ideal for: Learners who prefer self-paced study with extensive documentation.

JavaScript, HTML, and CSS for Web Developers – Coursera (Johns Hopkins University)

Overview: This course, offered through Coursera by Johns Hopkins University, focuses on the fundamentals of JavaScript, HTML, and CSS, which are essential building blocks for any web developer.

Why it stands out:

Covers core web technologies.

Earn a certificate from a well-known university.

Focus on building real-world projects.

Ideal for: Beginners looking to get certified in web development fundamentals.

What to Look for in a Web Development Course

When choosing the best web development course for your needs, consider the following:

Skill Level: Are you a beginner or do you have some coding experience? Courses like The Odin Project and freeCodeCamp are great for beginners, while more advanced developers might prefer CS50’s Web Programming or Modern React with Redux.

Specialization: Do you want to focus on front-end (HTML, CSS, JavaScript), back-end (Node.js, Django), or full-stack development? Choose a course based on your career goals.

Project-Based Learning: A good web development course should include hands-on projects to help you apply what you've learned. The more projects, the better your portfolio will look to potential employers.

Certification: If you’re looking for recognition, consider courses that offer certificates from reputable institutions, like those from Coursera or edX.

Price: While some courses are free, others may require a one-time fee or subscription. Many platforms like Udemy offer discounts, so be sure to check regularly.

Final Thoughts

Whether you're just starting your journey in web development or looking to advance your skills, there’s a course out there for you. The best web development courses offer a blend of hands-on projects, updated content, and engaging instruction. As you consider the top 10 web development courses, think about your current skill level, your career aspirations, and your learning preferences. With the right course, you’ll be well on your way to becoming a proficient web developer.

Remember, learning web development is a marathon, not a sprint. Choose a course that fits your pace, stay consistent, and you'll see significant improvement in no time!

2 notes · View notes