DEV Community: DerekJxy

Release of Final Assignment

DerekJxy — Thu, 16 Dec 2021 18:37:45 +0000

After all the improvements I made for the project, I would say it becomes better.

Here is some comparison:

Undone-All in light mode:

Done-All in dark mode:

Edit todoList in dark mode:

todoList Updated:

Delete todoList in dark mode:

Overall, I added two new buttons(features) to the program. One is Undone-All button which for setting all todoList to undone. And the other one is Edit button which is for the user to edit the description of todoList that they saved before. Also, I fixed the issue of dark/light mode toggle. The program will keep the same mode all the time unless the user click on the switch button. Finally, I add a new simple footer and change the date time format for the program.

My Feelings

This is best I can do so far in a limited time. However, I think I could do it better if I started to work on it earlier. Anyway, this is a good experience for me as well. I learned that I should ask the questions instead of guessing by myself. Also, I reviewed and learned a lot of DOM and HTML knowledge thanks to this final project.

Link to the PR I made: [PR #42]

Progress of Release 0.4

DerekJxy — Thu, 16 Dec 2021 18:12:28 +0000

As I filed the issue on the project that I picked for the final assignment. I started to work on it since I'm late on it.

Procedure

The first thing I was going to do to improve the programs was add a new Undone-All button. It's basically as its name, undoning the todoList in the program. The first step was I tried to add a need button in the main html -- index.html. And when I run the program after that, it was really funny though:

And I found that I need to add some CSS for it as well! So, I just add a new CSS. But when I run the program again after I added the new CSS, I realized I should have a same CSS format as the All-Done button that the project currently having. So, instead of adding a new CSS, I just add the Undone-All button class name to the Done-All button. In this way, I will have a some button format that the original project having.

After that, I tried to work on the Edit button which is a new feature for the program. I was planning to add a Edit button for the user to edit the description of the todoList. This is the most difficult part I had for this final assignment.
At the beginning, I tried to add a new button to each todoList, which will implement in the app.js file. I followed the logic that the current program having to make the new edit button. And it turns out as the Undone-All button I made before, it's in a pretty ugly format. Also, I didn't include the fa class that the program using, which make the edit button looks so weird. Therefore, I use google and the stylesheet link that the program provided to update my initial Edit button. Finally, I decided to make the button with a pencil symbol to inform the user that this will be a edit button. Also, I added some CSS to make it look nicer. And here is the final look of my new edit button:

When I finished the outlook of the Edit button, I started to add a function for it. Honestly, I was planning to make the todoList to be editable. But the reality is, I can't find to a way to do that because it's inside a <li>. So I tried to enable the edit button in a different way, which is using the prompt() function. The prompt()function allows the user to input a new text as an update for the old todoList.

And the next thing I found out was all of those functions for the todoList buttons are in a same function scope, which is not a good practice. Thus, I divided the origin function for the todoList buttons into 3 different functions:

After some personal testing for the edit button, I found a new problem which related to the date time that the origin program having. The date time format that the program using was a dynamic format, if the current date time is "2021-5-12 00:00:08", then the program will display the time as "2021/5/12 0:0:8". Although this is not wrong, it will be better if we can have a specific date time format such as "YYYY/MM/DD HH:MM:SS". So, if the current date time is "2021-5-12 00:00:08", this time it will display "2021/05/12 00:00:08". On one hand, it will be better to have a same date time format for the user. On the other hand, it can provide a good format to the programmer to catch date time string. Therefore, I updated the date time function to :

function now() {
  let today = new Date();
  var year = today.getFullYear();
  var month = (today.getMonth() + 1);
  var dateTime = today.getDate();

  var date = year;
  date += ((month < 10) ? '/0' : "/") + month;
  date += ((date < 10) ? '/0' : "/") + dateTime;

  var hour = today.getHours();
  var minute = today.getMinutes();
  var second = today.getSeconds();

  var time = ((hour < 10) ? '0' : '') + hour;
    if (hour == 0)
      time = '00';
  time += ((minute < 10) ? ':0' : ':') + minute;
  time += ((second < 10) ? ':0' : ':') + second;
  return `${date}\n${time}`;
}

After adding the new buttons, I had an easy improvement for this program, which is adding a simple footer.
It's a simple step which only required a few lines of code in the index.html.

Finally, I moved on to fix the issue that when the user change the display mode to dark mode, it will automatically change back to the light mode when the user refresh the page. Not only the user refresh the page would cause that issue, but also when the user click on the Done-All button or the Undone-All button, it will use the confirm() function which also will refresh the page and change the display mode from dark mode to light mode automatically even thought that's not what the user looking for. In order to fix this issue, I need to find some information from the Internet, because it has been a long time that I never worked on dark/light mode toggle. Also, I even watched some videos from Youtube to help me figure out the issue. I spent times to learn, to practice and to fulfill it. And finally, I solved the problem by adding these lines of code:

When I wrapped up the project, I found another new issue, which is when the user click on the Clear button, the same situation of change the display mode back to light mode happens again. So I go into the Clear function.

In this function, we are going to clear all the information or data that saved into the localStorage, which including the display mode data. As I mentioned above, this is not a good practice. Therefore, I need to update this function as well even though I didn't have this move in my plan. After a few times of research, I learned that the localStorage.clear() is deleting all the data saved in the localStorage. But the goal for this button or this function is to delete all the saved todoList. So, I decided to update the function to like this:

In this way, the Clear button will only delete all the saved todoList, and it will keep the same display mode that they user currently using.

Link to the PR I made : [PR#42]

Preparing for the Release 0.4

DerekJxy — Thu, 16 Dec 2021 17:05:11 +0000

Regarding to the final assignment we have in OSD600. Due to my misunderstanding of the class requirements, I started to work on this final assignment a little bit late.

For the this Release 0.4 we have as a final assignment, we are going to contribute on Github again. And this time we have a more open options for the project we are going to work with.

Because of the lateness, I just picked one of the projects that my classmates worked for the final assignment. But I do realized that I should have a different content or contribution on the project. The program I chose is a HTML program. It's a TODO List program. It's more like a Note application we have on our phone.

After I go through the program, I found some issues are good for me to make a improvement. For instance, the dark mode and light mode toggle is something wrong. If the user switch the mode to dark mode by clicking the switch button, and the user refresh the page. Then the page will automatically change back to the light mode no matter what. And this obviously is not a good practice. Therefore, I planned to fix this issue. Also, I found that there are only two options for the user to do with the todoList that they are having. And I believe that it would be better if we have a Edit button to edit the todoList that the user currently having. So, this is going to be one of my improvement action for this project as well. Finally, I saw that there is no footer in the html project. Personally, I think having a footer is always a good practice.

Therefore, I set up the gold that I'm going to help improve the project in such list:

Link to the Repo I worked with :[todo-app]

Fourth Hacktoberfest Contribution

DerekJxy — Fri, 10 Dec 2021 18:51:16 +0000

For the last Hacktoberfest Contribution I have in here is about a program improvement.

Issue

For this program, the issue that I interested in was helping the repository owner to add a Thai translation to the program.

My Solution

Due to the repository owner already provided a clear contribution instruction. I just needed to follow the step they suggested.
However, there was one thing the stopped me for a while. And that was the language that I assigned was Thai, which is a totally new language to me. I don't speak Thai or understand Thai. Therefore, I need to get help from the Internet translation.
Because I would like use the global translation all the time, I know that sometimes some translations just don't any sense to the original language speaker. Then I just used two different translation application to help translate some English words to Thai words. For each Thai translation I made, I always compared two different results from two translation applications. Moreover, I used the words that translated from the translation applications to translate into my first language as well.
In this way, I can make sure the Thai translation will make sense to any Thai people or people who speak Thai.

My Feelings

This is an interesting experience for me. Improving a program with the totally new language(Thai) is like an adventure to me. Everything is new and I think this will be the same when it comes to the work in real life I have in the future. Although this is not a complicated issue, it gave me a new experience of working in a new state.

Link to the Repo I worked on: [pageliner]

NPM Package

DerekJxy — Fri, 26 Nov 2021 23:58:15 +0000

This week, we are going to have out Lab 10 in OSD600. Lab 10 is quite different from any other previous lab I had in OSD600. Lab 10 is not about coding or adding new feature to my static site generator. It's about publishing my SSG to npm.
Once I published my SSG to the npm, people would be able to use my SSG as long as they install my package by the command: npm i my-first-ssg-1.

Procedure

After reading the Lab 10 instruction as usual, I just started to read the documentation about the npm. Because I have my SSG in a good set, I don't need to create or modify that much things when I followed the steps from the documentation.

And then, I just tried to publish my SSG. However, because this is the first time I work on publishing package to npm. I have not idea how it works.
Therefore, I just run the command npm publish directly, which comes up with my first error:

So I just ask my friend what am I supposed to do in this situation. And then my friend replied me, "Did you login your npm accont?" And at that time, I just realized that I don't even have a npm account.
So, I just use the link my friend sent me to sign up a npm account. And tried to publish it again.

However, after run the command 'npm publish'. There was a new error comes up:

This time, I prefer to find the solution from the Internet. Then, I just googled this situation from Stack Overflow. And I found that, the reason for the error above was I didn't verify my npm account. So I verified my npm account through the e-mail they sent me. And finally, I can publish my SSG to npm successfully.

After my SSG package published to npm. I followed these steps to test my package. Fortunately, this time I didn't any errors. I can test my package smoothly.

Finally, I realized that I need to update my README.MD for the npm package. I thought I can delete the package and then remake it. But the reality is, I need to wait for 24 hours after I deleted the package. Therefore, instead of using the same name as my SSG program name "my-first-ssg", I need to create a new package with a different name for my package "my-first-ssg-1".
After I recreate a npm package, I just update the content in my README.MD file and then used the command: npm publish to make updates to the package I had in npm.

My Feelings

I would say this is a simple and tricky lab. The simple aspect is I don't need to code anything for this lab. But the tricky aspect is there is no any example as a reference to accomplish this lab. And that is the reason I suffered some stupid errors. However, I think this is a correct way to learn stuff, because we won't have that much example when I work in a company. I think this is a good practice for us to ready for solve problems in the workplace in the future. Also, I think lab 10 is very useful. I learned that we can use npm package to publish our code so that other people can use it by running 1 simple command npm i packagename. And they don't need to clone my code and build my project to run it locally.
It's a very convenience way to allow people to use my package!

Link to my npm package: [my-first-ssg-1]

Code Reviews

DerekJxy — Fri, 19 Nov 2021 21:49:14 +0000

In this Release 0.3, there are 3 different requirements. And the __third one_ is about Code Review. For this code review, we are required to review some PR from other students created. And the main purpose of this is to help improve their PR so that they can get merged. And for me, I had made two code reviews in two different PR. However, they are having a same issue.

Procedure

For the code review section. The first step I made was to check the PR that opened which means that they haven't got merged. And then I just selected one of them. The first PR I picked was called [Fix and Audit types.md]. And for the second PR I picked was called[records-and-files.md].
These two PRs had a same issue. And that is they didn't check the sentences in each paragraph carefully. Due to all of these md files generated by a Docusaurus -- a modern static website generator. And I found that each sentence that in a paragraph was break with 2 spaces which is not a normal practice in our daily life or even coding. This is a small issue because although with two spaces to break sentences, it looks good in a real webpage. However, I believe that we should fix this issue because sometimes small issues matter, especially when it comes to coding!

Here is my suggestion:
①:

②:

My Feelings

What I had found is not a huge issue but a really tiny issue. However, sometimes a tiny issue could cause a huge problem. I think I would treat this code review as a reminder to myself.
"Never miss any small details!"

Internal Project Contribution

DerekJxy — Fri, 19 Nov 2021 21:12:03 +0000

In this Release 0.3, there are 3 different requirements. And the second one is about Internal Project Contribution. For this internal project contribution, I selected a repository that from IPC144. And the issue that I selected was about Audit a MD file. This MD file is about the knowledge that we learn in IPC144. And the topic I selected was Two-Dimensional-Arrays. The reason I picked this topics was I thought this is an interesting topic and I wanted to review the two-dimensional-arrays content.

Procedure

Here is a checklist I created to this issue:

What I did was just follow the checklist. The first time that I read through the two-dimensional-arrays.md file, I think that it looks good! But that doesn't right! Since there is an issue, it has to have some things to improve. So, I just read the MD file again and I found some problems.

Firstly, I found that the sentences that in each paragraph was break by two spaces, which is not a normal way we do in our daily life. Secondly, I found that the image that the MD file using is missing a alt text. Thirdly, I found that the code examples in the MD file are indented too much. Last but not least, I found that there are a few <br /> inside the MD file. And I can't find any of of these problems above at the first time.

Since there were many problems I listed out after the second time of reading. I began to make improvements.
After solved the problems that I found at the second time of reading. I told myself, "Perhaps there are more improvement you can make after your third - forth times of reading."

Thus, I read the MD again after I fixed those problems. However, I only found two more issues after my forth times of reading. The first one was the MD file is lack of highlighting words. This is a reading for those students in IPC144, they are new to C language. And I believe that with some highlighting words, this documentation will be easier for them to read and learn! The second one was the code example in the documentation again. I found that I can make some improvement to the for loop code with {} so that they look better.
After these two improvements I made, I decided to make the Pull Request. I would like to ask help from other contributors. As long as I make the PR, they would have a chance to review my PR and they might come up with some better ideas to audit the MD file!

Surprisingly, I got 3 more suggestions from other contributors!
①: A solution to make the imagine looks nicer in dark mode!

②: Edit the alt text and Update the Frontmatter!

③：Add admonition!

The suggestions above are really good improvements for the MD file that I worked at. Therefore, I accepted the suggestions and update the MD file based on their ideas.

Finally, I combined all the improvements I made and all the suggestions from other friendly contributors together to make the final PR.

Fortunately, the owner of the repository accepted my PR and merged it to the main repository in a short time!

My Feelings

This is an interesting contribution. I'm really happy that I can help to improve the documentation in the repository that belongs to my College. Also, I realized that making contributions with other people is a very good way. Because other people would see what you've missed at the first time. And sometimes that could be a small issue, but sometimes that could be a huge issue.
And no matter what, having someone else to help contributing on Github is always a good thing!

Link to the origin Repo I worked:[ IPC144 ]

External Project Contribution

DerekJxy — Fri, 19 Nov 2021 19:56:30 +0000

With the coming of November 1st, we had our third assignment -- Release 0.3 in OSD600. In this release 0.3, there are 3 different requirements. And the first one is about External Project Contribution.
For this external project contribution, I selected a repository that I worked with in Release 0.2. It called help.js.

This time, I worked at the issue about adding a testing method for objects. "We should have a method that finds the difference of two objects (any keys that are present in the second object are removed from the first)".

Procedure

Due to I forked this repository to my Giuhub account for my Release 0.2. I just need to pull all the new commits that the origin repository made recently with the command git pull origin main. And then I started to add a new test function based on the issue.

At the beginning, I got stuck at "How can I get the keys from an object?". Therefore, I googled the solution from StackOverFlow.
There are some tips and ideas helped me to get the keys from an object. I used the method Object.keys() and store it to an array.

    let array1 = Object.keys(object1);

And then I just used for loop to figure out whether there are some keys that present in the first object and the second object at the same time. If so, I just need to remove them from the first object. However, there was one more issue comes up at that timing -- "How do I remove those keys from the first object?" So, I searched the recommend ways on google again. And I found that I can use the word delete to do that.

    delete object1[array1[i]];

This code allows me to delete the keys in an object. And then I just add some test logic to the test.js.
While I testing my code, I realized that my code would delete the keys from an object permanently. And I don't think that's a good practice for any programmer. Therefore, I tried to add a temporary object to my function, and let the temporary object equals to the first input object. Then I could delete keys from the temporary object so that it will not affect the original first input object.
Surprisingly, this logic didn't work as I expected. It does delete keys from the temporary object, but it also deletes keys from the first input object! So, I just use an object that with same keys values again and again:

After I made the tests run successfully, I read through the testing code in the program again. And I found out that I was using a different format, which is a bad practice when you are trying to help improve a program that you didn't make it. So, I just audit my code with the same format as they did.

My feelings

Honestly, this is a more challenged issue for me. First of all, I don't familiar with working on object in JavaScript. Second of all, I don't have that much experience with contributing on Github. Last but no least, I messed up the coding procedure at the beginning which is a really bad practice. I should read through the code before I do any coding stuff.
Anyway, this is a helpful project for me. I learned how to get all the keys from an object and how to delete them. Also, I have more experience to contribute on Github!

Lind to the Repo I worked: [Helpful.js]

Continuous Integration

DerekJxy — Fri, 19 Nov 2021 18:33:41 +0000

This week, we are going to have out Lab 9 in OSD600. Similar to the Lab 8, Lab 9 is about to improve our SSG at Github.
In this week, we learned something about the Continuous Integration (CI). "CI is a method whereby we build and run our tests (i.e., integrate everything in our project) automatically whenever anything is pushed to the repo, or a new pull request is made. With CI we do this continually and ideally on every change. This lets us monitor the effect of a given change and assess its quality."

Procedure

In this week, we have only 1 video to watch. After watching the video that related to the Continuous Integration on Github. I have a clear idea how to make an action workflow and how it supposed to work.

Obviously, the first step I made was to create a new workflow to my SSG. There wasn't that much things needed to do by myself. Most work were done by Github automatically.

My second step was to create a new PR to test my CI. Also, I made a new test file for the mdNewFeature() function that I have in my SSG. I created a new test file and some test functions for it. After I could run all the tests successfully in my local machine, I made a pull request to my repository. Here is a screenshot for the CI to check my PR:

Luckily, all my tests got checked so that I merged them to my repository.

After that, I tried to make a test that with errors to check my CI. I updated my code so that it will have an error when I run the tests. And then I made a PR to my repository. When Github receive my PR, it will run the workflow automatically. It will check my PR to make sure it won't crush my original program.
Well, there was an warning showed up as I expected:

And because there was an error with the PR, there is no way I can merged them to my program. Therefore, I just reset the wrong code to the right one. Then I made the PR again. And this time, it didn't show my the error anymore and I can merge it to my repository.

Moreover, for this Lab 9 we need to test other people's CI as well. I found my partner Eugene through Slack. And we talked about what is the good idea for adding a new test function to each repository. Personally, I just added a new small test function to my partner's program. It was a test function about testing what will happen if the user use the function with empty argument. Due to this is not a program that I made, I need to go through my partner's code and followed his logic to made up a test. It's slightly different when adding a test function to a program that you never participated in. But it became easy after you communicated with the program builder!

My Feelings

To be honest, this is not a complicated lab, not at all. However, that doesn't mean it's a useless lab. In fact, I think this Lab 9 is a very useful lab. It introduced me the Continuous Integration (CI), which is a powerful tool while work on Github. It can ensure that every PR that the contributor made or the repository made will not crash the program. And all of them would run automatically.
This is a really good tool for me to work on Github in the future!

Link to my Repository:[My-First-SSG]

Testing in JavaScript

DerekJxy — Thu, 11 Nov 2021 03:18:25 +0000

This week we are going to have our Lab 8. Lab 8 is also introducing a new tool to our SSG project. In lab 8, we are going to add some testing functions for some functions that we have in our SSG. Talking about the testing stuff, I have a little bit of experience in it. Because one of my issues that worked on Release 0.2 is about adding a new function to the program and test it before I made the Pull Request. And the testing framework I used was mocha.

Procedure

After watching the videos and read through the lab instruction. I just chose the testing framework that I'm going to use in this Lab 8, which is Jest. And then I just install the Jest to my program by using the command npm i jest. Also, I updated the "test" command in the package.json file.

After I add the jest dependence, I tried to add a new testing function. However, when I added a new test function for the function named htmlGenerator I had in my program, I can't run it properly. It kept showing this error message:

That's a weird error for me. It's basically saying that the test function run correctly but there are also some errors. So, I just go back to the code that the error told me. And I realized that I wrote my test function with the reference function in my server.js, which is the main file of the program. It means that whenever I run the test function, it will run the program as well since I don't have a main function. This is a really bad coding style. Therefore, I decided to separate the htmlGenerator() function to a new htelGenerator.js file. So I can code between the htelGenerator.js file and the htelGenerator.test.js file. And then the problem solved!

After adding a new testing function to my program, I tried to add more testing steps to test htmlGenerator() function. At the beginning, I thought that there were only 2 testing steps. The first one was test the htmlGenerator() function to generate a html result with a string html argument. And the second would be test the htmlGenerator() function to generate a html result with a object html argument. However, that sounds like too simple as a lab. So, I just read the Lab 8 instruction again. And that gave me some ideas for updating the testing functions of the htmlGenerator(). For example, I can test the htmlGenerator() function with bad value types. Something like: 'What if the type of one argument is not what I expected?', 'What if the type of all arguments are not what I expected?', 'What if the value of one argument is empty or undefined?', etc... Also, I need to update the code inside the htmlGenerator() function. Finally, I got 7 test functions for the htmlGenerator() function I have in my program.

In addition, I found an interesting stuff from this Lab 8. There is a tool called Coverage. It's a great tool to generate a coverage report about the testing functions. It will also shows the Uncovered line(s) of code in the testing functions you created! In my program, if I run the coverage with the command that I set up npm run coverage, it will shows something like the following:

My Feelings

I think this is a really helpful lab for me. I learned how to import and export functions correctly between two files, and I learned how to create testing functions for a specific function in a program. Moreover, I will have a more clearer idea for testing a function in a program next time!

Link to my Repo :[My-First-SSG]

Prettier & ESlint

DerekJxy — Fri, 05 Nov 2021 16:11:36 +0000

This is the first week that we came back from the study week. And we have our Lab 7 in this week. Lab 7 is not about coding new stuff or contributing on other people's repository. Lab 7 is about formatting the code we have from the SSG or I can say it is making it looks better.

Main Extensions

There are two main extensions we are going to use in this Lab 7. We are going to apply prettier and eslint.

Procedure

Honestly, although this is not a complicated lab, it cost me a lot of time. And the reason for that was I got stuck at testing my code. After read over the instruction of the Lab 7, I started to watch the video that our professor provided. And I learned how effective prettier and eslint would be. I think these are pretty powerful tool for any programmers. It can help us keep a same formatting when we coding with a huge team project. Also, it would save us a lot of time since they are very good at finding those tiny mistakes.

My first difficulty was no matter how I modify my .prettierrc.json file, it keep showing me this error message:

And I had no idea how to fix it. I asked my friend, I googled it, or even I rewrite the code inside the .prettierrc.json file, none of them would work. And the my friend suggested me to delete the file and remake it. I didn't think that would work but I still give it a shot. Luckily, that solution worked! Although I don't know the reason for that, even up until now.

My second difficulty was testing my program after I added the code for prettier. I installed the prettier to my program, and I configured it. Also, I added a new "one-step" solution for running my formatter on the project from the command line. However, I got stuck at running prettier. Due to I'm new to this extension, and I didn't find the example from the materials that our professor provided. So I just tried whatever come to my mind. I tried npx prettier, I tried npm prettier server.js, I tried npx prettier server.js, and so on... But none of them could run. And finally, after 20 minutes trying, I typed npm run prettier, and it worked! And then I just commit my code through Git.

Lastly, when I set up my code for the eslint and try to run it. It returned my this error message:

It was telling that I had an undefined variable in my program. I was thinking to rewrite my code to fix this error, but that would change too many lines of code in my program. And then I realized that I can just simply define the variable globally, then the problem would fixed. So I just read through my program again. And then I found that what I need to do is use var to define the variable globally. And then the problem solved!

My Feelings

I don't think this is a complicated lab. It doesn't have a long instruction, or a long coding requirement. It's just about some small steps to add new extensions to my program. However, I do think this is a tricky lab. Because it's very strict about small stuffs. Sometimes maybe just one different letter would cause an issue, and it would cost you 10 - 30 minutes to fix it. Anyway, through this Lab 7, I got familiar to add the prettier and eslint to a JavaScript program!

Link to my Repo : [My-First-SSG]

Third Hacktoberfest Contribution

DerekJxy — Mon, 01 Nov 2021 00:02:27 +0000

After accomplished the first 2 Issues I found on Github. I tried to find some issues that are more interesting. The third issue I found for the Release 0.2 was a Java program. It's about creating a website that contains a SUDOKU game.

Issue

For this program, the issue that I interested in was helping the repository owner to add a Github logo on the webpage footer. And it should link to the github repository.[Issue #9]

My Solution

After go through the code of this program. I assumed that this program will reuse its footer for many and many times. Therefore, I could just update the code inside the footer they provided to solve this problem.
The file that I updated was footer.jsp. And the code I added was

            <a href="https://github.com/stefanoskapa/SudokuBase">
            <img src="https://ctl.s6img.com/society6/img/hNqP40bUA0DVJY-drlMuI_MylEc/w_1500/prints/~artwork/s6-original-art-uploads/society6/uploads/misc/8e29a2e79387449caa28090d71f489e3/~~/github-logo-prints.jpg" alt="logo" height="30">
                Github</a> |

After I added these few lines of code, every webpages that the program have will have a Github logo on the footer like this :

My Feelings

This is an interesting program for me. I like to play Sudoku in my free time. I felt excited to make contribution to a program that I like. Also, this is the first time that I help fix an issue of a Java program. It gains me experience of working in a Java program on Github!

Link to the Repo I worked on: [SudokuBase]