Photo by Maxime Horlaville on Unsplash

A Phase-1 student at Flatiron School 😄

Hello everyone, my name is Waqas Anjum and I am a full time software engineering student here at Flatiron school! The bootcamp is 15 weeks long and teaches full stack software engineering from scratch! I am currently at the end of my first phase and I am so humbled to know the skill-sets I have gained in the last 3 weeks. In this short blog I will discuss my very first portfolio project made from technologies that I have recently learned which are Html, Css, and Javascript.

As project week began everyone in our class was handed a rubric which consisted of the core deliverables our project must have in order to move to the next phase. Some of these items were pulling information from an API, using 3 event listeners, DOM manipulation & lastly using array iteration methods as well.

I had the wonderful opportunity to work with a classmate on this project as well & in our initial discussions we thought of the various api’s that we can work with & through our common interest of anime we decided on an api made up of several different popular animes. The project that we had initially envisioned was an anime quiz which prompted users to answer a set of questions & test their knowledge on various animes. As we began working on our project we realized one vital key- the API where we were pulling our information from was more of anime facts rather than questions!

Unfortunately this led us to completely pivot our current project and think of new ways we can use the information at hand. We decided on making an animes fact generator instead!

Below Is where I did my initial fetch request and passed in a parameter that would target a drop down menu that would display all facts of any anime clicked.

Here is where I did my fetch request and included it in my function!

I am also extremely proud that I was able to make another button element which on click was able to generate a random fact each time the button was clicked. It did take me a while but by creating another function that separated my functionality a little & tying it together to another click function, I was fortunately able to make this happen!

Here is a snippet of some of the code that took care of this for me 😁.

With two beautiful functionalities, my partner & I decided that we will also work on a comment box, where users can input comments upon the readings of these new facts. Below is a snippet of the code that we created in order to achieve this result.

Although this is still miles away from being a completely full stack application, I am extremely satisfied of how far i’ve come in only a matter of 3 weeks. I am very excited for my journey ahead and hope to add more functionality as I progress to learn new technologies as-well as implementing it on current & future projects alike.

Thank you all for reading, I hope you all have a great day or night!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Running Flutter Apps on Ubuntu Core

Calling All Lenders — Try Out PembRock’s Lending Functionality on the Testnet

Speeding up Docker builds in CI

Offline Web Apps: Using Local Storage and Service Workers.

Think About Your Audience: Dune

Adding one to a very large number!

Why it is important to launch your Restaurant based mobile application

How to learn programming for beginners?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Waqas Anjum

Waqas Anjum

More from Medium

This is how I would explain higher-order array methods to a 5 year old

An Introduction to Fetch()

So I Started A Webpage.

How a College student who is Full-stack Web developer spends their whole day