mirror of
https://github.com/atapas/html-tips-tricks.git
synced 2024-11-16 00:38:26 +01:00
added drag and drop feature
This commit is contained in:
Tejesh Jain
parent
f478ca2c9d
commit
553b124551
11 changed files with 653 additions and 0 deletions
61
drag-drop/assets/drag.css
Normal file
61
drag-drop/assets/drag.css
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
body {
|
||||
background-image: url(https://source.unsplash.com/1600x1366/?landscape);
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#div1,
|
||||
#div2 {
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
border: 1px solid red;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
margin-top: 10vh;
|
||||
width: 70vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.dragDiv {
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
}
|
||||
|
||||
.dragImage {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.verdict{
|
||||
width: 70vw;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 auto 0 auto;
|
||||
}
|
||||
|
||||
.card{
|
||||
background: rgba(0, 0, 0, 0.685);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
max-width: 300px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px){
|
||||
body{
|
||||
font-size: 120%;
|
||||
}
|
||||
.card{
|
||||
border-radius: 15px;
|
||||
max-width: 450px;
|
||||
|
||||
}
|
||||
}
|
||||
25
drag-drop/assets/dragAndDrop.js
Normal file
25
drag-drop/assets/dragAndDrop.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
function allowDrop(ev) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
function drag(ev) {
|
||||
ev.dataTransfer.setData("text", ev.target.id);
|
||||
}
|
||||
function drop(ev) {
|
||||
ev.preventDefault();
|
||||
var data = ev.dataTransfer.getData("text");
|
||||
ev.target.appendChild(document.getElementById(data));
|
||||
console.log(document.getElementById(data).getAttribute("id"));
|
||||
if(document.getElementById(data).getAttribute("id") == "drag1"){
|
||||
document.querySelector(".verdict").innerHTML = "The intense summer heat not only affects our body, but the skin too. These problems are further compounded by dehydration, leading to electrolyte imbalance due to excessive sweating.It’s imperative to be aware of the dos and don’ts to sidestep all summer problems. The best way to avoid dehydration is by drinking plenty of water and other liquids, such as tender coconut water and lassi (buttermilk).The other problem is excessive sweating. This often leads to prickly heat, which is marked by tiny blisters. In such cases, homeopathic remedies can be particularly helpful, To relieve prickly heat rash, take 4-5 pellets of Natrum Sulphuricum 6X, twice daily. To tackle fungal infections, so commonplace in summer, take the homeopathic Chrysarobic Acid 6C, 4-5 pills, twice daily. The other tips we need to remember are:Avoid fried food, reduce tea and coffee intake, don’t overeat, avoid cigarettes and alcohol skip tight-fitting clothes, maintain good hygiene, avoid sun exposure";
|
||||
}
|
||||
else if(document.getElementById(data).getAttribute("id") == "drag2"){
|
||||
document.querySelector(".verdict").innerHTML = "Take a look at these tips that might help you stay healthy this rainy season-1. Avoid street foodThe longer food is exposed to the open air, the more likely it is that it will become a home for them. As a result, every time you consume your favourite junk food, you're increasing your chances of contracting an illness.2. Get your clothes ironed.Moulds thrive in moist environments. Since, there’s seldom any sunlight to warm your clothes, getting them ironed is the next best thing.3. Do not store stagnant waterMosquito breeding is one of the worst aspects of the monsoon season. You may simply find your way to a mosquito-free home by taking a few steps. Make sure your home doesn't have any open water storage. Make sure they're in covered pots at all times. In the same way, make sure your drains aren't clogged and there's no standing water in your neighbourhood. Because mosquitos are bred in stagnant water, eliminating sources of stagnant water will be quite beneficial.4. Get enough sleepGetting 7-8 hours of sleep boosts immunity and helps to prevent flu and colds, which are common during the monsoon season.5. Care for your fruits and vegetablesBecause bacteria reside on the skins of fruits and vegetables, it is critical to properly scrub your fruits and vegetables.";
|
||||
}
|
||||
else if(document.getElementById(data).getAttribute("id") == "drag3"){
|
||||
document.querySelector(".verdict").innerHTML = "Winter is the season of warm revelry and family get-togethers.However, this is also the season when taking due care of your health is very important. Here are certain important parameters that will enable you to be secure from all sorts of disorders this winter:Proper amount of sleep: An average amount of sleep is 6-8 hours in 24hours to make the body regain its composure and vitality. Healthy Diet: In winter season, there are many types of fresh green vegetables, fruits available in the market. So maintain your health with fresh and clean diet.Regular Exercise: Exercise is the most important for health. Regular exercise makes your body fit, supple and helps you stay always active and have a fresh mind. Ensure personal hygiene: In this season cold and flu can easily affect your body. So protect your body in this season carefully with following personal hygiene methods.Drinking Water: winter winds are very dry which makes body lose its moisture. So, it is important to remain hydrated and experts suggest that you must consume at least 8 glass of water per day. It makes your body healthy.";
|
||||
|
||||
}
|
||||
else if(document.getElementById(data).getAttribute("id") == "drag4"){
|
||||
document.querySelector(".verdict").innerHTML = "Get the flu and pneumonia vaccine to keep your lungs healthy and disease-free during winter.Limit outdoor exercises, if you have asthma, COPD, or bronchitis or in case, there is smog and air pollution. You can exercise at home, and do activities like walking, aerobics, zumba, weight training, ladder exercises, and yoga. Indoor swimming can also do the trick here. Try to incorporate some breathing exercises in order to enhance lung capacity. You can take the help of an expert who will help you with correct breathing exercises.Wear a mask or cover your face when you step out. Moreover, try to avoid venturing out during smog or when there is too much air pollution.Keep your home clean of dust, molds, and allergens. Wash the bedding, carpets, rugs and disinfect the furniture. Vacuum clean the home on a regular basis.Use an air purifier at home to breathe freely. Or you can even opt for an air humidifier. Again, consult the expert before opting for them.";
|
||||
}
|
||||
}
|
||||
BIN
drag-drop/assets/images/favicon.png
Normal file
BIN
drag-drop/assets/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
BIN
drag-drop/assets/images/rainy.jpg
Normal file
BIN
drag-drop/assets/images/rainy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
drag-drop/assets/images/smog.jpg
Normal file
BIN
drag-drop/assets/images/smog.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
drag-drop/assets/images/sunny.jpg
Normal file
BIN
drag-drop/assets/images/sunny.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
drag-drop/assets/images/winter.jpg
Normal file
BIN
drag-drop/assets/images/winter.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
54
drag-drop/assets/index.js
Normal file
54
drag-drop/assets/index.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
// let weather = {
|
||||
// "apiKey": "9969e5ceb5207490f3ec4ebb9eb3062f",
|
||||
// fetchWeather: function (city) {
|
||||
// fetch(
|
||||
// "https://api.openweathermap.org/data/2.5/weather?q=" +
|
||||
// city +
|
||||
// "&units=metric&appid=" +
|
||||
// this.apiKey
|
||||
// ).then((response) => response.json())
|
||||
// .then((data) => this.displayWeather(data))
|
||||
// },
|
||||
// displayWeather: function (data) {
|
||||
// const {
|
||||
// name
|
||||
// } = (data);
|
||||
// const {
|
||||
// icon,
|
||||
// description
|
||||
// } = data.weather[0];
|
||||
// const {
|
||||
// temp,
|
||||
// humidity
|
||||
// } = data.main;
|
||||
// const {
|
||||
// speed
|
||||
// } = data.wind;
|
||||
// console.log(name, icon, description, temp, humidity, speed);
|
||||
// document.querySelector(".city").innerHTML = "Weather in " + name;
|
||||
// document.querySelector(".icon").src =
|
||||
// "http://openweathermap.org/img/wn/" + icon + ".png";
|
||||
// document.querySelector(".description").innerHTML = description;
|
||||
// document.querySelector(".temp").innerHTML = parseInt(temp) + "°C";
|
||||
// document.querySelector(".humidity").innerHTML = "Humidity: " + humidity + "%";
|
||||
// document.querySelector(".wind").innerHTML = "Wind speed: " + speed + " km/h";
|
||||
// document.querySelector(".weather").classList.remove("loading");
|
||||
|
||||
// },
|
||||
// search: function() {
|
||||
// this.fetchWeather(document.querySelector(".search-bar").value);
|
||||
// }
|
||||
// };
|
||||
|
||||
// document.querySelector(".search button").addEventListener("click", function() {
|
||||
// weather.search();
|
||||
// });
|
||||
|
||||
// document.querySelector(".search-bar").addEventListener("keyup", function(event) {
|
||||
// if (event.key == "Enter") {
|
||||
// weather.search();
|
||||
// }
|
||||
// });
|
||||
|
||||
// weather.fetchWeather("Indore");
|
||||
|
||||
458
drag-drop/assets/style.css
Normal file
458
drag-drop/assets/style.css
Normal file
|
|
@ -0,0 +1,458 @@
|
|||
body{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
background-image: url("https://source.unsplash.com/1600x1366/?landscape");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
||||
.mobile-menu {
|
||||
display:block;
|
||||
line-height: 1.6em;
|
||||
font-weight: 400;
|
||||
width:100%;
|
||||
text-align:center;
|
||||
position: relative;
|
||||
margin-top:20px;
|
||||
}
|
||||
/*Strip the ul of padding and list styling*/
|
||||
.mobile-menu ul {
|
||||
list-style-type:none;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
padding-left:0;
|
||||
text-align:center;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/*Create a horizontal list with spacing*/
|
||||
.mobile-menu li {
|
||||
display:inline-block;
|
||||
/*float: left;
|
||||
margin-right: 1px;*/
|
||||
}
|
||||
|
||||
/*Style for menu links*/
|
||||
.mobile-menu li a {
|
||||
display:block;
|
||||
text-align: center;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #fff;
|
||||
text-transform:uppercase;
|
||||
text-decoration: none;
|
||||
margin-left:0px;
|
||||
-webkit-transition: all 0.4s ease 0s;
|
||||
-moz-transition: all 0.4s ease 0s;
|
||||
-ms-transition: all 0.4s ease 0s;
|
||||
-o-transition: all 0.4s ease 0s;
|
||||
transition: all 0.4s ease 0s;
|
||||
}
|
||||
|
||||
/*Style for dropdown links*/
|
||||
.mobile-menu li:hover ul a {
|
||||
background: #f3f3f3;
|
||||
color: #2f3036;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
|
||||
/*Hide dropdown links until they are needed*/
|
||||
.mobile-menu li ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*Make dropdown links vertical*/
|
||||
.mobile-menu li ul li {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
/*Prevent text wrapping*/
|
||||
.mobile-menu li ul li a {
|
||||
width: auto;
|
||||
min-width: 100px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
|
||||
/*Style 'show menu' label button and hide it by default*/
|
||||
.mobile-menu .show-menu {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 10px 15px;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
background-color: #0000009d;
|
||||
}
|
||||
|
||||
.mobile-menu .show-menu span{
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
/*Hide checkbox*/
|
||||
.mobile-menu input[type=checkbox]{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*Show menu when invisible checkbox is checked*/
|
||||
.mobile-menu input[type=checkbox]:checked ~ #menu{
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*Responsive Styles*/
|
||||
|
||||
@media screen and (max-width : 800px){
|
||||
.mobile-menu .lines {
|
||||
border-bottom: 15px double #f8f8f8;
|
||||
border-top: 5px solid #f8f8f8;
|
||||
content:"";
|
||||
height: 5px;
|
||||
width:20px;
|
||||
padding-right:15px;
|
||||
float: right;
|
||||
}
|
||||
/*Make dropdown links appear inline*/
|
||||
.mobile-menu ul {
|
||||
position: static;
|
||||
display: none;
|
||||
}
|
||||
/*Create vertical spacing*/
|
||||
.mobile-menu li {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
/*Make all menu links full width*/
|
||||
.mobile-menu ul li, .mobile-menu li a {
|
||||
width: 100%;
|
||||
}
|
||||
/*Display 'show menu' link*/
|
||||
.mobile-menu .show-menu {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.nav_menu {
|
||||
position: fixed;
|
||||
top: 3rem;
|
||||
right: -200%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 2rem;
|
||||
box-shadow: -10px 0px 30px -15px rgba(2, 12, 27, 0.7);
|
||||
transition: 0.5s;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.nav_item {
|
||||
margin-bottom: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav_link {
|
||||
cursor: pointer;
|
||||
color: rgb(255, 255, 255);
|
||||
position: relative;
|
||||
padding: 10px 16px;
|
||||
background: rgba(0, 0, 0, 0.685);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
transition: all 1s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav_link:after, .nav_link:before {
|
||||
content: " ";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
border: 0px solid rgb(255, 255, 255);
|
||||
transition: all 1s;
|
||||
}
|
||||
.nav_link:after {
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
border-top: 2px solid rgb(255, 255, 255);
|
||||
border-left: 2px solid rgb(255, 255, 255);
|
||||
}
|
||||
.nav_link:before {
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
border-bottom: 2px solid rgb(255, 255, 255);
|
||||
border-right: 2px solid rgb(255, 255, 255);
|
||||
}
|
||||
.nav_link:hover {
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
.nav_link:hover:before, .nav_link:hover:after {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Media queries */
|
||||
@media screen and (min-width: 768px) {
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.nav {
|
||||
height: 4rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.nav_list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.nav_item {
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.nav_menu {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.nav_item {
|
||||
padding-right: 1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(0, 0, 0, 0.685);
|
||||
color: white;
|
||||
padding: 26px;
|
||||
border-radius: 15px;
|
||||
max-width: 250px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.card:hover{
|
||||
box-shadow: 10px 10px 10px rgba(63, 63, 63, 0.712);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button{
|
||||
margin: 8px;
|
||||
border-radius:50%;
|
||||
border: none;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
outline: none;
|
||||
background: #7c7c7c2b;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
button:hover{
|
||||
background: #7c7c7c6b;
|
||||
}
|
||||
|
||||
.search-bar{
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 7px 8px;
|
||||
border-radius: 24px;
|
||||
background: #7c7c7c2b;
|
||||
color: white;
|
||||
font-family: inherit;
|
||||
font-size: 105%;
|
||||
width: calc(100% - 70px);
|
||||
|
||||
}
|
||||
|
||||
h1.temp {
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
img.icon{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
div.humidity{
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.description {
|
||||
text-transform: capitalize;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.flex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.weather.loading{
|
||||
visibility: hidden;
|
||||
max-height: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.weather.loading::after{
|
||||
visibility: visible;
|
||||
content: "Loading";
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px){
|
||||
body{
|
||||
font-size: 120%;
|
||||
}
|
||||
.card{
|
||||
border-radius: 15px;
|
||||
max-width: 420px;
|
||||
|
||||
}
|
||||
button{
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.container1 {
|
||||
flex: 0 1 700px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.screen-body {
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.767);
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.screen-body:hover{
|
||||
box-shadow: 10px 10px 15px rgba(0, 63, 63, 0.603);
|
||||
}
|
||||
|
||||
.screen-body-item {
|
||||
flex: 1;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
.screen-body-item.left {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-contact {
|
||||
margin-top: auto;
|
||||
font-size: 8px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.app-form-group {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.app-form-group.message {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.app-form-group.buttons {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-form-control {
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid #666;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
outline: none;
|
||||
transition: border-color .2s;
|
||||
}
|
||||
|
||||
.app-form-control::placeholder {
|
||||
color: rgb(119, 119, 119);
|
||||
}
|
||||
|
||||
.app-form-control:focus {
|
||||
border-bottom-color: #ddd;
|
||||
}
|
||||
|
||||
.app-form-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
font-weight: 900;
|
||||
padding: 10px 15px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.app-form-button:hover {
|
||||
color: #0300b4;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
.screen-body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.screen-body-item.left {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.app-title span {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.app-title:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.screen-body {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.screen-body-item {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
51
drag-drop/index.html
Normal file
51
drag-drop/index.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!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">
|
||||
<title>Weather Tips Website</title>
|
||||
<link href="ssets/images/favicon.png" rel="icon">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<link href="assets/drag.css" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
|
||||
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
|
||||
<script src="https://kit.fontawesome.com/c1e61fbc1e.js" crossorigin="anonymous"></script>
|
||||
<script src="assets/index.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="card">
|
||||
<p align="center" >Drag any weather condition image here 👇</p>
|
||||
</div>
|
||||
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
|
||||
<div class="container">
|
||||
<div class="dragDiv" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
|
||||
<img class="dragImage sunny"
|
||||
src="assets/images/sunny.jpg"
|
||||
draggable="true" ondragstart="drag(event)" id="drag1">
|
||||
</div>
|
||||
<div class="dragDiv" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
|
||||
<img class="dragImage rainy"
|
||||
src="assets/images/rainy.jpg"
|
||||
draggable="true" ondragstart="drag(event)" id="drag2">
|
||||
</div>
|
||||
<div class="dragDiv" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
|
||||
<img class="dragImage winter"
|
||||
src="assets/images/winter.jpg" draggable="true"
|
||||
ondragstart="drag(event)" id="drag3">
|
||||
</div>
|
||||
<div class="dragDiv" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
|
||||
<img class="dragImage smog"
|
||||
src="assets/images/smog.jpg"
|
||||
draggable="true" ondragstart="drag(event)" id="drag4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="max-width: 950px;">
|
||||
<p class="verdict"></p>
|
||||
</div>
|
||||
<script src="assets/dragAndDrop.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -95,6 +95,10 @@
|
|||
<a href='./iframe/index.html'>
|
||||
Iframe</a> - Embed YouTube Videos
|
||||
</li>
|
||||
<li>
|
||||
<a href='./drag-drop/index.html'>
|
||||
Drag and Drop</a> - JavaScript Feature
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue