3 HTML, CSS, JavaScript project in 1 hours
In this post we are going to create three simple project using HTML, CSS and JavaScript in 1 hour.
These projects are inspired by the awesome course from Brad Traversy. You can find it here.
We will first do a cool Animation scroll project. So, first create a folder 1-Animation-Scroll and a file index.html in it. Add the below content in it. Here, we have a lot of div with class of box. We have also included the css and the js file in it.
Next, we will add the styles in style.css file. Here, we are using a google font. After that we are centrally aligning everything in the body.
Next for each of the box, we are giving a width, height and centralling aligning the text.
Now, our website looks like below.
Next, we will add a transform to the box and make it all dissappear to 400% to the left for odd boxes. We are making the even boxes to disappear to -400%.
We have a show class which will fix these box.
Next in the main.js file, we are first selecting all the boxes. Then we have added an event listener on the scroll, which will call a function called boxesCheck().
Inside the function we are first getting the total height of the website by using window.innerHeight. After that we are getting the top of each box using the getBoundingClientRect property.
Now, we are checking if boxTop is less then bottomTrigger and then adding the show class. Or else we are removing it.
Now, when we scroll box keep adding from left and right.
Next, we will make a Landing Split page. So, first create a folder with name 2-Landing-Split and add a file index.html in it. We are also adding two images in it.
Here, we have amain div with class container. Also, two div for left and right, which contains a text and button.
Then in the style.css, we are first using a google font.After that we have made the container relative and box as absolute, with width of 50%.
Next, we will add the images in the left and the right box. Here, we are also adding an overlay with different color in both boxes.
Now, our web-page looks like below.
Next, we will add the styling for the h1 and the button.
After that we will also add the hover effect for the buttons.
Now, our text and button are aligned properly and also hovering effect showing correctly.
Next, we will add some classes which will make the width 75% and 25% on hover. We are also adding some transition for these changes.
Now, we will add a simple JavaScript logic where we are adding event listener for left, right. We will add the left-hover and the right-hover class to the container on entering the left and the right box, respectively.
Now, our animation is showing properly.
The last project which we will make is a form wave project. So, create a new folder 3-Form-wave and create a file index.html. Add the below content in it.
Here, we have a div of class container. Inside it we have a simple form with email, passowrd and button fields.
Next in the style.css file we will put the initial style of body, container and the h1.
Now, our form look likes below.
Next, we will add more styles for the form-control, input and the input focus.
Now, our form will look like below.
Lastly, we will style the button.
And our form will look like below.
Now, we will put the logic in main.js file. Here, we are taking each label, which is Email and Password.
After selecting both we are getting a nodelist, which we are looping through forEach.
Here, we are wrapping each letter in a span with different transition delay.
We also have aconsole log in the main.js and it is clear that we are getting two big strings with each letter in a span.
We can confirm the same in the DOM also.
Lastly, we will add the final css. Here, we are first making the label as absolute and moving on top of input field.
After that in the focus, we are changing it color and also moving it along the y axis.
We also have a smooth transition for the span.
We are going to see this nice animation when we click on any input field.
This completes our three projects. You can find the code for the same here.
