/r/learnjavascript

Photograph via snooOG

This subreddit is for anyone who wants to learn JavaScript or help others do so.

Questions and posts about frontend development in general are welcome, as are all posts pertaining to JavaScript on the backend.

This subreddit is a place for people to learn JavaScript together. Everyone should feel comfortable asking any and all JavaScript questions they have here.

With a nod to practicality, questions and posts about HTML, CSS, and web developer tools are also encouraged.


Posting and Commenting Guidelines

  1. Be Welcoming. n00bs are welcome here. Negativity is not.
  2. Include Context. If you’re asking for help, include enough information for others to recreate your problem.
  3. No Self-Promotion. The following are not allowed: Requests for subscribers, asking for "test users" for your new JS course, offering paid mentorships, and/or premium courses. Even if there is a coupon discount, no. If you're in doubt, message the mods first.

  4. Good Titles - Write a descriptive title. Titles that begin with "hey guys" will be removed.


Related Subreddits


If you want to post something self-promotional, please message the mods first. Personal blog posts that are relevant to the subreddit's stated subject matter don't need prior approval (and are encouraged!).

/r/learnjavascript

249,679 Subscribers

1

Javascript scrollTo() function not moving the background-image in a div

Here's the code:

<!DOCTYPEhtml>
<html>
<head>
<style>
#gameWindow{
height: 80vh;
width: 80vh;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

wrapper{
height: 100%; width: 2000px; margin: 0px; padding: 0px; }
.sky{ background-image: url('./images/cloudysky.PNG'); background-repeat: repeat-x; background-size: 50% 100%; width: 100%; height:70%; }
.ground{ width: 100%; height: 30%; background-image: url('./images/ground.png'); background-repeat: repeat-x; background-size: 20% 100%; } </style>
</head>

<body>
<div id = 'gameWindow'>
<div id='wrapper'>
<div class = 'sky'></div>
<div class = 'ground'></div>
</div>
</div>

<script type = 'module' src = './scripts/animator.js'></script>

<script type = 'module' src = './scripts/mob.js'></script>

<script type = 'module' src = './scripts/constants.js'></script>

<script type = 'module' src = './scripts/player.js'></script>

</body>
</html>

When I use scrollTo() on the gameWindow div, the background images move, but when I use it on the 'wrapper' or the divs with the background images themselves, they don't.

Anybody know what's causing this?

0 Comments
2024/05/17
20:27 UTC

1

Best patterns for setting up test data/objects in Javascript tests?

Hello, What is the best pattern for test data setup in javascript?

Text fixtures - hardcoded objects are hard to maintain and only good as long as you don’t need to introduce anything new. Factory functions seem to be quite good, just a bit anoying in cases, when object has deeply nested properties and you need to set them up.

Please share what worked best for you. This is mainly about BE jest tests.

0 Comments
2024/05/17
19:44 UTC

1

Help Running Code (No Experience)

I have literally never written nor run any code in my life, and I'm not trying to learn anything about JavaScript except what I need in order to run a code I found online. The code is this:

// Barrel bore for standard iron shot weights, windage of 25/24 is assumed
var bore = [];
bore[4] = 3.18;
bore[6] = 3.65;
bore[9] = 4.17;
bore[12] = 4.58;
bore[18] = 5.25;
bore[24] = 5.78;
bore[32] = 6.36;
bore[42] = 6.96;

// Muzzle Velocity as function of round shot mass and powder charge
function MuzzleVelocity(m, p) // mass of ball (lb), mass of charge (lb)
{
  var d = bore[m]/12;   // bore (ft) from table at ./Cannonballs.html
  var eta = 55;         // density of powder (lb/ft^3)
  var rho = 62.4;       // density of water
  var atm = 14.7*32.2*144;    // 14 psi x g atmospheric pressure (lbw/ft^2)
  var R = 1600;         // gunpowder gas pressure ratio to atm
  var L = d*18;         // (18 calibre) length barrel (ft)
  var c = p*4/(Math.PI*d*d*eta);  // length of charge in (ft)

  return Math.sqrt(2*R*atm/eta)*Math.sqrt(p/(m+p/3)*Math.log(L/c));
}

