DEV Community: Promise Omoigui

Creating a calculator with HTML, CSS and Javascript

Promise Omoigui — Mon, 17 Jul 2023 14:32:50 +0000

In this post, we would look at how to create a calculator and what you need to create it. Don't worry you don't have to be a mathematical guru to make this work. All you just need is a basic understanding of HTML, CSS and a little bit of Javascript.
In fact having no knowledge of Javascript at all is completely okay as we would not need a script file.
Now let's get started.
We create our index.html file and using emmet abbreviation come up with the header tags and things necessary.

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Calculator </title>
</head>
<body>
</body>
</html>

Having gotten the above, we can start coding our calculator. Our calculator would be contained inside two divs. For this calculator we would be using a form.

<div classname="container">
<div classname="calc">
<form name="calculator">
</form>
</div>
</div>

After creating the layout of our calculator we can start filling it in with the necessary tags. First off we create an input tag with a placeholder. This input tag is where our calculations would be displayed. We would give it a class so that we can style it and an id so that we can target this particular input as we would be needing it later. We would also give it a readonly attribute so as to make our input field uneditable by the user.

<div classname="container">
<div classname="calc">
<form name="calculator">
    <input type="text" class="btn" id="display" placeholder="0" readonly>
<br>
</form>
</div>
</div>

After doing this we would give our calculator numbers and basic arithmetic operators. We also go with an input tag but in this case instead of giving it a type of text we would give it a type of button because we want our numbers to look like a button. We also give a value with the number or operator we would want to appear on our screen. The
tag is used so that we can end that line and go to the other line.

<div classname="container">
<div classname="calc">
<form name="calculator">
    <input type="text" class="btn" id="display" placeholder="0" readonly>
<br>
<input type="button" class="button" value="7">
<input type="button" class="button" value="8">
<input type="button" class="button" value="9">
<input type="button" class="button mathbutton" value="+">

<br>
<input type="button" class="button" value="4">
<input type="button" class="button" value="5">
<input type="button" class="button" value="6">
<input type="button" class="button" value="-">
<br>

<input type="button" class="button" value="1">
<input type="button" class="button" value="2">
<input type="button" class="button" value="3">
<input type="button" class="button" value="×">
<br>

<input type="button" class="button" value="C">
<input type="button" class="button" value="0">
<input type="button" class="button" value="/">
<input type="button" class="button" value="=">

</form>
</div>
</div>

With this we have done the basic structure for our calculator. We just need to make it functioning and this is where a little bit of Javascript comes in. We don't need to add a script file all we need to do is just to add a line of code to each input tag which is the onclick function.
The onclick property is an event handler that specifies the action to be taken when the element associated with it is clicked.
The function 'calculator.display.value' refers to the value displayed on the calculator's display.
The '+=' concatenates the current value on display with any string added to it. In other words it appends the string to the existing value on display so that when an input button is clicked, the action will update the calculator's display by appending the associated number to the existing value.
The property 'eval' is used to calculate the numbers.

<div classname="container">
<div classname="calc">
<form name="calculator">
    <input type="text" class="btn" id="display" placeholder="0" readonly>
<br>
<input type="button" class="button" value="7" onclick="calculator.display.value += '7' ">
<input type="button" class="button" value="8" onclick="calculator.display.value += '8' ">
<input type="button" class="button" value="9" onclick="calculator.display.value += '9' ">
<input type="button" class="button mathbutton" value="+" onclick="calculator.display.value += '+' ">

<br>
<input type="button" class="button" value="4" onclick="calculator.display.value += '4' "  >
<input type="button" class="button" value="5" onclick="calculator.display.value += '5' ">
<input type="button" class="button" value="6" onclick="calculator.display.value += '6' ">
<input type="button" class="button" value="-" onclick="calculator.display.value += '-' "  >
<br>

