Forem: Allison O

BUILDING A FANCY CALCULATOR WITH JAVASCRIPT

Allison O — Mon, 13 Jun 2022 11:44:48 +0000

Thank you for visiting,

I hope you had a good weekend, mine wasn't. I intended to reach out to 50 companies with cold emails about how I would make a great web developer intern or full-time employee because I know I am ready to take my programming skills to the next level .... Haven't started yet but should be finished by the end of the week. Before I go back to my cold email template, let me share a few things I did with JavaScript this week.
Javascript is easy for most people, but for me, I'm taking it one step at a time. earlier this year, i created a funny calculator, see below. Initially, I was excited, but when I realized there were other ways to do it, the functionality was far better than what I had done in the beginning

With this code above i can only change the numbers in my VScode lol , no random numbers but the symbols(+,-,/,*) worked which i was excited for. See the result below

basic-calculator-mzallison.vercel.app

Funny yeah , However after watching so many youtube videos like you , i stumbled on the below calculator and decided to replicate it because it looked way better than what i had done in the past and i created the below and i felt fulfilled and asked for an extra caoffee at the cafe i was practicing this.

The difference between the first and second was CONDITIONAL STATEMENTS
In JavaScript we have the following conditional statements:

Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false.

Viola !! the result below. Practice make perfect

Lastly, you can switch from light to dark mode. I prefer Dark mode for all my Apps .
fancy-calculator.vercel.app
fancy-calculator-git-main-mzallison.vercel.app

Thank you very much for your attention!!!

FLEX BOX

Allison O — Sun, 15 May 2022 11:30:11 +0000

FURNITURE LANDING PAGE

Hello there,

Allison is here with another project!!💃🏽 . I think I just might be getting the hang of this writing business and I am loving every minute of it. Firstly, I don't think I've revealed much about myself, so let me start with what I do. I work for a film distribution company, so apparently I watch movies for a living 😌 while on the side learning Front-end development so I can later change careers or do both, but I doubt that will happen. My first step into the tech world has been overwhelming, but they say nothing good comes easy, so here I am doing my best to stay in the game.
.

I'm currently working on my third project using CSS flexbox. I honestly thought CSS would be easy since HTML was, but then I realized it's not just about 'beautification' but also responsiveness...WHEEW ...I wasn't prepared for Flex Box. While surfing the internet, I came across an article about an effective way to learn Flexbox

A BRIEF SUMMARY ON FLEX-BOX

The Flexible Box Layout Model (flexbox) is a layout model designed for one-dimensional content. It excels at taking a bunch of items which have different sizes, and returning the best layout for those items.

Flex layouts have the following features, which you will be able to explore in this guide.
They can display as a row, or a column.
They respect the writing mode of the document.
They are single line by default, but can be asked to wrap onto multiple lines.
Items in the layout can be visually reordered, away from their order in the DOM.
Space can be distributed inside the items, so they become bigger and smaller according to the space available in their parent.
Space can be distributed around the items and flex lines in a wrapped layout, using the Box Alignment properties.
The items themselves can be aligned on the cross axis.

FLEX-BOX ALLIGNMENT OVERVIEW

Flexbox brought with it a set of properties for aligning items and distributing space between items. These properties were so useful they have since been moved into their own specification, you'll encounter them in Grid Layout too. Here you can find out how they work when you are using flexbox.

The set of properties can be placed into two groups. Properties for space distribution, and properties for alignment. The properties which distribute space are:
justify-content: space distribution on the main axis.
align-content: space distribution on the cross axis.
place-content: a shorthand for setting both of the above properties.

The properties used for alignment in flex box:
align-self: aligns a single item on the cross axis
align-items: aligns all of the items as a group on the cross axis

https://web.dev/learn/css/flexbox/

I decided to try out the flex box knowledge with this minimalist one page site I found on Dribble and use it to experiment the knowledge I had acquired about them.
i started off with the navigation bar, and since i have done so many navbar, i picked one from one of my collections. i had a hard time organizing it and making it responsive, but with a few tutorials especially one from Kevin Powell, I managed to make it responsive.

