MAKER(STEM) PORTFOLIO

OKAFOR CHIDIEBERE NELSON

In this document, I will exhaustively explain two significant STEM projects that I
have worked on in which I took on the role of a programmer. One of the projects
was done independently while the other project was done in a team.

VIDEO Before you proceed, please watch this 2-minute explainer

video:
LINK https://youtu.be/fQttUN3Wi7g?si=GN6Rtp2RgYl6pRdn

TECHNOLOGIES MENTIONED IN
THIS DOCUMENT OR IN THE VIDEO
 PROJECT ONE OVERVIEW
NAME: Wikinelson
LINK TO WIKINELSON: https://wiky-98wy.vercel.app/
MOTIVATION
I love seeking out means of expressing my interweaving passion for technology and
Physics. Could I possibly build something with my current level of programming skill
that will do just that? I scoured the internet for potential projects and found that
“Wikipedia” has an image of the moon(a connection to my passion for Physics). It was
inviting, so I decided to make my version of it. If I can get hold of its API(Application
Programmable Interface), I might be able to create a version that reflects that passion:
it would have a Physics-inspired UI(User Interface) design.

SOLUTION
Obtain the Wikipedia API. After several fruitless searches, I eventually found a free
Wikipedia API that only returns twenty items for each API request or call. I designed
the UI to house the earth and the moon in positions that will allow them to maintain
their motions along imaginary lines(which I did not code out because doing so will
make my program slow).

REASONS WHY I DID(ENJOYED DOING) THIS PROJECT

It portrayed my love for self-expression.
It served as a source of inspiration for my peers at school.
It allowed me to master the use of API.
 Wikinelson - a centralized wiki web app
(with day/night behaviour)

IDEATION PAPER PROTOTYPE

MOBILE AND DESKTOP VERSIONS FINAL LOOKS
JAVASCRIPT CODES FOR Wikinelson
 EXPLANATION OF CODE
LINE 1: Stores the Wikipedia API in a variable named “url.”
LINES 4-7: Select HTML elements to be automated with JavaScript(JS) and assign
them into different variables.
LINE 9: Selects the “moon icon” for night/day automation and stores it in a variable.
LINES 13-21: The code listens for when the form will be submitted, run the in-built
preventDefault() method(which stops the submission of the form and blocks the
browser from refreshing itself), runs a CSS “load animation” while waiting for the API
request to return, and then displays it if it returns a value(maximum of twenty items) or
asks the user to enter a valid search item(a real thing).
LINES 23-39: The “API fetch function” sends the API requests and retrieves its values
LINES 41-51: The functions arranges the retrieved values of the API request into
ordered answer cards based on their different properties such as pageid, title, et cetera
LINE 53: Selects and stores all the displayed answer card into a single variable
LINES 55-88: Highlights each answer cards that the mouse hovers above or
n the hands glides across depending on the whether it is night/day

PROJECT TIMELINE

Wikinelson

2021 2021 2021 2021

Conception Planning Execution Performance

I completed my JavaScript I came up with the plan I began writing the I completed my web app and
web programming lessons for what I wanted to code for my web app. tested it to make sure that it
through autodidacticism. build, drew the plan for was fully responsive in both
it, and set it to work. mobile and desktop screen
sizes.
 PROJECT TWO OVERVIEW
NAME:ARTSY
LINK TO ARTSY: http://artsy-lime.vercel.app/

PROBLEM
Gotten from a Figma Community that I belong to, the Artsy Challenge is a coding
challenge that explores the intricacies of React. It requires that participants build a
photography website named “Artsy,” using React. The website should have a checkout
page, a marketplace page, an auction page, and a cart. The Figma UI design file for the
website was provided by the Figma Community.

SOLUTION
I did not know much about programming with React. But, should I let a free
opportunity to collaborate and build pass me? No, I can substitute React with
JavaScript while taking my time to learn the technology(React). My friend and I were
able to compete in the challenge, coding our way through it with JavaScript.

REASONS WHY I DID(ENJOYED DOING) THIS PROJECT

It fostered my team player spirit.
It allowed me to tackle a real-world challenge.
It promoted international competition and insight from international peer
competitors.
It encouraged my friend and me to learn React(although we did not build it with
React).
ARTSY - A Vanilla JavaScript-powered Photography Website
JAVASCRIPT CODES FOR ARTSY
 EXPLANATION OF CODE
LINE 1: Runs the load loadProducts function which loops over the hard coded array of
images
LINES 3-13:Holds an array of images in a variable
LINES 15-19:Stores HTML elements to be automated with JS in a variable, assigns a
unique class name to the productLayout, and appends it to the productSection
LINES 24-35:Maps through the image array and arranges the images and their
informations into image cards which is then displayed whenever the browser loads
LINES 37: Selects and stores all the displayed answer card into a single variable
LINES 39-105: Runs a “forEacb” through the displayed answers cards and executes
the following miscellaneous function:
Displays a modal of any item that is clicked
Closes the open modal of an item if the “X” sign is clicked
Updates the quantity and price of an open modal if either the “+” or “-” sign is
clicked
LINES 108-139: Stores the “Add to Cart” function

PROJECT TIMELINE
ARTSY

11/2022 11/2022 12/2022 Now

Conception Planning Execution Performance

My friend discovered I met with my friend We wrote our code In progress - we began learning
the Artsy Challenge to discuss the for the challenge. Node.js and Express.js to build
and invited me to challenge and our our API from which to load our
work with him on it. strategy. customised images into the
website.