Intro

Education is the key to success in life, and teachers make a lasting impact in the lives of their students. - Solomon Ortiz
NAMIAS SAKALAM

This is my Performance Task 1 & 2 in Computer Programming and Computer System Servicing on 4th Quarter.


"A penny saved is a penny earned," the well-known quote by Ben Franklin, is an expression I have never quite understood, because to me it seems that any penny—whether saved or spent—is still earned no matter what is done with it. My earliest memories of earning and spending money are when I was ten years old when I would sell Dixie cups of too-sweet lemonade and bags of salty popcorn to the neighborhood kids. From that early age, I learned the importance of money management and the math skills involved. I learned that there were four quarters in a dollar, and if I bought a non-food item—like a handful of balloons—that I was going to need to come up with six cents for every dollar I spent. I also knew that Kool-Aid packets were 25 cents each or that I could save money and get five of them for a dollar. Today, however, money management involves knowing more than which combinations of 10-cent, five-cent, and one-penny candies I can get for a dollar. Proper money management today involves knowing interest rates, balancing checkbooks, paying taxes, estimating my paycheck, and budgeting to make ends meet from month-to-month.

In development of this websites I understand that programming can be hard and mind-boggling but I also learned many techniques on developing a website. Still in the end insted of giving up I came up with the idea of surpasing my biggest insecuirity and proceed to go forward way beyong my imagination.

About

picture of me

This is for the Performance task 1 & 2 for computer programming and computer system servicing in 4th quarter 2nd semester at YASC.
The main purpose of this webpage is to highlight the websites I made from March 1 to March 29 2021 some of the website are "over engineered" because I made them have too many features than necessary for an online shopping website its was unnecessarily complex or inefficient at the end but it was an successful training project as a student.
The development and its process are such a mystery at first but now I can keep up and manage to add more features to the website although i still have many things to learn like other programming languages and data structures and varous other stuff this project was an great headstart.

Website

This is my Performance Task 1 & 2 in Computer Programming and Computer System Servicing for 4th Quarter 2nd semester
Deadline: March 25, 2021


First Work: Cream.py
I made this website with a help on Github for the layout of this website here's the link
Online Shopping Website The hardest part of this website is the cart.js. I wanted it to have a delete function yet I still don't have a much progress about it.
This is the code:
delete() {
 if (event.target.classList == "product-box__btn--delete") {
  let mainElement = event.target.parentNode.parentNode
  mainElement.classList.add('delete')
  setTimeout(() => {
   mainElement.remove();
   cart.price();
  }, 900);
 }
},
Second Work: Namias's Computer Parts Shop
This probably the most conveneint website I made. It's simple yet pleasing to look and it has a filter element which is conveneint to use. I can rate this website 9/10 personally. Also, here's the link if you wanna see Click here
Computer Parts Store [Namias]
const filter = {
 filterAction() {
  document.querySelectorAll(".product-box__item").forEach((item) => {
   let categoryAtribut = item.getAttribute("data-category");
   let priceAtribut = Number(item.getAttribute("value"));

   if (
    (filter.category() == categoryAtribut || filter.category() == "all") &&
    (filter.price() >= priceAtribut || filter.price() == "0")
   ) {
     item.style.display = "flex";
   } else {
     item.style.display = "none";
   }
  });
 },

 price() {
  let priceValue = document.querySelector(".price-value__item");
  priceValue.innerHTML = document.querySelector("[data-filter]").value;

  return document.querySelector("[data-filter]").value;
 },

 category() {
  let radio = document.querySelectorAll(".category-control");
  for (const item of radio) {
   if (item.checked) {
    return item.getAttribute("data-value-category");
   }
  }
 },

 checkAtributeToggle() {
  document.querySelector(".select-control").addEventListener("click", () => {
   document.querySelectorAll(".category-control").forEach((item) => {
    item.removeAttribute("checked");
   });

   if (event.target.classList == "category-control") {
    event.target.setAttribute("checked", "");
   } else {
    event.stopImmediatePropagation();
   }
  });
 },
};

filter.checkAtributeToggle();

document
 .querySelector(".select-control")
 .addEventListener("click", filter.filterAction);

document
 .querySelector(".price-control")
 .addEventListener("change", filter.filterAction);
Third Work: Namias, Lazada clone website
A website semi-directly connected to the Lazada Online Shopping website and most of the function are on lazada but it represented on my website. Wanna see the link? Click here
Presentation Lazada clone Presentation Lazada clone Presentation Lazada clone Presentation Lazada clone Forth Work: O-Shoppy
This website is still in development, theres no add to cart function and the sign in button dont work but im sure once its done it will be a proper site for for shopping the design are good. Github link
Presentation Lazada clone Presentation Lazada clone Fifth Work: Tera
Tera, It is an Online Grocery Shopping web application developed using HTML, CSS, Bootstrap and JavaScript. It is completely dynamic in nature. Items can be added into cart in any quantity and then total bill is generated. User can like the item, add it to favourites and wishlist as well. This website is still in development theres no significant about it, but once we add the neccesary function and login/ sing up form it will become a good website, its disaponting that my work cannot be finshed due to limited time and too much work on other subject. Github link
Presentation Tera Presentation Tera

Elements

Text

This is bold and this is strong. This is italic and this is emphasized. This is superscript text and this is subscript text. This is underlined and this is code: for (;;) { ... }. Finally, this is a link.


Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Blockquote

Education is the key to success in life, and teachers make a lasting impact in the lives of their students. - Solomon Ortiz

Preformatted

i = 0;

while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}

print 'It took ' + i + ' iterations to sort the deck.';

Lists

Unordered

  • First Unordered.
  • Second Unordered.
  • Third Unordered.

Alternate

  • First Alternate.
  • Second Alternate.
  • Third Alternate.

Ordered

  1. First Ordered.
  2. Second Ordered.
  3. Third Ordered.
  4. Forth Ordered.
  5. Fifth Ordered.

Icons

Actions

Table

Default

Name Description Price
Item One Ante turpis integer aliquet porttitor. 29.99
Item Two Vis ac commodo adipiscing arcu aliquet. 19.99
Item Three Morbi faucibus arcu accumsan lorem. 29.99
Item Four Vitae integer tempus condimentum. 19.99
Item Five Ante turpis integer aliquet porttitor. 29.99
100.00

Alternate

Name Description Price
Item One Ante turpis integer aliquet porttitor. 29.99
Item Two Vis ac commodo adipiscing arcu aliquet. 19.99
Item Three Morbi faucibus arcu accumsan lorem. 29.99
Item Four Vitae integer tempus condimentum. 19.99
Item Five Ante turpis integer aliquet porttitor. 29.99
100.00

Buttons

  • Disabled
  • Disabled

Form