I got it from here.
What do I even do with this? What program (if any) do I load this up in? How do I change the variables? What should the results look like? The website this is from has absolutely nothing for anyone that isn't very familiar with coding, and YouTube tutorials are instantly beyond me. I'm just trying to do research for DnD, not learn a new profession or download a suite of programs.

3 Comments
2024/05/17
17:27 UTC

1

How to use Spotify api

Im currently working on my college project and it's about a music streaming platform using Spotify api, I've used html, CSS for front-end as it was easy for me but i don't know how to integrate api and write javascript for it. Any help is appreciated as the project end date is next 15 days.

6 Comments
2024/05/17
17:21 UTC

1

Looking for a group to work with (Portfolio Projects)

Hi Guys!

I have an idea sketched out that I would like to work on as a group project if anyone is looking for some people to code with.

I'm planning on building the site with the following stack:

SvelteKit w/ TypeScript, BitsUI, & Express backend

Postgres DB

Directus Headless CMS

I have this project mostly sketched out, but haven't started any of the code yet, I'd like to get a group together before I do.

I've been coding on and off for the last 3-4 years, doing a lot of classes on CodeCademy, Udemy, etc. I mostly work in JavaScript/TypeScript/HTML/& CSS, but have also dabbled in SQL, Ruby, & Python. Svelte has been one of my favorite frameworks to work with over the last few years. I would say design is definitely my weakest area so if anyone is really good at that it would be a huge plus!

I haven't had a lot of luck with finding a group to work on projects with, and think that would be a big plus to my resume/portfolio. I would like to do a couple of projects from the ground up following some best practices (Wire Framing/Testing/Linting/etc.). If anyone would like to work with me please hit me up!

Here's my GitHub if you want to take a look at some of my previous projects/code!

0 Comments
2024/05/17
17:04 UTC

2

How is this animated background blur made?

See this: https://lumi.uicore.co/virtual-meeting-platform/

I tried using snap.svg but can't get it to work like that. Anyone have any idea how to even achieve this?

7 Comments
2024/05/17
16:48 UTC

4

Why does Meta's Front End Web Development course have you learn JavaScript before HTML & CSS?

There's a brief intro to HTML and CSS in the first module, but the second module is all JavaScript, the third Version Control, and the fourth is HTML & CSS.

Does anyone have any guesses why this would be the case? I'm torn on skipping ahead to complete HTML & CSS, since I'm familiar with them but have never done anything in either. If I went ahead with them, I'd feel like I'd progressed quicker than this giant block of JavaScript I've to get through first. But surely there's some reason it's structured this way?

5 Comments
2024/05/17
16:46 UTC

1

Cannot read properties of undefined (reading 'user')

Hey,

Im getting this error on storyblocks after logging in on my console.

Cleared cache, tried other browsers, tried other devices, as soon as I login I can go no further due to this error.

Can anyone suggest anything I can try? already contacted storyblocks awaiting a reply.

5 Comments
2024/05/17
16:22 UTC

1

Linked list traversal

Hello Js developers, I am learning fundamentals of javascript. I have a problem in understanding the result of this simple code for getting values of a linked list. Why it gives undefined in last line of console.

let list = {
    value: 1,
     next: {
           value: 2,
            next: {
                  value: 3,
                    next: {
                           value: 4,
                            next: null
                           }
                     }
                   }
               };

function printList(list) {
let tmp = list;

while (tmp) {
console.log(tmp.value)
tmp = tmp.next;
}

}

printList(list);

3 Comments
2024/05/17
14:54 UTC

0

Help with AJAX, PHP, trying to update a div element

I am currently working on a website where users can add bikes to a database. Once these bikes are added I want a message to be displayed telling the user if their bike has been added or they already have one added (they can only have one at a time). I am using AJAX with PHP to try and update a div so that I wouldn't have to reload the page to tell the user the message. Code is here https://pastebin.com/5qPLTjdZ but also below. Thanks so much in advance, I've been at this for hours lol :) Edit: The message is correctly logged to the console so I am really not sure why it is not updating the div.
HTML:

<html>
<head>
    <link rel="stylesheet" href="Public_Page.css">
    <title>Public Main Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>

