Release 0.3, More Open Source

Release 0.3

As we progress through the world of open source and my course about open source, we have reached and completed another milestone of the course, which is Release 0.3. In this we were instructed to work on 2 PR's from a repo that you already experienced previously or a new one. So I have chosen the same one from last Release 0.2, The KEC Computer Club. KEC GITHUB.

What i did

As there was no open issues, i reached out to them if i can work on 2 issues which, can be considered as a continuation of what i have created for them in the previous release which was blog post page.
As Release 0.3 required minimum of 2 PR's i created 2 issues :

Creating better styling for blog post page Issue 1
Creating a sample Blog writing Interface Issue 2

Issue 1

In this i had a task to improvise the redirected page of the blog post, which include the whole content of the blog.
Previously it didn't had any styling which negatively contributed to the visual appealing of the website.
Screenshot of previous webpage:

What i did was, i created a new layout so that it can be used globally whenever they have a new blog post coming in. Which features the use of cards, and couple of styling to make it visually appealing to read and overall improve the clarity of the website.
Screenshot of updated page:

As for the PR status it is still pending for review, as this opensource is managed by some students they informed me that they need some extra time for review and updates, so my PR is still pending to be merged.

Issue 2

Now coming to issue 2, which included, introduced a new page which features a sample interface for the website to add blogs' as of now the website is still in development and they haven't implemented backend yet, So to give them a headstart i made a front end for the a blog writing interface it features:

A input area to add title to the blog
A text area to add the contents to the blog
A image upload area which is created with FileReader()
Image can be removed, if user wish too after uploading
A preview button which shows how the blog look after adding all the parts including a small preview of the image.

Screenshots of the page:

In this screenshot we can see the interface which consist of forms, in which title is an input area and content is a textarea. I also added an option to upload an image to the blog post, which also has the feature to remove and add again, if the user didn't like the image they choose at the first time.

Image upload is handled by:

// Handle image upload
    imageInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          imagePreview.src = e.target.result;
          imagePreview.style.display = 'block';
          previewImage.src = e.target.result;
          previewImage.style.display = 'block';
          removeImageBtn.style.display = 'inline-block';  
        };
        reader.readAsDataURL(file);
      }
    });

// Remove image
    removeImageBtn.addEventListener('click', () => {
      imagePreview.src = '';
      imagePreview.style.display = 'none';
      previewImage.src = '';
      previewImage.style.display = 'none';
      removeImageBtn.style.display = 'none';  
      imageInput.value = '';  
    });
  </script>

Also this page features an option to preview the blog post, which will show you title page and the preview of the image uploaded.

// Update title preview
    titleInput.addEventListener('input', () => {
      previewTitle.textContent = titleInput.value || 'Blog Title Preview';
    });

    // Update content preview
    contentInput.addEventListener('input', () => {
      previewContent.textContent = contentInput.value || 'Your blog content will appear here...';
    });
// Toggle Preview section
    previewBtn.addEventListener('click', () => {
      if (blogPreview.style.display === 'none') {
        blogPreview.style.display = 'block';  
        previewBtn.textContent = 'Hide Preview'; 
      } else {
        blogPreview.style.display = 'none';  
        previewBtn.textContent = 'Preview';  
      }
    });

You can see this in action in the below screenshots !

Like i said this PR is also pending to be reviewed, if i get any updates i will surely update it here along with their comments and changes they request.

Conclusion

After all, this was fun, and at the same time, it required time and communication with the repo owners. As I have mentioned in the previous releases, open source is a combination of people from around the world, so it is not expected to have them available any time at our convenience. Its assignment helped me learn more about open source and also the languages. At the end of the day, I am happy to host my contribution on the internet, and it may help others to use the website better.