DEV Community: Jonathan Cohen

Match made in Python.

Jonathan Cohen — Mon, 23 Aug 2021 23:02:12 +0000

This week in python, I made a "Love Calculator". The program takes the input of two names and counts the amount of times the letters T,R,U,E,L,O,V, and E appear in both names. TRUE will add up to one score and LOVE will add up to another. At this point we want to combine the two digits together to make a larger number. An example could be if both name inputs amount to 5 for true and 9 for love the score together would become 59.

The first thing needed is to use the input functions for both names. We have them set to variables of name1 and name2. After the user inputs the names, the names will then be set to the variables rather than the input method expecting some sort of input on the users behalf.

print("Welcome to the Love Calculator!")
name1 = input("What is your name? \n")
name2 = input("What is their name? \n")

One way to cut down on a few lines of code came from the idea of concatenating both names into a combined string. from there, we used the lower() function to turn all the letters in the string into lowercase letters.

combined_str = name1 + name2
combined_str_lwr = combined_str.lower()

After this line we then begin to count the times each letter appears in the string using the count() method on the string. The function can take up to three arguments, but in this case we only want to check for one letter at a time which results in the count method being used 8 times against the combined string also setting them to their own individual variable. An example would be to find all the 't's in the combined string we would set the count of the combined string with and argument of the letter 't' to the variable of t_count. This would happen for every letter in the phrase TRUELOVE.

t_count = combined_str_lwr.count("t")
r_count = combined_str_lwr.count("r")
u_count = combined_str_lwr.count("u")
e_count = combined_str_lwr.count("e")

true = t_count + r_count + u_count + e_count

l_count = combined_str_lwr.count("l")
o_count = combined_str_lwr.count("o")
v_count = combined_str_lwr.count("v")
e_count = combined_str_lwr.count("e")

love = l_count + o_count + v_count + e_count

We also will add up the totals for each word. So true would have a count equal to an integer and the same for the variable love.

score = f"{true}{love}"
scr_int = int(score)

if scr_int < 10 or scr_int > 90:
  print(f"Your score is {scr_int}, you go together like coke and mentos.")
elif scr_int > 40 and scr_int < 50:
  print(f"Your score is {scr_int}, you are alright together.")
else:
  print(f"Your score is {scr_int}.")

Using an f string we combine true love as a string which will result in our score. Afterwards, we turn that score into a variable. That integer is then used in our if, else conditional statements that will print out a certain message to the user depending on which of the conditionals returns true. This was a pretty fun project to complete. While I'm going through the content of this udemy course slowly, I'm still working through it and constantly learning something new. I can't wait to get even deeper with this stuff.

Take time to learn something new this week and as always...Happy Coding!

Update on My Python Journey

Jonathan Cohen — Wed, 18 Aug 2021 23:06:33 +0000

This entry isn't a long one. I've been steady going along with the python udemy course and came across something very small, but so helpful. One of the recent projects I've worked on was a tip calculator. The program receives the input of the price, the options to tip 10, 12 or even 15 percent and then asks how may ways would you want to split the bill. I won't go into the details of it in this post, but there is a good bit of math that goes on with this program using integers and floats. While it seems these numbers should be able to be added, that isn't the case. Attempting to mathematically combine the two data types will result in an error.

So because of this, inputs that the user may put in have to be converted as the program runs to successfully get the output. I was able to successfully complete this project through the use of the type() function. A simple but helpful function, type() gives us the information of what the data type of that piece of information may be, allowing the programmer to be able to convert the information to a more useful data type that will allow for the program to run successfully.

Since learning about this function, I've been using is so much more along with the print() function. Being able to see the data type one may be working with helps so much. If you have some time, make use of it and see what you're able to learn.

Happy Coding.

New Beginnings

Jonathan Cohen — Mon, 09 Aug 2021 20:21:24 +0000

As a dev, I find myself constantly thinking about the variety of languages that are out there and if there's one that I would "prefer" over the others. While I can see why that mindset could be a harmful one to a developers.....development, it's still a thought that occasionally crosses my mind. In cases like these it never hurts to feed the curiosity though.

I recently started a Udemy Python Course. I decided to finally take the chance to see what it was all about. So far I've been able to successfully create a bandname generator. To achieve this, I had to become familiar with the print function, the input function and variable assignment within the language.

Note: I've been working within an environment on Replit.com So for right now the playground is set up for me. As I learn how to run a script in console I will, then, be more detailed about all the proper steps.

