Building an idea using HTML CSS JS - Day 7

Building an idea using HTML CSS JS - Day 7

dheerajy's photo
dheerajy
·

1 min read

Table of contents

Today's day 7 Goal is to add dropdown list to take input from user, improvements to code in my project backupcal.

HTML

How to write multiple div?

  1. Creating multiple div shortcut.
Div*6

CSS

How to make an arrow in CSS?

  1. Write the following code.
.classname {
    content: "";
    z-index: 1000;
    border: 2px solid rgb(89, 85, 85);
    border-top: 2px solid #f7d5e1;
    border-right: 2px solid #f7d5e1;
    backdrop-filter: blur(25px) saturate(180%);
    transform: rotate(-225deg);
}

JavaScript

how to rotate elements upon clicking?

  1. Write the following code.
document.querySelector(".arr").style.transform= "rotate(-225deg)";

how to pass one function result to another function?

  1. In JavaScript and Html, I used the result of in function result given to an Id.
var res = document.querySelector('#idname').value;

My Code:

day 7 backup.png

day 7 backup drop.png

Conclusion

  1. Creating multiple div shortcut.

  2. Arrow shape in CSS.

  3. Rotate elements upon clicking in JavaScript.

  4. Getting one function result to another function.

Author: Dheeraj.y

HTML5CSS3JavaScriptidea100DaysOfCode