https://www.youtube.com/watch?v=fm3dSg4cxRI&t=38s

Additionally, I have learned you should do more projects to improve your skills and there are many different paths you can take in web development. Here’s the finished product https://furni-landing-page.vercel.app/ the links in the navbar don’t go anywhere for now since it’s a demo page . When I've mastered more knowledge, I'll build an e-commerce site.

Sincerely, if you read to the end, thank you
All done folks, have a great day!
Kisses until next time😘.

TECH BLOGGER

Allison O — Sun, 15 May 2022 02:07:31 +0000

STAN SOCIAL

Hello there,

I'm almost convinced that blogging isn't for me, but I've come back because I want to prove my enemies wrong .

In today's post I am going to vent about a mini project I’ve thought about but I haven't decided exactly what the next steps should be to make this project a reality..

BRIEF SUMMARY
The purpose of my website is to help Social media influencers develop additional content so they can make more money. While I understand that growing a social media page takes creativity, dedication, determination, and consistency, why then keep it just a page? Outside of maximizing social media mentions for the brands you are affiliated with, Stan Social is also a tool for selling, networking, and other promotions.

We have a lot of social media platforms like;
1.Instagram
2.YouTube
3.Snap-chat
4.TikTok
5.Twitter

Some influencers become popular on these platforms if they have a certain amount of followers and views. Creators can earn revenue from on-demand videos and live stream feeds. They can even launch their own branded apps that can be viewed on Android, iOS, Apple TV, Roku, and Tizen. It's no secret that they are faced with the dilemma of how to do this while engaging their followers. Here is where Stan Social comes in. We connect you with experienced content writers and social media managers, allowing you to grow your brand through our platform.
We are able to do it at a discounted price , which is a win-win situation.Some may say that I could just hire someone to manage my Facebook page, but that isn't the same as what Stan Social will provide. Stan Social offers a number of perks without any underlying agenda.

DEPLOYMENT PROCESS
Although I know this project has more potential than I have presented to you, I need to rethink how to enhance the activities it encompasses.

Things that I have learnt building this project,
▶️ Good Folder structure for Projects
▶️ How to use J-query
▶️ creating inputs with icons inside
▶️ How to use font awesome icons
▶️ Use of scroll down effect
▶️ How to deploy from Git-hub to Vercel

https://stan-social.vercel.app/

It would be great to hear your suggestions!
That’s all Folks!❤️

Baby steps into Tech

Allison O — Sun, 17 Apr 2022 09:13:39 +0000

Hello there,

First, let me introduce myself. My name is Allison and my journey into TECH begins here as a Frontend Developer . i also want to simplify the process for people struggling with the basics.

MY FIRST STEPS

Over the last four years, I've worked in customer service in a variety of industries and realised that the typical product creation process between clients and developers was flawed. Often times, developers fail to communicate with clients throughout the development process, resulting in a final product which does not achieve the goal sought by the customer and end user.

As a result, I decided to pursue a completely different career path that emphasizes highly focused communication and transparent design patterns. In addition to working to craft applications according to the client's specifications, I provide daily updates to make certain the project aligns with the client's objectives. Ultimately, the right product will be delivered on time and within budget.

I started with HTML after watching so many youtube videos which was confusing at first because every body had different method and steps . Let me give a brief explanation of HTML.

HTML is the standard language that is used for creating web pages and web applications. Every time you access a website, a server sends an HTML file to your computer and your browser interprets and displays the information included in that file. In fact, all the information you are reading now is simply data that has been stored in an HTML file and sent to your browser.
Here’s the best thing about HTML – it’s a simple language to learn.

Most people can learn the basics of HTML in just a few hours, and with a solid HTML foundation, you can progress to more complex languages such as CSS and JavaScript.

What Is HTML?
HTML stands for HyperText Markup Language, which can be a confusing term for many beginners. The best way to explain HTML is to examine the meaning of each word.