Already bringing an understanding of strings from my time in JS and Ruby helped to get a quick understanding of using print(). Using it to print the greeting of the generator my first line of code was simply:

print("Welcome to the Band Name Generator.")

After, there are 2 questions that gets asked about the name of your hometown and the name of your pet. Following both questions, on a new line you see the program continuing to run awaiting for the user to type the response and press enter. After inputting both responses the user is then met with their possible band name.

city = input("What's name of the city you grew up in?\n")

pet = input("What's your pet's name?\n")

print("Your band name could be " + street + " " + pet)

The final print statement, without variable assignment, could definitely be a very wordy line of code. Instead, we assign the results of the input function(what the user inputs when prompted) to the variables city and pet. Finally we use string concatenation within the second print function to tie the final line of the generator together.

Note:With concatenation you should be mindful to think of spacing within the sentence.

Your band name could be Charleston Folly

Surely you Jest?

Jonathan Cohen — Wed, 04 Aug 2021 01:34:08 +0000

It's been a busy busy week for me. Somehow I'm managing the time to be able to try and learn new thing weekly. Honestly, I'm amazed...although I do wish there was more time in the day to try my hand at more things and carve out more time for myself. Alas, we do what we can with what we have and this week I started trying my hand and testing in JS with the jest framework.

Jest can be thought of as a testing framework that is designed to ensure correctness of any JS codebase. So far in my experience, I've been practicing with the keywords of describe, test, expect and to be. Since I'm in my early stages of working with this framework, I will only talk about the describe function today.

Describe()
-Takes in two arguments, a string of the name of the function and a function. The block of the describe function is usually home to the test function. In certain cases you can even have multiple test functions called within one describe block. Below is an example of how describe could be used.

describe("ten()", () => {

  });

The describe function has a string as the first argument. The string is ten(). After this string is given to identify the name of the function we're testing, we now have to test it. Next week we'll combine this example with the test function and really start to see some cool things. Happy Coding.

Node....so far.

Jonathan Cohen — Thu, 29 Jul 2021 00:19:58 +0000

Recently, I've been working a full-time job as a hydroponic farmer, working to keep up with my fitness goals and coding. It's hard when most of your time is already spread out over so many activities. I've been looking to try and learn new technologies as I continue to sharpen my current skills. After a while of second guessing, I decided to take the plunge into node.js. I'm learning some pretty cool things as I go through this udemy course.

So...what is node exactly? The official node js doc describes node as 'a JavaScript runtime built on Chrome's V8 JavaScript engine.' An easier, and probably over simplified, way to think about node is that it is a tool that allows you to run javascript outside of a browser. This allows us the ability to create back-end services.

While I'm still learning about node, I'm becoming very familiar with the basics. If you're new to using node and want to check if you have it on your computer in the terminal you can type:

node -v

If it is installed you should see a version number. If you don't its just a simple trip to the docs and downloading whichever version is right for your computer(windows or mac). After following the prompts run the above command in terminal to double check if node exists on your computer now. You should see a version number appear like:

v15.5.0

Once started you can test out your code skills in the REPL environment that node provides. Just type 'node' in the terminal and it will open up an environment for you to play around it. You can assign variable, practice functions, and maybe even more. Another way to practice your js chops within node is to create a .js file and practice your JS skill there. Depending if you want to check on certain outputs of a function you could run the file in your terminal as well by using

node *file_name*.js

As I stated in the beginning, very basic knowledge so far, but a week ago I didn't even know what node was. Sounds like a win to me. I'm excited to dive deeper into using node and gain an even greater understanding of it. Give it a try and as always, Happy Coding!

Emmet: Writing code can be Easier

Jonathan Cohen — Wed, 21 Jul 2021 23:38:28 +0000

Writing code, it's easy to make mistakes. A misspelled word on occasion, forgetting a closing tag in an HTML file, The smallest of mistakes can be hidden once the application becomes large enough. Recently, I found out about a plug-in called emmet that seems like it could possibly cut down on lines of code that I would've normally typed out manually, resulting in less mistakes. So far it seems like a plug-in that I will be making great use of in the future.

One cool thing emmet allows you to do is seen when writing out tags. If you wanted a simple pair of div brackets normally you'd type them out.

<div></div>

Using emmet you simply type out the word div, press enter and the result would be the same.

Another great thing about emmet is that if you wanted to give the element or a class you can do that as well.

div#blach

would give us

<div id='blah'>
<div>

Once again, less typing less chance of an error on your part. You can even to the same with a class as well.

div.blach

would give us

<div class='blah'>
<div>

