DEV Community: Meg

JavaScript Ternary Operator

Meg — Sat, 08 Nov 2025 21:04:24 +0000

One of my favorite parts of the JavaScript language is the JavaScript Ternary Operator.

At heart, it’s a succinct, clean way of writing an if/else statement.

You start by asking a question,
"Is this item a circle?"

If the item is a circle, it takes path one
If the item is not a circle, it takes path two

You would write it in JavaScript like this:

circle ? true : false

A ternary operator can also be stacked or ‘nested’.

In this example the item we’ll use is a triangle.

You would use the same first condition:

circle ? true : _____

And replace the false condition with a second ternary:

triangle ? true : false

So a nested ternary would be:

circle ? true : triangle ? true : false

You can stack as many conditions as you like and adjust the formatting to visually appear like a switch statement:

circle ?
true : triangle ?
true : square ?
true : rectangle ?

You are also able to return with a ternary operator by listing "return" before your condition:

return circle ? true : false

Unpacking this statement, it should read:
Is the item a circle?
If the item is a circle, return true
If the item is not a circle, return false

By using "return" with a ternary you must always return from either condition. It's not able to be used in instances where you only want to return on true, but not false, and vice versa.

All in all, I hope this helped understand the JavaScript Ternary Operator a bit better and why I find it so visually clean and fun to use.

Avocado

Meg — Tue, 14 Mar 2023 21:11:32 +0000

Concept:

Our group decided early on that we liked the idea of doing a food related app, an ordering, back of house, reporting tool that could be used by a customer to order food, but also by the restaurant to get the food ready, and the owner to review revenue and edit menu information. Our idea was to create an app similar to Toast, so we decided to call our app "Avocado".

Team Roles:

Corey set up our Supabase schema, our initial routes and multiple table backend routes, connecting our backend and frontend servers and creating the reporting system for the back-of-house operation page.

Peter designed our brand identity and styling, creating the restaurant logos and layout with Adobe Illustrator, and implementing the menu, cart, and order confirmation pages as well as their frontend Supabase routes.

Jaye was our project manager and styling TailwindCSS specialist, leading our multiple daily standups, acting as our instructor liaison, creating our mockup flow chart in Figma and database schema in DB designer, as well as managing our Github project tracking page, setting up our Supabase storage, and deploying our project front and back ends on Render.

Meg designed the login, signup, and dashboard logic as well as the reducers slice for our Redux state, implementing state persist, our front-end routes and state logic queries, and creating our reporting in Plotly to showcase database statistics.

Blockers:

Although choosing to use Supabase allowed us to easily authenticate and grab our token to set into state, we later discovered Supabase automatically set user emails to lowercase when they were put in the authentication table, which caused an issue when we tried to query them. Other blockers were how Supabase handled image storage, and its timing delay of returning data that generated the need to conditionally render many of our designs.

Final Thoughts:

In total, our project included React, Redux, JavaScript, Supabase, Plotly, Toastify, TailwindCSS, and State Persist - many of which were used for the first time by at least one person in our group. Overall, our project definitely pushed us to learn new tools and technologies and we are proud to present our food service app, Avocado!

Project Repo - Frontend
Project Repo - Backend
Project Site
Project Walkthrough

Dalle

Meg — Wed, 22 Feb 2023 16:54:47 +0000

I started out on my React project with a few ideas in mind. I knew I wanted to create an art showroom with art created by DALL·E so after narrowing down my scope, I decided to not only use the required React and Redux to create my project, but also Tailwind and TypeScript.

I pushed a bit further and decided to use Jira to organize myself and Figma to map my flow and edit images, and because CSS is my least favorite part of programming, similar to my frontend project I decided to do it first.

Once the project was officially given out I researched up and coming 2023 colors and happened to find a picture I responded to:

From there I visited Canva to create my 4-pan color palette, while still having a few extras I liked left over:

That evening I set up my project, creating a base structure and installing everything I planned to use. The next morning on our first day of work I separated out all the aspects of the site into separate JIRA tickets. This helped me stay organized and cut down on the bevy of open browser windows I’m known for.