<input type="button" class="button" value="1" onclick="calculator.display.value += '1' " >
<input type="button" class="button" value="2"  onclick="calculator.display.value += '2' ">
<input type="button" class="button" value="3" onclick="calculator.display.value += '3' " >
<input type="button" class="button" value="*" onclick="calculator.display.value += '*' " >
<br>

<input type="button" class="button" value="C"  onclick="calculator.display.value += ' ' " >
<input type="button" class="button" value="0" onclick="calculator.display.value += '0' ">
<input type="button" class="button" value="/"onclick="calculator.display.value += '/' " >
<input type="button" class="button" value="="   onclick="calculator.display.value= eval(calculator.display.value)">

</form>
</div>
</div>

Now your calculator is ready. You can style it however you want. Thanks for reading and Happy Coding!

View Full Code here:

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Calculator </title>
</head>
<body>
<div classname="container">
<div classname="calc">
<form name="calculator">
    <input type="text" class="btn" id="display" placeholder="0" readonly>
<br>

<input type="button" class="button" value="7" onclick="calculator.display.value += '7' ">
<input type="button" class="button" value="8" onclick="calculator.display.value += '8' ">
<input type="button" class="button" value="9" onclick="calculator.display.value += '9' ">
<input type="button" class="button mathbutton" value="+" onclick="calculator.display.value += '+' ">

<br>
<input type="button" class="button" value="4" onclick="calculator.display.value += '4' "  >
<input type="button" class="button" value="5" onclick="calculator.display.value += '5' ">
<input type="button" class="button" value="6" onclick="calculator.display.value += '6' ">
<input type="button" class="button" value="-" onclick="calculator.display.value += '-' "  >
<br>

<input type="button" class="button" value="1" onclick="calculator.display.value += '1' " >
<input type="button" class="button" value="2"  onclick="calculator.display.value += '2' ">
<input type="button" class="button" value="3" onclick="calculator.display.value += '3' " >
<input type="button" class="button" value="*" onclick="calculator.display.value += '*' " >
<br>

<input type="button" class="button" value="C"  onclick="calculator.display.value += ' ' " >
<input type="button" class="button" value="0" onclick="calculator.display.value += '0' ">
<input type="button" class="button" value="/"onclick="calculator.display.value += '/' " >
<input type="button" class="button" value="="   onclick="calculator.display.value= eval(calculator.display.value)">

</form>
</div>
</div>

</body>
</html>

React Hook Form Validation with Yup.

Promise Omoigui — Mon, 10 Jul 2023 08:19:19 +0000

React is a Javascript framework which throughout the years has gotten some buzz. And today we would looking at validating react-hook-forms with yup.

First off, you have to open your terminal and create your react app.

npx-create-react-app .

This is to create a react app in the directory you are.

After creating your react app, you can start installing the dependencies we would be using for this tutorial.

Still in your terminal run

npm install react-hook-form yup

When you do this the dependencies would start installing. After being installed, you can run your react app by simply writing npm start.

On your localhost 3000, your react app should get started.
Now you delete some files and clear it all up to start afresh.

Create a form.js file in your file use rfce(react functional export component)and it will automatically create a React component for you.
In your app.js import the form component and start coding!

Now let's create our form.