If you're familiar with CSS you may notice similarities in how one would tell emmet we want an id or class vs a CSS declaration of an id or a class as well. As stated before, I'm in the early stages of purposefully using emmet, so I'm learning it all as I go. I wanted to share what I've learned and maybe point other beginners in the right direction. Finding cool things like this keeps me at my computer and excited for what I may find next. Happy Coding!

So....I made a Calculator(Sort of)

Jonathan Cohen — Wed, 14 Jul 2021 22:07:39 +0000

When you graduate a bootcamp it is easy to think that all you need to do is find a job. That could not be further from the truth. That's the time to start doubling down on what you've learned and keep yourself busy with learning MORE about the languages you spent time learning while in bootcamp or even start to learn another language if that's more of your aim.
I've been struggling to code simply because I find it hard to think of cool ideas to try my hand at. Recently, I got an idea to help push me towards the goal of coding everyday. Instead of trying to make one large application, why not work on many small things that require code?

That's exactly what I did. I created a repo that I could make all sorts of things in. So far I've been practicing the basics like a button that changes the background color. I've even made an RPG party assigner of sorts. The possibilities are kind of endless.

The most recent idea I got was to make a sort of 'calculator'. Its very basic...and maybe even useless to some, but I made it AND got it to work the way I intended. Let's dive in and I can show how I ent about it.

<p> 5. Weird Calculator </p>
  <div id='addition'>
      <form id='math-form'>
        <input type="number" id='num1'/>
        <input type="number" id='num2'/>
        <button onclick="addItUp()">Sum!</button>
      </form>
      <div id="total-section"></div>
    </div>

This code gives me a form that has two inputs. Both of the inputs are given the type of number. These will be the numbers that get used in the equation, in this case an addition problem. We also have a button that when pressed will cue a function called 'addItUp'. On a normal calculator this could be considered the + button. Also we have an empty div that will display the answer of the problem when the button is clicked. With that HTML out the way we can take a look at the script that will be run on the press of the button.

const mathForm = document.getElementById("math-form");
let totalSection = document.getElementById("total-section");

mathForm.addEventListener("submit", (event) => {
  event.preventDefault();
  let num1 = Number(document.getElementById("num1").value);
  let num2 = Number(document.getElementById("num2").value);
  if (num1 && num2) {
    totalSection.innerText += `The total is:` + addItUp(num1, num2);
  }
});

const addItUp = (num1, num2) => num1 + num2;

Using an event listener on the form, a submit is being listened for. Upon the submit, the default action of the page refreshing is prevented. Next, we take the values within the input spaces and set them to variables of num1 and num2. Since the inputs are still read as strings, I used the Number() function to turn them into a number, avoiding the two strings being added together. Finally, I used an if statement to update the text within that once empty div, given that two numbers exist in the inputs. That empty div will provide the sum of whatever the addItUp function yields.

It was a fun project to work on and I'm considering working on refactoring the code as well as using other buttons for subtraction, multiplication, and division. If you've struggled with coming up with ideas to practice on, I really recommend that you try doing something like this to get the ideas rolling.

I hope it helps you like if helped me and as always....Happy Coding.

The animation property

Jonathan Cohen — Tue, 06 Jul 2021 21:57:15 +0000

As I continue the climb of Mount CSS, I find that I'm learning so many new tricks. My latest discovery is the animation property of CSS.

I'm working on a static site to practice my dev skills with HTML, CSS and JS. The site simply lists 10 of my favorite video game tunes with a brief description of why I love the song so much and even a few notes on the composer and the game it is from. An idea I had was for the individual "cards" that hold the song information for each song to have an animated background upon a hover of the mouse. I'm still working towards that, but decided to scale it down and attempt a basic use of the animate property that would effect all the cards simultaneously(only for now.)

Since I'm using classes with my individual song cards, I placed the animation property within the CSS syntax that affects each card.

.song-div {
  .....
  .....
  animation: change 5s infinite;
}

@keyframes change {
  0% {
    background-color: rgb(149, 247, 146);
  }
  100% {
    background-color: rgba(8, 99, 26, 0.687);
  }
}

I used the variable name of "change" that I assigned when I wrote the keyframes at-rule that tells "change" how to behave: in this case at 0% be one color and at 100% be a totally different color. The value of the animation property was a short-hand value that called on the change at-rule, gave it a length of time to perform the action, and how often it should be performed. With these things in place I was able to animate a color change for all of my cards.

As cool as this is, I'm looking forward to even more cool possibilities with the animate property. I hope to have cool updates for you as I continue to develop the site. Happy Coding!

