html5_dragdrop/index.html
<!DOCTYPEhtml>
<htmllang='en'>
<head>
<metacharset="utf-8">
<title>AwesomeCards</title>
<linkrel="stylesheet"href="stylesheets/style.css">
</head>
<body>
<h1>QuickPlanner</h1>
<inputtype="button"id="addcard"value="Addcard"><divid="cards">
</div></body>
</html>Next we’ll create the CSS for this application in stylesheets/style.css. We’ll create
each card with JavaScript when we click on the Add Card button, and the
markup for the card will look like this:<divclass="card"draggable="true"id="card1">
<divclass="editor"contenteditable="true"></div>
</div>Each card is a <div> inside of a <div>. The inner <div> is where the user will
be able to type the note, so we’ll include styling to add some space between
the two elements.html5_dragdrop/stylesheets/style.css
.card{
background-color:#ffc;
border:1px solid#000;
float:left;
height:200px;
margin:10px;
width:300px;
}.editor{
border:none;
margin:5%;
width:90%;
height:80%;
}.editor:focus{background-color:#ffe;}
.card:active{border:3px solid#333; }Chapter 10. Creating Interactive Web Applications • 232
Download from Wow! eBook <www.wowebook.com> report erratum • discuss