return (
<form>
     <input type="text" placeholder="Enter your full name...." />
     <input type="email" placeholder="Enter your email...." />
     <input type="password" placeholder="Enter Password...." />
     <input type="password" placeholder="Confirm password...." />
<input type="submit"/>

Style the form to your taste and then we can start the validation.
Now we import useForm from 'react-hook-form.

useForm is a hook we can use to generate a lot of different functionality related to the form.

After importing the hook we use it like this👇

const {register, handleSubmit } = useForm();

HandleSubmit is a function we would call whenever the form is submitted so let's create the function but in order for it to work we would have to create another function which will be the one we would write the code to handle submission.

const onSubmit = (data) => {
console.log("data")

Now we would pass it to our form. The register function as seen below is used to tell react-hook-form which input you want to be part of the validation.

<form onSubmit={handleSubmit(onSubmit)}>
     <input type="text" placeholder="Enter your full name...." {...register("name")} />
     <input type="email" placeholder="Enter your email...."   {...register("email")}/>
     <input type="password" placeholder="Enter Password...."  {...register("password")}/>
     <input type="password" placeholder="Confirm password...."   {...register("confirmPassword")} />
<input type="submit"/>

Now we start the validation using yup. First off, we import yup.

import * as yup from 'yup'

After importing yup we create a schema

const schema = yup.object().shape({
name: yup.string().required(),
email: yup.string().email().required(),
password: yup.string().min(4).max(20).required,
confirmPassword: yup.string(). oneOf([yup.ref("password"), null]).required(),
});

With this we've specified how we want our input to be and if any of the requirements is left missing the form won't submit. There are other things you can do with yup you can read its documentation here.

And with this, we've come to the end of the tutorial.
Thank you and Happy Coding!

Full code👇

import { useForm } from "react-hook-form";
import * as yup from "yup"
function App() {
const {register, handleSubmit } = useForm();

const schema = yup.object().shape({
name: yup.string().required(),
email: yup.string().email().required(),
password: yup.string().min(4).max(20).required,
confirmPassword: yup.string(). oneOf([yup.ref("password"), null]).required(),
});


const onSubmit = (data) => {
console.log("data")

return (
<form onSubmit={handleSubmit(onSubmit)}>
     <input type="text" placeholder="Enter your full name...." {...register("name")} />
     <input type="email" placeholder="Enter your email...."   {...register("email")}/>
     <input type="password" placeholder="Enter Password...."  {...register("password")}/>
     <input type="password" placeholder="Confirm password...."   {...register("confirmPassword")} />
<input type="submit"/>
);
}

export default App;

Are you ready to bid farewell to Gmail?: Google sets to delete inactive Gmail accounts.

Promise Omoigui — Fri, 02 Jun 2023 09:40:49 +0000

Launched in 2004 under the name Gmail, it has garnered over 1.8 billion users worldwide which single-handedly makes it the world's most popular email system.
Gmail has been used by many to send professional messages, also used as an avenue for sending newsletter and even used by schools to send out information to their students.
So why should you get ready to bid farewell to Gmail?
Recently, Google announced its intention to delete millions of email account.
A lots of accounts are created, used once and then never used again. And dormant emails are easy targets for fraud and spams.
So with the intent of strengthening user's security and freeing up space, Google has decided to delete millions of emails.
Hey don't fret you won't say goodbye to your gmail if it has been in use for the last two years. The targeted accounts for deleting are those which has not been used in the last two years. If you are among this category and you aren't ready to say goodbye to your gmail just yet, then you are in luck. Just follow any of this steps.

Not yet ready to say Goodbye?: What to do.

You can get on your mobile device or system, log in to your gmail and send an email.
You can use your gmail to connect with any application that allows for it. (E.g Youtube, Google and Playstore).
You can also use your gmail to login to your inbox and access your drive.

Also Read: No more auto correct mistake with WhatsApp: WhatsApp to allow editing messages.

Creating a Netflix clone using HTML and CSS

Promise Omoigui — Sun, 26 Mar 2023 18:31:01 +0000

Just from the heading, I know you are pumped. Yes! Today we would be creating the Netflix clone just using HTML and CSS.
This should be the end result.

You ready? Then let’s get started.
First off we start with creating our folder, after creating our folder we open it in our IDE in my case I’m using VSCode.

As you can see in the picture above, I’ve created my index.html and my style.css. You should do same.
Once you have done it, you type in exclamation mark and press enter it will be auto-completed because of the emmet abbreviation. Once you have done that, you should see this

In mine, I’ve already linked my CSS to my html. You should do same. Having done that, let’s start coding.
Before we start, let’s create a folder where we can store our images. To get the images so that you can follow along here’s the github link(https://github.com/Reyghosa/Netflix-Clone.git). You can find the images used there.
First off, we start by targeting our universal class in CSS using asterisk(*). We give it the following styling



  padding: 0;
  margin: 0;
  box-sizing: border-box;

This is how it should look

Having done that, the next thing we need is our background image. You target your body in style.css and use a background with an image as its value.



body{
    background: url('/Images/background.jpg');
}

Now when you open up your page on Liveserver it should look like this

We create a div with the class of Container because this is the div that would contain everything. Inside our container div we create another div with a class of header. This div would contain our Netflix Logo and a button with the value of Login. Something like this

If you have followed along correctly until now then your webpage should look something like this

Now let’s style it. We start off by styling our container div first. Give it a height and width of 100view-port height and 100view-port width respectively. In the body we add a position of absolute while we add a position of relative to our container div and a background-color of rgba(0, 0, 0 0.5). Check the Image below

We are doing this because we are trying to make an overlay on the background to give it a kind of dark view.
If you have done it correctly your site should look like this

As you can see in the snippet above we have a scroll which we don’t want. So to take care of that we simply add this line of code



body::-webkit-scrollbar{
display: none;
}

This line should take care of that. Now we can focus on styling our logo and login button.
We give our header the following styling. Check image below.

Now we move on to style our login button. We add a class of login-btn to our login button then we can target it to style it.

This is how your site should look like now

Now we are done with styling our header it’s time to go to the text.
To do that, create a div with a class of text-container let it be nested inside the div with the class of container but outside the div with the class of header. Create an h1, h4 and h5 tag with the text. Check Image below

As you can see in the image above, I also created another div that contains our Input and get started button. Now let’s get started with styling.
First off, we style our div with the class of text-container because it contains our texts. We give our text-container a color of white so that the text can be visible and also add the following styles. Check Image below

As you can see in mine, I gave it a gap of 1rem this is because I want to separate each header tag from the other.
After styling the text-container div we move on to target each header tag and style them by giving it different font-sizes. Check Image below

As you can see our h1 tag is having a line-height this is to put some line spacing in between the h1 text.
Our Netflix Clone is taking shape already. Hope your text section looks like this too.

After that we create a div with the class of form this div is not placed inside the text-container div but outside it. Take note the div should be contained in the container div just like this. Check Image below

As you can see, an input tag has been created with a type of email and a placeholder. Any value you give the placeholder is what would appear inside the input box. Inside that div a get started button was also created and outside the div a login button was created. You can go back and check very well so as not to get confused or mix it up. That’s all for the HTML and as you can see we used not more than 30 lines or at least I did.
Now let’s get straight to styling it. Don’t worry we are almost done and if you have made it this far then kudos to you. Let’s get to styling. First we would style the div with the class of form that contains the input and the get started button. Check Image below

It’s just a simple styling but notice we gave it a margin-left. Right now, it might not look like much but later on you would see why we did so. After styling our form, let’s move to our input.

Let me explain what the input:focus is for. If you notice without the input:focus if you enter the input field there is a black border around it and we don’t want that so that’s why we use the input:focus and give it an outline of none.
Just few steps more techies and our Netflix clone would be created. Let’s style our buttons.
We would start with our getstarted-btn and we would give it the following styles. Check Image below

Now when you open it on your Liveserver. It should like this. Check Image below

Now without the margin-left in our form container our input field and get started button would not have been positioned well to how we really want it to be.
Now to the last part.
Styling our downlogin-btn. It’s very easy all you need to do is to copy and paste the login button styles. We should have named it same classes but we didn’t because we need to add two extra lines of code to our downlogin-btn to make it look good and position it to where it ought to be Just add these two lines of code.



 margin-left: 850px;
 margin-top: 20px;

And with that we have created our Netflix clone which should come out looking like this.

Well-done we just created a Netflix-clone using HTML and CSS.
You can follow me for more insights on Front-end development. If you have any questions You can ask in the comment section and I will be sure to leave a reply. Don’t forget to leave a like If you found this useful you can also share for others to benefit. Do make sure you follow me for more.