CSS Combinators: General Sibling Selector

Jonathan Cohen — Tue, 29 Jun 2021 21:25:33 +0000

We've come to the end of the CSS combinator series. The final selector that will be discussed is the general sibling combinator.While it isn't as specific as we often aim when writing CSS rules, the selector still has it uses. The selector is used when a '~' symbol is placed between two elements. This tells our CSS to look for the second element that is a sibling of the first. No other requirement is necessary. Lets look at an example:

<div>
    <h1>The Messenger</h1>
    <p>Definitely on of my favorite indie games.</p>
    <div>Something within the div that isn't a p 
    element</div>
    <p>While I've played and finished the FFVII Remake, I haven't played the original.</p>
</div>

This HTML will end up on the browser like this:

Lets create a CSS rule using the general sibling selector. In this case the goal is to affect the two p elements that are siblings of an H1 tag.

h1 ~ p {
    font-weight: bold;
    background-color: #471;
    color: #fff;
    padding: .5em;
}

This rule will affect the appropriate elements that were specified in the written rule and end up looking like this:

The two p elements are affected, as they should be, leaving the other sibling elements alone without any changes to the look of them. CSS sibling combinator can help so much. I'm still getting used to using them all, when it seems necessary. As always, take time to practice using these 4 selectors and see what else you may come across. Happy Coding!

CSS Combinators: Siblings

Jonathan Cohen — Thu, 24 Jun 2021 00:24:49 +0000

Welcome to the third entry in my series of CSS combinators. In this entry we will go over the adjacent sibling combinator and then next week will be the finale, the general sibling combinator.

The adjacent sibling operator(aso from this point on) can be identified with its use of a '+' in between two CSS selectors. As we always do, lets setup an example to follow along with.

<div class='dr-light'>
 <h1>Dr.Light's Family</h1>
   <p class='mega-man'>
   <p class='roll'>
   <p class='proto-man'>
</div>

One way to use the aso in CSS could be like this:

h1 + p {
  something:blah blah
}

Within this example we want the css inside the block to effect any siblings that may follow an h1 tag that will be a p tag. However, that wont work in this case. the h1 tag ACTUALLY is the parent of the following p tags within the html document. So while the idea is right...this wouldn't change anything on the document. If we changed the above mistake into:

p + p {
  something:blah blah
}

The HTML would be affected, but the only tags that would be affected are the 2nd, and 3rd. They both are adjacent siblings of the p tag, while the first sibling is not. Another cool way to declare some kind of specificity within CSS.

As always, give is some practice and HAPPY CODING!!

The Child Selector

Jonathan Cohen — Tue, 15 Jun 2021 21:44:36 +0000

Last week we talked about one of the 4 CSS combinators known as the descendant selector. Every element that matches the second selector will be affected by the CSS rule you create.

This week we'll go over the child selector. This selector grants you a bit more specificity in your selection for what you want to apply the design changes to. The child selector, notated by the '>' symbol will only select the 'children' of the first selector that matches the second selector.

div > p{

}

The above example will effect the p tags that are children of the div.

<div>
   <div></div>
   <p></p>
</div>

The p tag would be affected in this example. However:

<div>
   <div>
     <p></p>
   </div>
</div>

With this example, the tags are rearranged a bit. While the p tag is a descendant of the div tag, it is not a child. The child in this case is the second div and the p tag could be thought of as sort of a grandchild to the first div tag. Give it a try and as always....Happy Coding!

CSS Combinators

Jonathan Cohen — Thu, 10 Jun 2021 01:09:21 +0000

Last week I wrote about my trials of CSS and what I'm learning. I ended last week's post with talk about CSS combinators. Combinators are ways that allow us to specify what tag we want to manipulate. There are four of them that I'm familiar with and I will talk about one of them this week and the other three in the following weeks.

Descendant Combinator

The first I'll talk about is the descendant combinator. Much like it sounds, this would be a combinator that specifies a tag that 'follows' another tag.

<div class='dr-light'>
   <p>In the year 20XX...</p>
</div>

In this example, the div with a class of 'dr-light' can be considered the parent of the p tag within the pair of opening and closing div tags. To target that particular p tag you would write the css like:

.dr-light p{
   blah: blah-blah;
}

The space between the selectors, as shown with this syntax, targets the p that follows the div with a class of 'dr-light'. With this combinator being the most general of the 4, ANY p tag thats a descendant of that particular div(within the opening and closing tags) would be affected by the css example above.