A Pen by Tobi Weinstock

Developer
Tobi Weinstock
Size
3,159 Kb
Views
30,360
  1. A Pen by Tobi Weinstock Previews
  2. A Pen by Tobi Weinstock HTML Codes
  3. A Pen by Tobi Weinstock CSS Codes
  4. A Pen by Tobi Weinstock JS Codes

How do I make an a pen by tobi weinstock?

What is a a pen by tobi weinstock? How do you make a a pen by tobi weinstock? This script and codes were developed by Tobi Weinstock on 02 September 2022, Friday.

A Pen by Tobi Weinstock Previews
IQ Test

A Pen by Tobi Weinstock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Tobi Weinstock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg class="hide"> <defs> <g id="hex"> <polygon points="100,50 75,93.33 25,93.33 0,50 25,6.66 75,6.666"></polygon> </g> </defs> </svg>
<h1>Réponse: <span id="result-text"></span></h1>
<section class="drop-boxes"> <div class="letter-container"> <svg gender="female" height="100" width="100"> <use xlink:href="#hex"></use> </svg> <span class="letter">F</span> </div> <div class="letter-container"> <svg gender="male" height="100" width="100"> <use xlink:href="#hex"></use> </svg> <span class="letter">M</span> </div>
</section>
<div id="drag-item" draggable="true" gender="female">Maison</div> <script src="js/index.js"></script>
</body>
</html>

A Pen by Tobi Weinstock - Script Codes CSS Codes

body { font-family: didot;
}
.drop-boxes { display: flex; justify-content: center;
}
.hide { display: none;
}
svg { fill: none; margin-left: 40px; position: relative;
}
svg.over { stroke-dasharray: 5;
}
svg[gender="female"] { stroke: #A6DEE1;
}
svg[gender="female"] + span { color: #A6DEE1; left: 52%;
}
svg[gender="male"] { stroke: #E51B37;
}
svg[gender="male"] + span { color: #E51B37; left: 45%;
}
.letter-container { position: relative; font-size: 60px; line-height: 60px;
}
.letter { position: absolute; bottom: 25%; z-index: -1;
}
#drag-item { text-align: center;
}
h1, #result-text { height: 50px; text-transform: uppercase; font-weight: lighter; text-align: center; line-height: 50px;
}

A Pen by Tobi Weinstock - Script Codes JS Codes

var dropZone = Array.prototype.slice.call(document.querySelectorAll('.drop-boxes svg'));
var dragItem = document.getElementById('drag-item');
var elementDragged = null;
var resultText = document.getElementById('result-text');
dragItem.addEventListener('dragstart', function(e){ e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text', this.getAttribute("gender"))
});
// dragItem.addEventListener('dragstart', function(e){
// elementsDragged = null;
// });
dropZone.forEach(dropListener);
function dropListener(value, index) { value.addEventListener('dragover', function(e){ console.log('ovaaa') if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = 'move'; return false; }); value.addEventListener('dragenter', function(e){ console.log(this.className) this.setAttribute("class", "over"); }); value.addEventListener('dragleave', function(e){ this.setAttribute("class", ""); }); value.addEventListener('drop', function(e){ if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); var dropGender = this.getAttribute("gender") var dragGender = e.dataTransfer.getData('text'); if (dropGender === dragGender) resultText.innerHTML = 'correct !'; else resultText.innerHTML = 'non!'; });
};
var quizWords = { word1: {word:'question', gender:'feminin'}, word2: {word:'problème', gender:'masculin'}, word3: {word:'world', gender:'masculin'}, word4: {word:'chocolat', gender:'masculin'}, word5: {word:'baguette', gender:'feminin'}
};
A Pen by Tobi Weinstock - Script Codes
A Pen by Tobi Weinstock - Script Codes
Home Page Home
Developer Tobi Weinstock
Username tvweinstock
Uploaded September 02, 2022
Rating 3
Size 3,159 Kb
Views 30,360
Do you need developer help for A Pen by Tobi Weinstock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tobi Weinstock (tvweinstock) Script Codes
Name
World Clock v2
Paparazzi Drone
Love for Paris
SVG Picnic Pattern
Emoji Ajax Type Ahead
React Image Switcher
Personal SVG Logo
SVG Animated Border
Paris Weather Widget
React Tabs
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!