Although I created my navbar first from several different tutorials, I quickly discovered my fancy navbar did not play well with having a cart amount bubble attached to it. Not having a full tutorial for what I wanted to do became a blocker, so after creating my background image via DALL*E and struggling to have it visually appear on the front page as I needed, I started my search for a modern tailwind react e-commerce design while in the meantime creating all the art shown on the project page via DALL*E.

After finding a react tailwind tutorial that I liked (which unfortunately did not use Redux or TypeScript) I finally started heading towards having a design with pieces which worked well together.

Because the tutorial I'd chosen used Context and I was using Redux, I actually got my logic working far ahead of finishing the styling since I used state to hold my cart, data, product information, and whether my sidebar cart was open or not, and used dispatch to call for the data with the reducer functions to add/remove/clear, etc.

I also ended up being able to cut numerous "pages" after creating a Layout component, which held my header, sidebar, and footer and let me sandwich any applicable children content to create the “page” I needed.

Because I'd chosen to use TypeScript I also created interfaces I kept in the slice, and made sure all my functions were typed. Since I'm used to writing in C++, typing doesn't feel odd to me, however Typescript is different enough that it made it interesting.

Overall, I am extremely proud of my final product, and as the project prompt requested, it is "the prettiest application [ I ] have ever made".

Video Walkthrough
Project Site
Project Repo

~~VOTE!~

Meg — Sat, 28 Jan 2023 18:05:43 +0000

We started out with our backend project by deciding we would choose an overarching idea that we could create under. Peter liked the idea of creating a voting site/app where you could cast your vote for an elected official and I liked the idea of putting a silly spin on it, noting that there were towns in the US with a mayor who was a dog.

From there we traced out the scope, detailing all the pages we’d like to create and the information we’d like populated. I noted down our tables and Peter created our schema with DB Designer. Once our idea was approved, Peter chose our site colors and created site mock ups with Adobe Illustrator Xd. These mock ups were integral in helping to visualize our pages throughout the project and from there I began creating our database with sequelize and Elephant sql, while Peter created our EJS files once I’d outlined the routes.

For much of the project we worked in tandem, making decisions on logic and design collaboratively, pooling resources via Zoom when we needed to make changes to EJS and/or new routes.

As our deadline neared we agreed to focus on CRUD and the project requirements such as bcrypt, authentication, and security - cutting extra pages and ideas that we liked but that could not be executed in the time allowed.

Given more time, we likely would have created a fourth table to manage votes, added in complexity such as the admin drop downs only containing positions already included within the table, disabling buttons, and adding in a printable “I voted” sticker. However overall are pleased with the final product, our voting app, Vote!