HyperText refers to text that contains links to other texts. Every time you click on a highlighted or underlined link that takes you to another page, you are using hypertext. As more and more pages use hypertext to link to each other, a “web” of pages starts to form. This is where we get the term World Wide Web.

Markup refers to the special symbols or codes that are inserted into a document to tell the web browser how to display the document data. For example, markup code may tell the browser to display a phrase in bold or italic text, or may tell the browser which parts of the document are headings and which are paragraphs. HTML is just one of a number of languages that uses markup code.

Language refers to the idea that the code is standardized. Just like regular spoken languages, there are certain rules that everyone must follow when writing HTML. This is so that all browsers can understand and interpret the code. There are many different programming languages, and you may have heard of some of the popular ones such as Java, Python and Ruby. Each language has its own unique set of rules, and many languages can be used in combination with HTML to create amazing webpages and applications.
What Does HTML Code Look Like?

Basically, HTML code looks just like regular text. The most identifiable feature of HTML code is the use of angle brackets. These angle brackets enclose the markup code which tells the browser how to display the document data.
Here’s an example of some simple HTML code:

<!DOCTYPE html>

Page Title

This is a heading.

This is a paragraph.

If you save this code into a text file with the filename “test.html” and open it in your browser, it should display a page like this:

It’s not very exciting, but it’s a good example of a website in its simplest form. Even without any knowledge of HTML, you can probably understand a little bit about how HTML works by simply looking at the code above and comparing it to the image.

How Does HTML Relate To Other Programming Languages?
If you’ve done any research on web development and design, you’ve probably come across articles or guides that mention CSS and JavaScript.

HTML, CSS and JavaScript are the three main languages that are used to create most webpages. Each of the languages has a different function and each has different rules, but they all work together to give webpages content, design and functionality.

As i mentioned before, HTML is the foundation of any site. The HTML code contains the site’s basic structure and content, which includes all the text, links, tables, links to images and other such elements.

CSS (Cascading Style Sheets) is used to define the design of the page, including things like the size of each element and how it looks. With CSS, you can set things like the style of the font you are using, the background color of the page, and the width of the border around elements on the page.

JavaScript is a more complex language that is used to create interactive elements on your page. When you hover your mouse over an image on a website and the image morphs or changes, that’s JavaScript editing your original HTML code. When you click on a product on a shopping website and your shopping cart automatically updates, that’s JavaScript too.

CSS and JavaScript can add design and functionality to a site, but without HTML, you won’t have a site to begin with. In fact, most sites will still display HTML data even if the CSS and JavaScript code is broken.
One of the best things about learning how to write HTML code is that you don’t need to buy any special software to get started. You can write and edit HTML code in any regular text editor.

Windows users can write code using the Notepad app which comes pre-installed with all versions of the operating system. Mac users can write code using the OSX equivalent which is call TextEdit.

However, if you’re planning to do a lot of coding, it’s probably a good idea to download and install a text editor that is specifically designed for coding. These apps have various features and add-ons that help you keep your code clean and readable, and will allow you to code more efficiently.

Some popular features are highlighting different code elements, autocompletion of code, automatic syntax checking based on which programming language you are using, and multiple tabs for easy switching between documents. I use VSCODE but you can also use Sublime Text Editor or Atom .

MY FIRST HTML PROJECT
Here is the Demo link : how-to-make-tea-mzallison.vercel.app

I created this website during the CODE INSTITUTE bootcamp. It was quite simple and I enjoyed the experience. If you strive to become a programmer like me, you will have to work late nights and drink lots of coffee😉. For this project I used my code editor, updated on Github, and deployed using Vercel. I'll explain how I did this in my next write-up so you don't get confused.

Things that I have learnt building this project,
▶️ Good Folder structure for Projects
▶️ How to use font awesome and the onclick tag
▶️ How to list items
▶️ How to use font awesome icons
▶️ Use of hover effect
▶️ How to deploy from Github to Vercel

It would be great to hear your suggestions!
Thanks For Reading❤️