<body>
    <div id="greetUser"></div>
    <div id="divMessage"></div>
    <p>Add a bike here:</p>
    <form id="addBikeForm" action="publicPage.php" method="POST">
        <input type="text" name="brand" placeholder="Brand" required="required"><br><br>
        <input type="text" name="model" placeholder="Model" required="required"><br><br>
        <input type="text" name="type" placeholder="Type of Bicycle" required="required"><br><br>
        <input type="text" name="colour" placeholder="Colour" required="required" ><br><br>
        <input id="bikeFormButton" type="submit" value = "Submit">
    </form>





<script>
var username = sessionStorage.getItem('username');
document.getElementById("greetUser").innerText = 'Hello ' + username;
</script>

<script src="publicPage.js"></script>

</body>
</html>

JavaScript:

console.log("js loaded")
$('#bikeFormButton').click(function(event) {
    var formData = $(this).serialize();
    event.preventDefault();//Prevent form submitting again
    
    $.ajax({
        type: "POST",
        url: "publicPage.php",
        data: formData,
        cache: false,
        success: function(msg) {
            console.log(msg);
            if (msg === "You already have a bike added") {
                $('#divMessage').html("You already have a bike added");
                window.location("Public_Page.html")
            } else if (msg.result == "bikeAdded") {
                console.log(msg);
                $('#divMessage').html('Successfully added!')
                brand = msg.brand;
                model =  msg.model;
                type = msg.type;
                colour = msg.colour;
                sessionStorage.setItem('brand', brand);
                sessionStorage.setItem('model', model);
                sessionStorage.setItem('type', type);
                sessionStorage.setItem('colour', colour);
                window.location("Public_Page.html")
            }
        } 
    });
});

PHP:

<?php 

session_start();//Start session 
 
$connection = new mysqli("x", "x", "x", "x");//Establish connection with database      
$username = $_SESSION['username'];//Assign variables 
$brand = $_POST['brand']; 
$model = $_POST['model']; 
$type = $_POST['type']; 
$colour =  $_POST['colour']; 
 
$sqlUserID = "SELECT userID FROM `publicUsers` WHERE publicUsername = '$username'"; 
$userIDExistsResult = mysqli_query($connection, $sqlUserID); 
 
if ($userIDExistsResult && mysqli_num_rows($userIDExistsResult) > 0) { 
    $row = mysqli_fetch_assoc($userIDExistsResult); 
    $userID = $row['userID']; 
 
    $sqlCheckBike = "SELECT * FROM bikes WHERE userID = '$userID'"; 
    $bikeExistsResult = mysqli_query($connection, $sqlCheckBike); 
 
    if ($bikeExistsResult && mysqli_num_rows($bikeExistsResult) > 0) { 
        echo "You already have a bike added"; 
    } else { 
        //Insert bike into database 
        $sqlInsertBike = "INSERT INTO bikes (userID, bikeBrand, bikeModel, bikeType, bikeColour) VALUES ('$userID', '$brand', '$model', '$type', '$colour')"; 
 
        if (mysqli_query($connection, $sqlInsertBike)) { 
            echo "Successfully added!"; 
        } else { 
            echo "Error: " . mysqli_error($connection); 
        } 
    } 
} 
?>

The database connection is established, I removed it for privacy reasons just for this post but it has the correct credentials in my code.

1 Comment
2024/05/17
14:36 UTC

0

I can't understand anything about JavaScript at all. What should I do?

