Eclypsed/CS343-Labs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
Eclypsed
2025-09-10 14:42:57 -04:00
commit 1d12903e4e
65 changed files with 3587 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
Lab 7/card-creator.html Executable file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Card Creator</title>
<link rel="stylesheet" href="cards.css">
<link rel="stylesheet" href="modal.css">
</head>
<body>
<aside class="modal fade" tabindex="-1" role="dialog" id="user-modal">
<div class="modal-dialog">
<form class="modal-content card-form" id="user-form">
<header class="modal-header">
<h3>Add/Edit User</h3>
</header>
<section class="modal-body">
<input name="guest-full" type="text" />
<input name="guest-short" type="text" />
<div class="invalid-feedback">Short name must be unique</div>
<input name="old-short" type="hidden" />
</section>
<footer class="modal-footer">
<button type="submit">Submit</button>
</footer>
</form>
</div>
</aside>
<nav>
<h1>Guest List</h1>
<ul id="guest-list" class="card-list">
<li id="alice">Alice <button class="btn-edit-guest" data-user="alice">Edit</button></li>
<li id="bob">Bob <button class="btn-edit-guest" data-user="bob">Edit</button></li>
<li id="charlie">Charlie <button class="btn-edit-guest" data-user="charlie">Edit</button></li>
</ul>
<button type="button" id="btn-add-guest">Add Guest</button>
</nav>
<main class="left-right pt-4">
<section id="form-area">
<h2>Invitation Details</h2>
<form class="card-form" id="preview-form">
<div class="form-group">
<label for="host">Host</label>
<input name="host" type="text" placeholder="Message sender">
</div>
<div class="form-group">
<label for="title">Title</label>
<input name="title" type="text" placeholder="Message title">
</div>
<div class="form-group">
<label for="date">Party Date</label>
<input name="date" type="date">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" placeholder="Message content" rows="8"></textarea>
</div>
<div class="form-buttons">
<button type="reset" id="reset-btn">Clear Form</button>
</div>
</form>
</section>
<section id="preview-area">
<div class="card-display">
<div class="card-page page-one">
<div class="title"><span id="preview-title">TITLE</span></div>
<div class="subtitle"><span id="preview-date">DATE</span></div>
</div>
<div class="card-page page-two">
<div class="to">Dear <span id="preview-guest">GUEST</span>,</div>
<div class="message"><span id="preview-message">YOUR MESSAGE HERE</span></div>
<div class="from">Sincerely, <span id="preview-host">HOST</span></div>
</div>
</div>
</section>
</main>
<script src="createcard.js"></script>
</body>
</html>