DEV Community: Lens

Making a Morse Code Translator with JS.

Lens — Mon, 19 Aug 2024 17:17:20 +0000

During the summer I decided to make a Morse Code Translator to help practice using JavaScript. I'll show how I made it by showing and explaining my code with diagrams as well.

If you want to go to it's website click here: https://morse-code-translater.vercel.app/

Quick HTML and CSS review

I decided the top would have a Morse Code title with a typing animation and in the center of the page a form with two text area's, one where the user can input, and one that'll the output. Between them I added a switch button (to go from text to morse or morse to text again) using an icon from Ionicons and a Morse code reference button using the details and summary tags. When focused, there's a translate button in the input text area (top one). Finally on the bottom is the text that shows how many secret themes you found. I used CSS variables to quickly change the theme of the websites based on whether the user's computer is on dark or light mode or if they found a special Morse code message that'll give them a secret theme.

JS Algorithm

1. Collecting User Input and checking if it's good.

To get the user's input we first have to store the elements needed, which are the textareas and the user input in them. We can grab the user input with the value property as soon as the translate button is clicked, then check if it uses dots and dashes only with the checkIfValid() function.

//storing the elements
var InputTextArea = document.getElementById("morseTextArea");
var OutputTextArea = document.getElementById("textArea");
var translateButton = document.querySelector(".translateBtn");
//storing the user input from the text area element
var input = InputTextArea.value.toString("");