So for the last one and half a month, I've been trying to learn JavaScript to do something better than an outdoor job in the future, however the matter gets more and more depressing as the things go. For this purpose, I've bought a course on Udemy and have been following it. While I learnt HTML and CSS through the same way and really enjoyed learning them (albeit I've been lacking practice for the last few weeks), I can't really understand JavaScript and get frustrated every time I'm trying to do something on my own.

Honestly, I don't like coding JavaScript really. If this was an ideal world, I'd just be content with what I know about CSS and HTML and probably do some designs to make a living. But this isn't an ideal world and I really grew tired of this. I don't want to abandon coding either because however much I hate it, it gives me a better deal than what I can find outside.

And like this, I'm pretty confused and am feeling miserable right now.

30 Comments
2024/05/17
14:29 UTC

1

Highlighting PDF based on coordinates?

I'm really not a front end guy but I am trying to understand to what extent it's possible to dynamically highlight and jump to text based on coordinates.

More specifically, the python back-end will be doing the analysis that yields a list of coordinates (each coordinate relates to a text block within a pdf) and I'd like to be able for a user to jump to each of those coordinates and highlight the finding, in the same way that "basic" ctrl+f works in pdfs.

Simple string matching won't be a possibility given that the strings are lengthy and manipulation can lead to minor differences between the analysis string and the original string (like an excess space behind a special character).

Appreciate any guidance! Feel free to reach out to me directly if you are freelancer and think you could handle this.

Thanks!

1 Comment
2024/05/17
14:16 UTC

0

React Compiler is not compiler, it's transpiler

React Compiler translates high-level code into another high-level code, making it a transpiler, and not a compiler that translates high-level code into machine code.

4 Comments
2024/05/17
13:57 UTC

1

How do these promises change their internal state?

So I've been experimenting a bit with Promises and async/await and I ended up with this snippet. I am trying to figure out if my thought process is correct in determining the state of these Promises.

let promise;
let thenPromise;
let catchPromise;

function promiseFunc() {
  promise = new Promise((resolve, reject) => {
    setTimeout(reject, 1000, "Rejected");
  });

  thenPromise = promise.then((value) => {
    console.log('Resolved!', value);

    return value;
  });

  catchPromise = thenPromise.catch((err) => {
    console.log('Error!', err);

    return 'Catch returned new Promise';
  });

  return thenPromise;
}

async function asyncCall() {
  console.log('calling asyncCall function');

  const result = await promiseFunc().catch((err) => {
    console.log(promise, thenPromise, catchPromise);
  });

  console.log("Result's value is ", result);
}

asyncCall();

So, we start by invoking asyncCall function. Inside, we use `await promiseFunc()`, which begins executing that function.

Inside `promiseFunc`, we start by creating a new Promise with the help of the constructor and we assign it to the `promise` variable. Its initial state is pending. Then, we attach a .then() to it, which does two things:

  1. registers a callback to be added to the microtask when promise fulfills.
  2. creates a new promise (saved in thenPromise variable).

For now, `thenPromise` is also pending, because that's how all promises created by .then() are.

Next, we use .catch() on `thenPromise`, which also does two things:

  1. registers callback to be added to the microtask queue when thenPromise rejects.
  2. creates a new Promise, that is saved in catchPromise.

So before the return, we have three promises, all in pending state for now. `thenPromise` is returned from the function.

Now this is where things get a little bit confusing. So we used `await promiseFunc()`, the function returned `thenPromise` and to it, we use a .catch(). So in other words, as mentioned above, .catch() returns a new Promise that is saved to `result` variable.

At this point, we have:

  • `promise`: pending, has an onFulfilled callback internally.
  • `thenPromise`: pending, has two onRejected callbacks, one from `promiseFunc`, one from `asyncCall`.
  • `catchPromise`: pending, has no callbacks.

After one second, the timeout expires, the callback we passed into `setTimeout` is added to the macrotask and then it executes, as the call stack is empty. This callback calls `reject`, which does the following:

  • `promise`: rejected, and since it has an onFulfilled callback only, it means that this callback will never run.

Uhhh... from the research I did, if .then() is attached to a rejected Promise, the effect is that the promise that it creates also becomes rejected. So this means:

  • `thenPromise`: also becomes rejected, so the two .catch() callbacks are going to get executed one by one, in the order they were registered to the promise's internal list. So first it's the callback from `promiseFunc()`, then the callback from `await promiseFunc()`.

`'Error!', err` gets logged, then the callback proceeds to return a string, which I figured it has the following effects (doesn't affect much, but it would if we returned `catchPromise` from `promiseFunc` instead):

  • `catchPromise`: fulfilled.

The .catch() callback we attached as in `await promiseFunc().catch()` executes next, which logs out the promises objects and returns nothing. So `result` variable gets `undefined` as value.

I don't know if I skipped any steps, don't know if this is easy to follow, don't know if anything I wrote makes sense tbh, just wanted to know if this is how it works and if anyone else feels that it's pretty confusing and can be difficult at times to keep track of which promise resolves, which doesn't and so on when chaining Promises together.

4 Comments
2024/05/17
13:39 UTC

0

why is there an error on const. saying it requires a char? extremely new to coding btw

public class student {

public static void main(String\[\] args) {

	// TODO Auto-generated method stub

	const. fs = require('fs');

	const. readline = require('readline');



	// Function to read student data from file

	function readStudentFile(filename = 'student.txt') {

const data = fs.readFileSync(filename, 'utf8');

const lines = data.split('\n');

const students = [];

for (let line of lines) {

const parts = line.trim().split(' ');

if (parts.length >= 2) {

const mark = parseFloat(parts[0]);

const name = parts.slice(1).join(' ');

students.push({ mark, name });

}

}

7 Comments
2024/05/17
13:33 UTC

0

What am I suppose to do with this error?

esLint -32603 Request textDocument/diagnostic failed with message: Could not find config file.

I use nvim, just saying.

1 Comment
2024/05/17
11:09 UTC

0

A common challenge in JavaScript is dealing with asynchronous programming.

especially when handling tasks like making HTTP requests or reading files. Managing callback functions, promises, and async/await can sometimes be tricky for developers.

Here's a common challenge in JavaScript involving asynchronous programming:Challenge: Fetching data from an API and displaying it on a webpage.

// Function to fetch data from an API
function fetchData(url) { return new Promise((resolve, reject) => { fetch(url) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { resolve(data); }) .catch(error => { reject(error); }); }); }
// Function to display data on the webpage function displayData(data) { // Code to display data on the webpage console.log(data); }
// Usage const apiUrl = 'https://api.example.com/data'; fetchData(apiUrl) .then(data => { displayData(data); }) .catch(error => { console.error('Error fetching data:', error);   });
8 Comments
2024/05/17
07:44 UTC

1

How to pass on data from an iFrame to it's parent using the window object?

NOTE: Using postMessge method is not allowed for this task

So, i have been assigned a task in which I have an iFrame tag which has an another document with input tag and a button. onClick I have to send the input value to the parent of the iFrame tag and show it. Moreover, I can only use the "window" object for data transfer

But, I am stuck at one problem. Firstly, I cannot access the window object properties of parent, it gives me Cross Origin Error coz of CSP. I've thought of somehow making them of same origin but don't know how to.

So is there a way to somehow pass data between the parent and iFrame using just the window object?

3 Comments
2024/05/17
05:45 UTC

26

How do I know if I really have the talent to be a good programmer?

I have been studying JavaScript at FreeCodeCamp since the beginning of this year. Well, actually I've been trying to learn since 2 years ago, but every time I tried I ended up quitting, I think because I was trying to learn with videos and I got bored very fast. But this year has been different, I have been more disciplined and consistent. Also the practical way that FreeCodeCamp has helped me. The thing is that my current job leaves me very little free time and I end up studying between 1 hour or hour and a half a day and not every day. Sometimes I can only study for 30 minutes.
As the exercises progress, they get more complicated (that's normal, I guess) but I've reached a point where I tend to get very stressed and frustrated for not being able to solve the problems.
This has made me think if it is normal that this happens to me, that solving a beginner exercise is so stressful, or if I really have talent to learn to program. Is there any way to know if one really has the talent for this? How did you find out?
I am 34 years old (almost 35) and I would not want to spend so much time on something I do not have the talent for. I am also worried that with my age it is too late to access positions where I earn a good salary (I will not deny it, the salary is a great incentive for why I decided to learn).
Can anyone give me some advice?

47 Comments
2024/05/17
00:51 UTC

2

New to and Learning JavaScript

So I'm mostly completely new to learning JavaScript. I'm going through LinkedIn Learning to educate myself on JavaScript. It's going alright but I'm very much a hands on learner. So some of what I'm learning doesn't stick as well as it should.

Are there any free beginners project books I can learn with that have gradually more complicated projects as I learn more? Kinda like a textbook for school?

9 Comments
2024/05/16
23:59 UTC

0

JavaScript CLOSURES

I was doing extra research on closures and in the video the first example he gives I understand, I understood ex2 until 4:00 , and ex3 until 9:30

https://www.youtube.com/watch?v=beZfCfiuIkA

ex2 question

  1. why is he using { } with return , what is retuning an object?
  2. object property, associated value (key value pair?), method of increment ?
  3. why did he put the createCounter() in the counter variable
  • it won't run on it own because its not being called
  • is this how we access the scope within the createCounter function he mention @4:05
  1. @4:55 he creates a method like .random/.log/.map so now he can add 1 to the count. The count will go up and not stay at 1 like before because the count variable is outside of the increment "loop" and is not getting rest every time increment() is being run, but increment has access to count because it's in the scope of create Counter. right?

    1. @ 5:33 how is count a method (counter.count) or is he just showing that it cant be access the reason for closures
  • to get access to count he does the same thing as increment but I'm still not sure about the return curly bracket

If you explain the 2 example ill understand the 3rd one

please use simple word I am new to JS and coding and don't understand many of the terminology

1 Comment
2024/05/16
23:51 UTC

1

Need help using hexbins with JS / Mapbox GL JS / Leaflet

Hi all, absolute newbie here. Currently at wit-ends. I'm seeking help with creating hexbins. I have a bunch of points on a map which have multiple attributes within each point. I want to create hexbins to collate the data and display it. When it zooms out, I would like those hexbins to merge, to avoid overlapping and for visualisation.

Here is an example of what I'd like to achieve: https://jsfiddle.net/reblace/acjnbu8t/
And here is mine so far: https://jsfiddle.net/pennyp/jdxs0vL9/41/

The points have loaded (from >14 zoom level) and hexbins are no where in site. Please help me figure out where I've gone wrong and how to adjust the code. I am incredibly new to anything like this.

Thanks :)

3 Comments
2024/05/16
23:37 UTC

3

JS Destructuring and Object properties

Can you explain to me what the teacher is trying to teach I'm not sure the importance or the idea of Object properties, i watch videos on Destructuring but its different from what he saying

below is a question he gave us on the topic to answer, I got them right but don't know why its right

I also included the video of the teacher

Destructuring

var person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};

var firstName = person.firstName;
var lastName = person.lastName;
var age = person.age;
var eyeColor = person.eyeColor;

my answer:
const {firstName, lastName, age, eyeColor} = person;

// Object properties

var a = 'test';
var b = true;
var c = 789;

var okObj = {
  a: a,
  b: b,
  c: c
};
My answer :
const okObj = {
  a,
  b,
  c
};

https://reddit.com/link/1ctps1n/video/jguegohh6v0d1/player

4 Comments
2024/05/16
22:27 UTC

3

My Review of JetBrains' Academy (HyperSkill)

Hey all- I just wanted to share my review of the HyperSkill browser-based learning platform for any of those that are looking for resources to help them learn or study programming.

I've used resources such as codecademy, youtube, udemy, open source coursework, freecodecamp, datacamp, graduate-level computer science courses, etc etc etc etc- and I always appreciate user-written reviews on Reddit, so I wanted to share mine. Hyperskill is the best software I've found thus far to learn to code. Hopefully this review helps.

Pros:

-A solid variety of career and skill tracks to choose from, everything from Python, to Data Science, to Java, to JavaScript, etc etc.

-Certificates actually feel like you earned them. Hyperskill requires that you complete a project of a certain difficulty (from their selection of projects), as well as a certain amount of coursework, before you're able to have the certificate issued. Having the project component makes you feel like you've actually put the coursework into practice.

-Projects can actually include multiple frameworks/technologies. For example, many of the Java projects require you to use the Spring Boot framework. This helps you learn to use relevant technologies along with the main language you're learning, since in the real world you will hardly ever use one language as a standalone technology.

-Coursework is divided into bite-sized pieces, each topic takes anywhere from 6 to 20 minutes to complete. I would set a daily goal for myself (such as completing 4 topics), and pace myself that way.

-HyperSkill syncs to your IDE, so that when you have a coding assignment to complete, it will open automatically in your IDE. Once you complete coding in the IDE, you click "check," and it will sync with your HyperSkill tab in your browser to mark it as complete. I haven't yet seen any sort of coding academy with this feature.

-There is a section that prompts you to review 4-5 previously learned topics to keep them fresh in your memory, as well as a "problem of the day". These are simple features, but they keep everything fresh in your memory with minimal effort.

Cons:

-The projects are divided into stages, you complete stage 1, then study more coursework before completing stage 2, etc. Occasionally, the test cases that need to be met for you to pass a stage are too strict and waste unnecessary time. For example, if your output matches the required output for a project stage, but has 22 lines instead of the 21 lines expected, you will not pass the stage.

-Sometimes the IDE sync feature is problematic. If you're using the PyCharm IDE while completing a Data Analysis track in HyperSkill, and then change your track to Java and need to use the IntelliJ IDE, it's confusing to switch the linked IDE from PyCharm to IntelliJ and will take several attempts.

-You earn "gems" for completing the problem of the day, project stages, and other coursework, but these gems are essentially useless and at best give you 10% off of one month of your subscription.

Projects:

Here are a few examples of projects I've created during my time using HyperSkill. Projects range from beginner level, to medium, to hard, and then challenging.

Budget Manager: https://github.com/dimicodes/Budget-Manager-Pro

Coffee Machine Simulator: https://github.com/dimicodes/Coffee-Machine-Simulator

Cinema Room Manager: https://github.com/dimicodes/Cinema-Room-Manager

"Bulls and Cows" Game: https://github.com/dimicodes/Bulls-and-Cows-Game

Final Thoughts:

Overall, I would highly recommend Hyperskill and would rate it an 8.5/10. There are definitely improvements that can be made, but when compared to similar softwares/companies, the value offered is worth it.

If you're interested in subscribing, feel free to use my referral code so that we both receive a $15 discount on one month:

https://hyperskill.org/join/3b5b7c569

1 Comment
2024/05/16
22:22 UTC

0

Webpack dev server proxy in windows wsl environment

I've got a simple webpack dev server set up that proxies requests to a local vm. The proxying works fine when I run the startup script from powershell, but when run from wsl cli the proxied requests timeout. Important to note that this worked in both powershell AND wsl up until yesterday (exact same code)... I had to reset my laptop today and install everything again, and now it's not working in wsl. This tells me there's some local configuration problem, but I cannot figure out what it is.

Via powershell I am successful loading locahost:8080 and 127.0.0.1:8080. Neither work via wsl.

Node version 20.9.0, webpack-dev-server version 5.0.2.

Thanks for any help.

devServer: {
		open: project.platform.open,
		port: port || project.platform.port,
		host: host,
		proxy: [
					{
						context: ['/api/path'],
						target: `http://${vmName}`,
						headers: {
							Authorization: authstring,
						},
					},
				], 
	},
0 Comments
2024/05/16
21:27 UTC

0

Javascript LP Solver for Browser App

I am currently writing an app to solve an integer linear program. It is a React browser app. I am struggling, however, to find a good library to solve this program in the browser. I tried to use javascript-lp-solver, but this library doesn't seem to allow constraints that are a sum of variables (e.g., x + y + z = 1), only bounds on specific variables. I also looked into wasm versions of libraries like lp_solve, but I couldn't find anything that would easily work to solve my problem. I would be very grateful if you have any advice on packages/libraries/api's that would work here.

1 Comment
2024/05/16
20:05 UTC

0

Movement update help

Hello! In my last post, I received some tips about fixing the movement for my Snake game. I tried to implement what a Redditor suggested about creating one giant set Interval and using a variable assigned to the movement key code as my guide, but I've encountered some issues. It appears that when I change the direction of my player block, the old direction still exists and it doesn't clear. You'll need to test it out to see what I mean, but I'm trying to keep the movement in one direction only. Thank you https://codepen.io/bbg4/pen/ZEZNzLm

0 Comments
2024/05/16
18:52 UTC

0

How to query select td of table row using javascript and assign value to it

Hi guys, I have been trying to querySelect td and assign a value to it when I toggle between a state but it seems there is an error, here is my codepen: https://codepen.io/Bright-Anyawe/pen/PovoVVY any idea of how to resolve it will be appreciated

2 Comments
2024/05/16
18:41 UTC

15

What's the use of getters and setters in JS?

This is my code:

class PersonCL {
    constructor(fullName, birthYear) {
        this.firstName = fullName;
        this.birthYear = birthYear;
    }

    calcAge() {
        console.log(2037 - this.birthYear);
    }

    get age() {
        return 2037 - this.birthYear;
    }

    set fullName(name) {
        if (name.includes(' ')) {
            this.fullName = name;
        } else {
            alert(`${name} is not a full name!`);
        }
    }
}

I come from a Java background so it makes more sense to me to have a getAge() and a setFullName() function? Does this have a performance impact or just JS convention?

20 Comments
2024/05/16
18:37 UTC

4

Is the statement below valid?

[SOLVED]

const substitutions = { alpha: 'α', . . ., nu: 'ν', . . . }

What are those dots inside the object?

9 Comments
2024/05/16
18:22 UTC

Back To Top