[Project Repo](https://github.com/Meg-Div/BackendProject) [Peter's Github](https://github.com/peterriesing) & [Meg's Github](https://github.com/Meg-Div)

Hash Maps

Meg — Thu, 19 Jan 2023 23:14:31 +0000

It’s not really a secret that I love using hash maps, and one of my goals this week was to teach myself how to use them in Python.

Essentially, a hash map is a data structure has key/value pairs. In both Javascript and Python, to create a hash map you would create an empty object like so:
obj = {}

In JavaScript to check if your object contains an element you would say:
if (obj[elem])

But in Python, you have to check for what’s not there first, so it would be:
if num not in obj:

In both languages you increment obj[elem], marking it = 1 if it wasn’t there before, or +=1 if it was.

This creates an object which holds a key that corresponds to your array or string element, and a value that is equal to the number of times that value occurs.

When I came upon today’s algorithm exercise: “Given an array of integers, where all elements but one occur twice, find the unique element...” I knew immediately I would use a hash map.

To me, any algorithm that questions instances for unknown multiple elements = hash map. I love them because it’s a simple piece of code that’s easy to remember under pressure and can be utilized to solve many different algorithms.

Once I created my hash map like the above, I looked into ways to iterate over my obj in a one liner and came up with next(). Next() returns the next item of an iterator and when given an if statement made it so I could return the unique (single) element that had a value of 1:
return next(num for num in a if obj[num] == 1)

My final code is below. I created an object, iterated through the input array, and added in a new key/value pair or updated the value in my object. Then I iterated through it again to return the key for which the value was equal to 1:

obj = {} for num in a: if num not in obj: obj[num] = 1 else: obj[num] += 1 return next(num for num in a if obj[num] == 1)

Plus Minus

Meg — Wed, 18 Jan 2023 22:47:59 +0000

Although I feel more comfortable coding in C++ and JavaScript, I've been brushing up on my Python for interview practice. The below is a walk though of how I solved the Plus Minus problem, then refactored my original answer.

The problem:
"Given an array of integers, calculate the ratios of its elements that are positive, negative, and zero. Print the decimal value of each fraction on a new line with 6 places after the decimal."

How I solved it (pseudo code):

Input: Array
Output: Decimal

What I'll need:

Because our input is an array I will either need a loop or a method that iterates through that loop.
I’ll have to divide by the total number of items in the array, so I'll need the array length.
Finally I'll need to keep a tally of how many elements are in each bucket.

I’m sure I could do this with a filter, but I’m going to smash and grab it to start so I'm going to use a for loop, use len() to grab the array length and I'll create buckets for negatives, positives, and zeros.

From there I'll use several if statements to check to see if the item falls under certain conditions, and if it does, the corresponding bucket will be incremented. All three buckets will then be printed divided by the length of the original array.

The code:
neg = 0 pos = 0 zero = 0 length = len(arr) for item in arr: if item < 0: neg+=1 if item == 0: zero+=1 if item > 0: pos+=1 print(pos/length) print(neg/length) print(zero/length)

Refactoring:

Once I pressed “run code” and verified my code worked I went back and researched how to use filter for Python.

Looking up filter I found I could use it like so to check to see if the item (x) is larger than 0 and thus positive:
filter(lambda x: x > 0, arr)

The filter method returns an array so I need to chain it with list to print it out: list(filter(lambda x: x > 0, arr))

From there I can chain it to len() to get the length or size of that array:
len(list(filter(lambda x: x > 0, arr)))

The length will directly correlate to the number of items that are positive, negative, or zero.

From there I could divide the length of my filtered array by len(arr), the size of the original array, to print out the decimal value of each fraction.

My final code:

print(len(list(filter(lambda x: x > 0, arr)))/len(arr)) print(len(list(filter(lambda x: x < 0, arr)))/len(arr)) print(len(list(filter(lambda x: x == 0, arr)))/len(arr))

It's A Circus

Meg — Fri, 06 Jan 2023 15:27:17 +0000

This project was unusual in that I decided I would style it first and then write the logic for it.

I began by walking through a Tailwind course over the holiday break and found I enjoyed using their shortcuts to make mobile responsive elements. Having everything on one page so I could visualize what it would look like as I created it went a long way towards preventing any frustration with CSS.

Once I had a working page I could pull bits and pieces from, I went back to my approved idea. I’d chosen several APIs that didn’t require an API key and settled on a simple concept I knew I could execute after the APIs brought to mind a big top circus “guess your age/weight/name” game.

Using the Tailwind course as a base allowed me to show/hide elements and update the class name to change the styling instead of hopping from html to html page when I wanted something changed. In the end, the most challenging part of the project was the creation of two side by side buttons with links in JavaScript, and even though they don’t do exactly what I’d envisioned, I spent so much time on them I reworked my idea just so could keep them.

Although I ended up with seven HTML pages (two which gave fun facts from a number), after uploading to GitHub an odd bug showed up where the innterText didn't update on those two pages. It would be visible through LiveServer, but not Replit or Pages so I ended up pivoting and removing both.

Since all my code was based on the same general structure, I just shuffled the fortune teller section from one function to another, removed the two pages, and it worked on the first try.

Looking back, choosing to use Tailwind, key-free APIs, and an un-obscure theme at the beginning saved me time and headaches with styling and logic. The more projects I do the more I understand how important it is to spend time on editing your idea, then confirming your data, before ever sitting down to code.

The code:
https://github.com/Meg-Div/ItsACircus

Play it:
https://meg-div.github.io/ItsACircus

Magic 8 Ball

Meg — Tue, 27 Dec 2022 17:25:09 +0000

Magic 8 Ball originally was a class project from my most recent Summer course, however the professor required that we not post that code anywhere, so I’ve been refactoring it so it doesn’t match what we originally did, while staying true to the Magic 8 Ball idea.

I started out by searching for the possible options for a real Magic 8 Ball, cleared out the array and added them in. From there I updated the class private variables to remove unneeded variables, and set the default constructor to be empty.

I’ve been working on sticking to the DRY method, “Don’t Repeat Yourself”, so I moved the “checking” code (which evaluates the input by capitalizing and comparing it) into its own function. I also updated the main driver code so that the four other functions call each other, removing the need for a while loop. After the first shake is completed, the three other functions bounce from one to another while the user wants to continue shaking the Magic 8 Ball. Once the user inputs N, the driver code ends.

Wrapping up editing the small project by updating my Class UML, I realized that although I haven’t been coding in C++ since moving on from my most recent college Computer Science course, it really is like riding a bike and comes right back to me when I hop back into it. All in all, I had fun with the original project and enjoyed refactoring this very small game so I hope you enjoy!

Play it: https://replit.com/@Meg-Div/Magic-8-Ball#main.cpp

The Code: https://github.com/Meg-Div/DigitalCraftsProjects/tree/main/Magic8Ball

A question of FizzBuzz

Meg — Wed, 21 Dec 2022 04:06:54 +0000

Today in class we were talking about the FizzBuzz question and if it can be solved with no conditionals or for loops.

So in C++ there’s something called goto, which acts like a loop without actually being one. If you look at the documentation for it, Dijkstra (of shortest path algorithm) wrote an essay about it titled “Goto Considered Harmful”. Which should really tell you enough about why you shouldn’t use it. But for funsies I did:

To be honest, most people start solving this problem with an if/else statement and a loop. So switching to JavaScript I did just that.

From there I decided to refractor it to a ternary because I love me some nested ternary. It makes most people’s eyes cross, but there’s something about nested ternary that when formatted correctly, looks so effortlessly clean.

Moving on, I went ahead and researched what other people did to try and solve the algorithm without if/else statements. Quite honestly in my previous FizzBuzz solves I'd never gone that far down the rabbit hole so I started off with a Medium article by Michele Riva, and ended up at a Dev.to article by Keff.

Looking through the examples opened my mind to how I might get around needing if/else or || and && to check each element. I blatantly stole having three checks in separate functions, but then researched using replace() with RegEx. And although it seems like you can do it, I wasn’t able to push it through, mores the pity.

From there I switched to finding the index so I could see about replacing the element. And that was when I stumbled on the MDN documentation for findIndex();

I had never used findIndex() with a function inside of it before. So I paired it with splice() and tested it out - and it worked.

My solution:

Three separate functions checking to see if the element is divisible by 3, 5, or 15.
Creates an array filled with ascending elements 0 through N.
Removes the zero element with shift().
Runs a for loop to find the index of each element that is divisible by 3, 5, or 15 using findIndex().
Uses splice() to remove it and replace each element with “FizzBuzz”, “Fizz” or “Buzz”.

After confirming by comparing it against my other previous solves I was left with the same feeling I get when I do something totally random to solve a problem. “It works!... But why would you ever do it that way.”

So yes, FizzBuzz with no if/else. But why would you ever do it that way.

Forever 21

Meg — Fri, 16 Dec 2022 22:50:03 +0000

This week in class we worked through creating a JavaScript Blackjack game.

Given starter code, our goal was to create logic that followed the basic rules of the game Blackjack:

Player or Dealer wins at 21 or whomever is closer without going over 21.
Dealer stands after 17.
An Ace (11) can also be worth 1.
Cards aren’t duplicated unless multiple decks are used.

I set some stretch goals for myself to disable buttons that weren’t needed, such as disabling Hit and Stand until Deal was clicked, disabling Deal after one click, and disabling Hit after Stand was clicked.

I also wanted to list the total, show a “You Won/Lost” message, and flip the Dealer’s cards over at the end of the game.

I started out feeling comfortable dropping into someone else’s code and began just console logging the object to see what was being produced. From there I chose a simple shuffle algorithm to shuffle the created deck and and moved on to creating a function that would create and append the card element, making one for the Player and one for the Dealer, deleting any dealt cards from the deck after they were appended.

Moving on, I created the logic for the three existing buttons, learning how to disable and re-enable them, and then added in another button right below them to refresh the page and start a new game.

From there I worked on the logic that was run by clicking the buttons. On Deal I would call both element creation functions twice. On Hit, I would call both functions once and on Stand I would call only the Dealer’s function.

Additionally, because I wanted to turn off certain buttons in certain card total situations and needed to add in logic for if the Dealer reached 17, I also needed to create a counting function to update the Player and Dealer totals after each click.

My counting function tracked the current Player/Dealer total by reducing the two global arrays that each held how much each card in their hand was worth and from there I created four if/else sections to handle the different paths. One handled anyone at 21, one recursively handled going over 21 but having an ace, one handled if either the Player or Dealer went bust, and the last one handled if the Dealer hit 17 and the Player hit Stand.

Consequently, each resulting section would update the inner text to include the final Player total and either a win or lost statement. They also disabled the buttons that were not needed in each situation and once the game was over, all the Dealer’s cards were flipped over and their total was revealed.

This was done through a suggestion from our cohort teacher, letting the CSS class content style supersede any src set to the element until that class's style was removed, revealing its underlying src.

Overall, I had fun designing the logic for this game and working through accounting for each game path possibility.

If you'd like to play it:
https://meg-div.github.io/blackjack/

Here's the code:
https://github.com/Meg-Div/blackjack

You Can Count On Me

Meg — Sat, 10 Dec 2022 01:28:03 +0000

Yesterday during class we were set a task to create a calculator.

It’s been about 2 years since I did anything with event listeners but I love logic, so I figured I’d enjoy working through it.

I created the buttons, elements, and was then distracted by some fun code that changed the color of the background with a click. Then after a good night’s sleep I was finally able to traverse through my saved clicks and calculate for two numbers and an operator. Yay!

My next issue was crafting logic to handle double digit or longer numbers. I solved this by traversing my saved clicks and creating a stoplight that either concated the additional numbers into one index or didn’t.

The next problem was multiple operators and thus multiple calculations. After my original result from the first three clicks (eg 8x8) I ended up then traversing by twos, starting one index after I ended (index 4) that way I could always look back and use the previous operator (index) with my current number.

I considered writing logic alerting for multiple operators at once, and although I did alert if first click was with an operator, I left the rest to sort themselves out - just like any normal calculator you’d sat on.

The brief asked for console logs of the numbers (and if you’d like to check the math, they’re still there) but I decided to update the welcome message innertext to the calculated total. It also includes a tada emoji for funsies.

All in all it was a fun challenge that pushed me to go farther in my use of JS and CSS.

If you'd like to use it here's the Replit:
https://replit.com/@Meg-Div/Calculator#calculator.js

Here's the code: https://github.com/Meg-Div/DigitalCraftsProjects/tree/main/calculator

One day code challenge

Meg — Sat, 03 Dec 2022 17:51:42 +0000

I decided to set myself a one day code challenge to see if I could re-create a game and chose Quiddler, which is one of my all time favorite word games.

If you’d like to read about it, here’s the wiki page: https://en.wikipedia.org/wiki/Quiddler

I decided I wanted a shorter game for my version, since there could be up to ten copies of the same card in the original card game and also got rid of the cards with two letters on them, such as “er” along any rules around additional players since my version would be single player.

I settled on 10 rounds, with an automatic 50 point bonus if you used all the letters in your hand. You start with one vowel, one consonant, and one random card. The random cards are twice as likely to be a consonant over a vowel, but are entirely random and you receive a new one each turn.

By far the largest issue I ran into was that Python didn’t seem to have an importable complete English dictionary. The closest I could find, Enchant, did not work on my version of VS Code but did work on Replit (after a 10 second updating delay).

Is Enchant a complete dictionary? No, words like “fake” and “mutt” don’t seem to be recognized, but in testing it, enough words were accepted that I continued on. The final product is a short spelling game I hope you enjoy.

Link to code: https://github.com/Meg-Div/DigitalCraftsProjects/tree/main/spelling-game

Link to game: https://replit.com/@Meg-Div/quiddler#main.py