function checkIfValid() {
  input = InputTextArea.value.toString("");
  if (isInputMorse && input.match(/[a-zA-Z0-9_@#$%^&*()]/g) === null) {
    morseToText();
    return console.log(input.split(" "));
  }
  if (!isInputMorse) {
    textToMorse();
    return console.log(input.split(" "));
  } else {
    InputTextArea.value = "";
  }


translateButton.addEventListener("click", checkIfValid);

2. Morse to text or text to Morse?

To let the computer know whether we're translating morse to text or text to morse, I created a boolean variable called isInputMorse (seen being used in the example above) which starts as true. However, if the switch button is clicked then it changes to its opposite value (ex: true to false). In the checkIfVaild() function the user input must use only dots and dashes and have the isInputMorse variable set to true to translate from morse to text, but if that variable is set to false then it'll translate text to morse. The placeholders of the text areas also change based on whether the variable is true or false.

var isInputMorse = true;
var swapBtn = document.getElementById("swapBtn");

swapBtn.addEventListener("click", () => {
  isInputMorse = !isInputMorse;
  OutputTextArea.value = "";
  InputTextArea.value = "";
  if (!isInputMorse) {
    InputTextArea.setAttribute("placeholder", "Text(Input)");
    OutputTextArea.setAttribute("placeholder", "Morse(Output)");
  } else {
    InputTextArea.setAttribute("placeholder", "Morse(Input)");
    OutputTextArea.setAttribute("placeholder", "Text(Output)");
  }
});

3. Translating

I made two functions for translating, morseToText() and textToMorse() which should be obvious as to what they do. The morse to text function splits the user input into a character-by-character array which is then mapped with the morseRef.


var morseRef = {
  ".-": "A",
  "-...": "B",
  "-.-.": "C",
  "-..": "D",
  ".": "E",
  "..-.": "F",
  "--.": "G",
  "....": "H",
  "..": "I",
  ".---": "J",
  "-.-": "K",
  ".-..": "L",
  "--": "M",
  "-.": "N",
  "---": "O",
  ".--.": "P",
  "--.-": "Q",
  ".-.": "R",
  "...": "S",
  "-": "T",
  "..-": "U",
  "...-": "V",
  ".--": "W",
  "-..-": "X",
  "-.--": "Y",
  "--..": "Z",
  ".----": "1",
  "..---": "2",
  "...--": "3",
  "....-": "4",
  ".....": "5",
  "-....": "6",
  "--...": "7",
  "---..": "8",
  "----.": "9",
  "-----": "0",
  "/": " ",
  "--..--": ",",
  "..--..": "?",
  "-.-.-.": ";",
  "---...": ":",
  "-....-": "-",
  "-..-.": "/",
  ".----.": "'",
  "-.-.--": "!",
};

function morseToText() {
    let str = input
    .split(" ")
    .map((code) => morseRef[code])
    .join("");
    OutputTextArea.value = str;
    lookForSecrets();

}

Next the new text array is joined together and an output is given in the output text area for the user to see.

The text to morse function uses a similar method, but a reversed morseRef object. The user input goes into all caps and gets mapped with the reversed morseRef to become Morse, and then joined together again to be given as Morse code output.

var reversedMorseRef = {};

for (var key in morseRef) {
  if (morseRef.hasOwnProperty(key)) {
    reversedMorseRef[String(morseRef[key])] = key;
  }

function textToMorse() {
  let textStr = input
    .toUpperCase()
    .split("")
    .map((text) => reversedMorseRef[text])
    .join(" ");
  OutputTextArea.value = textStr;
}

Here's a diagram I made on Figma for a more visual explanation on the functions.

Hints to Secrets

I also added secret themes to my website, you can get them by entering special Morse code messages.

Hints:

The most common Morse code message used in emergencies
A famously blinked morse code message during the Vietnam war
The first morse code message ever made

That's all for now, thank you for reading!

How to Quickly Add a Loading Screen onto your website!

Lens — Mon, 24 Jun 2024 20:05:39 +0000

Brief talk about loading screens

When you're making a website, the more data and lines of code you have the longer it takes for a computer to load a website fully. While it's loading, it can be confusing to a user as to why things are blank or unorganized. This is why loading screens are used, to not only give time for the website to load but to also let the user know the website is loading. Even if you have a fast computer, it's important to sympathize with users who have slower devices or network speeds. Which is why in this tutorial, I'll show how to make a loading screen with HTML, CSS, and JS. I'll be using a loading screen from my audio player web project as an example.

Note: This blog focuses more on implementing a loading screen than stylizing it to look good, you can put whatever you want in your loading screen!

Creating a Loading screen

First, we have to make a loading screen with HTML. Use a div element and add whatever content you want to have in your loading screen inside it. It could be text that says "loading" or a loading icon.

    <div class="loadingScreen">
<!--My content is the word "soundscape" but the o is replaced with a disc-->
      <h1>S<img src="compact-disc-with-glare.png" alt="disc" />undscape</h1>
    </div>

Now we have to make sure the loading screen covers the entire page using CSS. Set its position to absolute so it isn't affected by anything in the HTML file, then set its z-index to any high number as long as it's above all other elements on the page. Finally, set its width and height to 100% of 100vh if that doesn't work.

.loadingScreen {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100vh;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

Note: If the width and height are unable to fill up the webpage make sure the width and height of the html and body are set to 100% as well.

You can also stylize your loading screen and add animations, in my loading screen the disc rotates.

Making the loading screen disappear

This only needs 3 lines of JavaScript. First, you have to store you're loading screen in a variable.

var loadingScreen = document.querySelector(".loadingScreen");

After that give the window property an event listener. The window property refers to the full website and everything in it (To learn more about it click here). Make sure the event listener uses the load event which makes it so the event happens when everything has loaded. Finally, inside the event listener set the CSS display property of the loading screen to none.

window.addEventListener('load', function() {
  loadingScreen.style.display = 'none';
})

If you have a fast computer your loading screen will only show in a second or less, and that's fine! That means your phone or PC is incredibly fast and can quickly load your website in no time, however, now that you have a loading screen slower computers can be able to see it and understand that your website is loading.

Thank you for reading my tutorial blog, have a good day/night👋.

How to make a cursor image Hover effect with CSS & JS!

Lens — Tue, 20 Feb 2024 16:07:04 +0000

Custom cursors and cursor hover effects are a great way to impress users on your website, whether you're making an e-commerce website or a portfolio. A good example is a cursor image hover effect, where when the cursor hovers over something it shows an image, here's my way of making it!

Setting up the example

I'll make a short and simple vertical nav with the nav element for this example. There will be six div elements in it, and outside the nav is a div with the class of "cursor", that'll be our custom cursor.

    <nav>
      <div>Lofi</div>
      <div>Motivation</div>
      <div>Profiles</div>
      <div>Goals</div>
      <div>Academics</div>
    </nav>
    <div class="cursor"></div>

Now we add the CSS, that tells the font size, the alignment, and a border on each nav item except the last one.


html, body {
    width: 99%;
    height: 99%
}

body {
    display: flex;
    align-items: center;
}

nav {
    font-size: 6rem;
    display: grid;
}

nav > div:not(div:nth-child(5)) {
    border-bottom: solid ;
}

@media (max-width: 480px) {
    nav {
        font-size: 4.8rem;
    }
}

Making and controlling the custom cursor

First, we must remove the visibility of the default cursor by setting the website's (*) cursor set to none. Then we create our custom cursor, which is the cursor div we made before. It'll have a width and height of 20px and its border-radius will be set to 50% so it becomes a circle. You can add whatever background-color you'd like for it, I chose black so it can be easily visible. The most important part is that you set it's position to fixed so the cursor always stays in view and pointer-events to none so the default actions of how a default cursor would work don't effect the custom one. Finally you set the background-size to cover and a scale transition, these will both be important for the hover effects later on.

* {
    cursor: none;
}

.cursor {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: black;
    /*Keeps our custom cursor on the user's screen*/
    position: fixed;
    pointer-events: none;
    /*makes sure the background images will sort of fit the cursor*/
    background-size: cover; 
    transition: scale 300ms;
}

Note: I said the visibility of the cursor and not the cursor itself because the computer still does the actions of the cursor such as selecting text even when the cursor isn't shown

Now in Javascript, we make a variable that stores the cursor.

let cursor = document.querySelector(".cursor");

Next, we'll make a function called cursorControl with an e parameter that stands for "event". In it we make an X and Y variable that use e.clientX and e.clientY to find the coordinates of where the cursor should be based on the movements of the mouse. Then, we place our custom cursor based on our coordinates by setting it's top position to the y and left position to the x. Finally, we just call the function in our mousemove event listener.

function cursorControl(e) {
//tracks the cursors coordinates
  let x = e.clientX;
  let y = e.clientY;
//places the custom cursor onto the cursor coordinates
  cursor.style.top = `${y}px`;
  cursor.style.left = `${x}px`;
}

document.addEventListener("mousemove", cursorControl);

There you have it! A custom cursor, now we just need to add the hover effects.

Cursor growth hover effect

Before we go into the Javascript part of things, we need to make a new class called cursorGrow with a scale property of 8. This class will be added to the cursor whenever it hovers over a nav div.

.cursorGrow {
scale: 8;
}

Now, in JS we save all of the nav divs into a variable.

let divs = document.querySelectorAll("div:not(.cursor)");

Furthermore, we make a forEach method. Where for each div in our nav, when the cursor enters/hovers over them the cursorGrow CSS class will be added causing the scale of the cursor to go up by 8, but when the cursor leaves the class is removed and the size goes back to normal.

divs.forEach((div) => {
  div.addEventListener("mouseenter", function () {
    cursor.classList.add("cursorGrow");
  });
  div.addEventListener("mouseleave", function () {
    cursor.classList.remove("cursorGrow");
  });
});

Now, because of what we've done so far, the code should create this (make sure to add a transition to the cursor if you hadn't already):

Cursor Image hover effect

Last but not least, we finally add the image hover effect! To add each image, we'll make a CSS classes based on each div an a corresponding image for them.

/*Background image for each div based on their text*/
.lofi {
    background-image: url('https://images.unsplash.com/photo-1585477281005-b83d4b47eba4?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}

.motivation {
    background-image: url('https://images.unsplash.com/photo-1556711905-4bd1b6603275?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}

.webDev {
    background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1772&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}

.goals {
    background-image: url('https://i.pinimg.com/564x/4d/ee/43/4dee438cb40321df2cb0cfb14a3c7811.jpg');
}

.academics {
    background-image: url('https://i.pinimg.com/564x/f8/3d/8b/f83d8b8d17e4315caa647dab88e6addc.jpg');
}

Now we could do this similar to our growth hover effect, where we continue to write mouseenter and mouseleave event listeners, but that would be too much code. Instead we could make a loop! But first we need to store the names of each image class in an array and the divs variable we had before.

let divs = document.querySelectorAll("div:not(.cursor)");
const imageClassNames = ["lofi", "motivation", "webDev", "goals", "academics"];

Now for the loop. How it works is, in the loop there are the mouseenter and mouseleave event listeners, and they add and remove classes from the image class array. Whenever a class is added to the div, the div is given the properties of the class, which is the background image of it, but when removed the properties from the class are removed as well, that's how classList.add() and classList.remove() work.

To make sure the right class corresponds with the right div, the loop goes from 0 to the length of the array so as long as the order in the divs array and the imageClassNames array the correct div and the correct array value always match. So, for example it'll start with the 0th value of the divs array which is the lofi div, and it'll add the class that's named 0th value of imageClassNames which is lofi whenever the mouse enters the div, but removes it when it leaves the div. The loop does it for every value in the image class and divs array, and stops us from writing constant event listeners in our code.

const ImageClassNames = ["lofi", "motivation", "webDev", "goals", "academics"];

for (let i = 0; i < divs.length; i++) {
  divs[i].addEventListener("mouseenter", () => {
    cursor.classList.add(imageClassNames[i]);
  });

  divs[i].addEventListener("mouseleave", () => {
    cursor.classList.remove(imageClassNames[i]);
  });
}

Now, we should finally have our cursor image hover effect!

Conclusion

That's really it! It took me a bit of trial and error to make this cursor hover effect out of my mind, but in the end, it was worth it, which is why I wanted to make a blog about it! I show more of my web dev, game development, and even 3D blender creations on my twitter. Follow for more and have an awesome day/night👋.

Hacktoberfest Pledge

Lens — Tue, 03 Oct 2023 12:00:00 +0000

Intro

Last year when I first joined the DEV community, I heard all about Hacktoberfest! When I joined the event, I barely knew how to contribute to open source, and when I finally did I couldn't find any Github repo issues that matched my beginner skill level.

Now it's a new year for me, and with the new computer science and web development skills I learned I'll boost my Github profile and complete this Hacktoberfest with lots of contributions.

Goals

To make 4 or more pull requests this Hacktoberfest, and after that continue to contribute to open source weekly
Grow my Github profile for others to see
Meet new people who match my skill set and I can work together with
Gain experience with solving code problems

Pledge

I pledge to contribute to the fullest this Hacktoberfest while blogging my journey for others to see. I'll look forward to even going past contributing in Hacktoberfest and contributing to the open source community all the time. As I attempt to contribute i'll make sure to follow the guidelines of both the Hacktoberfest and the Hacktoberfest participating repo's, in order to make sure things go smoothly.

What I've learned and done after 1 year on DEV!

Lens — Sat, 30 Sep 2023 18:00:00 +0000

On September 27th last year I joined the wonderful DEV community and found dozens of amazing blog posts and articles that would forever help me learn how to code! The next day I also wanted to make blog posts that would help others learn and show others my experience. After a few days, I finally made my first blog about nav bars! Even though it didn't get many likes I was still excited about making more posts! Over time as my web dev skills grew the number of posts I made grew as well and looking back after a year I've gotten to pretty nice places!

Acheivments

Making blogs for 16 weeks straight!
more than 2000 followers, double my expectations!
3 completed web projects
233 bookmarks on my reading list, because I just love learning new stuff 😅

Overall being part of the DEV community and contributing to it is such a nice experience to be passionate about, so I don't plan on stopping!

What I've learned

Quality over Quantity

Back when I was looking to reach an 8-week streak one of the main things I loved about making blogs was the amount of likes I could get. So, every time I made a blog post I believed that whether it was good or not was based on the number of views and likes it had. It was a nice way to motivate me at first, but over time I felt burnt out from trying to make new blogs based on small new things I learned just to be disappointed by the views or likes. That's when I realized, the entire point of wanting to be a DEV blogger wasn't for the likes, but to showcase my experience.

To any new people on DEV or just people who haven't made a blog post yet but want to, whether your blog gets popular or not it's alright. What matters more is the quality of the posts, the descriptions, the images, the code examples, all of those. Sure, having lots of likes and views would be beneficial in some ways, but that doesn't mean your posts are horrible. As you gain experience in the tech world you'll make more blogs, some will be popular, and some won't, but whatever the case you should show your skills in those posts. Over time as lots of people, maybe even job recruits, see your posts they'll be more interested in you, that's when you get to the level of lots of likes and views.

Practical writing skills

When you make a good number of blogs, you'll gain a good amount of practical writing experience as well. As I made more blogs I reviewed my content and saw what was wrong with it, was it too long and descriptive? Are there not enough examples? Is the grammar professional? Reviewing your drafts and posts like this is like changing the sensitivity bar on your mouse until it's just right! You'll need to find the right writing style that'll help everybody learn, whether inexpensive or professional.

Plans

I should really plan on making more web projects, sure I've made some designs, but I should actually show more of my web development skills. I should also be a bit more consistent in learning computer science even though I'm already a bit busy with high school.

Conclusion

Making this blog is a great reflection of too far I've gone and what I've learned, but now that I've done that all I should look at are the next steps to my web dev journey!

How to make this quick image change animation with JS!

Lens — Wed, 06 Sep 2023 00:30:00 +0000

Want to learn a new UI trick? Here's how to make an image change animation (or whatever you call it) with mostly JS! All we need is a few image URLs, functions, and a special operation. First, I'll quickly tell the HTML and CSS, then I'll explain the Javascript piece by piece so you can understand and use this code for your own projects (it'll take a little bit of understanding in divison).

HTML & CSS

If you want to follow along with me, first with HTML make a div rectangle with a long height but short width, I made it this size since most of the images I've gotten (which were from Unsplash) were this type of size. Next, I gave the div a background-size to cover, to ensure the images I gave it fit. Finally, I gave the html and body a width and height of 100% so I could use flex on the body to center it.

HTML

<html>
  <body>
    <div class="box">
  </body>
    </html>

CSS

html, body {
  width: 100%;
  height: 100%;
}
/*centering the box*/
body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 200px;
  height: 350px;
/*making sure the images will fit inside*/
  background-size: cover;
}

*Just because this is the way I made does not mean you can't make it your own way!

Collecting the image URL's

Now for the JS, first we collect the box with querySelector() then we store it in a variable. Next we make an array full of image url's of our choice. Lastly we make a urlArrayLength variable that stores the length of the url array.

var box = document.querySelector('.box');

var imageUrls = [
  "https://images.unsplash.com/photo-1693305911839-ec783e3145d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80",
  "https://images.unsplash.com/photo-1692821565372-15f7219ede0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80",
  "https://images.unsplash.com/photo-1692175033119-8e2224157199?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80",
  "https://images.unsplash.com/photo-1692283578489-ee4cfffa3ae1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80",
  "https://images.unsplash.com/photo-1587336477546-bb3a2a7887fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80"
];

var urlArrayLength = imageUrls.length; //gets the length of the array

Image change functions

After making our array and variables now we make a function called imageChange(). In it first there will be a variable called index with a starting value of 0. This variable is important because it represents which image we're selecting in the urlArray. Now we make a function inside the imageChange() function called newImage() it'll be used to constantly pick the next image to be shown.

function ImageChange() {
//Will be used as the index number of an image we'll pick
  let index = 0;
  function newImage() {
}
}

Now inside the image change function, we'll code it so the box's background image will be set to the image url with the index equal to our index variable. To do this we write box.style.backgroundImage and set it to the url in the urlArray that's index matches the index variable.

function ImageChange() {
//Will be used as the index number of an image we'll pick
  let index = 0;
  function newImage() {
 //the box's background image will be set to the image url with that index
    box.style.backgroundImage = "url(" + imageUrls[index] + ")";
}
}

A quick understanding of the remainder operator

If you have a good understanding of what this reminder does, you can skip this section, if not this section is here to explain. The remainder operator % is just like regular integer division except you get the remainder. So let's say we do 13%3 you'll get a remainder of 1 (Note: the operator uses integer division, unlike a calculator or the division operator / that uses floating point division, it's similar to long division).

//remainder operator
console.log(13%3) //result: 1

//division operator
console.log(13/3) //result: 4.333...

Developers use the operator to check for even and odd numbers, wrapping or looping values, or even array cycling, which is what we're using it for!

Array Cycling

Now to make it so it switches images, we change the index variable and add it by one, however, after that we divide the sum with the remainder operator % by the url array's length! Now the index will go up by 1 every time but as soon as it reaches the last index number of the array it'll loop back to 0. For example, if we had an image array with five values, we'd write index = (index + 1) % arrayLength and right as it reaches the last index number it'll do the division 5%5 giving the result value of 0 to the index variable (because 5 divided by 5 gives a remainder of 0!). This method in programming is called Array Cycling, and it's best used with the remainder operator.

function ImageChange() {
  let index = 0;

  function newImage() {
    //the box's background image will be set to the image url with that index
    box.style.backgroundImage = "url(" + imageUrls[index] + ")";
    //After some time the index will go up by one and pick the next url, but if the index is = to the imageUrls[] length then it wraps back around to the first index
    index = (index + 1) % urlArrayLength;
}

}

Calling the functions!

Now all we have to do is call both functions! Inside our imageChange() function we use setInterval() to make our newImage() function repeat every certain amount of time, we'll go with 200ms so write the code setInterval(NewImage, 200). After that all we have to do is call the imageChange() function below!

function ImageChange() {
  let index = 0;

  function newImage() {
    box.style.backgroundImage = "url(" + imageUrls[index] + ")";
    index = (index + 1) % urlArrayLength;
}
  //sets amount of time until the next index is picked
  setInterval(newImage, 200);

}

ImageChange()

Conclusion

I'm sorry if this tutorial blog seemed long, I just wanted to be descriptive since I know some people who read my posts don't know a lot about Javascript. Hopefully, you remember this and use it for your later projects, such as landing pages or image galleries, It'll be cool to see more uniqueness in UI! If you have any questions or would like to say something in general just comment or email me, have a great day/night 👋.

Making a simple drag and drop with JS!

Lens — Wed, 09 Aug 2023 00:00:00 +0000

This week I decided to practice using JS drag events by making a simple drag and drop. I'd like to share how I made it using a couple of event listeners! First, I'll explain what drag events are, but I won't go to deep on the CSS since this is mostly focused on the Javascript. Here's the final result:

How Drag Events Work

There are 4 main Javascript events that people use, mouse events (most known for onclick), keyboard events, load events, and drag events. They do what they're named after, so drag events simply help make certain events happen when the user is dragging. You basically need to drag items and drop items in your HTML, because even if you can drag an element, it'll also need to be dropped somewhere. Luckily you can also make drop events when a dragging item goes to a drop zone. There are many fun ways web developers use drag-and-drop events, and they're commonly seen, from online quizzes to game puzzles that use Javascript.

Making Ehe Draggable Element

To understand this Codepen, there is 1 draggable element and 3 drop elements, or drop zones. To make an element draggable, we have to give it the draggable attribute and set it to true. Now when we click, hold, and move around with it we're dragging it!

<html>
  <body>
<!--draggable element-->
    <div class="dragElement" draggable="true">
      <h3>Drag and Drop!</h3>
    </div>
<!--drop zones-->
     <div class="dropZone One"></div>
     <div class="dropZone Two"></div>
     <div class="dropZone Three"></div>
  </body>
</html>

Making Drop Zones Droppable

Drag elements would be useless without a place to drop them, which is why with JS we'll add drop zones! First, we store the drag element in a variable and the drop elements in an array.

var dragItem = document.querySelector('.dragElement');
var dropZoneSet = Array.from(document.querySelectorAll('.dropZone'));

Now we use the forEach() method on the drop zones to give them a dragover event, where when the drag element drags overs them, they'll catch the element using the appendChild() method. AppendChild() helps an element take another element and make it its child, putting the element inside it. So we're basically telling the drop element to put the drag element inside it.

dropZoneSet.forEach(dropzone => {
  dropzone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropzone.appendChild(dragItem);
});
});

`e.preventDefault`

Whenever we drag something, you'll notice that the mouse will show a stop sign. That means, by default, the computer is stopping us from making an element draggable. Notice that we needed to set the draggable attribute to true, which means by default it was set to false. In order to stop this, we use the method e.preventDefault() which helps us stop the default reaction of the computer. Just make sure when using this in an event listener, you add the event object parameter e.

Dragging over the drop zone

I made it so that whenever the drag hovers over or away from the drop zones their green borders will appear then disappear. To do this I once again used the forEach() method and gave them a dragover and dragleave event. The dragover event listener makes an event when a drag element is hovering over a drop zone while the dragleave event listener makes an event when a draggable item stops hovering over a drop zone. In the event listeners, I made it so that when the drag element is hovering over the drop zone a class with a green border gets added, however when no longer hovering over that class gets removed. This is all done with classList.add and classList.remove.

dropZoneSet.forEach((dropZone) => {
//hovering over
  dropZone.addEventListener('dragover', () => {
    dropZone.classList.add('hoverOver');
  });
  //no longer hovering over
   dropZone.addEventListener('dragleave', () => {
    dropZone.classList.remove('hoverOver');
  });

});

Events when being dragged and dropped

Lastly, I gave the drag element two event listeners. One with drag where when being dragged a class with a black background and white color gets added, and the other using the dragend event listener, the class gets removed after the element stops getting dragged.

dragItem.addEventListener('drag', () => {
  dragItem.classList.add('beingDragged');
} )


dragItem.addEventListener('dragend', () => {
  dragItem.classList.remove('beingDragged');
} )

Conclusion

That's how you make a simple drag-and-drop! However, if you drag and drop long or fast enough you can see that there's a bug where the border still stays to the drop zones that no longer have the dragging element hovering over them. I don't know how to fix this, but if this happens again in another project, I'll definitely make sure to see what's causing it. There are lots of other ways of making drag and drops, this is just the simplest one I could think of. If you have any questions or would like to comment on something, just email me or comment it down! I'll make sure to keep on posting for the last bit of the summer, have a nice day/night👋!

Two ways to add text over images

Lens — Sat, 13 May 2023 22:00:00 +0000

A great thing to learn if you're a beginner to CSS is how to add text over images, after all, you see this type of feature in almost every website. So I'll be showing you two ways to do this.

Standard Way

create a div or any other element and style it your way

<div class="example">
 </div>

.example {
    width: 187px;
    height: 347px;
    border-radius: 10px;
  font-family: Poppins;
}

2. put an image in a div with a position of absolute and an object-fit of cover. You should also make sure that the image has the same width and height as the parent.

<div class="example">
        <img src="https://images.unsplash.com/photo-1643678063167-1916c49968e6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
    </div>

.example > img {
    width: inherit;
    height: inherit;
    object-fit: cover;
    position: absolute;
    border-radius: inherit;
}
/*Note: the inherit property value is used 
to give something the same value as its parent*/

3. add a text container with the same width and height as the parent but a position of relative. Fill in that container with the text and headers you want. position your text by adding flex to your container, then use either flex-start, center, or flex-end to position at either the top center or bottom of the parent.

<div class="example">
        <img src="https://images.unsplash.com/photo-1643678063167-1916c49968e6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<!--text container-->
      <div class="exampleInfo">
<!--I also put the text in one smaller container so i can center the header-->
        <div class="info1">
            <h4>The Florida Keys</h4>
          <p>Plane arriving at May 15th, 6am</p>
        </div>
      </div>
    </div>

.exampleInfo {
    color: white;
    width: inherit;
    height: inherit;
    position: relative;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 14.06%, #1E1E1E 100%);
/*Placing the text at the bottom*/
  display: flex;
  align-items: flex-end;
  text-align: center;
  font-size: 20px
}


.info1 > h4 {
  display: flex;
  align-items: center;
  justify-content: center;
}

Background Image

Another way to add text over an image is by setting the image as the background. Here's an example on how to do so.

Create a div or any other element with the content and text you want, then style it.

       <div class="exampleTwo">
      <h2>Climb the highest mountains</h2>
         </div>

.exampleTwo {
  width: 187px;
  height: 347px;
  border-radius: 10px;
  text-align: center;
  font-family: Aboreto;
}

2. Give that element a background-image using the url() value. Make sure it fits using background-size: cover.

.exampleTwo {
  width: 187px;
  height: 347px;
  border-radius: 10px;
  text-align: center;
  font-family: Aboreto;
/*Adding the image*/
    background-image: url('https://images.unsplash.com/photo-1683727610671-646dbf56aedf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80');
background-size: cover;
}

Which is better

Even though the background image has way has less hTML and CSS needed, if you don't pick a big enough background image then that background image won't be responsive to large sized deives such as pc's. So whichever one is better is your choice, I usually use background image but for major projects i'll use the standard way from time to time.

Thank you for reading! It's been a while since the last time i've been going to the DEV community since I had state testing, but thank goodness that's over. You'll see me again talking about making a minimalistic website, have a great day/night 👋.

How to make a profile card with HTML & CSS

Lens — Fri, 07 Apr 2023 21:10:11 +0000

When showing others what you do you don't always need to show your portfolio website containing 50+ things about you and what you've done. Instead, you should sometimes find a way to quickly show the main things about you, and that's where profile cards come in!

Profile cards are easy to make with good knowledge of HTML and CSS, you just have to have an idea of what your profile card would look like. In this blog, I'll show how I made my profile card, but if you have any suggestions to put on it comment down below.

Making the card

First, I made a card div with a white background and a width of 360px with a height of 455px. I gave it a border-radius of 10px and a box shadow to make it look good. Then I gave the card a padding of 10px for every side except for the bottom to make it seem full. Finally, I gave it a display of flex and made it a flex column with everything having a gap of 15px.

HTML

<div class="card>
</card>

CSS

.card {
    width: 360px;
    height: 455px;
    border-radius: 10px;
    background-color: white;
    padding: 10px 10px 0 10px;
  box-shadow: 10px 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

Introduction

What I like to call the introduction, is the top part of a profile card where you show your name and occupancy/what you do (people also add pfp's in web designs). First, we made a div that contains our profile image, h2 element (name), and h3 element (occupancy). The div has a text-align of center and a font-family of Poiret One. For the profile image, we give it a small width of 60px and a border radius of 50%.

HTML

 <div class="pfp">
  <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TaFBhrk---/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/933459/4c8158c5-9aaf-4354-98c1-3c67f6fc49ba.jpg" alt="catPhoto">
<h2>Lens Dorsainvil</h2>
 <h3>Web Developer</h3>
  </div>

CSS

.pfp {
text-align: center;
font-family: Poiret One;
}

.pfp > img {
    border-radius: 50%;
    width: 60px;
  border: solid;
}

description

All I did for the description text was make a paragraph element with a font-family of Red Hat Display and a text-align of center.

HTML

<p class="intro">A 13 year old boy learning web-development and UX/UI design for fun and for a future job. Wanting to explore computer science and game development. Hoping to be a software engineer one day!</p>

CSS

.intro {
    text-align: center;
    font-family: Red Hat Display;
    font-weight: 300;
}

Programming skills

I also added all the programming languages that I use. I got the icons from Devicon so go check it out! I contained all the icons in a div and gave it a display of flex to space them evenly. Of course, I also had to give them a small width.

HTML

      <div class="programmingLanguages">
      <img class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" />
<img class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" />
      <img class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" />
      <img class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" />
      <img class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-original.svg" />
  </div>

CSS


.programmingLanguages {
  display: flex;
  justify-content: space-around;
}

.language {
  width: 40px;
}

Email and Socials

For my email, I just made a div with a padding and black background.

      <div class="email">
        lensdorsainvi711@outlook.com
      </div>


.email {
  background-color: black;
  color: white;
 display: flex;
  justify-content: center;
  font-family: Poppins;
  border-radius: 5px;
  transition: 0.3s;
}
/*BONUS: hover effect*/
.email:hover {
  background-color: #00D9C0;
}

However, for my social media icons I got from Ionicons (except for the DEV icon) I contained them all in a div and set it to flex so I can put them at the bottom right with justify-content: flex-end.

    <div class="socials">
        <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-black.png" alt="dev">
        <ion-icon name="logo-codepen"></ion-icon>
        <ion-icon name="logo-twitter"></ion-icon>
      <ion-icon name="logo-github"></ion-icon>
    </div>

.socials {
    display: flex;
    justify-content: flex-end;
  /*Also a gap to space them out*/
gap: 8px;

}

.socials > img {
    width: 25px;
}

ion-icon {
    font-size: 25px;
}

There's lots of other profile card designs you can see such as on web design web apps like Dribbble. You can also make a profile card just for practice with HTML and CSS, in fact, I think this is great for beginners! If you have any question or things to say just comment them, you can also comment a profile card that you made if you want. If you want to use my design fork it on Codepen or the GitHub repo and customize it your way! Have a good day/night 👋.

What's your favorite font for making websites?

Lens — Thu, 30 Mar 2023 20:43:26 +0000

When it comes to making websites, I love using Poppins for headers and Red Hat Display with a light 300 for paragraphs, but there are lots of other cool fonts to use! What font you use can also depend on what type of website you're making.

So I want to know what fonts you like to use, you can even show a Codepen on what it looks like if you want!

I made an Animal-info website using React!

Lens — Sun, 26 Mar 2023 19:00:00 +0000

This past week I've been making my first React web app which is a website that gives information (made from ai) about 4 specific animals. It really helped me get a grasp on how to react components work and what you can do with them, but I did have lots of challenges which is why it took me a week in the first place. I made this blog so you can know the tools I used, how I coded it, and the challenges I faced. Here's the link to the Animal-info-website!

Tools I used:

VS Code: a code IDE I use all the time as a web developer
Create-react-app: a react template I used to easily start building my react apps in VS code
React Router: a React API I used to make my react web app multi-paged, without needing to make lots of HTML files

Making the home page

First, I make a single functional component called Nav, where I made my nav bar. Then I exported it to my App component which is my home page.


const linkStyle = {
  textDecoration: 'none',
  color: 'black'
}

export function NAV() {
    return (
        <nav>
        <p><Link to="/home" style={linkStyle}>Home</Link></p>
        <p><Link to="/about" style={linkStyle}>About</Link></p>
        <a style={linkStyle} href="https://github.com/Lensco825/animal-info-website"><ion-icon name="logo-github"></ion-icon></a>
      </nav>
    )

Next, I made the rest of my home page by adding two headers and an animal container div which contains each animal selection. I stylized the animal container to display: flex so the animal selections can be horizontal, but I also gave it a media query, so it turns into a grid with two or one columns. I gave each animal selection a link to their content component, while keeping the animal selection at the bottom.

function App() {
  return (
    <div className="App">
      <NAV/>
      <main>
    <Routes>
      <Route path="/bear" element={bearContent()} />
      <Route path="/cat" element={catContent()} />
      <Route path="/owl" element={owlContent()} />
      <Route path="/dol" element={dolphinContent()} />
      <Route path="/home" exact element={App} />
      <Route path="/about" element={About()} />
    </Routes>
    <div className="AnimalContainer">
      <h1>Animal Info</h1>
      <h2>Learn more about some of these animals!</h2>
    <div className="AnimalSelection">
     <div className="Owls">
      <Link to="/owl">
      <img src={images.owl} alt='owl' className="coverImage"></img>
      </Link>
      </div>
     <div className="grizzlyBears">
      <Link to="/bear">
      <img src={images.bear} alt='bear' className="coverImage"></img>
      </Link>
      </div>
     <div className="dolphins">
      <Link to="/dol">
      <img src={images.dolphin} alt='dolphin' className="coverImage"></img>
     </Link>
     </div>
     <div className="cats">
     <Link to="/cat">
      <img src={images.cat} alt='cat' className="coverImage"></img>
     </Link>
     </div>
    </div>
    </div>
    </main>
    </div>
  );

Animal Content

I made the information for each animal with Notion AI and placed all the text into paragraph and header elements. Since the layout of each animal content was the same, I made a CSS stylesheet that they all use, except for the h2 elements which are stylized sing the style attribute. I won't show every animal content but instead just one of them.

import React from "react";
import './content.css';


export function bearContent() {

    return (
        <div className="information">
        <h2 style={{backgroundSize: 'cover', backgroundImage: 'url(https://images.unsplash.com/photo-1593946460607-d1570da6268f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80)', padding: '100px 0 100px 0', borderRadius: '10px', width: '60%', color: 'white'}}>Bears: A Fascinating Species</h2>
        <p className="text">Bears are a group of mammals that have captured the hearts and imaginations of people all over the world. They are known for their impressive size, strength, and intelligence. In this research report, we will explore the different species of bears, their habitats, and some of the challenges they face in the wild.</p>
        <h3>Species of Bears</h3>
        <p className="text">There are eight different species of bears in the world. These include the American black bear, the brown bear, the polar bear, the Asiatic black bear, the sloth bear, the sun bear, the spectacled bear, and the giant panda. Each species has its unique characteristics, such as the polar bear's ability to swim long distances or the giant panda's diet of bamboo.</p>
        <h3>Habitats</h3>
        <p className="text">Bears can be found in a variety of habitats, from dense forests to Arctic ice caps. Many species of bears are native to North America, while others can be found in Asia, Europe, and South America. Some species, such as the polar bear, are adapted to living in harsh environments, while others, like the sun bear, thrive in tropical climates. However, some don't stay in one specific continent, the polar for example, mostly lives in the Artic but is also seen lower north in Canada, Russia, and Alaska. So as long as the climate and environment fits them they will be found there.</p>
        <h3>Challenges</h3>
        <p className="text">Bears face a variety of challenges in the wild. Habitat loss due to human activities, such as deforestation and urbanization, is a significant threat to many bear species. Climate change is also affecting bears, especially those that rely on sea ice, such as the polar bear. Additionally, bears are often hunted for their fur, meat, and body parts, which are used in traditional medicine.</p>
        <h3>Conservation Efforts</h3>
        <p className="text">To protect bears and their habitats, conservation efforts are underway around the world. These efforts include habitat restoration, captive breeding programs, and anti-poaching initiatives. Additionally, many organizations work to educate the public about the importance of bears and their role in the ecosystem.</p>
        </div>
    )
}

Challenges

Building class components: since the code for each animal content was exactly the same except for their inner HTML at first I thought that I should make a class component that would be a template for each content instead of having to make multiple functional components. However, I realized that I would need to make LOTS of props for the inner HTML of each element, and that might slow down my render time.

Using React Router: you see the way react router works is it doesn't make you go to a different JSX or html file, instead it adds content whenever wanted. Since I just learned how to use it, I don't know how to make it clear off the last components when implementing new content, which is why you can still see my animal selection at the bottom of each animal content.

Styling with React Router: React Router doesn't just implement content, it also implements the stylesheets of that new content. Since i don't know how to remove the old content when react router adds new content, the stylesheet of the animal content and the stylesheet of the home page get together, giving the animal content css that it doesn't need to have. I fixed this by adding class to the animal content and it's paragraph elements.

Conclusion

Overall, I'm very happy from the outcome of this project, at first I didn't believe I had the skills to use React but now I'm confident! If you want to see the source code, contribute, or fix issues in this website go to its Github repo. If you have any questions or things to say comment them below! Have a great day/night👋!

A smooth underline hover effect to use!

Lens — Sat, 18 Mar 2023 14:04:00 +0000

Here's a nice and smooth hover effect that's great for your next website! All you need is positioning, a psuedo element, and two lines of scaling.

Make your text has a position of relative while your after psuedo element will have a position of absolute. That way you can position your after psuedo element under the text.

h1 {
  position: relative;
}


h1::after {
content: ' ';
position: absolute;
/*Positioning the underline*/
 left: 0;
 top: 40px;
/**/
  width: 100%;
  height: 3px;
}

2 . Transform your underline to hanve an X scale of 0 with transform: scaleX(0) and make sure it transforms to the right with transfrom-origin: right.

h1 {
  position: relative;
}


h1::after {
content: ' ';
position: absolute;
 left: 0;
 top: 40px;
  width: 100%;
  height: 3px;
/*Transforming*/
  transform: scaleX(0);
  transition: transform 0.2s;
  transform-origin: right;
}

3 . Give your text a hover effect where the underline transforms to the left back at full X scale!

h1:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

Now give a transition, a border-radius, and a color of your choosing, and there's your underline animation! If you want an example of how this can be used here's a react web app i'm making with it. Hover on the nav bar text elements to see it in action!