Forem: Esther M

Grocery checklist app using localStorage

Esther M — Sun, 13 Dec 2020 20:38:14 +0000

When I make my list of grocery items I need to buy, I typically use the Notes app on my iPhone. I already use it to keep track of a bunch of other items and notes, so it's somewhat convenient, but it is somewhat annoying when I'm standing in the grocery store and deleting items one by one as I place them into my shopping cart.

Recently in my review of bootcamp materials, I've been covering localStorage, and I thought, why don't I create a grocery checklist for my local device? I could totally use it when I'm grocery shopping! I know there are other grocery shopping apps out there already, but hey, it never hurt to recreate something for good practice.

I wanted to start out with something simple — an app where users can enter and save items, and then delete them with a single tap.

About the App

The app is built using HTML, CSS and JavaScript. It saves items that a user enters to localStorage, so as long as the app is accessed from the same device the items were saved from (and the cache is not cleared), it'll retrieve them to display for the user to see.

DO YOU HAVE ANY TIPS?
I have found that this app works just fine with saving and retrieving data when I use it from my laptop. However, when I create a list from my iPhone, the data disappears when I close my browser. I'm not sure why this happens — does closing out a browser on my phone automatically clear the cache? Perhaps it's a setting on my phone? I would love to hear any tips if anyone thinks they know why.

Future Developments

Right now, this app is very simple, but I'd like to work on it further down the line to allow for grouping of items by category, and also add a 'recently removed items' section where I have the ability to quickly add back items at the simple click of a button.

Check out the current app here!
https://jungjungie.github.io/grocery-checklist/

Create a navbar with CSS flexbox

Esther M — Sun, 08 Nov 2020 21:19:36 +0000

What is CSS Flexbox?

Flexbox is a web layout model that allows you to create a responsive user interface, meaning that it can adapt to different screen sizes. It uses rows and columns to structure elements.

If you're creating a navbar from scratch, CSS flexbox can be a good option to try out.

HTML



<body>
    <!-- Navbar -->
    <header>
        <h1 id="nav-title">DEV.TO</h1>
        <nav>
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>

Here, our HTML code here uses an unordered list <ul> to list out our nav items. You can see that there's not much to our navbar just yet.

With CSS flexbox, we can format and make this much more appealing!

Quick Tip!

Before we jump into flexbox, a quick tip to format your unordered list. The CSS code below will organize your nav items into a row by using display: inline-block and take away those unnecessary bullet points with list-style: none.

CSS



header li {
    list-style: none;
    display: inline-block;
    padding: 0 20px;
}

Apply Flexbox to Your Navbar

To use flexbox, add the display: flex CSS property to an element. This should be applied to the parent element wrapped around whatever you are trying to structure. In our case, it's the <header>.

By default, flexbox will structure your elements into a row, but you can tell it to use columns by adding flex-direction: column. For our navbar, we'll use the default since we want it to spread horizontally across our page.

Now to align our items, we can start by shifting everything to the right. To do this, apply justify-content: flex-end to your header.

If you're doing this step by step, you may notice that this also pushes your <h1> title to the right. We can easily fix this by giving the <h1> a CSS property of margin-right: auto, which tells it to automatically fill in any empty space to the right of it.

And that's pretty much it! This should give you the basic layout to start off with for your navbar. Everything else is just adding other styling elements like margin, padding, colors, etc. to make it more visually appealing. See below for an example.

CSS



/* Global */
* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica;
}

/* Header */
header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 50px;
    box-shadow: 0 1px 8px #ddd;
}

#nav-title {
    margin-right: auto;
    font-size: 1.5em;
}

header li {
    list-style: none;
    display: inline-block;
    padding: 0 20px;
}

header a {
    text-decoration: none;
    color: #555;
    transition: all 0.3s ease 0s;
}

header a:hover {
    color: #b2dfdb;
}

If you want to dive deeper into flexbox and see what it can do, here's a great resource! https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Day 7 of #100DaysofCode

How to Change Background Opacity without Affecting Text

Esther M — Tue, 03 Nov 2020 20:51:09 +0000

