Introduction
Hello, my name is Mishel and I am studying to become a full-stack web developer. But! I won’t get ahead of myself - I’m still in the beginning stages of web development and have only been getting my hands dirty with HTML, CSS, and JS thus far. In this blog post, I will document the process of creating my first ever web application using HTML, CSS, and JS.
Getting the ball rolling
I believe that the hardest part of any difficult task is getting started - there is no space for worrying or self-doubt here! Because I am creating this application as an assignment for my course, there are certain criteria I have to abide by. In short, I need to create a single page web application that will fetch data from an API or mock server and output dynamic data.
I began with creating a list of goals that my website should be able to achieve. I decided that I would like to make a to-do list application that allows users to create a to-do list and check off completed tasks. My website should:
Allow users to write text into an input form and submit their task
Allow users to check off completed tasks
Allow users to delete tasks (completed or not)
Ensure data is saved on the website so upon refreshing any checked or unchecked tasks are still on the page and deleted tasks do not appear
These goals allowed me to create a clearer image in my head of what I wanted to achieve and allowed me to begin thinking about what I could do to achieve these goals.
Initial code
The first day of coding was spent creating a framework for my website using HTML and making it ✨ pretty ✨ using CSS. Since my website is a to-do list app, the most important feature is an input field where users can enter their tasks:
<div class = "enter-and-add">
<input type="text" id="input-box" placeholder="Write your tasks here!"><button>Add</button>
</div>
I placed the input field and 'add' button into the same div in order to easily edit their appearance in CSS.
Meeting project requirements
The next few days were spent making sure that my web application meets the project requirements. Since I am creating this web application for an assignment, there are certain criteria that have to be met. These are the following:
The app must be a HTML/CSS/JS frontend with access to a public API or a mock server
The entire app must run on a single page
It must use at least 3 unique event listeners
It must include at least one instance of array iteration
It must follow good coding practises
These were the hardest few days of the project as I was experimenting with fetch requests and methods to ensure my data was saved to a mock server and that it would load up onto my web application upon the site being refreshed. Working on this section was a headache because I had to commit to a lot of research and trial and error before I got everything working the way I wanted it to.
For example, fetch requests:
fetch('http://localhost:3000/tasks')
.then(response => response.json())
.then(json => {
json.forEach(task => {
let li = document.createElement("li");
li.innerHTML = task.task;
if (task.checked) {
li.classList.add("checked");
}
listContainer.appendChild(li);
let span = document.createElement("span");
span.innerHTML = "\u00d7";
li.appendChild(span);
});
})
.catch(error => {
alert('Failed to fetch tasks from the server.');
});
The code above ensures that if a user refreshes the to-do list app the web application will fetch data from the server to ensure that any tasks that were on the page before the reload will be on the page after. It took me a lot of time researching, asking friends for help, and rereading notes in order to get all my fetch requests working the way I wanted them to. I got very frustrated at times as I searched for tutorials and nothing came up that explained the concept perfectly! I was only able to succeed when I utilised a number of different sources and applied them all together.
However, it was a great learning opportunity for me as I was able to apply concepts that I had learned in class and was able to gain a better understanding of the code that I was writing - all these concepts that once confused me began to make more sense!
What I would do differently next time
Next time I decide to code a website, I would like to focus on applying as many concepts I was confused on as possible. For example, if I find a certain concept difficult during my studies, I'll try to implement it in my project so that I can turn a weakness into a strength and gain a better understanding of the concept and how to use it.
My main takeaway
My main takeaway from this project was that yes, studying concepts is important, but, it is much more important to try to apply and actually implement them in your code because that is the only way you’ll understand them!
Top comments (1)
Welldone👍🏾