Any advice on how I would write this back end code? (beginner btw)

Hello! So recently I finally started to make a really small personal project to help me understand what I’m doing and to give myself experience. Obviously, this isn’t meant to look good but it just needs to work. I use JavaScript for the back end currently, and I am trying to make a simple To-Do List. I have just started and this is what it looks like:

Now where I don’t even know how to start with the back end. What needs to happen is when I click Add, it should add a bullet point and put what I wrote in the text box. I don’t know how to start. I don’t know the steps I need to do this, I don’t know how I would translate that to code, and I don’t know what code to write. I also might need help on the front end as well. In advance, sorry for any inconveniences.

Help would be appreciated!

Code I have so far:

toDo.html:

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width = device-width, 
        initial-scale = 1">
        <title>To-Do List</title>
        <link rel="stylesheet" type="mainstyle.css">
        <script src="toDo.js"></script>
      
    </head>

    <h1>To-Do List</h1>
    <textarea id="text area" class=text onClick="addToList()">Type here what you want to add</textarea>
    <button id="submit button" type="submit">Add</button>
</html>

mainstyle.css:

.text{
   font-family: sans-serif;
}

NOTE: I haven’t started coding the JavaScript since that’s where I need the most help.

I use JavaScript for the back end currently
If you actually meant Node.js, then I’d like to see your back end code so far. Where you are developing your app build so far? Local? repl.it?glitch?.
Because as far as I understood, you’re confusing back-end with running a js script for your html page.

What addToList() function does? Have you written it?

Edit:
It’s odd you bound a click event handler on the textarea instead of the button. Which also you don’t actually need to be a “submit” type, since you don’t seem to intent to submit forms right now. The onclick event handler should be within the button element instead.

<button id="submit button" onclick="addToList()"></button>

Triggering a click event on button should call addToList() function callback. As a headstart, here’s some code.

let addToList= () =>{
// you can start with this
const textArea=document.getElementById("text area");
textAreaValue=textArea.value;
....
//Create an unordered list <ul></ul>
//append a new li element on ul element with unique Id  and textArea value as innerText
/*example document.getElementbyId("todo0").innerText= textAreaValue
you can create an unique id with a counter declared in global scope. 
Incrementing its value everytime addToList() is called after click event, and then making a new string out of some keyword string plus the counter number.
 E. g. let id= "todo"+counter.*/

/* another shorter alternative, without relying on ids, 
you can select the  unordered list's last child, with **lastChild**, 
then add textArea text with **innerTxt** or **innerHtml**
*/
}
1 Like

Well, you’ve made a pretty big request here. It would be like saying, “I really want to know how to do brain surgery, please teach me how.”

Fist of all, you don’t necessarily need a backend. It can just run in the browser. The backend is if you want to store or fetch data.

This is the forum for Free Code Camp. We have sections that teach JavaScript and a section that teaches backend (called APIs and Microservices). I would suggest having a look, here.

2 Likes

I don’t think there is a straightforward approach to backend development. When I say straightforward, we could explain how to expose an endpoint on a “server” that your client app would interact with and we could explain how to persistent it. But that wouldn’t do you any justice as each problem calls for different approaches and designs.

The most common architecture for backend development is the MVC design. Which stands for Model-View-Controller.

Where model is your data, the controller is what serves and does things to that data, and the view is what the end user actually sees. You can probably visualize what that looks like but each layer to this design has several moving parts that you need to understand.

The model is exactly that – it’s the representation of data that you are using for the client to consume . It doesn’t have to be something that is shared with the client. It could be a chunk off of a more business complete model that we would share with the user. We typically obtain this data through some form of querying language to a running database client. Though effective, often times running these queries are tedious and are more error prone. That’s where we use object relational mapping or ORMs to make querying data more declarative or simplified.

The controller is more like an aggregator. It takes requests from client requests and performs actions on the server when invoked. They typically have listeners that observe routes that get sent to the server through HTTP requests. Whether you’re allowing the user to pull a series of items from the client or setting up a complex authentication system using SSO, controllers would be the entry point.

But there’s more to it then writing code inside your controller. To keep coupling loose, you need to separate what code is used for handling requests in your controller from the actual business logic. This done by creating repositories which mostly handle the data that is being worked on (create, read, update, delete, etc.) and would be what your business logic is. This can be broken even further but at fundamental level , this is about as far as you will break out your code.

Then you have your views. This is what is presented to the user. It could be just sanitized json or xml payloads that the client uses or it can be html files themselves generated by dynamic factories which insert data called templates.

I hope this gives you a better idea where to start or at least it gives you a direction on what to learn so you’re not wandering around aimlessly.

1 Like