CSS can be tricky, and at times, frustrating to work with. One of the things I had trouble figuring out was how to change the opacity of a background without it also affecting the opacity of the text it contained.

For instance, let's say you have a parent div wrapped around some text and you wanted to change the opacity of just the div. You'd think that it'd be something as simple as the below.

HTML

<div class="opacity">
    <p>Hello World!</p>
</div>

CSS

.opacity {
    background: #03acf0;
    opacity: 0.5;
}

However, if you've tried this, you probably found that it affects the opacity of whatever is nested within it as well. In this case, our text.

Well, here's a simple trick to help. There are other ways to work around this, but I've found this one to be the easiest.

Simply use rgba to define your background color and specify opacity with it at the same time by adjusting the last value, for alpha, in your rgba code.

For scaling, bringing the value closer to 0 increases transparency.

CSS

.opacity {
    background: rgba(3, 172, 240, 0.5);
}

To simplify your HTML, you don't even need the parent div around your block of text to do this. Another way is to add the opacity class to whatever element you are working with.

HTML

<p class="opacity">Hello World!</p>

CSS

.opacity {
    background: rgba(3, 172, 240, 0.5);
}

Day 2 #100daysofcode

My career change journey ...

Esther M — Mon, 02 Nov 2020 19:43:34 +0000

From the beginning.

Like many people, I've contemplated making a career change a couple times. Well, multiple times. I actually did make a career change once before when I decided that I'd had enough of the long, inconsistent hours working in hotels and was tired of the redundancy in my job. I knew I needed a change.

But what would I do? What could I do?

I contemplated a number of things, including coding. I had dabbled with HTML and CSS before when xanga was a big thing (does anyone even remember xanga?). But that was many, many years ago and I just didn't believe I had the brains or the skills to pursue it.

So I thought — well, I like training and developing people. The hotels I worked at had high turnover and I usually taught new hires the ropes. So I decided to pursue a degree in Human Resource Management, and I got a pretty good job coming out of it. I got my foot in the door as an admin and made my way up to specialist and then senior specialist over the course of 3 years. I had a pretty good trajectory ahead of me, and an even greater support system at my company.

But the thing is, I still wasn't sure if it was the right path for me. I realized I just didn't like discussing people and company talent all the time. It was draining for me, and I found myself wondering, what about me?

That brought me back to my dilemma... What the heck should I do with my life?

Making the jump.

Over the years, I shared my dilemma with my husband. Being in cyber security, he brought up hacking or coding from time to time. I mostly just brushed him off, but then I had the opportunity to work on some projects with websites in my job. I didn't necessarily code anything other than some light HTML and CSS, however it was enough to spark my interest again, and at some point I realized that I had more fun working on these projects than my actual job.

I went back and forth for months, telling myself, "Yes! You should totally do this! You just need to make the leap."

And then other times going back to "but... who am I kidding? I don't know the first thing about coding, and I can't just leave my job for something unknown."

It was a struggle against me and myself. I felt that coding was hovering over me like a cloud. I could see it, but I couldn't really reach it.

Luckily, my husband was persistent in his support and encouraged me that it was never too late to pursue anything. So, with a deep breath and a renewed sense of passion, I finally mustered up the guts to leave my job and enrolled in a coding bootcamp.

So now what?

Well, I came out of the bootcamp in one piece! I can't say I have a fabulous new job in coding yet, but it was a great experience and I learned much more within the 12-weeks than I could've tackled on my own.

I admit that since then, I've gone through my share of ups and downs. It's been a few months of job-searching with no light at the end of the tunnel, but I always knew that it would be challenging to break into a new field. There are many times when I read job descriptions - even for junior developer roles - and I feel I'm not qualified enough.

But everyone has to start somewhere, right? And all I can do is continue to build on the new skills that I've learned.

With that said, I'll be reviewing what I've already learned in addition to learning the basics of computer science. And to keep myself accountable, I'll post summaries of what I've reviewed/learned along the way.

If anyone else is at the beginning of their coding journey and needs an accountability buddy, feel free to reach out and connect!