I don’t think I was being specific enough. In this new world of coding to me, I find it interesting and I want to learn it, but it is tough for me as I don’t know how to deal with certain situations, like how do I break up a task into steps and even harder, how to translate those steps into code. I don’t know where to start or how to start creating a project from scratch. Normally when I do puzzles or watch tutorials, it’s not the same. In puzzles, I have something to work with. In tutorials, the person teaching how to make a project already has built this. I know I have basic knowledge of HTML, CSS, and JavaScript. But, how in the world do people build these projects from scratch? How do they change the steps they need to take into actual code? Every time I make a new topic, I ask myself “Am I doing this write? Am I wasting these peoples time? Should I stop doing this all together?” Why? Because I think I’m asking too much and maybe this isn’t for me. But then why do I enjoy these puzzles and tutorials so much? The main things I’m trying to say is that I have many questions about this world of computers and programs, and that I honestly self doubt myself when I shouldn’t. I dislike wasting peoples time , and energy for me unnecessarily. Do I continue this project after I learn more, or will it just never help me? Let me know your thoughts.

Hey @Josh641!

It is common to get overwhelmed by creating a project by yourself that doesn’t include a tutorial. So you don’t have to feel bad about that. Here is a tip on how to break up a project into smaller tasks.

Start with pen and paper and look at an image of a completed to do list. Like this one.

Write down everything that you see. There are some list items, a place to add more items, a place to delete items, and even an option to scratch off an item when you have completed it.

It think this is a good place to start. Yes there are a million ways to build a to do list app since it is probably one of the most popular beginner projects but let’s keep it simple for now. Let’s just focus on vanilla javascript, plain css and html. No frameworks! You can get fancy later.

Once you have made your list then tackle one issue at a time. Start with the html, then move to css. Remember to just keep it simple right now. Then you can move to javascript.

Here are the basic questions you will probably have when starting the javascript section.

How to create a new list item when clicking on the “Add” button?
How to add a “checked” symbol when clicking on a list item?
How to create a “close” button and append it to each list item?
How to click on a close button to hide the current list item?

Focus on one question at a time. Try to come up with ways to code that first question and then if you get stuck then you can turn to google, stackoverflow, and the forum to ask for help.

Hope that helps!

Again, have you gone through the FCC tutorials on these subjects? I think that they would answer a lot of your questions.

But yeah, it’s tough to get started.

When I originally read your question, I just assumed you had done the fcc javascript section. But it sounds like maybe you have watched some youtube or udemy videos and coded along with the instructor.

If that is the case then, I agree with @kevinSmith and that you should go through the javascript section. Especially both of the algorithm sections and final projects section. You will learn how to put together all of the stuff that you have learned and solve problems.

Which ones should I do? I have done basic JavaScript, HTML, and CSS, ES6, and debugging in JavaScript. Which other options do you think would help me the most?

First of all, I’d suggest doing all of them. With the exception of the Python stuff, they’re all part of the MERN stack. With the Front End Libraries, you’d learn how to do a modern front end, especially with things like React. One could argue that the Data Visualization isn’t required, except maybe the part about consuming APIs. Then the APIs and Microservices section is really good at teaching you how to build a Node back end, completing the MERN stack, making a marketable set of skills. Like I said, the Python stuff is a bit off that course - it’s still valuable stuff, but it’s not part of the MERN stack and can be thought of as supplemental to your journey. I’m not familiar with the Quality Assurance section (things have changed since I did this) but there is some good stuff in there.

So, that gets you the skills you need to create a full stack site. You will even need to create one for some of your projects. But yeah, it’s a big step to go from doing the little FCC challenges to putting it together in a real site. You have the basic tools but are missing a few pieces of information. I would suggest looking for some youtube videos on putting a site together, like how to organize the files, etc. That would be easier once you have something like React, but I’m sure you can find something.

The confusion you are feeling is normal. Everyone feels the same way at this point. Just power through it.

I would think that I should also finish the Responsive Web Design Certification?

If you haven’t done the projects for the responsive design certificate then I would complete those. It also sounds like you made it through about halfway of the javascript section so you should pick up where you left off which would be the basic data structures section.

Hope that helps!

It does! I will work on regular expressions since I haven’t done that yet! I decided to skip to debugging and come back.

Okay, since this topic is still open, I am doing “Regular Expressions” in “JavaScript Algorithms and Data Structure Certification” challenge 22/33. I am confused by the answers of /^[a-z][a-z]+\d*$|^[a-z]\d\d+$/i; and /^[a-z]([0-9]{2,}|[a-z]+\d*)$/i;

How does this work? I don’t understand exactly what it is checking for.

Hey @Josh641!

It might be better to use the ask for help option on the challenge.

That way we can see the code you have written so far on this problem and help you that way.

I already looked at the answer and I completed it. The main thing I don’t understand is how the regexes are put together. Like, is each part of of the Regex (e.g. [a-z]) represent a single character or is it something different?

[a-z] is a character set. You can match any character within that set. For example, /[a-z]/ matches “b” in "b2 ".

There is a helpful regex syntax cheat sheet on mdn doc.

I would also review some of the lessons again that gave you trouble because you will be asked to use regex in later javascript sections.

Hope that made sense.

I now understand most of it. I just don’t understand the last part (after “|”). Why does that work? And, why doesn’t something like /[a-z][a-z]\d*$/i; work?

This doesn’t work because you are just repeating the same thing twice whereas if you wrote it like this

[a-z]+ // one or more letters coming up next

In the challenge here

It says that numbers can only be at the end of the username which explains this part of the solution.

\d*)$ // ends with numbers

Hope that makes sense.

I think I get it now. With more practice, I will understand!